Lecture 3

HTML
HTML Comments
 Comments can be inserted in the HTML code to make it more readable and
understandable.
 Comments are ignored by the browser and are not displayed.
<html>
<body>

<p>This is a regular paragraph</p>
</body>
</html>
HTML Line Breaks
 Use the <br /> tag if you want a line break (a new line) without starting a
new paragraph.
 The <br /> element is an empty HTML element.
<html>
<body>
<p>This is<br />a para-<br />graph with line breaks</p>
</body>
</html>
HTML Formatting Tags
 HTML uses tags like <b> and <i> to modify the appearance of text, like bold or italic.
 These HTML tags are called formatting tags.
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></
p>
</body>
</html>
Deleted and Inserted Text
 This example demonstrates how to mark a text that is deleted (strikethrough)

or inserted (underscore) to a document.
<html>
<body>
<p>
a dozen is
<del>twenty</del>
<ins>twelve</ins>
pieces
</p>
</body>
</html>
Address
<html>
<body>
<address>
Donald Duck<br>
BOX 555<br>
Disneyland<br>
USA
</address>
</body>
</html>
Understanding Block and Inline Elements
 Block Level Elements

 Block - level elements appear on the screen as if they have a carriage return or
line break before and after them.
 For example, the < p > , < h1 > , < h2 > , < h3 > , < h4 > , < h5 > , < h6 > , < pre > ,
< hr / > ,< blockquote > , and < address > elements are all block - level elements.
 Inline Elements
 Inline elements, on the other hand, can appear within sentences and do not have
to appear on new lines of their own.
 The < b > , < i > , < u > , < em > , < strong > , < sup > , < sub > , < big > , < small > ,
< ins > , < del > , and < var > elements are all inline elements.
HTML Links
 A link is the “address” to a document (or a resource) located on the World

Wide Web or elsewhere within your own Web server.
 The href attribute defines the link “address”.
<html>
<body>
<a href="http://www.microsoft.com/">
This text</a> is a link to a page on the World Wide Web.
</p>
</body>
</html>
Open a Link in a New Browser Window
 The target attribute enables you to control how the browser responds when
you click on the link.
Links on the Same Page
 The following code example demonstrates how to use a link to jump to another
part of a document.
<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
Creating a mailto: Link
 The following example demonstrates how to link to an e-mail address and

generate a new e-mail message in your default e-mail application.
<html>
<body>
<p>
This is a mail link:
<a href="mailto:someone@microsoft.com?subject=Hello%20
again">
Send Mail</a>
</p>
</body>
</html>
Creating an Image Link
 The following example demonstrates how to use an image as a link. Click on

the image to go to the linked page.
<html>
<body>
<p>Create a link attached to an image:
<a href="default.htm">
<img src="smiley.gif" alt="HTML tutorial" width="32"
height="32" />
</a></p>
</body>
</html>
Grouping Elements
 The < div > and < span > elements allow you to group several elements to
create sections or subsections of a page.
 On their own, they will not affect the appearance of a page, but they are
commonly used with CSS to allow you to attach a style to a section of a page
Div Element
 The <div> element is often used as a container for other HTML elements.
 The <div> element has no required attributes, but style, class and id are
common.
<div style="background-color:black;color:white;padding:20px;">
<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>
</div>
Span Element
 The < span > element, on the other hand, can be used to group inline
elements only.
 So, if you had a part of a sentence or paragraph you wanted to group, you
could use the < span > element.
< div class=”footnotes” >
< h2 > Footnotes < /h2 >
< p > < span class=”inventor” > < b > 1 < /b > The World Wide Web was invented by Tim
Berners-Lee < /span > < /p >
< p > < b > 2 < /b > The W3C is the World Wide Web Consortium which maintains many Web
standards < /p >
< /div >
HTML Style Attribute
 The purpose of the style attribute is to provide a common way to style all
HTML elements.
 The code in the following example introduce you to a new way of adding
formatting to a document.
<html>
<body style="background-color:Gray;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>
<p style="font-family:times;color:green">
</body>
</html>
Common HTML Styles
 Text Alignment
 <h1 style="text-align:center">
 Font Family, Color, and Size
 <h1 style="font-family:verdana">A heading</h1>
 <p style="font-family:courier new; color:red; fontsize:
 20px;">A paragraph</p>
 Background Color
 <body style="background-color:gray">

Lecture 3

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Lecture 3

Caricato da

Copyright:

Formati disponibili

HTML

 This example demonstrates how to mark a text that is deleted (strikethrough)

 Block Level Elements

 A link is the “address” to a document (or a resource) located on the World

 The following example demonstrates how to link to an e-mail address and

 The following example demonstrates how to use an image as a link. Click on

Potrebbero piacerti anche