1 Programming the Web: HTML Basics Computing Capilano College

2 HTML Short for HyperText Markup Language, the language used to create documents on the World Wide Web. HTML was invented by Tim Berners- Lee while at CERN, the European Laboratory for Particle Physics in Geneva.

3 HTML HTML is a collection of styles (indicated by markup tags) that define the various elements of a World Wide Web document. HTML document can be read and displayed by many different browsers running on different types of computers – platform independent!

4 HTML: What do you need? Editor (Notepad) Browser to view results Place to put your web sit (store the files that contain the HTML code, images, music, etc.), preferably on the internet URL for your page (domain name, or folder within a domain)  if your page is on the Internet (Links to your page!)

5 HTML An Web page is best thought of as a set of visual elements (words, paragraphs, lists, tables, images, etc.) HTML defines the structure and layout of the elements on a Web page with a variety of tags. Each tag may have a set of attributes that modify the appearance or layout of the visual element contained by the tag.

6 HTML Tags Container Tags some text For example: some bold text some heading Empty Element Tags For example Comment Tag Use them document complicated layouts!

7 HTML tags Case insensitive Unrecognised tags are simply ignored by browser!! Container tags must be nested!!

8 Structure of HTML document Basic structure:

9 BODY tag and attributes E.g., the BGCOLOUR attribute of BODY tag specifies the colour of the whole document. E.g., the TEXT attribute of BODY tag specifies the default colour of the text in the whole document.

10 Headings and Paragraphs Supplies default formatting information: A Top-Level Heading 1 A paragraph of text A 6 th -level Heading Alignment Attribute: ALIGN = position (LEFT, CENTER, or RIGHT) A centred paragraph,, Special paragraph formatting tags

11 Text Formatting tags Always container tags!! Always use closing tag! Logical Styles:,  add emphasis to text,  increase or decrease text size,  subscript or superscript Physical styles:,,  Bold, Italics, and Underline text E.g.,

12 HTML Lists Ordered List list item A list item B Unordered List bulleted list item another list item

13 Hyperlinks … is an anchor container tag HREF is an attribute of the anchor tag AE Home Absolute (off-site) vs. Relative (within site) URL’s Naming locations within a document: Text to link to Linking to a named location within a document: Click here to go to Top. Go to Top of Home page

14 Multi-media: Images < IMG SRC = “cclogo.jpg” WIDTH = 300 HEIGHT=100 ALT=“Cap College logo” > Creating an image link: <IMG SRC = “cclogo.jpg WIDTH=150 HEIGHT=50 ALT = “Click here to go to Cap College” > Other IMG tag attributes: ALIGN, BORDER, HSPACE, VSPACE USEMAP = “map url”  creates a “hyperlink map” for image To including other Multi-media elements: just link to.wav,.mpeg,.mp3 files with an anchor tag.

15 HTML Tables In HTML, tables are described by a set of rows. Each row has a set of data, which form columns. Heading for first column Heading for second column Data for first column, row 1 Data for second column, row 1 …

16 More on Tables Common attributes: BORDER, CELLSPACING, CELLPADING, WIDTH e.g., Use BORDER = 0 for no border (e.g., fancy layouts) Common attributes (most apply to also): BGCOLOR  set the colour of the cell ALIGN, CHAR, VALIGN  alignment within cell COLSPAN, ROWSPAN  to create “merged cells” e.g.,

17 Using table to do complex layouts Since a element may contain text, images, lists, links, etc., tables are often used to create complex page layouts! E.g. look at source for Joseph’s home page. Need to get good at using COLSPAN and ROWSPAN attributes. Best to layout table on paper or using Word first, then jot down COLSPAN and ROWSPAN values for any “merged cells” – write down sequence of & tags required. Warning: if you don’t design complex tables first, you will get confused and frustrated – guaranteed!

18 More Info HTML guide in your text Web terms: HTML intro and tutorials: Official HTML tags: ary.html ary.html