Programming The Web:: HTML Basics

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>
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 < > & " ©
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

Programming The Web:: HTML Basics

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Programming The Web:: HTML Basics

Uploaded by

Copyright:

Available Formats

Programming the Web:

HTML: What do you need?

Container tags must be nested!!

Structure of HTML document

BODY tag and attributes

Font To change text size

To change text color

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

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

There are 6 heading commands.

Formatting Text (contd.)

Commonly Used Character Entities

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

Linking to a named location within a document:

Link to a specific section

Link from a different page in the same directory

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

Links to different sections on the same HTML page

Links to sections on another HTML page

Graphics Interchange Format

Joint Photographic Experts Group

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

Turn an image into a hyerlink

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

Adding Images (Images as links)

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

2005 by Cong Chen

Creating an image link:

Other IMG tag attributes:

To including other Multi-media elements:

just link to .wav, .mpeg, .mp3 files with an anchor tag. 24

Common <TABLE> attributes:

Using table to do complex layouts

Text fields Radio buttons Checkboxes Submit buttons

Text Input Fields

First name: Last name:

Sample Forms (contd.)

Sample Forms (contd.)

Text Area Box Used when you want to get

Output Please provide your suggestion in the text box below:

Pull-down Menu Output

You might also like