html by nidhi

7/30/2019 HTML by Nidhi

http://slidepdf.com/reader/full/html-by-nidhi 1/43

1

Programming the Web:HTML Basics

Nidhi Arora



2

HTMLShort for H yper T ext M arkup L anguage, the language used to createdocuments on the World Wide Web.HTML was invented by Tim Berners-Lee while at CERN, the European

Laboratory for Particle Physics inGeneva.



3

HTML

HTML is a collection of styles (indicatedby markup tags ) that define the various

elements of a World Wide Webdocument.HTML document can be read anddisplayed 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 thatcontain 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 visualelements (words, paragraphs, lists, tables, images, etc.)

HTML defines the structure and layout of theelements on a Web page with a variety of tags.Each tag may have a set of attributes that modifythe appearance or layout of the visual elementcontained by the tag.



6

HTML tagsCase insensitiveUnrecognised tags are simply ignored by

browser!!

Container tags must be nested!!



Structure of HTML documentBasic structure:



BODY tag and attributesE.g., the BGCOLOUR attribute of BODYtag specifies the colour of the wholedocument.E.g., the TEXT attribute of BODY tag specifies the default colour of the text in

the whole document .<BODY BGCOLOUR = “yellow” TEXT =“purple”>



FontTo change text size<font size=“+3”>Hello</font>

Output: Hello

To change text color <font color=“red”>Hello</font> Output: Hello

Using both<font size=“+3” color=“red”>Hello</font>

Output: Hello

Tag attribute



HeadingsThere are 6 heading commands.

<H1>This is Heading 1</H1>








Formatting TextWhite spaces and blank lines are condensed toone 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 item2. Second item3. Third item

This is an unordered list:

• First item• Second item

• Third item



Commonly Used Character Entities

Result Description Entity NameNon-breaking space

< Less than <> Greater than >& Ampersand &“ Quotation mark "© Copyright ©



Add Hyperlink

14



Hyperlinks<A> … </A> is an anchor container tagHREF 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>

http://www.pws.com/aeonline.html

http://www.pws.com/aeonline.html


http://slidepdf.com/reader/full/html-by-nidhi 16/43© 2005 by Cong Chen

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 pageA marker is needed to identify where the sectionis. E.g. write <A NAME = “ section1 "></A> atthe 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<A HREF=“ page1.html/#section1 ”> jump from a different page </A>



Links to sections Links to different sections on the same HTMLpage

<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

<ahref="http://www.w3.org/MarkUp/#tutorials"> Tutorial Section on HTML home page </a>

Go to the place where it has the following on thewebpage

<a name="tutorials"> Tutorials </a>

http://localhost/var/www/apps/conversion/tmp/scratch_10/linkSection.html

http://localhost/var/www/apps/conversion/tmp/scratch_10/linkSection.html



Create LinksA Hypertext link

< a href=“http://www.iusb.edu”>IUSB Home</a> Output: IUSB Home

A Email link <a href=“mailto:[email protected]”> Email me</a>Output: Email me <A href=“ mailto:[email protected] ”>contact me</a>

<A href=“ mailto:[email protected] ?subject=topic”>contact me</a> <A href=“ mailto:[email protected] ?subject=production inf”>contactme</a><A href=“ mailto:[email protected] ?cc=p@najah,edu”>contact me</a> <A href=“ mailto:[email protected] [email protected]”>contact me</a> <A href=“ mailto:?body =Don’t forget also to send in your financialstatements as soon as possible.”>contact me</a>

http://www.iusb.edu/

mailto:[email protected]

















Add Image

19



Image Formats.gif

Graphics Interchange Format

.jpeg or .jpgJoint Photographic Experts Group

.bmp bitmap



Image SizeComputer images are made up of “pixels” <IMG HEIGHT=“100" WIDTH=“150"SRC="image.gif">

Width

Height



Inserting ImagePlace all images in the samedirectory/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”><imgsrc=“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="BT-

logo.gif" alt="Boot Camp Home Page"></a>

http://localhost/var/www/apps/conversion/tmp/scratch_10/images.html

http://localhost/var/www/apps/conversion/tmp/scratch_10/images.html



24

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, VSPACEUSEMAP = “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.

http://www.capcollege.bc.ca/

http://www.capcollege.bc.ca/



Tables

25



Table example 1Table tags

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

<td>Southwest</td><td>Southeast</td></tr>

</table>

Appears as

Northwest Northeast

Southwest Southeast



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 Another HeadingRow 1, cell 1 Row 1, cell 2

Row 2, cell 1



28

Tables formatIn 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>



29

More on TablesCommon <TABLE> attributes:

BORDER, CELLSPACING, CELLPADING,WIDTHe.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 cellALIGN, CHAR, VALIGN alignment within cellCOLSPAN, ROWSPAN to create “merged cells” e.g., <TD VALIGN=MIDDLE CHAR=“.”>



30

Using table to do complex layoutsSince a <TD> element may contain text, images,lists, links, etc., tables are often used to createcomplex page layouts! E.g. look at source for

Joseph’s home page. Need to get good at using COLSPAN andROWSPAN 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!



Forms

31



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

Text fieldsRadio buttonsCheckboxesSubmit buttons



Sample FormsState: <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 FieldsUsed when you want theuser to type letters,number, etc.<form>First name: <inputtype=" text "name="firstname">

<br>Last name: <inputtype=" text "name="lastname"></form>

First name:

Last name:

Output



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 ButtonWhen user clicks on the“Submit” button, thecontent of the form is

sent to another file.<form name="input"action="html_form_action.asp" method="get">Username: <inputtype="text"name="user"><br><input type=" submit "value="Submit">

</form>

Output

Username:



CheckboxesUsed when you want theuser to select one or moreoptions of a limitednumber 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 bikeI have a car



Radio ButtonsUsed when you want theuser to select one of alimited number of choices.<form><input type=" radio "name=“x“

value="male"> Male<br><input type=" radio "name="x"value="female"> Female</form>

Output

MaleFemale



Text Area BoxUsed when you want to getinput 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:



Pull-down MenuUsed when you want user to respond with onespecific answer withchoices you given.

<p>Select a fruit:</p><select name"Fruit"><option selected> Apples<option> Bananas

< option > Oranges</select>

• Output

Select a fruit:



42

Text fields <html><body>

<form> First name:<input type="text" name="firstname"><br>Last name:<input type="text" name="lastname">

</form>

</body></html>

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input



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

Password fields

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_inputpassword

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_inputpassword

html by nidhi

Documents