1. HTML

2. 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)

3. 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

4. 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!

5. 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

6. 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)

7. 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

8. 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: ….

9. 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

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

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

12. 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.

13. 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

14. 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”

15. 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.

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

17. 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

18. 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 E-mail

19. Ordered List Example Red Orange Yellow Green Blue Indigo Violet

20. Ordered List Example Red Orange Yellow Green Blue Indigo Violet

21. Manual List Example Red Orange Yellow Green Blue Indigo Violet

22. Manual List Example Red Orange Yellow Green Blue Indigo Violet

23. 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!

24. Colours Of The Rainbow Red Orange Yellow Green Blue Violet

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