Chapter 2 HTML

HTML Fundamentals
What is HTML?
y HTML or HyperText Markup Language, is how a World Wide
Web browser displays multimedia documents. The documents themselves are plain text files with special tags or codes that the WWW browser (e.g. Netscape, Internet Explorer) knows how to interpret and display on your screen.
About HTML?
y Hyper Text Markup Language.
Constitutes a collection of platform independent styles
that define the various components of a web document. Styles indicated by markup tags.
y What is HTML really?
Plain-text documents can be created using any text
editor. WYSIWYG editors are also available.
y What is a markup language?

One where we can embed special tags or formatting
commands in the text. To describe how the text should be displayed / printed.
y HTML is a markup language

Special formatting codes (called tags) to adjust fonts, create
bulleted lists, create forms, display images, create tables, etc.
HTML Tags
y The left and right angle brackets (< and > signs )
are used to enclose all special instructions, called tags. y Two classes of tags:
Those which appear in pairs.
<i> Good morning </i>

Those which appear individually.
<img src=baby.jpg> y Browsers interpret the tags to display a HTML page in properly formatted form.
How the Tags Work

y When programming HTML you are essentially telling the computer y y y y
what to do and when to do it. The first part of the tag <tag name> turns the tag on The ending part of the tag, </tag name>, contains the "/" slash character. This "/" slash tells a WWW browser to stop tagging the text. Many HTML tags are paired this way. Think of the tag as a container. If you forget the backslash, a WWW browser will continue the tag for the rest of the text in your document,producing undesirable results.
How to Create and View an HTML document?

1. Use an text editor such as Notepad to write the document. 2. Save the file as filename.html on a PC. This is called the Document Source. 3. Open Internet Explorer (or any browser) Off-Line 4. Switch to Internet Explorer 5. Click on File, Open File and select the filename.html document that you just created. 6.Your HTML page should now appear just like any other Web page in Internet Explorer.
Some points
y HTML files must end with the extension .htm or .html y Tags are case insensitive
<HEAD>, <Head> and <head> are all equivalent.

y Tags may be nested
<html> <head></head> <body></body> </html>
Some points (cont..)

y Browsers ignore all extra spaces within a HTML
document. y Why? Browsers have to reformat the document to fit in the current display area.
y It is good practice to use white spaces in a HTML
document. Improves readability.

y Some tags can have one or more (named) attributes to
define some additional characteristics of the tag. <body text=#FFFFFF bgcolor=#0000FF> <body text=white bgcolor=blue>

y Unrecognized tags Browsers normally ignore tags it does not recognize. y Comment lines Comments are included between .
 
HTML Document Structure

y A HTML document consists of two major portions:

Head
Contains information about the document, like the title and meta data describing the contents.
Body
Contains the actual matter of the document. Gets displayed within the browser window.
Structural HTML Tags

<html> </html>

Used to bracket an entire HTML document. <html> is an opening tag </html> is a closing tag (note the direction of the slash!) text between the opening and closing tag is called the element
<head> </head>

placed at the top of document immediately after the <html> tag Used to provide information about a web page. Nests within itself other tags like <meta> and <title>.
13
Structural HTML Tags

y <title> </title> included as an element inside the <head></head> section element of this tag is the title displayed in title bar of the browser may also be used as title of page when page is bookmarked should be meaningful and uniquely identify the page

<body> </body>
included as the second element inside the <html></html> tags. follows the <head></head> portion of the document contains the information to be displayed in the browser window any attributes set on this tag will apply to the entire page
14
Two Major Sections of an HTML Document

<html> <head> <title> my home page</title> </head> <body> hi there </body> </html> Head Section
Body Section
A Simple HTML Document

<html> <head> <title> Title of the Document </title> </head> <body text=white bgcolor=blue> This is the content of the document. This is an <i> italic </i> font. </body> </html>
This coding is done in notepad (or any editor)
Structural HTML Tags (cont)

y <meta> y Metadata is information about data. y Keywords or descriptions to aid search engines. y The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. y The <meta> tag always goes inside the head element.

y <meta>
Attributes Attribute
Content name
Value
Text author description keywords
description
Specifies the content of the meta information Provides a name for the information in the content attribute

y <meta>
Example
<head> <meta name="description" content="Free Web tutorials" /> <meta name="keywords" content="HTML,CSS,XML,JavaScript" /> <meta name="author" content="Hege Refsnes" /> </head>

y <body> . </body>
y Used to bracket the body of a HTML document. y The body element defines the document's
body.
y The body element contains all the contents of an HTML
document, such as text, hyperlinks, images, tables, lists, etc.

y
<body> . </body>
y Attributes: y background=url specifies an image file to be used as tiling background. y bgcolor=color Sets the background color of the document. y text=color Sets the default color for the normal text in the document. y alink=color Sets the color of active links in the document. y link=color Sets the default color for all the links in a document. y vlink=color Sets the color for the visited links in the document.
How to specify colors?

y Two ways:
(1) By specifying the red, green, blue or RGB components.

Each color encoded in 8 bits. y 00 means that the color is turned off; FF means fully turned on.
y y
Example:
<body text=#FFFFFF bgcolor=#0000FF>
How to specify colors? (cont..)

(2) By specifying the color name.
y Some of the colors that are supported by browsers are:
aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal yellow white
y y
Many other colors are possible. Example:
<body text=white> <body bgcolor=yellow>
Text Formatting in HTML
Paragraphs and Headings

y <Hn> . </Hn> y Used to generate headings, 1 n 6. y Six different levels of headings.
y
<H1> is the largest, <H6> is the smallest.
y <P>.</p> y Paragraph marker, used to separate text into paragraphs. y End tag </P> is optional. y A series of paragraph tags <p> <p><p> with no intervening text is treated as a single <p>.
y <P>
Attributes
Attribute Align Value left right center justify description Specifies the alignment of the text within a paragraph
Example <p align= left >This is the first paragraph.</p> <p align=center>This is another paragraph.</p>
y <BR>
Used to indicate that the text following <BR> should begin on the next line. y The amount of line spacing is less than that of a <P> break. y Example:
y
This is the first line. <br> This is the second line. <br> This is the third.
Example
y <HR> y Produces a horizontal line, which can be used to delimit sections. y Length of the line can be specified. y Attributes
Attribute Align
Value left right center pixels pixels %
description Specifies the alignment of hr element
Size Width
Specifies the height of a hr element Specifies the width of a hr element
y <HR> Examples:
<hr> <hr size=20> <hr width=75%> <hr align=right width=120>

y Across full width of browser, 20 pixels thick, 75% of available page width, and
120 pixels right-justified.
Example
y <address> . </address> y Supplies the contact information of the author. y Generally formatted in italics, with a line break above and below. y Example:
<address> Prof. Indranil Sen Gupta <br> Dept. of Computer Science & Engg. <br> I.I.T. Kharagpur, INDIA <br> Email: isg@hotmail.com </address>
Example
Appearance of Text
y <b> . </b>
y y
Displays the enclosed text in bold. Ex : <b> text</b>
y <i> . </i>
y y
Displays the enclosed text in italics. Ex : <i> text</i>
y <u> . </u>
y y
Displays the enclosed text as underlined. Ex : <u> text</u>
y <sub> . </sub> y Displays the enclosed text as subscript. y <sup> . </sup> y Displays the enclosed text as superscript. y <center> . </center> y Centers the enclosed elements horizontally on the page
y <font> . </font> y Specifies the style of the enclosed text. y Attributes:
Attribute
Color
Value rgb(x,x,x)
#xxxxxx color name font_family number
description
Specifies the color of text
Face Size
Specifies the font of text Specifies the size of text [1 to 7; 3 is the default] [can also specify as +n or n]
Example
<font size="3" face="verdana" color="green">This is some text!</font>
y <pre> . </pre> y Allows browser to display carefully laid out text. y Text in a pre element is displayed in a fixed-width font , and it preserves both spaces and line breaks. y Example:
<pre> main() { int i, j; abc (); } </pre>

Example
Example 1
<html> <head> <title> Title of the Document </title> </head> <body text="white" bgcolor=blue> This is the content of the document. This is an <i> italic </i> font, and this is <b> bold </b>. </body> </html>
Example 2
<html> <head><title>Demonstration of Headings </title></head> <body text="#FFFFFF" bgcolor="#0000FF"> <h1>This is a first level heading. </h1> <h2>The second level</h2> <h3>The third level</h3> <h4>Fourth level. </h4> <h5>Fifth level.</h5> <h6>And, finally, the sixth .</h6> A small amount of plain non-heading text. </body> </html>
Example 3
<html> <head><title>Paragaph Aligning</title></head> <body text=white bgcolor=blue> <h3> <P ALIGN=CENTER> This paragraph will be aligned at the center. Even as the browser window size changes, the alignment remains the same. </P> <P ALIGN=LEFT>This demonstrates left alignment. </P> <P ALIGN=RIGHT>How about aligning by the right margin? </P> </h3> </body> </html>
Example 4
<html> <head><title>Layout Features 1</title></head> <body text=yellow bgcolor=blue> <h2> <pre> begin if (a > b) then max := a; else max := b; end; </pre> </h2> <hr size=8 width=50%> <hr> <hr size=20 width="75%" noshade> </body> </html>
Example 5
<html> <head><title> Superscript and Subscript </title></head> <body text=white bgcolor=blue> <h1> y = x <sup> 3 </sup> + 2 x <sup> 2 </sup> + 4 </h1> <br> <h2> W <sub> total </sub> = x <sup> 2 </sup> - 5 <h2> </body> </html>

Chapter 2 HTML

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Chapter 2 HTML

Cargado por

Copyright:

Formatos disponibles

HTML Fundamentals

editor.  WYSIWYG editors are also available.

y What is a markup language?

y HTML is a markup language

bulleted lists, create forms, display images, create tables, etc.

<i> Good morning </i>

How the Tags Work

How to Create and View an HTML document?

<HEAD>, <Head> and <head> are all equivalent.

<html> <head></head> <body></body> </html>

Some points (cont..)

document.  Improves readability.

Some points (cont..)

Some points (cont..)

HTML Document Structure

Structural HTML Tags

Structural HTML Tags

Two Major Sections of an HTML Document

A Simple HTML Document

This coding is done in notepad (or any editor)

Structural HTML Tags (cont)

Structural HTML Tags (cont)

Structural HTML Tags (cont)

Structural HTML Tags (cont)

y The body element contains all the contents of an HTML

document, such as text, hyperlinks, images, tables, lists, etc.

Structural HTML Tags (cont)

How to specify colors?

(1) By specifying the red, green, blue or RGB components.

<body text=#FFFFFF bgcolor=#0000FF>

How to specify colors? (cont..)

Many other colors are possible. Example:

<body text=white> <body bgcolor=yellow>

Text Formatting in HTML

Paragraphs and Headings

<H1> is the largest, <H6> is the smallest.

Value left right center pixels pixels %

description Specifies the alignment of hr element

Specifies the height of a hr element Specifies the width of a hr element

<hr> <hr size=20> <hr width=75%> <hr align=right width=120>

120 pixels right-justified.

Displays the enclosed text in bold. Ex : <b> text</b>

Displays the enclosed text in italics. Ex : <i> text</i>

Displays the enclosed text as underlined. Ex : <u> text</u>

y <font> . </font> y Specifies the style of the enclosed text. y Attributes:

<pre> main() { int i, j; abc (); } </pre>

También podría gustarte

editor. WYSIWYG editors are also available.

document. Improves readability.