You are on page 1of 43

Programming the Web:

HTML Basics

Nidhi Arora

HTML

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

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!

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

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.

HTML tags

Case insensitive
Unrecognised tags are simply ignored by browser!!

Container tags must be nested!!

Structure of HTML document

Basic structure:

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

Font To change text size

<font size=+3>Hello</font>
Output: Hello

Tag attribute

To change text color


<font color=red>Hello</font> Output: Hello

Using both

<font size=+3 color=red>Hello</font> Output: Hello

Headings

There are 6 heading commands.


<H1>This is Heading 1</H1>
<H2>This is Heading 2</H2>
<H3>This is Heading 3</H3>
<H4>This is Heading 4</H4>
<H5>This is Heading 5</H5>
<H6>This is Heading 6</H6>

Formatting Text

White spaces and blank lines are condensed to one space! Use <BR> for line breaks and <p> for new paragraphs <b>text to be displayed in bold</b> <i>text to be displayed in italics</i> <u>text to be displayed underlined</u> <hr> - draws a horizontal line <center>these will be aligned to the center </center>

Formatting Text (contd.)


Tags for lists
This is an ordered list: <ol> <li>First item <li>Second item <li>Third item </ol> This is an unordered list: <ul> <li>First item <li>Second item <li>Third item </ul>

Appears as
This is an ordered list: 1. First item 2. Second item 3. Third item This is an unordered list: First item Second item Third item

Commonly Used Character Entities


Result < > & Description Non-breaking space Less than Greater than Ampersand Quotation mark Copyright Entity Name &nbsp; &lt; &gt; &amp; &quot; &copy;

Add Hyperlink

14

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) URLs Naming locations within a document:

<A NAME=top>Text to link to</A> <A HREF=#top>Click here to go to Top.</A>


<A HREF=index.htm#top>Go to Top of Home page</A>

Linking to a named location within a document:

15

Link to a specific section

Normally an HTML file opens at the top of the page, yet sometimes users want to reach a specific section further down the page A marker is needed to identify where the section is. E.g. write <A NAME = section1"></A> at the specific section in page 1. Link from the same page
<A HREF = "#section1">jump from same page</A>

Link from a different page in the same directory


2005 by Cong Chen

<A HREF=page1.html/#section1>jump from a different page</A>

Links to sections

Links to different sections on the same HTML page


<a href="#topic1">Topic I</a> Go to the place where it has the following code <a name="topic1">Topic I: Basics of HTML</a>

Links to sections on another HTML page


<a href="http://www.w3.org/MarkUp/#tutorials">Tutori al Section on HTML home page</a> Go to the place where it has the following on the webpage <a name="tutorials">Tutorials</a> 2005 by Cong Chen

Create Links

A Hypertext link
< a href=http://www.iusb.edu>IUSB Home</a> Output: IUSB Home A Email link <a href=mailto:vkwong@iusb.edu> Email me</a> Output: Email me <A href=mailto:x@yahoo.com>contact me</a> <A href=mailto:x@yahoo.com?subject=topic>contact me</a> <A href=mailto:x@yahoo.com?subject=production inf>contact me</a> <A href=mailto:x@yahoo.com?cc=p@najah,edu>contact me</a> <A href=mailto:x@yahoo.com?bc=p@najah.edu>contact me</a> <A href=mailto:?body=Dont forget also to send in your financial statements as soon as possible.>contact me</a>

Add Image

19

Image Formats

.gif

Graphics Interchange Format

.jpeg or .jpg

Joint Photographic Experts Group


bitmap

.bmp

Image Size

Computer images are made up of pixels <IMG HEIGHT=100" WIDTH=150" SRC="image.gif">


Height Width

Inserting Image

Place all images in the same directory/folder where you web pages are <img src> is a single tag <img src=image.gif>

Output:

Turn an image into a hyerlink

<a href=http://www.iusb.edu><img src=image.gif></a> Output:

Adding Images (Images as links)


Resized Local Image file
<img src="BT-logo.gif" width="200" height="150" alt="210 Boot Camp">

Turn an Image to a Web Link (Add Image to a Web Link)


<a href="http://db.ist.psu.edu/~cchen"><img src="BTlogo.gif" alt="Boot Camp Home Page"></a>

2005 by Cong Chen

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

Tables

25

Table example 1
Table tags

Appears as
Northwest Northeast Southwest Southeast

<table border> <tr> <td>Northwest</td> <td>Northeast</td> </tr> <tr> <td>Southwest</td> <td>Southeast</td> </tr> </table>

Table example 2
<table border=1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table>

Heading
Row 1, cell 1 Row 2, cell 1

Another Heading
Row 1, cell 2

Tables format

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>

28

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

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 Josephs 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 dont design complex tables first, you will get confused and frustrated guaranteed! 30

Forms

31

Forms

A form is an area that can contain form elements. <form></form> Commonly used form elements includes:

Text fields Radio buttons Checkboxes Submit buttons

Sample Forms
State: <input type=text name="state" value="CA" size=2 maxlength=2> Password: <input type=password name="password"> <input type=checkbox name="moreinfo" value="yes" checked>Send me more info.

Text Input Fields

Used when you want the user to type letters, number, etc. <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>

Output

First name: Last name:

Sample Forms (contd.)


Select your gender below: <br><input type=radio name="gender" value="F">Female <br><input type=radio name="gender" value="M">Male <br><input type=radio name="gender" value="O">Other <input type=submit value=" OK, let 'er rip! "> <input type=reset value=" Whoops-- erase that ">

Sample Forms (contd.)


Choose your favorite color: <select name="favecolor"> <option>green <option>aquamarine <option selected>emerald <option>turquoise <option>aqua <option value="green2">green <option value="green3">green </select>

Submission Button

When user clicks on the Submit button, the content of the form is sent to another file. <form name="input" action="html_form_actio n.asp" method="get"> Username: <input type="text" name="user"> <br> <input type="submit" value="Submit"> </form>

Output
Username:

Checkboxes

Used when you want the user to select one or more options of a limited number of choices. <form> <input type="checkbox" name="bike value=bike> I have a bike <br> <input type="checkbox" name="car value=car> I have a car

Output
I have a bike I have a car

Radio Buttons

Used when you want the user to select one of a limited number of choices. <form> <input type="radio" name=x value="male"> Male <br> <input type="radio" name="x" value="female"> Female </form>

Output
Male Female

Text Area Box Used when you want to get


input from user. <form> <p>Please provide your suggestion in the text box below:</p> <textarea row=10 cols=30> </textarea> </form>

Output Please provide your suggestion in the text box below:

Used when you want user to respond with one specific answer with choices you given. <p>Select a fruit:</p> <select name"Fruit"> <option selected> Apples <option> Bananas < option > Oranges </select>

Pull-down Menu Output


Select a fruit:

Text fields
<html> <body> <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> </body> </html>

42

Password fields
<html> <body> <form> Username: <input type="text" name="user"> <br> Password: <input type="password" name="password"> </form>

<p>
Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters. </p> </body> </html>

43