,
,), links (), and images ( ), links (), and images ( Bcac501 - It - Part-1-Html Bcac501 - It - Part-1-Html Contents: P a g e 1 | 117 </body> Example Explained P a g e 2 | 117 Note: Some HTML elements have no content (like the <br> element). These Web Browsers A browser does not display the HTML tags, but uses them to determine how Since the early days of the World Wide Web, there have Year Version 2014 HTML5 2017 HTML5.2 P a g e 4 | 117 Then under "Open and Save", check the box that says "Display HTML files as Save the file on your computer. Select File > Save as in the Notepad menu. Name the file "index.htm" OR "index.html" and set the encoding to UTF- Open the saved HTML file in your favorite browser (double click on the file, or P a g e 5 | 117 All HTML documents must start with a document type declaration: <!DOCTYPE The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>. Example </body> The <!DOCTYPE> declaration represents the document type, and helps browsers It must only appear once, at the top of the page (before any HTML tags). <!DOCTYPE html> HTML Headings <h1> defines the most important heading. <h6> defines the least important P a g e 6 | 117 HTML Paragraphs Example HTML Links Example HTML Images The source file (src), alternative text (alt), width, and height are provided as Example P a g e 7 | 117 Have you ever seen a Web page and wondered "Hey! How did they do that?" Right-click in an HTML page and select "View Page Source" (in Chrome) or HTML Elements HTML Elements Note: Some HTML elements have no content (like the <br> element). These Some HTML elements will display correctly, even if you forget the end tag: Example The <br> tag defines a line break, and is an empty element without a closing Example HTML tags are not case sensitive: <P> means the same as <p>. Tag Description P a g e 9 | 117 The <a> tag defines a hyperlink. The href attribute specifies the URL of the page Example The <img> tag is used to embed an image in an HTML page. The src attribute Example There are two ways to specify the URL in the src attribute: Notes: External images might be under copyright. If you do not get permission 2. Relative URL - Links to an image that is hosted within the website. Here, Tip: It is almost always best to use relative URLs. They will not break if you P a g e 10 | 117 The <img> tag should also contain the width and height attributes, which specifies Example The required alt attribute for the <img> tag specifies an alternate text for an Example Example See what happens if we try to display an image that does not exist: The style attribute is used to add styles to an element, such as color, font, Example Good: Bad: Sometimes you have to use quotes. This example will not display the title P a g e 11 | 117 Double quotes around attribute values are the most common in HTML, but In some situations, when the attribute value itself contains double quotes, it is Or vice versa: Summary HTML Headings Heading 1 <h1> defines the most important heading. <h6> defines the least important Example Note: Browsers automatically add some white space (a margin) before and Search engines use the headings to index the structure and content of your web Users often skim a page by its headings. It is important to use headings to show <h1> headings should be used for main headings, followed by <h2> headings, then Note: Use HTML headings for headings only. Don't use headings to make Bigger Headings Each HTML heading has a default size. However, you can specify the size for Example P a g e 13 | 117 HTML Paragraphs A paragraph always starts on a new line, and browsers automatically add some Example HTML Display <p> The <hr> tag defines a thematic break in an HTML page, and is most often The <hr> element is used to separate content (or define a change) in an HTML Example </body> O/P The <hr> tag is an empty tag, which means that it has no end tag. Use <br> if you want a line break (a new line) without starting a new paragraph: Example The <br> tag is an empty tag, which means that it has no end tag. Example <!DOCTYPE html> </p> P a g e 16 | 117 Example <!DOCTYPE html> </pre> P a g e 17 | 117 Tag Description HTML Styles Example I am Red I am Big <p>I am normal</p> </body> P a g e 18 | 117 Setting the style of an HTML element, can be done with the style attribute. <tagname style="property:value;"> Background Color The CSS background-color property defines the background color for an HTML Example <body style="background-color:powderblue;"> Example <body> Text Color The CSS color property defines the text color for an HTML element: Example P a g e 19 | 117 The CSS font-family property defines the font to be used for an HTML Example Text Size The CSS font-size property defines the text size for an HTML element: Example Text Alignment The CSS text-align property defines the horizontal text alignment for an HTML Example Summary P a g e 20 | 117 Example The HTML <b> element defines bold text, without any extra importance. Example The HTML <strong> element defines text with strong importance. The content Example P a g e 21 | 117 The HTML <i> element defines a part of text in an alternate voice or mood. The Tip: The <i> tag is often used to indicate a technical term, a phrase from Example The HTML <em> element defines emphasized text. The content inside is typically Tip: A screen reader will pronounce the words in <em> with an emphasis, using Example Example The HTML <mark> element defines text that should be marked or highlighted: Example The HTML <del> element defines text that has been deleted from a document. P a g e 22 | 117 The HTML <ins> element defines a text that has been inserted into a document. Example The HTML <sub> element defines subscript text. Subscript text appears half a Example The HTML <sup> element defines superscript text. Superscript text appears half Example <html> <head> </head> <body> <pre> </pre> </body> </html> P a g e 24 | 117 Example For nearly 60 years, WWF has been protecting the future of nature. The world's The HTML <blockquote> element defines a section that is quoted from another Example Example Tip: Use the global title attribute to show the description for the Example The HTML <address> tag defines the contact information for the author/owner The contact information can be an email address, URL, physical address, phone The text in the <address> element usually renders in italic, and browsers will Example The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a P a g e 26 | 117 Example The HTML <bdo> tag is used to override the current text direction: Example P a g e 27 | 117 You can add comments to your HTML source by using the following syntax: Notice that there is an exclamation point (!) in the start tag, but not in the end Note: Comments are not displayed by the browser, but they can help document Add Comments With comments you can place notifications and reminders in your HTML code: Example <p>This is a paragraph.</p> Hide Content Example P a g e 28 | 117 Example <p>This is a paragraph.</p> are also great for debugging HTML, because you can comment out HTML lines of Comments can be used to hide parts in the middle of the HTML code. Example P a g e 29 | 117 Color Names Background Color Hello World Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy Example P a g e 30 | 117 Hello World Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit Example Border Color Hello World Color Values In HTML, colors can also be specified using RGB values, HEX values, HSL P a g e 31 | 117 The following two <div> elements have their background color set with RGBA Example P a g e 32 | 117 This means that there are 256 x 256 x 256 = 16777216 possible colors! For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest To display black, set all color parameters to 0, like this: rgb(0, 0, 0). To display white, set all color parameters to 255, like this: rgb(255, 255, 255). P a g e 33 | 117 Shades of gray are often defined using equal values for all three parameters: RGBA color values are an extension of RGB color values with an Alpha channel - P a g e 34 | 117 #rrggbb For example, #ff0000 is displayed as red, because red is set to its highest value To display black, set all color parameters to 00, like this: #000000. To display white, set all color parameters to ff, like this: #ffffff. P a g e 35 | 117 Shades of gray are often defined using equal values for all three parameters: P a g e 36 | 117 In HTML, a color can be specified using hue, saturation, and lightness (HSL) in P a g e 37 | 117 Saturation 50% is 50% gray, but you can still see the color. P a g e 38 | 117 The lightness of a color can be described as how much light you want to give Shades of Gray Shades of gray are often defined by setting the hue and saturation to 0, and P a g e 39 | 117 HSLA color values are an extension of HSL color values with an Alpha channel - P a g e 40 | 117 P a g e 41 | 117 With CSS, you can control the color, font, the size of text, the spacing between Tip: The word cascading means that a style applied to a parent element will Using CSS The most common way to add CSS, is to keep the styles in external CSS files. Inline CSS The following example sets the text color of the <h1> element to blue, and the P a g e 42 | 117 Internal CSS The following example sets the text color of ALL the <h1> elements (on that Example <h1>This is a heading</h1> </body> External CSS An external style sheet is used to define the style for many HTML pages. P a g e 43 | 117 Example <h1>This is a heading</h1> </body> The external style sheet can be written in any text editor. The file must not "styles.css": Tip: With an external style sheet, you can change the look of an entire web P a g e 44 | 117 Here, we will demonstrate some commonly used CSS properties. You will learn Example <!DOCTYPE html> <h1>This is a heading</h1> </body> CSS Border P a g e 45 | 117 Example p { CSS Padding The CSS padding property defines a padding (space) between the text and the Example p { CSS Margin The CSS margin property defines a margin (space) outside the border. Example p { Summary P a g e 46 | 117 • Use the HTML <head> element to store <style> and <link> elements • Use the CSS padding property for space inside the border • Use the CSS margin property for space outside the border HTML Links When you move the mouse over a link, the mouse arrow will turn into a little Note: A link does not have to be text. A link can be an image or any other The HTML <a> tag defines a hyperlink. It has the following syntax: P a g e 47 | 117 The link text is the part that will be visible to the reader. Clicking on the link text, will send the reader to the specified URL address. Example Tip: Links can of course be styled with CSS, to get another look! By default, the linked page will be displayed in the current browser window. To Example Use target="_blank" to open the linked document in a new browser window or tab: P a g e 48 | 117 Both examples above are using an absolute URL (a full web address) in A local link (a link to a page within the same website) is specified with Example <h2>Absolute URLs</h2> <h2>Relative URLs</h2> To use an image as a link, just put the <img> tag inside the <a> tag: Example Use mailto: inside the href attribute to create a link that opens the user's Example Button as a Link To use an HTML button as a link, you have to add some JavaScript code. P a g e 49 | 117 Example Link Titles Example Summary Tag Description Example Here, an unvisited link will be green with no underline. A visited link will be pink <style> a:visited { a:hover { a:active { P a g e 51 | 117 Link Buttons Example a:hover, a:active { P a g e 52 | 117 When the link is clicked, the page will scroll down or up to the location with the Example Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same Example Summary HTML Images P a g e 53 | 117 Example Example Images are not technically inserted into a web page; images are linked to web The <img> tag is empty, it contains attributes only, and does not have a closing Syntax P a g e 54 | 117 The required src attribute specifies the path (URL) to the image. Note: When a web page loads, it is the browser, at that moment, that gets the Example The required alt attribute provides an alternate text for an image, if the user Example If a browser cannot find an image, it will display the value of the alt attribute: Example You can use the style attribute to specify the width and height of an image. Example P a g e 55 | 117 The width and height attributes always define the width and height of the image Note: Always specify the width and height of an image. If width and height are The width, height, and style attributes are all valid in HTML. However, we suggest using the style attribute. It prevents styles sheets from Example </body> If you have your images in a sub-folder, you must include the folder name in P a g e 56 | 117 To point to an image on another server, you must specify an absolute (full) URL Example Animated Images Example Image as a Link To use an image as a link, put the <img> tag inside the <a> tag: Example P a g e 57 | 117 Use the CSS float property to let the image float to the right or to the left of a Example Here are the most common image file types, which are supported in all P a g e 58 | 117 Summary Tag Description P a g e 59 | 117 Image Maps The HTML <map> tag defines an image map. An image map is an image with Try to click on the computer, phone, or the cup of coffee in the image below: Example Here is the HTML source code for the image map above: P a g e 60 | 117 The idea behind an image map is that you should be able to perform different To create an image map you need an image, and some HTML code that The Image The image is inserted using the <img> tag. The only difference from other The usemap value starts with a hash tag # followed by the name of the image The <map> element is used to create an image map, and is linked to the image by <map name="workmap"> The name attribute must have the same value as the <img>'s usemap attribute . P a g e 61 | 117 Shape You must define the shape of the clickable area, and you can choose one of You must also define some coordinates to be able to place the clickable area Shape="rect" The coordinates for shape="rect" come in pairs, one for the x-axis and one for the So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels P a g e 62 | 117 Example This is the area that becomes clickable and will send the user to the page P a g e 63 | 117 To add a circle area, first locate the coordinates of the center of the circle: 337,300 44 pixels P a g e 64 | 117 Example This is the area that becomes clickable and will send the user to the page P a g e 65 | 117 How can we make the croissant in the image below become a clickable link? P a g e 66 | 117 The coordinates come in pairs, one for the x-axis and one for the y-axis: Example This is the area that becomes clickable and will send the user to the page P a g e 67 | 117 • Use the HTML <area> element to define the clickable areas in the image map • Use the HTML usemap attribute of the <img> element to point to an image map Tag Description P a g e 68 | 117 To add a background image on an HTML element, use the HTML style attribute Example You can also specify the background image in the <style> element, in Example <style> If you want the entire page to have a background image, you must specify the Example <style> P a g e 69 | 117 If the background image is smaller than the element, the image will repeat Example To avoid the background image from repeating itself, set the background- Example Background Cover If you want the background image to cover the entire element, you can set P a g e 70 | 117 This way, the background image will cover the entire element, with no Example Background Stretch If you want the background image to stretch to fit the entire element, you can Try resizing the browser window, and you will see that the image will stretch, Example P a g e 71 | 117 From the examples above you have learned that background images can be The HTML <picture> element gives web developers more flexibility in specifying The <picture> element contains one or more <source> elements, each referring Each <source> element has a media attribute that defines when the image is the Example <picture> P a g e 72 | 117 1. Bandwidth If you have a small screen or device, it is not necessary to load a large image 2. Format Support Some browsers or devices may not support all image formats. By using Example <picture> P a g e 73 | 117 Example P a g e 74 | 117 Example <table> Table Cells Everything between <td> and </td> are the content of the table cell. Example Table Rows Each table row starts with a <tr> and end with a </tr> tag. Example You can have as many rows as you like in a table, just make sure that the Note: There are times where a row can have less or more cells than another. Table Headers Sometimes you want your cells to be headers, in those cases use the <th> tag P a g e 76 | 117 <table> By default, the text in <th> elements are bold and centered, but you can change Tag Description P a g e 77 | 117 When you add a border to a table, you also add borders around each table cell: To add a border, use the CSS border property on table, th, and td elements: Example P a g e 78 | 117 To avoid having double borders like in the example above, set the CSS border- Example If you set a background color of each cell, and give the border a white color (the Example P a g e 79 | 117 Example Skip the border around the table by leaving out table from the css selector: Example With the border-style property, you can set the appereance of the border. P a g e 80 | 117 • dotted • dashed • solid • double • groove • ridge • inset • outset • none • hidden Example Border Color With the border-color property, you can set the color of the border. P a g e 81 | 117 HTML tables can have different sizes for each column, row or the entire Use the style attribute with the width or height properties to specify the To set the width of a table, add the style attribute to the <table> element: P a g e 82 | 117 <table style="width:100%"> Note: Using a percentage as the size unit for a width means how wide will this Example P a g e 83 | 117 To set the height of a specific row, add the style attribute on a table row Example <table style="width:100%"> Table headers are defined with th elements, each th element represents a table Example P a g e 85 | 117 To use the first column as table headers, define the first cell in each row as Example Jill Smith 50 Eve Jackson 94 P a g e 86 | 117 Example You can have a header that spans over two or more columns. Name Age Jill Smith 50 Eve Jackson 94 Example P a g e 87 | 117 You can add a caption that serves as a heading for the entire table. Monthly savings Month Savings January $100 February $50 Example Note: The <caption> tag should be inserted immediately after the <table> tag. P a g e 88 | 117 Cell padding is the space between the cell edges and the cell content. Example To add padding only above the content, use the padding-top property. And the others sides with the padding-bottom, padding-left, and padding- Example P a g e 89 | 117 Example To make a cell span over multiple columns, use the colspan attribute: Example To make a cell span over multiple rows, use the rowspan attribute: Example Note: The value of the rowspan attribute represents the number of rows to If you add a background color on every other table row, you will get a nice P a g e 91 | 117 Example Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc. To make vertical zebra stripes, style every other column, instead of every Example Note: Put the :nth-child() selector on both th and td elements if you want to P a g e 92 | 117 You can combine the styling from the two examples above and you will have Example th:nth-child(even),td:nth-child(even) { Horizontal Dividers P a g e 93 | 117 If you specify borders only at the bottom of each table row, you will have a Example Hoverable Table P a g e 94 | 117 The span attribute specifies how many columns that gets the style. Example <h2>Colgroup</h2> P a g e 96 | 117 </body> Note: The <colgroup> tag must be a child of a <table> element and should be There are only a very limited selection of CSS properties that are allowed to be width property P a g e 97 | 117 </body> Empty Colgroups Example <h2>Empty Colgroups</h2> P a g e 100 | 117 </body> Hide Columns Example P a g e 101 | 117 P a g e 102 | 117 <p><b>Note:</b> The table columns does not collapse properly in Safari browsers.</p> HTML Lists Example • Item 1. First item P a g e 103 | 117 <ul> <ol> </body> An unordered list starts with the <ul> tag. Each list item starts with The list items will be marked with bullets (small black circles) by default: P a g e 104 | 117 • Coffee An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. Example 1. Coffee The <dl> tag defines the description list, the <dt> tag defines the term (name), P a g e 105 | 117 A Description List Milk Tag Description P a g e 106 | 117 An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default: Example <!DOCTYPE html> <ul> </body> • Coffee The CSS list-style-type property is used to define the style of the list item P a g e 107 | 117 Example - Disc <ul style="list-style-type:disc;"> </body> • Coffee P a g e 108 | 117 <ul style="list-style-type:circle;"> </body> o Coffee Example - Square Example - None Example <ul> </body> A Nested List • Coffee Note: A list item (<li>) can contain a new list, and other HTML elements, like Example li { P a g e 110 | 117 li a { li a:hover { <h2>Navigation Menu</h2> <ul> </body> Summary An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. Example <!DOCTYPE html> <ol> </body> 1. Coffee The type attribute of the <ol> tag, defines the type of the list item marker: P a g e 112 | 117 type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers Example - Numbers: <ol type="1"> </body> P a g e 113 | 117 1. Coffee <ol type="A"> </body> A. Coffee Lowercase Letters: By default, an ordered list will start counting from 1. If you want to start P a g e 114 | 117 <!DOCTYPE html> <ol start="50"> </body> P a g e 115 | 117 <ol> </body> Note: A list item (<li>) can contain a new list, and other HTML elements, like Summary P a g e 116 | 117 The <dl> tag defines the description list, the <dt> tag defines the term (name), Example <dl> </body> Summary P a g e 117 | 117) which include attributes to specify things like the link URL or image source file.">, ,
-
), paragraphs (
) which include attributes to specify things like the link URL or image source file.">
Uploaded by
dordelderek the lastUploaded by
dordelderek the lastSubject: - BCAC501 (IT)
1. HTML Introduction --- 2
2. HTML History --- 4
3. HTML Editors --- 5
4. View HTML Source --- 8
5. HTML Attributes --- 10
6. HTML Headings --- 12
7. HTML Paragraph [<p>, <hr>, <br>, <pre>] --- 14 - 18
8. HTML Styles --- 18
9. HTML Formatting Elements --- 21
10. HTML Quotation and Citation Elements --- 25
11. HTML Comments --- 28
12. HTML Colors --- 30
13. HTML Styles – CSS --- 40
14. HTML Links --- 46
15. HTML Images --- 53
16. HTML Picture --- 71
17. HTML Table --- 73
18. HTML List [<ul>, <ol>, <dl>] --- 102 - 117
HTML Introduction
What is HTML? • HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc.A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body><h1>My First Heading</h1>
<p>My first paragraph.</p>
</html> • The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tag_name> Content goes here... </tag_name>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
elements are called empty elements. Empty elements do not have an end tag!The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read
HTML documents and display them correctly.
to display the document:HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title> Note: The content inside the <body>
</head> section will be displayed in a browser. The
content inside the <title> element will be
shown in the browser's title bar or in the
<body>
page's tab.
</body>
</html>
P a g e 3 | 117
HTML History
been many versions of HTML:1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 HTML 3.2
1999 HTML 4.01
2000 XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2016 HTML 5.1
2017 HTML5.1 2nd Edition
HTML Editors
HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML it is recommend to use a simple text editor like
Notepad (PC) or TextEdit (Mac).
Follow the steps below to create your first web page with Notepad or
TextEdit.Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Step 1: Open TextEdit (Mac)Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files
correctly. In Preferences > Format > choose "Plain Text"
HTML code instead of formatted text".Then open a new document to place the code.
Step 2: Write Some HTML
Step 3: Save the HTML Page
8 (which is the preferred encoding for HTML files).Step 4: View the HTML Page in Your Browser
right-click - and choose "Open with").The result will look much like this:
HTML Basic Examples
HTML Documents
html>.
<!DOCTYPE html>
<html>
<body><h1>My First Heading</h1>
<p>My first paragraph.</p>
</html>The <!DOCTYPE> Declaration
to display web pages correctly.The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
HTML headings are defined with the <h1> to <h6> tags.
heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>HTML links are defined with the <a> tag:
<a href="https://www.Ggoogle.com">This is a Google link</a>The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML images are defined with the <img> tag.
attributes:
<img src="TMSL.jpg" alt="Techno Main Saltlake" width="104" height="142">
How to View HTML Source?View HTML Source Code:
"View Source" (in Edge), or similar in other browsers. This will open a window
containing the HTML source code of the page.Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" or "Inspect
Element" to see what elements are made up of (you will see both the HTML and
the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or
Styles panel that opens.
An HTML element is defined by a start tag, some content, and an end
tag.
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag Element content End tag<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
elements are called empty elements. Empty elements do not have an end tag!
P a g e 8 | 117
Never Skip the End Tag
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>Empty HTML Elements
HTML elements with no content are called empty elements.
tag:
<p>This is a <br> paragraph with a line break.</p>HTML is Not Case Sensitive
HTML Tag Reference
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"The href Attribute
the link goes to:
<a href="https://www.tmsl.com">Visit TMSL</a>The src Attribute
specifies the path to the image to be displayed:
<img src="img_girl.jpg">1. Absolute URL - Links to an external image that is hosted on another
website. Example: src="https://www.w3schools.com/images/img_girl.jpg".
to use it, you may be in violation of copyright laws. In addition, you cannot
control external images; it can suddenly be removed or changed.
the URL does not include the domain name. If the URL begins without a slash, it
will be relative to the current page. Example: src="img_girl.jpg". If the URL
begins with a slash, it will be relative to the domain. Example:
src="/images/img_girl.jpg".
change domain.
The width and height Attributes
the width and height of the image (in pixels):
<img src="img_girl.jpg" width="500" height="600">The alt Attribute
image, if the image for some reason cannot be displayed. This can be due to
slow connection, or an error in the src attribute, or if the user uses a screen
reader.
<img src="img_girl.jpg" alt="Girl with a jacket"><img src="img_typo.jpg" alt="Girl with a jacket">
The style Attribute
size, and more.
<p style="color:red;">This is a red paragraph.</p>
<a href="https://www.TMSL.com/html/">Visit our HTML tutorial</a>
<a href=https://www.TMSL.com/html/>Visit our HTML tutorial</a>
attribute correctly, because it contains a space:
Example <p title=About TMSL>Single or Double Quotes?
single quotes can also be used.
necessary to use single quotes:<p title='John "ShotGun" Nelson'>
<p title="John 'ShotGun' Nelson">
• All HTML elements can have attributes
• The href attribute of <a> specifies the URL of the page the link goes to
• The src attribute of <img> specifies the path to the image to be displayed
• The width and height attributes of <img> provide size information for
images
• The alt attribute of <img> provides an alternate text for an image
• The style attribute is used to add styles to an element, such as color,
font, size, and more
• The lang attribute of the <html> tag declares the language of the Web
page
• The title attribute defines some extra information about an element
Heading 2
Heading 3
Heading 4
Heading 5
P a g e 12 | 117
Heading 6
HTML Headings ExampleHTML headings are defined with the <h1> to <h6> tags.
heading.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
after a heading.Headings Are Important
pages.
the document structure.
the less important <h3>, and so on.
text BIG or bold.
any heading with the style attribute, using the CSS font-size property:
<h1 style="font-size:60px;">Heading 1</h1>
HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text.The HTML <p> element defines a paragraph.
white space (a margin) before and after a paragraph.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the display by adding extra spaces or extra lines
in your HTML code.
The browser will automatically remove any extra spaces and lines when the
page is displayed:
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
P a g e 14 | 117
HTML Horizontal Rules
displayed as a horizontal rule.
page:
<!DOCTYPE html>
<html>
<body><h1>This is heading 1</h1>
<p>This is some text.</p>
<hr><h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr><h2>This is heading 2</h2>
<p>This is some other text.</p>
</html>
P a g e 15 | 117
HTML Line BreaksThe HTML <br> element defines a line break.
<p>This is<br>a paragraph<br>with line breaks.</p>The Poem Problem
This poem will display on a single line:
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p>
<p>
My Bonnie lies over the ocean. My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</body>
</html>
Solution - The HTML <pre> ElementThe HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks:
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean. My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</body>
</html>
Tag Reference<p> Defines a paragraph
<hr> Defines a thematic change in the content
<br> Inserts a single line break
<pre> Defines pre-formatted text
The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.
I am Blue
<!DOCTYPE html>
<html>
<body>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</html>
The HTML Style AttributeThe HTML style attribute has the following syntax:
The property is a CSS property. The value is a CSS value.
You will learn more about CSS later in this tutorial.
element.
Set the background color for a page to powderblue:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Set background color for two different elements:
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts
element:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
element:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p> • Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment
HTML Text Formatting
HTML contains several elements for defining text with a special meaning.This text is bold
This text is italic
This is subscript and superscript
HTML Formatting Elements
Formatting elements were designed to display special types of text:
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript textHTML <b> and <strong> Elements
<b>This text is bold</b>
inside is typically displayed in bold.
<strong>This text is important!</strong>
HTML <i> and <em> Elements
content inside is typically displayed in italic.
another language, a thought, a ship name, etc.
<i>This text is italic</i>
displayed in italic.
verbal stress.
<em>This text is emphasized</em>HTML <small> Element
The HTML <small> element defines smaller text:
<small>This is some smaller text.</small>HTML <mark> Element
<p>Do not forget to buy <mark>milk</mark> today.</p>HTML <del> Element
Browsers will usually strike a line through deleted text:
Example
<p>My favorite color is <del>blue</del> red.</p>HTML <ins> Element
Browsers will usually underline inserted text:
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>HTML <sub> Element
character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H2O:
<p>This is <sub>subscripted</sub> text.</p>HTML <sup> Element
a character above the normal line, and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like WWW[1]:
<p>This is <sup>superscripted</sup> text.</p><title> Example of different elements...</title>
<b>This text is bold</b>
P a g e 23 | 117
<strong>This text is important!</strong> <i>This text is italic</i>
<em>This text is emphasized</em>
<small>This is some smaller text.</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
HTML Quotation and Citation Elements
In this chapter we will go through
the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML
elements.Here is a quote from WWF's website:
leading conservation organization, WWF works in 100 countries and is
supported by more than one million members in the United States and close to
five million globally.HTML <blockquote> for Quotations
source.Browsers usually indent <blockquote> elements.
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>HTML <q> for Short Quotations
The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
P a g e 25 | 117
HTML <abbr> for AbbreviationsThe HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",
"CSS", "Mr.", "Dr.", "ASAP", "ATM".Marking abbreviations can give useful information to browsers, translation
systems and search-engines.
abbreviation/acronym when you mouse over the element.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>HTML <address> for Contact Information
of a document or an article.
number, social media handle, etc.
always add a line break before and after the <address> element.
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>HTML <cite> for Work Title
song, a movie, a painting, a sculpture, etc.).Note: A person's name is not the title of a work.
The text in the <cite> element usually renders in italic.
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>HTML <bdo> for Bi-Directional Override
BDO stands for Bi-Directional Override.
<bdo dir="rtl">This text will be written from right to left</bdo>HTML Quotation and Citation Elements
Tag Description<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation
HTML Comments
HTML comments are not displayed in the browser, but they can help
document your HTML source code.HTML Comment Tag
<!-- Write your comments here -->
tag.
your HTML source code.
<!-- This is a comment --><!-- Remember to add more information here -->
Comments can be used to hide content.
Which can be helpful if you hide content temporarily:
<p>This is a paragraph.</p><!-- <p>This is another paragraph </p> -->
<p>This is a paragraph too.</p>
You can also hide more than one line, everything between the <!-- and the --
> will be hidden from the display.Hide a section of HTML code:
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>
code, one at a time, to search for errors.Hide Inline Content
Hide a part of a paragaph:
<p>This <!-- great text --> is a paragraph.</p>
HTML Colors
HTML colors are specified with predefined color names, or with RGB,
HEX, HSL, RGBA, or HSLA values.In HTML, a color can be specified by using a color name:
You can set the background color for HTML elements:
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Text ColorYou can set the color of text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
lobortis nisl ut aliquip ex ea commodo consequat.
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>You can set the color of borders:
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
values, RGBA values, and HSLA values.
The following three <div> elements have their background color set with RGB,
HEX, and HSL values:
and HSLA values, which adds an Alpha channel to the color (here we have 50%
transparency):
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1><h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>HTML RGB and RGBA Colors
An RGB color value represents RED, GREEN, and BLUE light sources.An RGBA color value is an extension of RGB with an Alpha channel (opacity).
RGB Color Values
In HTML, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color with a
value between 0 and 255.
value (255), and the other two (green and blue) are set to 0.Another example, rgb(0, 255, 0) is displayed as green, because green is set to
its highest value (255), and the other two (red and blue) are set to 0.Experiment by mixing the RGB values below:
Shades of GrayRGBA Color Values
which specifies the opacity for a color.An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):Experiment by mixing the RGBA values below:
HTML HEX Colors
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG
(green) and BB (blue) hexadecimal integers specify the components of
the color.HEX Color Values
In HTML, a color can be specified using a hexadecimal value in the form:
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00
and ff (same as decimal 0-255).
(ff), and the other two (green and blue) are set to 00.Another example, #00ff00 is displayed as green, because green is set to its
highest value (ff), and the other two (red and blue) are set to 00.Experiment by mixing the HEX values below:
Shades of Gray
HTML HSL and HSLA Colors
HSL stands for hue, saturation, and lightness.HSLA color values are an extension of HSL with an Alpha channel
(opacity).HSL Color Values
the form:hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and
240 is blue.Saturation is a percentage value, 0% means a shade of gray, and 100% is the
full color.Lightness is also a percentage value, 0% is black, and 100% is white.
Experiment by mixing the HSL values below:Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray
0% is completely gray, you can no longer see the color.
Lightness
the color, where 0% means no light (black), 50% means 50% light (neither
dark nor light) 100% means full lightness (white).
adjust the lightness from 0% to 100% to get darker/lighter shades:
HSLA Color Values
which specifies the opacity for a color.An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):Experiment by mixing the HSLA values below:
HTML Styles - CSSCSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages
all at once.
What is CSS?Cascading Style Sheets (CSS) is used to format the layout of a webpage.
elements, how elements are positioned and laid out, what background images
or background colors are to be used, different displays for different devices and
screen sizes, and much more!
also apply to all children elements within the parent. So, if you set the color of
the body text to "blue", all headings, paragraphs, and other text elements
within the body will also get the same color (unless you specify something
else)!CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file
However, in this tutorial we will use inline and internal styles, because this is
easier to demonstrate, and easier for you to try it yourself.An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
text color of the <p> element to red:
Example
<h1 style="color:blue;">A Blue Heading</h1><p style="color:red;">A red paragraph.</p>
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within
a <style> element.
page) to blue, and the text color of ALL the <p> elements to red. In addition, the
page will be displayed with a "powderblue" background color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</html>
To use an external style sheet, add a link to it in the <head> section of each
HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph.</p>
</html>
contain any HTML code, and must be saved with a .css extension.Here is what the "styles.css" file looks like:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
site, by changing one file!
CSS Colors, Fonts and Sizes
more about them later.The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
Use of CSS color, font-family and font-size properties:
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</html>The CSS border property defines a border around an HTML element.
Tip: You can define a border for nearly all HTML elements.Use of CSS border property:
border: 2px solid powderblue;
}
border.Use of CSS border and padding properties:
border: 2px solid powderblue;
padding: 30px;
}Use of CSS border and margin properties:
border: 2px solid powderblue;
margin: 50px;
} • 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 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
Links are found in nearly all web pages. Links allow users to click their
way from page to page.HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
hand.
HTML element!HTML Links - Syntax
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.This example shows how to create a link to W3Schools.com:
<a href="https://www.tmsl.com/">Visit W3Schools.com!</a>
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and redHTML Links - The target Attribute
change this, you must specify another target for the link.The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
• _self - Default. Opens the document in the same window/tab as it was
clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window<a href="https://www.tmsl.com/" target="_blank">Visit W3Schools!</a>
Absolute URLs vs. Relative URLs
the href attribute.
a relative URL (without the "https://www" part):
<p><a href="https://www.tmsl.org/">TMSL</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>HTML Links - Use an Image as a Link
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>Link to an Email Address
email program (to let them send a new email):
<a href="mailto:someone@example.com">Send email</a>
JavaScript allows you to specify what happens at certain events, such as a click
of a button:
<button onclick="document.location='default.asp'">HTML Tutorial</button>The title attribute specifies extra information about an element. The
information is most often shown as a tooltip text when the mouse moves over
the element.
<a href="https://www.tmsl.com/html/" title="Go to TMSL HTML section">Visit
our HTML Tutorial</a>
• 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 mailto: scheme inside the href attribute to create a link that
opens the user's email programHTML Link Tags
<a> Defines a hyperlink
HTML Links - Different Colors
P a g e 50 | 117
An HTML link is displayed in a different color depending on whether it has
been visited, is unvisited, or is active.HTML Link Colors
By default, a link will appear like this (in all browsers):
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and redYou can change the link state colors, by using CSS:
with no underline. An active link will be yellow and underlined. In addition,
when mousing over a link (a:hover) it will become red and underlined:
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
color: pink;
background-color: transparent;
text-decoration: none;
}
color: red;
background-color: transparent;
text-decoration: underline;
}
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>A link can also be styled as a button, by using CSS:
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
background-color: red;
}
</style>HTML Links - Create Bookmarks
HTML links can be used to create bookmarks, so that readers can jump to
specific parts of a web page.Create a Bookmark in HTML
Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it.
bookmark.First, use the id attribute to create a bookmark:
<h2 id="C4">Chapter 4</h2>
page:
<a href="#C4">Jump to Chapter 4</a>You can also add a link to a bookmark on another page:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
• Use the id attribute (id="value") to define bookmarks in a page
• Use the href attribute (href="#value") to link to the bookmark
Images can improve the design and the appearance of a web page.
Example
<img src="pic_trulli.jpg" alt="Italian Trulli">
<img src="img_girl.jpg" alt="Girl in a jacket">
<img src="img_chania.jpg" alt="Flowers in Chania">HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
pages. The <img> tag creates a holding space for the referenced image.
tag.The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
<img src="url" alt="alternatetext">
The src Attribute
image from a web server and inserts it into the page. Therefore, make sure that
the image actually stays in the same spot in relation to the web page, otherwise
your visitors will get a broken link icon. The broken link icon and the alt text
are shown if the browser cannot find the image.
<img src="img_chania.jpg" alt="Flowers in Chania">The alt Attribute
for some 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:
<img src="img_chania.jpg" alt="Flowers in Chania">
<img src="wrongname.gif" alt="Flowers in Chania">Image Size - Width and Height
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">Alternatively, you can use the width and height attributes:
Example
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
in pixels.
not specified, the web page might flicker while the image loads.Width and Height, or Style?
changing the size of images:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body><img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</html>Images in Another Folder
the src attribute:
Example
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">Images on Another Server/Website
Some web sites point to an image on another server.
in the src attribute:
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Sch
ools.com">Notes on external images: External images might be under copyright. If you
do not get permission to use it, you may be in violation of copyright laws. In
addition, you cannot control external images; it can suddenly be removed or
changed.HTML allows animated GIFs:
<img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
Image Floating
text:
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
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>Common Image Formats
browsers (Chrome, Edge, Firefox, Safari, Opera):Abbreviation File Format File Extension
APNG Animated Portable Network .apng
GraphicsGIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group .jpg, .jpeg, .jfif, .pjpeg,
image .pjp
PNG Portable Network Graphics .pngSVG Scalable Vector Graphics .svg
• 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 or the
CSS width and height properties to define the size of the image
• Use the CSS float property to let the image float to the left or to the
rightHTML Image Tags
<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
HTML Image Maps
With HTML image maps, you can create clickable areas on an image.
clickable areas. The areas are defined with one or more <area> tags.
How Does it Work?
actions depending on where in the image you click.
describes the clickable areas.
images is that you must add a usemap attribute:<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
map, and is used to create a relationship between the image and the image
map.Tip: You can use any image as an image map!
Create Image Map
Then, add a <map> element.
using the required name attribute:
The AreasThen, add the clickable areas.
A clickable area is defined using an <area> element.
these values: • rect - defines a rectangular region
• circle - defines a circular region
• poly - defines a polygonal region
• default - defines the entire region
onto the image.
y-axis.
from the top:
The coordinates 270,350 is located 270 pixels from the left margin and 350
pixels from the top:Now we have enough data to create a clickable rectangular area:
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
"computer.htm":
Shape="circle"Then specify the radius of the circle:
Now you have enough data to create a clickable circular area:
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
"coffee.htm":
Shape="poly"The shape="poly" contains several coordinate points, which creates a shape
formed with straight lines (a polygon).This can be used to create any shape.
Like maybe a croissant shape!
We have to find the x and y coordinates for all edges of the croissant:
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329
,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
"croissant.htm":
Summary
• Use the HTML <map> element to define an image mapHTML Image Tags
<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
HTML Background Images
A background image can be specified for almost any HTML element.Background Image on a HTML element
and the CSS background-image property:Add a background image on a HTML element:
<p style="background-image: url('img_girl.jpg');">
the <head> section:Specify the background image in the <style> element:
p {
background-image: url('img_girl.jpg');
}
</style>Background Image on a Page
background image on the <body> element:Add a background image for the entire page:
body {
background-image: url('img_girl.jpg');
}
</style>
Background Repeat
itself, horizontally and vertically, until it reaches the end of the element:
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
repeat property to no-repeat.
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
the background-size property to cover.
Also, to make sure the entire element is always covered, set the background-
attachment property to fixed:
stretching (the image will keep its original proportions):
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
set the background-size property to 100% 100%:
but always cover the entire element.
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Learn More CSS
styled by using the CSS background properties.HTML <picture> Element
The HTML <picture> element allows you to display different pictures for
different devices or screen sizes.The HTML <picture> Element
image resources.
to different images through the srcset attribute. This way the browser can
choose the image that best fits the current view and/or device.
most suitable.Show different images for different screen sizes:
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
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 match.When to use the Picture Element
There are two main purposes for the <picture> element:
file. The browser will use the first <source> element with matching attribute
values, and ignore any of the following elements.
the <picture> element, you can add images of all formats, and the browser will
use the first format it recognizes, and ignore any of the following elements.The browser will use the first image format it recognizes:
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
HTML Tables
HTML tables allow web developers to arrange data into rows and
columns.Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
Define an HTML TableA table in HTML consists of table cells inside rows and columns
A simple HTML table:
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
P a g e 75 | 117
Note: table data elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables,
etc.tr stands for table row.
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
number of cells are the same in each row.
You will learn about that in a later chapter.
instead of the <td> tag:
ExampleLet the first row be table headers:
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
that with CSS.HTML Table Tags
<table> Defines a table
<th> Defines a header cell in 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
HTML Table Borders
HTML tables can have borders of different styles and shapes.How To Add a Border
table, th, td {
border: 1px solid black;
}
Collapsed Table Borders
collapse property to collapse.This will make the borders collapse into a single border:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}Style Table Borders
same as the document background), you get the impression of an invisible
border:
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Round Table BordersWith the border-radius property, the borders get rounded corners:
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
th, td {
border: 1px solid black;
border-radius: 10px;
}Dotted Table Borders
The following values are allowed:
th, td {
border-style: dotted;
}
Example
th, td {
border-color: #96D4D4;
}HTML Table Sizes
table.
size of a table, row or column.HTML Table Width
ExampleSet the width of the table to 100%:
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
element be compared to its parent element, which in this case is
the <body> element.HTML Table Column Width
To set the size of a specific column, add the style attribute on
a <th> or <td> element:Set the width of the first column to 70%:
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>HTML Table Row Height
element:Set the height of the second row to 200 pixels:
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
P a g e 84 | 117
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>HTML Table Headers
HTML tables can have headers for each column or row, or for many
columns/rows.HTML Table Headers
cell.
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>Vertical Table Headers
a th element:
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>Align Table Headers
By default, table headers are bold and centered:
Firstname Lastname Age
To left-align the table headers, use the CSS text-align property:
th {
text-align: left;
}Header for Multiple Columns
To do this, use the colspan attribute on the <th> element:
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Table CaptionTo add a caption to a table, use the <caption> tag:
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
HTML Table Padding & Spacing
HTML tables can adjust the padding inside the cells, and also the space
between the cells.HTML Table - Cell Padding
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:
th, td {
padding: 15px;
}
right properties:
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
HTML Table - Cell Spacing
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property
on the table element:
table {
border-spacing: 30px;
}HTML Table Colspan & Rowspan
HTML tables can have cells that spans over multiple rows and/or columns.HTML Table - Colspan
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
P a g e 90 | 117
Note: The value of the colspan attribute represents the number of columns to
span.HTML Table - Rowspan
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
span.HTML Table Styling
Use CSS to make your tables look better.HTML Table - Zebra Stripes
zebra stripes effect.
To style every other table row element, use the :nth-child(even) selector like
this:
tr:nth-child(even) {
background-color: #D6EEEE;
}
instead of 2,4,6 etc.HTML Table - Vertical Zebra Stripes
other row.Set the :nth-child(even) for table data elements like this:
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}
have the styling on both headers and regular table cells.
Combine Vertical and Horizontal Zebra Stripes
stripes on every other row and every other column.If you use a transparent color you will get an overlapping effect.
Use an rgba() color to specify the transparency of the color:
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
background-color: rgba(150, 212, 212, 0.4);
}First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
First Name Last Name SavingsJoe Swanson $300
table with horizontal dividers.Add the border-bottom property to all tr elements to get horizontal dividers:
tr {
border-bottom: 1px solid #ddd;
}Use the :hover selector on tr to highlight table rows on mouse over:
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Example
tr:hover {background-color: #D6EEEE;}HTML Table Colgroup
The <colgroup> element is used to style specific columns of a table.HTML Table Colgroup
The <colgroup> element should be used as a container for the column
specifications.Each group are specified with a <col> element.
The style attribute specifies the style to give the columns.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<p>Add the a colgroup with a col element that spans over two columns to define a style for the two
columns:</p>
P a g e 95 | 117
<table style="width: 100%;">
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
</html>
placed before any other table elements, like <thead>, <tr>, <td> etc., but after
the <caption> element, if present.Legal CSS Properties
used in the colgroup:
visibility property
background properties
border propertiesAll other CSS properties will have no effect on your tables.
Multiple Col Elements
If you want to style more columns with different styles, use
more <col> elements inside the <colgroup>:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body><h2>Multiple Col Elements</h2>
<p>Add multiple col elements in the colgroup:</p><table style="width: 100%;">
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
P a g e 98 | 117
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
</html>If you want to style columns in the middle of a table, insert a
"empty" <col> element (with no styles) for the columns before:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
P a g e 99 | 117
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<p>Add "empty" col elements that represents the columns before the columns you want to style:</p><table style="width: 100%;">
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
</html>You can hide columns with the visibility: collapse property:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Hide Columns</h2>
<p>You can hide specific columns with the visibility property:</p><table style="width: 100%;">
<colgroup>
<col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
</body>
</html>
HTML lists allow web developers to group a set of related items in lists.An unordered HTML list:
• Item
• Item
• ItemAn ordered HTML list:
2. Second item
3. Third item
4. Fourth item
Example
<!DOCTYPE html>
<html>
<body><h2>An Unordered HTML List</h2>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul><h2>An Ordered HTML List</h2>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</html>Unordered HTML List
the <li> tag.
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>An unordered HTML list
• Tea
• MilkOrdered HTML List
The list items will be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>An ordered HTML list
2. Tea
3. MilkHTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee - black hot drink
- white cold drink
HTML List Tags
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
HTML Unordered Lists
The HTML <ul> tag defines an unordered (bulleted) list.Unordered HTML List
<html>
<body><h2>An unordered HTML list</h2>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</html>An unordered HTML list
• Tea
• MilkUnordered HTML List - Choose List Item Marker
marker. It can have one of the following values:
Value Descriptiondisc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
<!DOCTYPE html>
<html>
<body><h2>Unordered List with Disc Bullets</h2>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</html>Unordered List with Disc Bullets
• Tea
• Milk
Example - Circle
<!DOCTYPE html>
<html>
<body><h2>Unordered List with Circle Bullets</h2>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</html>Unordered List with Circle Bullets
o Tea
o Milk
<ul style="list-style-type:square;">
<ul style="list-style-type:none;">Nested HTML Lists
Lists can be nested (list inside list):
<!DOCTYPE html>
<html>
<body><h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<li>Coffee</li>
<li>Tea
P a g e 109 | 117
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</html>Lists can be nested (list inside list):
• Tea
o Black tea
o Green tea
• Milk
images and links, etc.Horizontal List with CSS
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a navigation menu:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
float: left;
}
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
background-color: #111111;
}
</style>
</head>
<body>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</html>
• Use the HTML <ul> element to define an unordered list
• Use the CSS list-style-type property to define the list item marker
• Use the HTML <li> element to define a list item
• Lists can be nested
• List items can contain other HTML elements
• Use the CSS property float:left to display a list horizontally
P a g e 111 | 117
HTML Ordered Lists
The HTML <ol> tag defines an ordered list. An ordered list can be
numerical or alphabetical.Ordered HTML List
The list items will be marked with numbers by default:
<html>
<body><h2>An ordered HTML list</h2>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</html>An ordered HTML list
2. Tea
3. MilkOrdered HTML List - The Type Attribute
Type Descriptiontype="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
<!DOCTYPE html>
<html>
<body><h2>Ordered List with Numbers</h2>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</html>
Ordered List with Numbers
2. Tea
3. MilkExample - Uppercase Letters:
<!DOCTYPE html>
<html>
<body><h2>Ordered List with Letters</h2>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</html>Ordered List with Letters
B. Tea
C. Milk
<ol type="a">Uppercase Roman Numbers:
<ol type="I">Lowercase Roman Numbers:
<ol type="i">Control List Counting
counting from a specified number, you can use the start attribute:
Example
<html>
<body><h2>The start attribute</h2>
<p>By default, an ordered list will start counting from 1. Use the start attribute to start counting from
a specified number:</p>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol><ol type="I" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</html>Nested HTML Lists
Lists can be nested (list inside list):
Example
<!DOCTYPE html>
<html>
<body><h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</html>
images and links, etc. • Use the HTML <ol> element to define an ordered list
• Use the HTML type attribute to define the numbering type
• Use the HTML <li> element to define a list item
• Lists can be nested
• List items can contain other HTML elements
HTML Other Lists
HTML also supports description lists.HTML Description Lists
A description list is a list of terms, with a description of each term.
and the <dd> tag describes each term:
<!DOCTYPE html>
<html>
<body><h2>A Description List</h2>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</html>
• Use the HTML <dl> element to define a description list
• Use the HTML <dt> element to define the description term
• Use the HTML <dd> element to describe the term in a description listYou might also like