Chapter 6 html

CHAPTER 6HTML

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.

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

Heading and Paragraph

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>

SaveSave as heading.html

Heading

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>

Heading and Paragraph • Save as heading.html

HTML LinksHTML links are defined with the <a> tag.

<html><body>

<a href="http://www.google.com">This is a link</a>

</body></html>

HTML LinksSave as link.html

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>

ImageSave as image.html

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"

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>

Attributes

Save as attributes.html

HTML Horizontal Rules The <hr> tag creates a horizontal line in an HTML page. The hr element can be used to separate content:


<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>

HTML Horizontal RulesSave as horizontal.html

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>

HTML Line BreaksSave as line.html

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>

The HTML <pre> ElementSave as pre.html

HTML Styles

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.

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>

Background ColorSave as color.html

Text ColorThe color property defines the text color to be used for an HTML element:


<h1 style="color:blue">This is a heading</h1><p style="color:red">This is a paragraph.</p>

</body></html>

Text ColorSave as text.html

FontThe font-family property defines the font to be used for an HTML element:


<h1 style="font-family:Cooper Black">This is a heading</h1><p style="font-family:Lucida Calligraphy">This is a paragraph.</p>

</body></html>

FontSave as font.html

Text SizeThe font-size property defines the text size to be used for an HTML element:


<h1 style="font-size:300%">This is a heading</h1><p style="font-size:160%">This is a paragraph.</p>

</body></html>

Text SizeSave as text_size.html

Text AlignmentThe text-align property defines the horizontal text alignment for an HTML element:


<h1 style="text-align:center">Centered heading</h1><p>This is a paragraph.</p>

</body></html>

Text AlignmentSave as alignment.html

HTML Text Formatting Elements

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

Bold and Strong FormattingThe HTML <b> element defines bold text, without any extra importance.


<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

</body></html>

Strong FormattingThe HTML <strong> element defines strong text, with added semantic "strong" importance.



<p><strong>This text is strong.</strong></p>

</body></html>

Bold and Strong Formatting

Italic Formatting The HTML <i> element defines italic text, without any extra importance.



<p><i>This text is italic.</i></p>

</body></html>

Emphasized Formatting The HTML <em> element defines emphasized text, with added semantic importance.



<p><em>This text is emphasized.</em></p>

</body></html>

Italic and Emphasized Formatting Save as italic.html

Small FormattingThe HTML <small> element defines small text:


<h2>HTML <small>Small</small> Formatting</h2>

</body></html>

Small FormattingSave as small.html

Marked FormattingThe HTML <mark> element defines marked or highlighted text:


<h2>HTML <mark>Marked</mark> Formatting</h2>

</body></html>

Marked FormattingSave as marked.html

Deleted FormattingThe HTML <del> element defines deleted (removed) text.


<p>The del element represents deleted (removed) text.</p>

<p>My favorite color is <del>blue</del> red.</p>

</body></html>

Deleted FormattingSave as deleted.html

Subscript Formatting

The HTML <sub> element defines subscripted text.


<p>This is <sub>subscripted</sub> text.</p>

</body></html>

Subscript Formatting

Save as sub.html

Superscript FormattingThe HTML <sup> element defines superscripted text.


<p>This is <sup>superscripted</sup> text.</p>

</body></html>

Superscript FormattingSave as sup.html

HTML Layouts

HTML LayoutsWebsites often display content in multiple columns (like a magazine or newspaper)

Layout MethodsThere are two methods to do the layout:

Using <div>Using HTML5

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:

Layout Using <div> Elements<!DOCTYPE html><html><head><style>#header { background-color:black; color:white; text-align:center; padding:5px;}

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; }

Layout Using <div> Elements#footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }</style></head><body>

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>

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>

Layout Using <div> ElementsSave as layout1.html

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:

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; }

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>

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>

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>

Layout Using HTML5Save as html5.html

Software

Chapter 6 html