HTML

HYPERTEXT MARKUP LANGUAGE (HTML)
DESIGNING DOCUMENTS FOR THE WORLD WIDE WEB
HTML
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
CONTENT
Introduction to HTML Creating and publishing a Web page Validating a document Main HTML elements Block-level HTML elements Text-level HTML element Creating hypertext links Adding images to documents Building tables
The World Wide Web

Definations
The World Wide Web
The set of computers on the internet that support HTTP Not a separate network
HTTP
The HyperText Transfer Protocol The language used by a WWW Client to request documents from a WWW server
HTML
The HyperText MarkUp Language The language used to design web pages
HyperText Markup Language

Text Mixed with Markup Tags
Tags Enclosed in Angle Brackets
<H1>Introduction</H1>
What Does Markup Describe?

Appearance Layout Content
Creating and Publishing a Web Page

Create an HTML document Place the document in world-accessible directory on a system running an HTTP server Access the web page through http://hostname/~username/filename Validate the document Check the syntax a formal HTML validator
HTML Document Template

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> Goes on browsers title bar may not appear <TITLE>Benefits of Exercise </TITLE> in printouts </HEAD> Main heading.Often used as title. Appears in <BODY> printout <H1>Health Benefits of Exercise</H1> <P> Exercise is an excellent way of improving your health. Medical studies demonstrate that exercise can strengthen your heart and lungs, lower your blood pressure, and help you maintain a healthy weight. </P> <P> Exercise can also assist with improving your mood. In fact, people who exercise have demonstrated better self-esteem, stronger decision making, and a generally more positive outlook on life </P> </BODY> </HTML>
Main HTML Elements

1. DOCTYPE
Refers to the rules for the markup language Browsers render the content correctly Defines the whole HTML documents TITLE element required
Title in the browser toolbar, title for the page when its added to favorites and search-engine pages BASE default address/target for all links on a page META defines metadata about an HTML document SCRIPT,NOSCRIPT define a client-side script (JavaScript) STYLE to define style information for an HTML documents LINK defines the relationship between a document and an external resources
1. HTML 1. HEAD
Optional elements:

Main HTML Elements

4. BODY Element
<BODY BGCOLOR=YELLOW> HTML Attributes and Attribute Values
BACKGROUND BGCOLOR TEXT LINK,VLINK,ALINK OnLoad, OnUnload, OnFocus, OnBlur
5. Elements inside BODY element

<BODY>
Remaining HTML elements </BODY>
META Elements
Metadata is the information about the data <meta> tag provides metadata about the HTML document Metadata will not be displayed on the page Metadata can be used by browsers to records document information, forwards and refreshes pages
NAME=author NAME=keyword NAME=description HTTP-EQUIV=refresh
META Elements
The following meta element defines a description of a page: <meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> The following meta element defines keywords for a page: <meta name="keywords" content="HTML, CSS, XML" />
Block-Level Elements
Headings
H1H6 ALIGN
Basic Text Sections

<p> - defines paragraph <align> - defines alignment <abbr> - defines abbreviation <dfn> - defines definition <address> - defines contact information for the author/owner of a document <blockquote> - defines long quotation
Block-Level Elements (cont.)

Lists
<ol> - defines ordered list <ul> - defines unordered list <li> - defines list item <dl> - defines a definition list <dt> - defines an item in a definition list <dd> - defines a description of an item in a definition list
Tables and Forms
Headings
Heading Types
<H1>..</H1> <H2>..</H2> <H3>..</H3> <H4>..</H4> <H5>..</H5> <H6>..</H6>
Attributes:ALIGN
Values: LEFT (default), RIGHT, CENTER
Nesting tags
Heading and other block-level elements can contain text-level elements, but not vice-versa
P- The Basic Paragraph

Attributes: ALIGN
LEFT (default), RIGHT, CENTER Whitespace ignored (use <BR> for line break)
Consecuitve <P>s do not yield multiple blank lines
End Tag is Optional
Preformatted Paragraphs
The PRE Element
<PRE>.</PRE>
Attributes: WIDTH
Expected width in characters. Not widely supported.
Problem: Special Characters <PRE> Desired Character < if (a<b>{ > doThis(); & } else { doThat(); Non-breaking space }
HTML Required < > & "
OL: Ordered (Numbered) Lists

OL Element <OL> <LI>. <LI> </OL> Attributes: TYPE, START, COMPACT List entries: LI <LI..> .</LI> (End Tag Optional) Attributes: (When inside OL) VALUE, TYPE A sample list: <OL> A sample list: <LI>List Item One 1. List Item One <LI>List Item Two 2. List Item Two 3. List Item Three <LI>List Item Three </OL>
UL: Unordered (Bulleted) Lists

UL Element <UL> <LI>. <LI> </UL> Attributes: TYPE, COMPACT TYPE is DISC, CIRCLE or SQUARE List entries: LI (TYPE) TYPE is DISC, CIRCLE or SQUARE A sample list: <UL> <LI>List Item One <LI>List Item Two <LI>List Item Three </UL>
A sample list: List Item One List Item Two List Item Three
LIST - Example
<html> <body> <h4>Disc bullets list:</h4> <ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html>
Text-Level Elements
Physical Character Styles
<b>, <i>, <tt>, <u>, <sub>, <sup>, <small>, <strike>, <s>, <blink> FONT
<size> <color> <face>
BASEFONT SIZE
Logical Character Styles

<em>, <strong>, <code>, <samp>, <kbd>, <dfn>, <var>, <cite>
Text-Level Elements (Cont.)

Hypertext Links
A
<href>, <name>, <target>
IMG
<src>(required), <alt>, <align>, <width>, <height>, <hspace>, <vspace>, <border>, <usemap>, <ismap>
Misc. Text-Level Elements

BR (Explicit line break) AREA (Client-side image maps) APPLET (Java)
Text-Level Elements-Example
<html> <body> <p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <p>Notice that browsers will strikethrough deleted text and underline inserted text.</p> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p> <p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p> </body> </html>
Hypertext Links
Links can contain images and other text-level elements Link to Absolute URL
Use a complete URL beginning with http://
Link to Relative URL

Use a filename or relative path to filename
Hypertext Links (cont.)

Links to Section
Use a section name preceded by #
Link to Section in URL

Use absolute or relative URL, then #, then section name
Naming a Section
Use <A NAME=. and do not include the pound sign
Hypertext Links - Example

<html> <body> <p> <a href="#C4">See also Chapter 4.</a> </p> <h2>Chapter 1</h2> <p>This chapter explains .......</p> <h2>Chapter 2</h2> <p>This chapter explains ..........</p> <h2>Chapter 3</h2> <p>This chapter explains ............</p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ..........</p> <h2>Chapter 5</h2> <p>This chapter explains ..................</p> </body> </html>
IMG: Embedding Images

Example <img src=SomeFile.gif alt=My Cat width=400 height=300> Attributes:
src (required) alt (technically required) align (see <BR CLEAR=ALL>) width, height hspace, vspace border usemap, ismap
IMG: Example
<html> <body> <p> An image: <img src="smiley.gif" alt="Smiley face" width="32" height="32" /> </p> <p> A moving image: <img src="hackanm.gif" alt="Computer man" width="48" height="48" /> </p> <p> Note that the syntax of inserting a moving image is no different from a non-moving image. </p> </body> </html>
TABLE Element Attributes

ALIGN
The ALIGN attribute gives the horizontal alignment of the table as a whole Legal values are LEFT, RIGHT and CENTER with LEFT being the default
BORDER
This specifies the width in pixels of the border around the table This is in addition to the border around each cell (the CELLSPACING)
CELLSPACING
This gives the space in pixels between adjacent cells. Drawn as a 3D line if BORDER is nonzero, otherwise empty space in the background color is used The default is usually about 3
CELLPADDING
TABLE Element Attributes (cont.)
CELLPADDING determines the empty space, in pixels, between the cells border and the table element The default is usually about 1
WIDTH
This specifies the width of the table, either in pixels (<TABLE WIDTH=250>) or as a percentage of the current browser window width (<TABLE WIDTH=75%>)
BGCOLOR
Specify the background color of the TABLE
BORDERCOLOR, BORDERCOLORDARK, BORDERCOLARLIGHT

Non standard attributes supported by IE to specify the colors to user for the borders
TABLE Element Attributes (cont.)

BACKGROUND
This nonstandard attribute supported by IE gives an image file that will be tiled as the background of the table
RULES
HTML 4.0 attribute that specifies which inner dividing lines are drawn All are drawn if this attribute is omitted Legal values are NONE, ROWS, COLS and ALL
FRAME
Specifies which outer borders are drawn All four are drawn if this attribute is omitted Legal values are BORDER or BOX (all), VOID (none), ABOVE (top), BELOW (bottom), HSIDES (top and bottom, despite the somewhat confusing name), VSIDES (left and right), LHS (left), and RHS (right)
Table CAPTION
Attribute
ALIGN (Values: TOP, BOTTOM)
Usage
An enclosing borderless table may give more flexibility than the built-in CAPTION Heading 1 Row1 Col1 Data Row2 Col1 Data Row3 Col1 Data Heading 2 Row1 Col2 Data Row2 Col2 Data Row3 Col2 Data
TR: TABLE Row

TR is used to define each row in the table Each row will then contain TH and/or TD entries ALIGN
ALIGN (legal values LEFT, RIGHT or CENTER) is used to set the default horizontal alignment for table cells
VALIGN
VALIGN (legal values TOP, MIDDLE or BOTTOM) is used to set the default vertical alignment for table cells
BGCOLOR
Sets the color for the table row, overriding any values set for the table as a whole via the BGCOLOR attribute of TABLE
BORDERCOLOR, BORDERCOLORDARK, BORDERCOLARLIGHT

supported only by IE, these specify the colors to use for the row borders
Table Cells: TH and TD

COLSPAN
COLSPAN defines a heading or cell data entry that spans multiple columns
<TABLE BORDER=1> <TR><TH COLSPAN=2>Col 1&2 Heading <TH>Col13 Heading <TR><TD>Col1 Data <TD>Col2 Data <TD>Col3 Data </TABLE>
Table Cells: TH and TD (cont.)

ROWSPAN
ROWSPAN defines a heading or cell data entry that spans multiple rows; similar to COLSPAN
ALIGN
LEFT, RIGHT, CENTER, JUSTIFY and CHAR
VALIGN
TOP, BOTTOM, MIDDLE
WIDTH, HEIGHT
Values in pixels only (no percentage officially allowed)
NOWRAP
Use with caution
BGCOLOR, BACKGROUND
Same as for TABLE and TR
<html> <body> <h4>Without cellpadding:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
Table - Example

HTML

Caricato da

Informazioni sul documento

Descrizione 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

HTML

Caricato da

Copyright:

Formati disponibili

HYPERTEXT MARKUP LANGUAGE (HTML)

DESIGNING DOCUMENTS FOR THE WORLD WIDE WEB

The World Wide Web

HyperText Markup Language

What Does Markup Describe?

Creating and Publishing a Web Page

HTML Document Template

Main HTML Elements

Main HTML Elements

5. Elements inside BODY element

Remaining HTML elements </BODY>

Basic Text Sections

Block-Level Elements (cont.)

Tables and Forms

P- The Basic Paragraph

End Tag is Optional

HTML Required &lt; &gt; &amp; &quot; &nbsp;

OL: Ordered (Numbered) Lists

UL: Unordered (Bulleted) Lists

Logical Character Styles

Text-Level Elements (Cont.)

Misc. Text-Level Elements

Link to Relative URL

Hypertext Links (cont.)

Link to Section in URL

Hypertext Links - Example

IMG: Embedding Images

TABLE Element Attributes

TABLE Element Attributes (cont.)

BORDERCOLOR, BORDERCOLORDARK, BORDERCOLARLIGHT

TABLE Element Attributes (cont.)

TR: TABLE Row

BORDERCOLOR, BORDERCOLORDARK, BORDERCOLARLIGHT

Table Cells: TH and TD

Table Cells: TH and TD (cont.)

Potrebbero piacerti anche

HTML Required < > & "