1
play

1 Web Application Development 2 3 Web Application Development - PowerPoint PPT Presentation

Sep 24, 2023 •442 likes •1.73k views

1 Web Application Development 2 3 Web Application Development HTML HTML Comment Tags Comment tags are used to insert <!-- Write your comments here --> comments in the HTML source code. You can add comments to your HTML source

  1. External CSS <!DOCTYPE html> ▪ An external style sheet is used to define <html> the style for many HTML pages. <head> <link rel="stylesheet" href="styles.css"> ▪ With an external style sheet, you can </head> change the look of an entire web site, <body> by changing one file! ▪ To use an external style sheet, add a <h1>This is a heading</h1> link to it in the <head> section of the <p>This is a paragraph.</p> HTML page: </body> </html> Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_external 29

  2. External CSS body { ▪ An external style sheet can be written background-color: powderblue; in any text editor. The file must not } contain any HTML code, and must be h1 { saved with a .css extension. color: blue; } ▪ Here is how the "styles.css" looks: p { color: red; } 30

  3. <!DOCTYPE html> <html> <head> <style> CSS Fonts h1 { color: blue; ▪ The CSS color property defines the text font-family: verdana; font-size: 300%; color to be used. } ▪ The CSS font-family property defines p { the font to be used. color: red; font-family: courier; ▪ The CSS font-size property defines the font-size: 160%; text size to be used. } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_fonts 31

  4. CSS Border p { ▪ The CSS border property defines a border: 1px solid powderblue; border around an HTML element: } Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_borders 32

  5. CSS Padding p { ▪ The CSS padding property defines a border: 1px solid powderblue; padding (space) between the text and padding: 30px; the border: } Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_padding 33

  6. CSS Margin p { border: 1px solid powderblue; ▪ The CSS margin property defines a margin: 50px; margin (space) outside the border: } Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_margin 34

  7. The id Attribute <p id="p01">I am different</p> ▪ To define a specific style for one then define a style for the element with the special element, add an id attribute to specific id: the element ▪ Note : The id of an element should be #p01 { unique within a page, so the id selector color: blue; is used to select one unique element! } Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_id 35

  8. The class Attribute <p class="error">I am different</p> ▪ To define a style for special types of then define a style for the elements with the elements, add a class attribute to the specific class: element: p.error { color: red; } Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_class 36

  9. External References <link rel="stylesheet" ▪ External style sheets can be referenced href="https://www.w3schools.com/html/styles.css with a full URL or with a path relative to "> the current web page. ▪ This example uses a full URL to link to a style sheet: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_external_url 37

  10. External References <link rel="stylesheet" href="/html/styles.css"> ▪ This example links to a style sheet located in the html folder on the current web site: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_external_relative 38

  11. External References <link rel="stylesheet" href="styles.css"> ▪ This example links to a style sheet located in the same folder as the current page: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_external 39

  12. Chapter Summary ▪ Use the HTML style attribute for inline styling ▪ Use the HTML <style> element to define internal CSS ▪ Use the HTML <link> element to refer to an external CSS file ▪ Use the HTML <head> element to store <style> and <link> elements ▪ Use the CSS color property for text colors ▪ Use the CSS font-family property for text fonts ▪ Use the CSS font-size property for text sizes ▪ Use the CSS border property for borders ▪ Use the CSS padding property for space inside the border ▪ Use the CSS margin property for space outside the border 40

  13. Test Yourself with Exercises! ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_css1 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_css2 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_css3 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_css4 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_css5 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_css6 41

  14. HTML Style Tags Tag Description <style> Defines style information for an HTML document <link> Defines a link between a document and an external resource 42

  15. 43 Web Application Development HTML

  16. HTML Links – Hyperlinks ▪ Links are found in nearly all web pages. Links allow users to click their way from page to page. ▪ HTML links are hyperlinks. ▪ You can click on a link and jump to another document. ▪ When you move the mouse over a link, the mouse arrow will turn into a little hand. ▪ Note: A link does not have to be text. It can be an image or any other HTML element. 44

  17. HTML Links – Syntax ▪ In HTML, links are defined with the <a> <a href="https://www.w3schools.com/html/">Visit tag: our HTML tutorial</a> ▪ <a href=" url "> link text </a> ▪ The href attribute specifies the destination address (https://www.w3schools.com/html/) of the link. ▪ The link text is the visible part (Visit our HTML tutorial). ▪ Clicking on the link text will send you to the specified address. ▪ Note: Without a forward slash at the end of subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the end of the address, and then create a new request. Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_w3schools 45

  18. Local Links ▪ The example above used an absolute <a href="html_images.asp">HTML Images</a> URL (a full web address). ▪ A local link (link to the same web site) is specified with a relative URL (without http://www....). Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links 46

  19. <style> a:link { color: green; HTML Link Colors background-color: transparent; text-decoration: none; } ▪ By default, a link will appear like this (in all browsers): a:visited { color: pink; ▪ An unvisited link is underlined and blue background-color: transparent; ▪ A visited link is underlined and purple text-decoration: none; } ▪ An active link is underlined and red a:hover { ▪ You can change the default colors, by color: red; using CSS: background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style> Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_colors 47

  20. HTML Links – The target Attribute ▪ The target attribute specifies where to open the linked <a href="https://www.w3schools.com/" document. target="_blank">Visit W3Schools!</a> ▪ The target attribute can have one of the following values: ▪ _blank - Opens the linked document in a new window or tab ▪ _self - Opens the linked document in the same window/tab as it was clicked (this is default) ▪ _parent - Opens the linked document in the parent frame ▪ _top - Opens the linked document in the full body of the window ▪ framename - Opens the linked document in a named frame ▪ This example will open the linked document in a new browser window/tab: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_target 48

  21. HTML Links – The target Attribute ▪ Tip: If your webpage is locked in a <a href="https://www.w3schools.com/html/" frame, you can use target="_top" to target="_top">HTML5 tutorial!</a> break out of the frame: Try it yourself: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_target 49

  22. HTML Links – Image as Link ▪ It is common to use images as links: <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" ▪ Note : border:0; is added to prevent IE9 style="width:42px;height:42px;border:0;"> (and earlier) from displaying a border </a> around the image (when the image is a link). Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_image 50

  23. Link Titles ▪ The title attribute specifies extra <a href="https://www.w3schools.com/html/" information about an element. The title="Go to W3Schools HTML section">Visit our information is most often shown as a HTML Tutorial</a> tooltip text when the mouse moves over the element. Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_title 51

  24. HTML Links – Create a Bookmark ▪ HTML bookmarks are used to allow First, create a bookmark with the id attribute: readers to jump to specific parts of a Web page. <h2 id="C4">Chapter 4</h2> ▪ Bookmarks can be useful if your Then, add a link to the bookmark ("Jump to Chapter 4"), webpage is very long. from within the same page: ▪ To make a bookmark, you must first <a href="#C4">Jump to Chapter 4</a> create the bookmark, and then add a link to it. Or, add a link to the bookmark ("Jump to Chapter 4"), from another page: ▪ When the link is clicked, the page will scroll to the location with the <a href="html_demo.html#C4">Jump to Chapter bookmark. 4</a> Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_bookmark 52

  25. External Paths ▪ External pages can be referenced with <a a full URL or with a path relative to the href="https://www.w3schools.com/html/default.as current web page. p">HTML tutorial</a> ▪ This example uses a full URL to link to a web page: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_external_url 53

  26. External Paths ▪ This example links to a page located in <a href="/html/default.asp">HTML tutorial</a> the html folder on the current web site: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_external_relative 54

  27. External Paths ▪ This example links to a page located in <a href="default.asp">HTML tutorial</a> the same folder as the current page: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_external 55

  28. Chapter Summary ▪ Use the <a> element to define a link ▪ Use the href attribute to define the link address ▪ Use the target attribute to define where to open the linked document ▪ Use the <img> element (inside <a>) to use an image as a link ▪ Use the id attribute (id="value") to define bookmarks in a page ▪ Use the href attribute (href="#value") to link to the bookmark 56

  29. Test Yourself with Exercises ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_links1 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_links2 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_links3 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_links4 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_links5 57

  30. HTML Link Tags Tag Description <a> Defines a hyperlink 58

  31. 59 Web Application Development HTML

  32. ▪ Images can improve the design and the <img src="pic_trulli.jpg" alt="Italian Trulli"> appearance of a web page. <img src="img_girl.jpg" alt="Girl in a jacket"> <img src="img_chania.jpg" alt="Flowers in Chania"> Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_trulli Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_girl Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_chania

  33. HTML Images Syntax ▪ In HTML, images are defined with the <img> tag. ▪ The <img> tag is empty, it contains attributes only, and does not have a closing tag. ▪ The src attribute specifies the URL (web address) of the image: ▪ <img src=" url ">

  34. The alt Attribute ▪ The alt attribute provides an alternate <img src="img_chania.jpg" alt="Flowers in text for an image, if the user for some Chania"> reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). ▪ The value of the alt attribute should describe the image: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_alt_chania

  35. The alt Attribute ▪ If a browser cannot find an image, it will <img src="wrongname.gif" alt="Flowers in display the value of the alt attribute: Chania"> ▪ Note : The alt attribute is required. A web page will not validate correctly without it. Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_wrongname

  36. Image Size – Width and Height ▪ You can use the style attribute to <img src="img_girl.jpg" alt="Girl in a jacket" specify the width and height of an style="width:500px;height:600px;"> image. Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_size

  37. Image Size – Width and Height ▪ Alternatively, you can use the width and <img src="img_girl.jpg" alt="Girl in a jacket" height attributes: width="500" height="600"> ▪ The width and height attributes always defines the width and height of the image in pixels. ▪ Note : Always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads. Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_attributes

  38. <!DOCTYPE html> <html> Width and Height, or Style? <head> <style> ▪ The width, height, and style attributes img { are valid in HTML5. width: 100%; } ▪ However, we suggest using the style </style> attribute. It prevents styles sheets from </head> changing the size of images: <body> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body> </html> Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_style

  39. Images in Another Folder ▪ If not specified, the browser expects to <img src="/images/html5.gif" alt="HTML5 Icon" find the image in the same folder as the style="width:128px;height:128px;"> web page. ▪ However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_folder

  40. Images on Another Server ▪ Some web sites store their images on <img image servers. src="https://www.w3schools.com/images/w3schools _green.jpg" alt="W3Schools.com"> ▪ Actually, you can access images from any web address in the world: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_w3schools

  41. Animated Images ▪ HTML allows animated GIFs: <img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;"> Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_hackman

  42. Image as a Link ▪ To use an image as a link, put the <img> <a href="default.asp"> tag inside the <a> tag: <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> ▪ Note : border:0; is added to prevent IE9 </a> (and earlier) from displaying a border around the image (when the image is a link). Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_link

  43. Image Floating ▪ Use the CSS float property to let the <p><img src="smiley.gif" alt="Smiley face" image float to the right or to the left of a style="float:right;width:42px;height:42px;"> text: The image will float to the right of the text.</p> <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> The image will float to the left of the text.</p> Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_float

  44. <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" Image Maps alt="Computer" href="computer.htm"> ▪ The <map> tag defines an image-map. <area shape="rect" coords="290,172,333,250" An image-map is an image with alt="Phone" href="phone.htm"> clickable areas. <area shape="circle" coords="337,300,44" ▪ In the image below, click on the alt="Coffee" href="coffee.htm"> computer, the phone, or the cup of </map> coffee: ▪ The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map. ▪ The <map> element contains a number of <area> tags, that define the clickable areas in the image-map. Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_map2

  45. Background Images ▪ To add a background image on an <body style="background- HTML element, use the CSS property image:url('clouds.jpg')"> background-image: <h2>Background Image</h2> ▪ To add a background image on a web page, specify the background-image </body> property on the BODY element: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_background

  46. Background Images ▪ To add a background image on a <body> paragraph, specify the background- image property on the P element: <p style="background-image:url('clouds.jpg')"> ... </p> </body> Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_background 2

  47. The <picture> Element ▪ HTML5 introduced the <picture> element to add more <picture> flexibility when specifying image resources. <source media="(min-width: 650px)" ▪ The <picture> element contains a number of <source> srcset="img_pink_flowers.jpg"> elements, each referring to different image sources. This <source media="(min-width: 465px)" way the browser can choose the image that best fits the srcset="img_white_flower.jpg"> current view and/or device. <img src="img_orange_flowers.jpg" ▪ Each <source> element have attributes describing alt="Flowers" style="width:auto;"> when their image is the most suitable. </picture> ▪ The browser will use the first <source> element with matching attribute values, and ignore any following <source> elements. ▪ Note: Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags matched. Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_picture

  48. HTML Screen Readers ▪ A screen reader is a software program that reads the HTML code, converts the text, and allows the user to "listen" to the content. Screen readers are useful for people who are blind, visually impaired, or learning disabled.

  49. Chapter Summary ▪ Use the HTML <img> element to define an image ▪ Use the HTML src attribute to define the URL of the image ▪ Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed ▪ Use the HTML width and height attributes to define the size of the image ▪ Use the CSS width and height properties to define the size of the image (alternatively) ▪ Use the CSS float property to let the image float ▪ Use the HTML <map> element to define an image-map ▪ Use the HTML <area> element to define the clickable areas in the image-map ▪ Use the HTML <img>'s element usemap attribute to point to an image-map ▪ Use the HTML <picture> element to show different images for different devices ▪ Note: Loading images takes time. Large images can slow down your page. Use images carefully.

  50. Test Yourself with Exercises! ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_images1 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_images2 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_images3 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_images4 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_images5 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_images6

  51. HTML Image Tags Tag Description <img> Defines an image <map> Defines an image- map <area> Defines a clickable area inside an image-map <picture> Defines a container for multiple image resources

  52. 80 Web Application Development HTML

  53. Company Contact Country Alfreds Futterkiste Maria Anders Germany Centro comercial Francisco Chang Mexico Moctezuma Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Laughing Bacchus Yoshi Tannamuri Canada Winecellars Magazzini Alimentari Giovanni Rovelli Italy Riuniti Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro

  54. <table style="width:100%"> <tr> Defining an HTML Table <th>Firstname</th> <th>Lastname</th> ▪ An HTML table is defined with the <th>Age</th> <table> tag. </tr> <tr> ▪ Each table row is defined with the <tr> <td>Jill</td> tag. A table header is defined with the <td>Smith</td> <th> tag. By default, table headings are <td>50</td> bold and centered. A table data/cell is </tr> defined with the <td> tag. <tr> ▪ Note : The <td> elements are the data <td>Eve</td> containers of the table. <td>Jackson</td> <td>94</td> ▪ They can contain all sorts of HTML </tr> elements; text, images, lists, other </table> tables, etc. Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table

  55. HTML Table – Adding a Border table, th, td { ▪ If you do not specify a border for the border: 1px solid black; table, it will be displayed without } borders. ▪ A border is set using the CSS border property: ▪ Remember to define borders for both the table and the table cells. Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_border

  56. HTML Table – Collapsed Borders table, th, td { ▪ If you want the borders to collapse into border: 1px solid black; one border, add the CSS border- border-collapse: collapse; collapse property: } Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_collapse

  57. HTML Table – Adding Cell Padding th, td { ▪ Cell padding specifies the space padding: 15px; between the cell content and its } borders. ▪ If you do not specify a padding, the table cells will be displayed without padding. ▪ To set the padding, use the CSS padding property: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellpadding

  58. HTML Table – Left-align Headings th { ▪ By default, table headings are bold and text-align: left; centered. } ▪ To left-align the table headings, use the CSS text-align property: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headings_left

  59. HTML Table – Adding Border Spacing ▪ Border spacing specifies the space table { between the cells. border-spacing: 5px; } ▪ To set the border spacing for a table, use the CSS border-spacing property: ▪ Note: If the table has collapsed borders, border-spacing has no effect. Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing

  60. HTML Table – Cells that Span Many Columns <table style="width:100%"> ▪ To make a cell span more than one <tr> column, use the colspan attribute: <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table> Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_colspan

  61. HTML Table – Cells that Span Many Rows <table style="width:100%"> ▪ To make a cell span more than one row, <tr> use the rowspan attribute: <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table> Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_rowspan

  62. HEML Table – Adding a Caption <table style="width:100%"> ▪ To add a caption to a table, use the <caption>Monthly <caption> tag: savings</caption> <tr> ▪ Note: The <caption> tag must be inserted <th>Month</th> immediately after the <table> tag. <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables2

  63. A Special Style for One Table ▪ To define a special style for a special <table id="t01"> table, add an id attribute to the table: <tr> ▪ Now you can define a special style for this <th>Firstname</th> table: <th>Lastname</th> ▪ table#t01 { <th>Age</th> width: 100%; background-color: #f1f1c1; </tr> } <tr> ▪ And add more styles: <td>Eve</td> ▪ table#t01 tr:nth-child(even) { <td>Jackson</td> background-color: #eee; } <td>94</td> table#t01 tr:nth-child(odd) { </tr> background-color: #fff; } </table> table#t01 th { color: white; background-color: black; } Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_id1 Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_id2

  64. Chapter Summary ▪ Use the HTML <table> element to define a table ▪ Use the HTML <tr> element to define a table row ▪ Use the HTML <td> element to define a table data ▪ Use the HTML <th> element to define a table heading ▪ Use the HTML <caption> element to define a table caption ▪ Use the CSS border property to define a border ▪ Use the CSS border-collapse property to collapse cell borders ▪ Use the CSS padding property to add padding to cells ▪ Use the CSS text-align property to align cell text ▪ Use the CSS border-spacing property to set the spacing between cells ▪ Use the colspan attribute to make a cell span many columns ▪ Use the rowspan attribute to make a cell span many rows ▪ Use the id attribute to uniquely define one table

  65. Test Yourself with Exercises! ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_tables1 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_tables2 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_tables3 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_tables4 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_tables5 ▪ https://www.w3schools.com/html/exercise.asp?filename=exercise_tables6

  66. Tag Description <table> Defines a table <th> Defines a header cell in HTML Table Tags a table <tr> Defines a row in a table <td> Defines a cell in a table <caption> Defines a table caption <colgroup> Specifies a group of one or more columns in a table for formatting <col> Specifies column properties for each column within a <colgroup> element <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table

  67. 95 Web Application Development HTML

  68. HTML List Example An Unordered List: An Ordered List: ▪ Item 1.First item ▪ Item 2.Second item ▪ Item 3.Third item ▪ Item 4.Fourth item Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_intro

  69. Unordered HTML List ▪ An unordered list starts with the <ul> <ul> tag. Each list item starts with the <li> <li>Coffee</li> tag. <li>Tea</li> <li>Milk</li> ▪ The list items will be marked with </ul> bullets (small black circles) by default: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered

  70. <ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> Unordered HTML List – Choose List Item Marker </ul> <ul style="list-style-type:circle"> ▪ The CSS list-style-type property is used to <li>Coffee</li> define the style of the list item marker: <li>Tea</li> <li>Milk</li> Value Description </ul> disc Sets the list item marker to a <ul style="list-style-type:square"> bullet (default) <li>Coffee</li> <li>Tea</li> circle Sets the list item marker to a circle <li>Milk</li> </ul> square Sets the list item marker to a square <ul style="list-style-type:none"> none The list items will not be <li>Coffee</li> marked <li>Tea</li> <li>Milk</li> </ul> Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered_disc Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered_circle Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered_square Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered_none

  71. Ordered HTML List <ol> ▪ An ordered list starts with the <ol> tag. <li>Coffee</li> Each list item starts with the <li> tag. <li>Tea</li> <li>Milk</li> ▪ The list items will be marked with </ol> numbers by default: Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered

  72. Ordered HTML List – The Type Attribute Numbers: ▪ The type attribute of the <ol> tag, <ol type="1"> defines the type of the list item marker: <li>Coffee</li> Type Description <li>Tea</li> type="1" The list items will be <li>Milk</li> numbered with numbers </ol> (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers Try it yourself: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered_numbers

Recommend

More recommend