HTML. The WWW is built of web pages, those pages are created with HyperText Markup Language (HTML) HTML is not a programming language but a markup (formatting)

HTML

The WWW is built of web pages, those pages are created with HyperText Markup Language (HTML)

HTML is not a programming language but a markup (formatting) language.

You use HTML to mark up a text document, to indicate which format should be used when displaying the marked text

If you want text to appear on the Web page in bold characters, mark it up like this:

<b>this text appears bold</b>The <b> turns on bold characters. The </b> turns off bold characters (these tags don't actually appear on the screen)

Formatting + hyperlinking doesn’t give much power on its own..

Add-ons like Java and JavaScript, VBScript, CGI programming, cascading style sheets (CSS), ActiveX controls, Flash, PHP, etc.

-Client-side-Server-side

But, you can still get started in HTML page design by using nothing but a handful of basic HTML tags and a text editor

No matter what other add-ons you use, the final presentation layer is normally coded in HTML

<HTML>

<HEAD>

<TITLE>A Simple Sample HTML Document</TITLE>

</HEAD>

<BODY>

<H1>Welcome to the World of HTML</H1>

<HR>

HTML documents can be as simple as this Web page, which consists of just a single page of <B>text</B> and <I>links</I>, or as complex as a 10,000 page corporate intranet site replete with Java applets and CGI database access. <P>

Click <A HREF=“sample.htm">HERE</A> to reload this page!<P>

</BODY>

</HTML>

.html or .htm filename extension

2 main parts: head, body

Written using a text editor, or through an authoring tool such as Dreamweaver – will see in lab!

Elements within the head element do the following:

-Provide a title for the document

-Provide description and keywords for automated search engines

-Lay out the relationships between multiple documents

-Provide a method for sending special messages to a specific browser

<HTML>

<HEAD>

<TITLE>General Officers of the US Army in the Civil War</TITLE>

<META HTTP-EQUIV="EXPIRES" CONTENT="31 Dec 1997">

<META NAME="Last Modified" CONTENT="16 Dec 1996">

<META NAME="Keywords" CONTENT="Yankee, Grand Army of the Republic,War Between the States">

<META NAME="Description" CONTENT="A listing of the general officers of the US Army in the Civil WAR">

<META HTTP-EQUIV=refresh" CONTENT="60">

</HEAD>

Contains the actual content of the page

The BODY tag itself also has several useful attributes

The BODY tag also has useful ways of interacting with JavaScript (see later)

Colours are defined in HTML using a hexadecimal coding system.

The system is based upon the three components--Red, Green, and Blue

Each of the components is assigned a hexadecimal value between 00 and FF (0 and 255 in decimal numbers).

These three values are then concatenated into a single value that is preceded by a hash sign (#).

Some standard colour names are also provided…

-BLACK #000000-GREEN #008000-PURPLE #800080-WHITE #FFFFFF

<BODY BGCOLOR="#FFFFFF">

<BODY BGCOLOR="WHITE">

Line breaks (carriage returns) in the original HTML document are ignored by the viewer, which then reformats the text to fit the context. Multiple whitespace characters are also typically treated as a single space

Therefore, use tags to explicity give line breaks:<BR>

Extra spaces:

And paragraphs:<p>….</p>

Use the Heading container-tags <H1>..</H1> <H2>..</H2> etc.You can also specify fonts directly, e.g.

<font size=4 color=#900000 FACE="Verdana, Arial, Helvetica, Sans">

Using style sheets is generally preferred to manually coding the same fonts throughout a website

<HTML>

<HEAD>

<TITLE>Creating an HTML Document</TITLE>

</HEAD>

<BODY>

<H1>Level 1 Heading</H1>






</BODY>

</HTML>

The <HR> tag draws a horizontal rule

<HTML>

<HEAD>

<TITLE>Manned Space Craft</TITLE>

</HEAD>

<BODY>

<H1 ALIGN=CENTER>Manned Space Craft</H1>

<BR>

<H2 ALIGN=LEFT>Soviet</H2>

Vostok<BR>

Voskhod<BR>

Soyuz<BR>

<HR WIDTH=50% SIZE=6 ALIGN=LEFT COLOR=RED>

<H2 ALIGN=LEFT>American</H2>

Mercury<BR>

Gemini<BR>

Apollo<BR>

Shuttle<BR>

<HR WIDTH=50% SIZE=6 ALIGN=LEFT COLOR=NAVY>

</BODY>

</HTML>

The <HR> tag draws a horizontal rule

<HTML>

<HEAD>

<TITLE>Manned Space Craft</TITLE>

</HEAD>

<BODY>

<H1 ALIGN=CENTER>Manned Space Craft</H1>

<BR>

<H2 ALIGN=LEFT>Soviet</H2>

Vostok<BR>

Voskhod<BR>

Soyuz<BR>

<HR WIDTH=50% SIZE=6 ALIGN=LEFT COLOR=RED>

<H2 ALIGN=LEFT>American</H2>

Mercury<BR>

Gemini<BR>

Apollo<BR>

Shuttle<BR>

<HR WIDTH=50% SIZE=6 ALIGN=LEFT COLOR=NAVY>

</BODY>

</HTML>

This is in <B>bold</B> text.

This is in <I>italic</I> text.

This is in <TT>teletype</TT> text.

This text is <U>underlined</U>.

This is a <STRIKE>strikethough </STRIKE> example.

This is <BIG>big</BIG> text.

This is <SMALL>small</SMALL> text.

This is a <SUB>subscript</SUB>.

This is a <SUP>superscript</SUP>.

This tag displays images

<img src="smiley.gif" alt="Smiley face" height="42" width="42" />

Compressed file formats:-GIF: lossless, limited to 256 colours, simple transparency-JPG: lossy, plenty of colours, no transparency-PNG: lossless, plenty of colours, alpha transparency

Use the SRC attribute to specify the filename as a relative or absolute URL

Relative web addresses identify another web-page (or web resource) relative to the current one:

“page2.html”“foldername/page3.html”

Absolute web addresses identify another web resource using a globally-unique address:

“http://www.something.com/page4.html”

<HTML>

<HEAD><TITLE>Using the IMG tag's ALIGN attribute</TITLE></HEAD>

<BODY>

<P>

<IMG SRC="image.jpg" width="100" ALIGN="TOP" />

This text is aligned with the top of the image.

</P>

<P>

<IMG SRC="image.jpg" width="100" ALIGN="MIDDLE" />

This text is aligned with the middle of the image.

</P>

<P>

<IMG SRC="image.jpg" width="100" ALIGN="BOTTOM" />

This text is aligned with the bottom of the image.

</P>

</BODY>

</HTML>

An <IMG> tag can also take these attribute values, to perform text wrapping:

ALIGN = LEFTALIGN = RIGHT

WIDTH, HEIGHTSize to display image at (pixels)

ALTAlternative text to show in place of image

BORDERWidth of border added around image (pixels)

VSPACE, HSPACEAdd additional white space (pixels) around the image

A hyperlink consists of:

- An anchor (image or text)- A reference (URL) to link to. This can be relative or absolute

<A HREF="vero.html">Vogon Earth Reconnaissance Office</A>

<A HREF="whatsnew.htm"><IMG SRC="whatsnew.gif" BORDER=0></A>

There is also a special mailto: link:

<A HREF="mailto:[email protected]">Send me E-mail</A>

<HTML>

<HEAD>

<TITLE>Ordered List Example</TITLE>

</HEAD>

<BODY>

<OL>

<LI>Red</LI>

<LI>Orange</LI>

<LI>Yellow</LI>

<LI>Green</LI>

<LI>Blue</LI>

<LI>Indigo</LI>

<LI>Violet</LI>

</OL>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Ordered List Example</TITLE>

</HEAD>

<BODY>

<UL>

<LI>Red</LI>

<LI>Orange</LI>

<LI>Yellow</LI>

<LI>Green</LI>

<LI>Blue</LI>

<LI>Indigo</LI>

<LI>Violet</LI>

</UL>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Manual List Example</TITLE>

</HEAD>

<BODY>

<UL>

<IMG SRC="arrow.jpg" ALIGN=TOP>Red<BR>

<IMG SRC="arrow.jpg" ALIGN=TOP>Orange<BR>

<IMG SRC="arrow.jpg" ALIGN=TOP>Yellow<BR>

<IMG SRC="arrow.jpg" ALIGN=TOP>Green<BR>

<IMG SRC="arrow.jpg" ALIGN=TOP>Blue<BR>

<IMG SRC="arrow.jpg" ALIGN=TOP>Indigo<BR>

<IMG SRC="arrow.jpg" ALIGN=TOP>Violet<BR>

</UL>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Manual List Example</TITLE>

</HEAD>

<BODY>

<UL>

<IMG SRC="arrow.jpg" ALIGN=TOP>Red<BR>

<IMG SRC="arrow.jpg" ALIGN=TOP>Orange<BR>

<IMG SRC="arrow.jpg" ALIGN=TOP>Yellow<BR>

<IMG SRC="arrow.jpg" ALIGN=TOP>Green<BR>

<IMG SRC="arrow.jpg" ALIGN=TOP>Blue<BR>

<IMG SRC="arrow.jpg" ALIGN=TOP>Indigo<BR>

<IMG SRC="arrow.jpg" ALIGN=TOP>Violet<BR>

</UL>

</BODY>

</HTML>

Originally intended for displaying organised content

Commonly used now as a predictable (platform independent) way of formatting entire webpages

The <TABLE> element is the container for the table's data and layout.

HTML tables are composed row by row: you indicate a new row with the <TR> tag

You separate the data with either the <TD> (table data) tags. These define the actual cells of data!

<TABLE BORDER=1>

<TR>

<TD>Colours</TD>

<TD>Of</TD>

<TD>The Rainbow</TD>

</TR>

<TR>

<TD>Red</TD>

<TD>Orange</TD>

<TD>Yellow</TD>

</TR>

<TR>

<TD>Green</TD>

<TD>Blue</TD>

<TD>Violet</TD>

</TR>

</TABLE>

<HTML>

<HEAD>

<TITLE>Row and Column Spanning</TITLE>

</HEAD>

<BODY>

<TABLE BORDER>

<TR><TD COLSPAN=3 style="text-align:center;">DC nationals</TD><TR>

<TR><TD>Offense</TD><TD>Defense</TD><TD>Goalie</TD></TR>

<TR>

<TD>Husmann</TD><TD>O'Donnell</TD><TD ROWSPAN=5>Weinberg</TD>

</TR>

<TR>

<TD COLSPAN=2>Popplewell</TD>

</TR>

<TR>

</TABLE>

</BODY>

<HTML>

HTML. The WWW is built of web pages, those pages are created with HyperText Markup Language (HTML) HTML is not a programming language but a markup (formatting)

Documents

bold text

text document

single page of text

big text

text editorno

small text

italic text

teletype text