programming the web: html basics

1

Programming the Web:

HTML Basics

Computing Science @ 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

<Begin formatting>some text</End formatting> For example: <B>some bold text</B>

<H1>some heading </H1> Empty Element Tags

For example <HR> <BR> 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 .

<BODY BGCOLOUR = “yellow” TEXT = “purple”>

10

Headings and Paragraphs Supplies default formatting

information:<H1>A Top-Level Heading 1</H1> <P> A paragraph of text </P><H6>A 6th-level Heading</H6>

Alignment Attribute: ALIGN = position (LEFT, CENTER, or RIGHT) <P ALIGN = CENTER>A centred paragraph</P>

<BLOCKQUOTE>, <CAPTION>, <PRE> Special paragraph formatting tags

11

Text Formatting tags Always container tags!! Always use closing tag! Logical Styles:

<EM>, <STRONG> add emphasis to text <BIG>, <SMALL> increase or decrease text size <SUB>, <SUP> subscript or superscript

Physical styles: <B>, <I>, <U> Bold, Italics, and Underline text <FONT SIZE=# FACE= “name” COLOR=“colorName or

#rgb” > E.g., <FONT SIZE=+2 FACE = “arial” COLOR =

“darkblue”>

12

HTML Lists Ordered List

<OL TYPE = A> <LI>list item A<LI>list item B

</OL> Unordered List

<UL TYPE = SQUARE> <LI>bulleted list item<LI>another list item

</UL>

13

Hyperlinks <A> … </A> is an anchor container tag HREF is an attribute of the anchor tag <A HREF = “http://www.pws.com/aeonline.html”> AE Home </A>

Absolute (off-site) vs. Relative (within site) URL’s

Naming locations within a document: <A NAME=“top”>Text to link to</A>

Linking to a named location within a document: <A HREF=“#top”>Click here to go to Top.</A> <A HREF=“index.htm#top”>Go to Top of Home page</A>

14

Multi-media: Images < IMG SRC = “cclogo.jpg” WIDTH = 300 HEIGHT=100 ALT=“Cap College logo” > Creating an image link:

<A HREF=www.capcollege.bc.ca> <IMG SRC = “cclogo.jpg WIDTH=150 HEIGHT=50 ALT = “Click here to go to Cap College” > </A>

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.

<TABLE> <TR> <TH>Heading for first column <TH>Heading for second column </TR> <TR> <TD>Data for first column, row 1 <TD>Data for second column, row 1 </TR>

…</TABLE>

16

More on Tables Common <TABLE> attributes:

BORDER, CELLSPACING, CELLPADING, WIDTH

e.g., <TABLE BORDER=4, WIDTH=50%> Use BORDER = 0 for no border (e.g., fancy layouts)

Common <TD> attributes (most apply to <TR> also): BGCOLOR set the colour of the cell ALIGN, CHAR, VALIGN alignment within cell COLSPAN, ROWSPAN to create “merged cells” e.g., <TD VALIGN=MIDDLE CHAR=“.”>

17

Using table to do complex layouts Since a <TD> 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 <TR> & <TD> 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:

http://www.imaginarylandscape.com/helpweb/www/www.html

HTML intro and tutorials:http://www.w3schools.com/html/default.asp

Official HTML tags: http://www.w3.org/TR/html4/http://www.cwru.edu/help/webglossary.html

programming the web: html basics

Documents