Chapter 6 html
Transcript of Chapter 6 html
![Page 1: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/1.jpg)
CHAPTER 6HTML
![Page 2: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/2.jpg)
Introduction
• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags• HTML documents are described by HTML tags• Each HTML tag describes different document content
• The tags are what separate normal text from HTML code.
![Page 3: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/3.jpg)
Explanation The text between <html> and </html> describes an HTML document The text between <head> and </head> provides information about
the document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page
content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph
![Page 4: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/4.jpg)
Heading and Paragraph
![Page 5: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/5.jpg)
Let’s get start it! Open notepad.
Type this coding into your notepad.
<!DOCTYPE html><html><head><title>Page Title</title></head><body>
<h1>My First Heading</h1><p>My first paragraph.</p>
</body></html>
![Page 6: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/6.jpg)
SaveSave as heading.html
![Page 7: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/7.jpg)
Heading
![Page 8: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/8.jpg)
Heading and Paragraph HTML headings are defined with the <h1> to <h6> tags.
HTML paragraphs are defined with the <p> tag
<!DOCTYPE html><html><head><title>Page Title</title></head><body>
<h1>This is First Heading</h1><h2>This is Second Heading</h2><h3>This is Third Heading</h3>
<p>This is a paragraph.</p><p>This is another paragraph.</p>
</body></html>
![Page 9: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/9.jpg)
Heading and Paragraph • Save as heading.html
![Page 10: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/10.jpg)
HTML LinksHTML links are defined with the <a> tag.
<html><body>
<a href="http://www.google.com">This is a link</a>
</body></html>
![Page 11: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/11.jpg)
HTML LinksSave as link.html
![Page 12: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/12.jpg)
Image HTML images are defined with the <img> tag. The source file (src), alternative text (alt), and size
(width and height) are provided as attributes:
<html>
<body>
<img src="smile.jpg" width="304"
height="342">
</body>
</html>
![Page 13: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/13.jpg)
ImageSave as image.html
![Page 14: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/14.jpg)
Attributes
HTML elements can have attributes Attributes provide additional information about an
element
Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value"
![Page 15: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/15.jpg)
The title AttributeIn this example, the <p> element has a title attribute. The value of the attribute is "About W3Schools":
<!DOCTYPE html><html><body>
<h1>About W3Schools</h1><p title="About W3Schools">W3Schools is a web developer's site. It provides tutorials and references covering many aspects of web programming, including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.</p>
<p><b>If you move the mouse over the paragraph above, the title will display as a tooltip.</b></p>
</body></html>
![Page 16: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/16.jpg)
Attributes
Save as attributes.html
![Page 17: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/17.jpg)
HTML Horizontal Rules The <hr> tag creates a horizontal line in an HTML page. The hr element can be used to separate content:
<!DOCTYPE html><html><body>
<p>The hr tag defines a horizontal rule:</p><hr><p>This is a paragraph.</p><hr><p>This is a paragraph.</p><hr><p>This is a paragraph.</p>
</body></html>
![Page 18: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/18.jpg)
HTML Horizontal RulesSave as horizontal.html
![Page 19: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/19.jpg)
HTML Line Breaks The HTML <br> element defines a line break. Use <br> if you want a line break (a new line) without starting a new
paragraph:
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a para<br>graph with line
breaks</p>
</body>
</html>
![Page 20: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/20.jpg)
HTML Line BreaksSave as line.html
![Page 21: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/21.jpg)
The HTML <pre> Element The 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:
<!DOCTYPE html><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.</pre></body></html>
![Page 22: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/22.jpg)
The HTML <pre> ElementSave as pre.html
![Page 23: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/23.jpg)
HTML Styles
![Page 24: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/24.jpg)
HTML Styles Every HTML element has a default style (background
color is white and text color is black).
Changing the default style of an HTML element, can be
done with the style attribute.
![Page 25: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/25.jpg)
Background ColorThis example changes the default background color from white to light green:
<!DOCTYPE html><html><body style="background-color:lightgreen">
<h1>This is a heading</h1><p>This is a paragraph.</p>
</body></html>
![Page 26: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/26.jpg)
Background ColorSave as color.html
![Page 27: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/27.jpg)
Text ColorThe color property defines the text color to be used for an HTML element:
<!DOCTYPE html><html><body>
<h1 style="color:blue">This is a heading</h1><p style="color:red">This is a paragraph.</p>
</body></html>
![Page 28: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/28.jpg)
Text ColorSave as text.html
![Page 29: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/29.jpg)
FontThe font-family property defines the font to be used for an HTML element:
<!DOCTYPE html><html><body>
<h1 style="font-family:Cooper Black">This is a heading</h1><p style="font-family:Lucida Calligraphy">This is a paragraph.</p>
</body></html>
![Page 30: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/30.jpg)
FontSave as font.html
![Page 31: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/31.jpg)
Text SizeThe font-size property defines the text size to be used for an HTML element:
<!DOCTYPE html><html><body>
<h1 style="font-size:300%">This is a heading</h1><p style="font-size:160%">This is a paragraph.</p>
</body></html>
![Page 32: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/32.jpg)
Text SizeSave as text_size.html
![Page 33: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/33.jpg)
Text AlignmentThe text-align property defines the horizontal text alignment for an HTML element:
<!DOCTYPE html><html><body>
<h1 style="text-align:center">Centered heading</h1><p>This is a paragraph.</p>
</body></html>
![Page 34: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/34.jpg)
Text AlignmentSave as alignment.html
![Page 35: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/35.jpg)
HTML Text Formatting Elements
![Page 36: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/36.jpg)
Formatting Elements• HTML also defines special elements, for defining text with a
special meaning.• HTML uses elements like <b> and <i> for formatting output,
like bold or italic text.• Formatting elements were designed to display special types of
text:• Bold text• Important text• Italic text• Emphasized text• Marked text• Small text• Deleted text• Inserted text• Subscripts• Superscripts
![Page 37: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/37.jpg)
Bold and Strong FormattingThe HTML <b> element defines bold text, without any extra importance.
<!DOCTYPE html><html><body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body></html>
![Page 38: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/38.jpg)
Strong FormattingThe HTML <strong> element defines strong text, with added semantic "strong" importance.
<!DOCTYPE html><html><body>
<p>This text is normal.</p>
<p><strong>This text is strong.</strong></p>
</body></html>
![Page 39: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/39.jpg)
Bold and Strong Formatting
![Page 40: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/40.jpg)
Italic Formatting The HTML <i> element defines italic text, without any extra importance.
<!DOCTYPE html><html><body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body></html>
![Page 41: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/41.jpg)
Emphasized Formatting The HTML <em> element defines emphasized text, with added semantic importance.
<!DOCTYPE html><html><body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body></html>
![Page 42: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/42.jpg)
Italic and Emphasized Formatting Save as italic.html
![Page 43: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/43.jpg)
Small FormattingThe HTML <small> element defines small text:
<!DOCTYPE html><html><body>
<h2>HTML <small>Small</small> Formatting</h2>
</body></html>
![Page 44: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/44.jpg)
Small FormattingSave as small.html
![Page 45: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/45.jpg)
Marked FormattingThe HTML <mark> element defines marked or highlighted text:
<!DOCTYPE html><html><body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body></html>
![Page 46: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/46.jpg)
Marked FormattingSave as marked.html
![Page 47: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/47.jpg)
Deleted FormattingThe HTML <del> element defines deleted (removed) text.
<!DOCTYPE html><html><body>
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
</body></html>
![Page 48: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/48.jpg)
Deleted FormattingSave as deleted.html
![Page 49: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/49.jpg)
Subscript Formatting
The HTML <sub> element defines subscripted text.
<!DOCTYPE html><html><body>
<p>This is <sub>subscripted</sub> text.</p>
</body></html>
![Page 50: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/50.jpg)
Subscript Formatting
Save as sub.html
![Page 51: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/51.jpg)
Superscript FormattingThe HTML <sup> element defines superscripted text.
<!DOCTYPE html><html><body>
<p>This is <sup>superscripted</sup> text.</p>
</body></html>
![Page 52: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/52.jpg)
Superscript FormattingSave as sup.html
![Page 53: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/53.jpg)
HTML Layouts
![Page 54: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/54.jpg)
HTML LayoutsWebsites often display content in multiple columns (like a magazine or newspaper)
![Page 55: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/55.jpg)
Layout MethodsThere are two methods to do the layout:
Using <div>Using HTML5
![Page 56: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/56.jpg)
HTML Layout Using <div> Elements
The <div> element is often used as a layout tool, because
it can easily be positioned with CSS
(Cascading Style Sheets).
This example uses 4 <div> elements to create a multiple
column layout:
![Page 57: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/57.jpg)
![Page 58: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/58.jpg)
Layout Using <div> Elements<!DOCTYPE html><html><head><style>#header { background-color:black; color:white; text-align:center; padding:5px;}
![Page 59: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/59.jpg)
Layout Using <div> Elements#nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; }#section { width:350px; float:left; padding:10px; }
![Page 60: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/60.jpg)
Layout Using <div> Elements#footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }</style></head><body>
![Page 61: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/61.jpg)
Layout Using <div> Elements<div id="header"><h1>City Gallery</h1></div>
<div id="nav">London<br>Paris<br>Tokyo<br></div>
<div id="section"><h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p>
![Page 62: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/62.jpg)
Layout Using <div> Elements<p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></div>
<div id="footer">Copyright © W3Schools.com</div>
</body></html>
![Page 63: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/63.jpg)
Layout Using <div> ElementsSave as layout1.html
![Page 64: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/64.jpg)
Website Layout Using HTML5• HTML5 offers new semantic elements that define different
parts of a web page:
• This example uses <header>, <nav>, <section>, and <footer> to create a multiple column layout:
![Page 65: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/65.jpg)
![Page 66: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/66.jpg)
Layout Using HTML5<!DOCTYPE html><html><head><style>header { background-color:black; color:white; text-align:center; padding:5px; }nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; }
![Page 67: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/67.jpg)
Layout Using HTML5section { width:350px; float:left; padding:10px; }footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }</style></head><body>
![Page 68: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/68.jpg)
Layout Using HTML5<header><h1>City Gallery</h1></header>
<nav>London<br>Paris<br>Tokyo<br></nav>
<section><h1>London</h1><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p>
![Page 69: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/69.jpg)
Layout Using HTML5<p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></section>
<footer>Copyright © W3Schools.com</footer>
</body></html>
![Page 70: Chapter 6 html](https://reader036.fdocuments.us/reader036/viewer/2022070513/588370aa1a28ab536b8b70c5/html5/thumbnails/70.jpg)
Layout Using HTML5Save as html5.html