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: this text appears bold The turns on bold characters. The 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

A Simple Sample HTML Document Welcome to the World of HTML HTML documents can be as simple as this Web page, which consists of just a single page of text and links, or as complex as a 10,000 page corporate intranet site replete with Java applets and CGI database access. Click HERE to reload this page!.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 General Officers of the US Army in the Civil War

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# GREEN# PURPLE# WHITE#FFFFFF

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: Extra spaces: And paragraphs: ….

Use the Heading container-tags.... etc. You can also specify fonts directly, e.g. Using style sheets is generally preferred to manually coding the same fonts throughout a website Creating an HTML Document Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6 Heading

The tag draws a horizontal rule Manned Space Craft Manned Space Craft Soviet Vostok Voskhod Soyuz American Mercury Gemini Apollo Shuttle

The tag draws a horizontal rule Manned Space Craft Manned Space Craft Soviet Vostok Voskhod Soyuz American Mercury Gemini Apollo Shuttle

This is in bold text. This is in italic text. This is in teletype text. This text is underlined. This is a strikethough example. This is big text. This is small text. This is a subscript. This is a superscript.

This tag displays images 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: “

Using the IMG tag's ALIGN attribute This text is aligned with the top of the image. This text is aligned with the middle of the image. This text is aligned with the bottom of the image.

An tag can also take these attribute values, to perform text wrapping: ALIGN = LEFT ALIGN = RIGHT

WIDTH, HEIGHT Size to display image at (pixels) ALT Alternative text to show in place of image BORDER Width of border added around image (pixels) VSPACE, HSPACE Add 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 Vogon Earth Reconnaissance Office There is also a special mailto: link: Send me

Ordered List Example Red Orange Yellow Green Blue Indigo Violet

Ordered List Example Red Orange Yellow Green Blue Indigo Violet

Manual List Example Red Orange Yellow Green Blue Indigo Violet

Manual List Example Red Orange Yellow Green Blue Indigo Violet

Originally intended for displaying organised content Commonly used now as a predictable (platform independent) way of formatting entire webpages The 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 tag You separate the data with either the (table data) tags. These define the actual cells of data!

Colours Of The Rainbow Red Orange Yellow Green Blue Violet

Row and Column Spanning DC nationals Offense Defense Goalie Husmann O'Donnell Weinberg Popplewell