SESSION 5 HTML TAGS HTML PAGE STRUCTURE html

  • Slides: 11
Download presentation
SESSION 5 - HTML TAGS

SESSION 5 - HTML TAGS

HTML PAGE STRUCTURE <html> <head> <title> </head> <body> </html> </title>

HTML PAGE STRUCTURE <html> <head> <title> </head> <body> </html> </title>

HTML Headings are important in HTML documents. Headings are defined with the <h 1>

HTML Headings are important in HTML documents. Headings are defined with the <h 1> to <h 6> tags. <h 1> defines the most important heading. <h 6> defines the least important heading. TAG: <h 1>, <h 2>, <h 3>, <h 4>, <h 5>, <h 6> Attributes align Description Specifies the alignment of the text (left, right, center> Example <h 1> This is a heading </h 1>

HTML Lines The <hr> tag creates a horizontal line in an HTML page. The

HTML Lines The <hr> tag creates a horizontal line in an HTML page. The hr element can be used to separate content TAG: <hr> Attributes color Width Example size Description Specifies the color of <hr> Specifies the width of <hr> Specifies the height of <hr> Example <hr color=“blue” width=“ 80%” size=“ 6”>

HTML Comments can be inserted into the HTML code to make it more readable

HTML Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Example <!-- This is a comment -->

HTML Paragraph HTML documents are divided into paragraphs. Paragraphs are defined with the <p>

HTML Paragraph HTML documents are divided into paragraphs. Paragraphs are defined with the <p> tag. Note: Browsers automatically add an empty line before and after a paragraph. TAG: <p> </p> Attributes align Example: Description Specifies the alignment of the text (left, right, center> <p> The quick brown fox jumps over the lazy dog near the bank of the river </p>

HTML Break Use the tag if you want a line break (a new line)

HTML Break Use the tag if you want a line break (a new line) without starting a new paragraph. The element is an empty HTML element. It has no end tag. TAG: <p> </p> Attributes align Description Specifies the alignment of the text (left, right, center> Example <p> The quick brown fox jumps over the lazy dog near the bank of the river </p>

HTML Formatting HTML Background You can change the background of your HTML by using

HTML Formatting HTML Background You can change the background of your HTML by using the following attributes TAG: <body> Attributes Description bgcolor Specifies the color of the background Specifies an alternate text for an image <body background=“url of the image” bgcolor=“orange”

HTML Formatting HTML Text Formatting You can change the text properties of your HTML

HTML Formatting HTML Text Formatting You can change the text properties of your HTML by using <font> tag and its attributes TAG: <font> Attributes Description color Specifies the color of the text size Specifies the size of the text face Specifies the font type of the text <font color=“green” size=“ 6” face=“Comic Sans Ms”> This is a paragraph </font>

Formatting HTML Tag Description <b> Defines bold text <em> Defines emphasized text <i> Defines

Formatting HTML Tag Description <b> Defines bold text <em> Defines emphasized text <i> Defines a part of text in an alternate voice or mood <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text

Image Tag The <img> tag defines an image in an HTML page. Note: Images

Image Tag The <img> tag defines an image in an HTML page. Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image. TAG: <img> Attributes Description Src Specifies the URL of an image Alt Specifies an alternate text for an image Height Specifies the height of an image width Specifies the width of an image <img src=“URL” Alt=“My Picture” height=“ 150 px” width=“ 150 px” >