The HTML Beginner Tutorial

1

Contents

» Getting Started..

» What is HTML?

» How to create and View an HTML document?

» Basic HTML Document Format

» The HTML Basic tags

2

What the following term mean:

Web server: a system on the internet containg one or more web site

Web site: a collection of one or more web pages

Web pages: single disk file with a single file name

Home pages: first page in website

Think about the followings before working your Web pages.

Think about the sort of information(content) you want to put on the Web.

Set the goals for the Web site.

Organize your content into main topics.

Come up with a general structure for pages and

topics.

What is HTML?

Telling the browser what to do, and what props to use.

A serises of tags that are integrated into a text

document.

Tags are ;

surrounded with angle brackets like this

<B> or <I>.

Most tags come in pairs

exceptions: <P>, <br>, <li> tags …

The first tag turns the action on, and the second turns it

off.

4

By Sukh Sandhu

The second tag(off switch) starts with a forward slash.

For example ,<B> text </B>

can embedded, for instance, to do this: <HEAD><TITLE> Your text </HEAD></TITLE> it won't work.

The correct order is <HEAD><TITLE> Your text </TITLE></HEAD>

not case sensitivity.

Many tags have attributes. For example, <P ALIGN=CENTER> centers the paragraph following it.

Some browsers don't support the some tags and some

attributes.

5

» Clients and Servers

» Internet Service Providers

» Web Site Hosting Services

» Domains Names, URL’s and Ips

» Registrars

6

By Sukh Sandhu

By Sukh Sandhu

7

Clients (Browser) »Internet Explorer »Firefox »Mozilla »Netscape »Opera »Amaya »AOL »MSN

Servers »Apache »Microsoft »Netscape »zeus »AOLserver »AV »JavaWebServer »Oracle





» Registrars

8

By Sukh Sandhu

By Sukh Sandhu

9

»Phone Company

»AOL

»Earthlink

»Verizone

»NetZero

»Basic internet connection

»Dialup/DSL/Cable/Sat

»Email





» Registrars

10

By Sukh Sandhu

Computer (server) farm

Web server software

Firewall hardware and software

IT services ˃ (Backup, troubleshooting, hardware repair)

Disk space

Bandwidth / connection to internet

Routers and switchers

Email server / storage

11

By Sukh Sandhu





» Registrars

12

By Sukh Sandhu

» Domain name: The specific address of a computer on the Internet ˃ microsoft.com

» Uniform Resource Locator (URL): ˃ http://www.microsoft.com/faqs.html

» Internet protocol (IP) address ˃ 192.168.1.1

13

By Sukh Sandhu





» Registrars

14

By Sukh Sandhu

» A company that provides domain name registration services for a fee.

» Maintain database which maps domain names to IP’s

» Propagate new domain name/IP address information across the internet

15

By Sukh Sandhu

1. Choose a domain name

2. Register with a Registrar

3. Choose a hosting service

4. Tell Registrar the IP address

5. Create web content

6. Store (publish) onto hosting server (FTP)

7. Submit new site to search engines

16

By Sukh Sandhu

1. Visitor-centric, clear purpose 2. Progressive disclosure 3. Displays quickly 4. Browser compatible 5. Intuitive navigation 6. Spelling, grammar, writing 7. Secure (eCommerce) 8. Attractive design, easy to read 9. Cultural bias? (Regional? Domestic? International?) 10. No technical problems (broken links, buggy scripts) 11. Maintainable (separate content from style) 12. Search Engine Accessible

17

By Sukh Sandhu

» Markup Languages ˃ HTML, DHTML, XML, XSLT, etc....

» Cascading Style Sheets (CSS)

» Scripting languages ˃ perl,javascript,php, etc....

» Web creation and editing software ˃ Notepad, FrontPage, Coldfusion, Flash, Hotmetal, Site Builder, etc..

18

By Sukh Sandhu

Derived from SGML

(Standard Generalized Markup Language )

» HyperText Markup Language

19

By Sukh Sandhu

» Clear text, case insensitive

» Ignores white space

» Comprised of tags <tag />

» Open tags and closed tags

20

By Sukh Sandhu

Open tags ˃<name attributes/>

˃<hr/>, <br/>

˃<img src=“url” width=‘100px’ height=’60px’/>

Closed tags ˃<name attributes> stuff </name>

˃<b>text to be bolded</b>

˃<h1>level 1 heading text</h1>

Comments < ! - - comment text -- >

21

By Sukh Sandhu

22

By Sukh Sandhu

Header

Body

< / HTML>

< HTML >

<html>

<head> <title> The title of your html page </title>

<meta_tags/>

</head>

<body>

<! - - your web page content and markup - ->

</body>

</html>

23

By Sukh Sandhu

header

<body>

Hello world

</body>

24

By Sukh Sandhu

header

<body>

Sukh Sandhu

71 Gentles Avenue

Campbellfield, Victoria

</body>

25

By Sukh Sandhu

header

<body>

<b>Sukh Sandhu</b><br>

71 Gentles Avenue<br>

Campbellfield, Victoria <br>

</body>

26

By Sukh Sandhu

header

<body>

<font face=“Arial,Times,Courier” color=“red” size=“3”>



Campbellfield, Victoria <br></font>

</body>

27

By Sukh Sandhu

header

<body>

<p align=‘center’> <font face=“Arial,Lucida Sans” color=“red” size=“3”>




</p>

</body>

28

By Sukh Sandhu

header

<body>

<p align=‘center’>

<font face=“Arial,Lucida Sans” color=“red” size=“3”>




</p>

<img src=‘http://photos.academia.edu/440204/141167/163626/large_sukh.sandhu.jpg’/>

</body>

29

By Sukh Sandhu

http://photos.academia.edu/440204/141167/163626/large_sukh.sandhu.jpg


header

<body>

<p align=‘center’>

<font face=‘Arial,Lucida Sans’ color=‘red’ size=3>

<b>Mike Tyler</b><br>

PO Box 190387<br>

Hungry Horse, Mt 59919<br></font>

</p> src=‘http://photos.academia.edu/440204/141167/163626/large_sukh.sand

hu.jpg’/> <a href=‘http://www.sukh.co’>Read my Bio</a>

</body>

30

By Sukh Sandhu



ANCHORS (Hypertext Link)

<A href=“url” attributes>Displayed text </A>

Attributes

» NAME = “text”

» TITLE = "text"

» TARGET = “frame_name|window_name”

31

By Sukh Sandhu

32

By Sukh Sandhu

Click this link

opens mywebpage.h

tml in the window / f

rame named “windo

w2”

<a href=“mywebpage.html” target=“window2” >Click this link </a>

window2

<BODY LINK=color, VLINK=color, ALINK=color >

<BODY LINK=“blue”, VLINK=“purple”, ALINK=“red” >

<BODY LINK=“#0000FF”, VLINK=“#FF00FF”, ALINK=“#FF0000” >

33

By Sukh Sandhu

» Cathode Ray Tubes (CRT)

34

By Sukh Sandhu

color = “red” (Browser compatibility issues)

color = “#FF0000”

values vary from 00 to FF (hexadecimal)

0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

35

By Sukh Sandhu

Red

Green

Blue

#FF FF FF

Renders text as a heading, the rendering depending on the level of heading selected. Headings should be automatically spaced from the body text.

<h1>Heading 1 level text</h1> <h2>Heading 2 level text</h2> <h3>Heading 3 level text</h3> <h4>Heading 4 level text</h4> <h5>Heading 5 level text</h5> <h6>Heading 6 level text</h6>

36

By Sukh Sandhu

By Sukh Sandhu

37

Unordered list <ul> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberries</li> </ul>

Ordered list <ol type=‘i’ start=‘2’> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberries</li> </ol>

By Sukh Sandhu

38

Unordered list

»apples

»bananas

»grapes

»strawberries

Ordered list

II. apples

III. bananas

IV. grapes

V. strawberries

<TABLE> <CAPTION ALIGN="bottom">Class Grades</CAPTION> <TR> <TH>Student</TH> <TH>Grade</TH> </TR> <TR> <TD>Tom</TD> <TD>B+</TD> </TR> <TR> <TD>Sue</TD> <TD>A-</TD> </TR>

</TABLE> 39

By Sukh Sandhu

40

By Sukh Sandhu

BORDER=value

ALIGN=left|right|center

CELLSPACING=value

CELLPADDING=value

WIDTH=value|percent

41

By Sukh Sandhu

<TABLE BORDER=1 WIDTH=“50%" CELLPADDING=“6” CELLSPACING=“2” ALIGN="RIGHT">

<CAPTION ALIGN="bottom">Class Grades</CAPTION> <TR> <TH>Student</TH> <TH>Grade</TH> </TR> <TR> <TD>Tom</TD> <TD>B+</TD> </TR> <TR> <TD>Sue</TD> <TD>A-</TD> </TR>

</TABLE> 42

By Sukh Sandhu

Student Grade

Tom B-

Sue A+

By Sukh Sandhu 43

Class Grade

s

rowspan and colspan

By Sukh Sandhu 44

<TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 ALIGN="center"> <TR> <TD colspan=2 align='center'> <font color="red"><b>Student Grades</b></font> </TD> </TR> <TR> <TD><b>Student</b></TD> <TD><b>Grade</b></TD> </TR> <TR> <TD>Tom</TD> <TD rowspan=2>A</TD> </TR> <TR> <TD>Sue</TD> </TR> </TABLE> 45

By Sukh Sandhu

Student Grades

Student Grade

Tom

A Sue

By Sukh Sandhu 46

47

By Sukh Sandhu

1280 x 1024

1024 x 768

800 x 600

640 x 480

»Tables are frequently used to layout the basic web page design.

By Sukh Sandhu 48 64

0

1280

» Basic Frames

» Floating Frames (inline frames)

» Picture in picture

» Frames let you divide a screen into windows with each window viewing a different web page.

49

By Sukh Sandhu

Banner

Menu

Content

Footer

By Sukh Sandhu 50

Basic tags <frameset> ..</frameset> <frame /> <noframes> .. </noframes> Basic attributes cols = “values” rows = “values” name = “frame_name” src = “frame_source(url)” target = “frame_name”

51

By Sukh Sandhu

Banner

Menu

Content

Footer

By Sukh Sandhu 52

<frameset rows=“80,*,80”>

<frame src=“banner.html” />

<frameset cols = “25%,75%” >

<frame src=“menu.html” />

<frame src=“content.html” />

</frameset>

<frame src=“footer.html” />

</frameset>

53

By Sukh Sandhu

<frameset rows=“80,*,80”> <frame src=“banner.html” /> <frameset cols = “25%,75%” > <frame src=“menu.html” /> <frame src=“content.html” /> </frameset> <frame src=“footer.html” /> <noframes> <body> Welcome to my page. <A HREF="noframes.htm">Continue</A> to the frame-free version. </body> </noframes> </frameset> 54

By Sukh Sandhu

FRAMESET attributes

FRAMEBORDER="yes|no"|0

BORDER=pixels

BORDERCOLOR="#hexcolor|colorname"

< frameset rows="80,*,80" border=2 bordercolor=“red" >

..

..

</frameset>

55

By Sukh Sandhu

Individual FRAME attributes

» SCROLLING="yes|no|auto"

» NORESIZE

» MARGINWIDTH=pixels

» MARGINHEIGHT="pixels"

» BORDERCOLOR="color"

» FRAMESPACING="pixels"

» FRAMEBORDER="yes|no"|0

» NAME=“frame_name”

56

By Sukh Sandhu

» Floating frames allow you to create a frame within the boundaries of a page

57

By Sukh Sandhu

Basic Frames Floating Frames

<IFRAME attributes ></IFRAME>

Attributes

SRC=URL

HEIGHT=pixels|percent,

WIDTH=pixels|percent

HSPACE=pixels

VSPACE=pixels

ALIGN=left|right

FRAMEBORDER=0

58

By Sukh Sandhu

<IFRAME NAME=“frame_name”

ALIGN="right"

HSPACE=“40”

VSPACE=“40”

WIDTH="75%"

HEIGHT=“150”

FRAMEBORDER=0

SRC=http://www.mysite/mypage.htm >

</IFRAME>

59

By Sukh Sandhu

http://www.mysite/mypage.htm

<a href=“page.html” target=“blank” >Click this link </a>

˃Creates new window for the page

<a href=“page.html” target=“parent” >Click this link </a>

˃Opens page in the parent frame/wind of this frame/window

<a href=“page.html” target=“top” >Click this link </a>

˃Opens page in top most frame/window

60

By Sukh Sandhu

» Allows you create a position-able block of content.

61

By Sukh Sandhu

Content

positioned

within this

block

<div attributes> content </div>

attributes

» ID=“name”

» STYLE = “style parameters re: CSS”

62

By Sukh Sandhu

< DIV ID=“fred” STYLE = “POSITION:absolute|relative;

VISIBILITY:visible:hidden;

Z-INDEX:number;

WIDTH:width in pixels;

HEIGHT:height in pixels;

TOP:pixels from top of page or block;

LEFT:pixels from left edge of page or block;

PADDING:margin in pixels;

other style attributes; “ >

content

</DIV> 63

By Sukh Sandhu

64

By Sukh Sandhu

contentc content

content

content

content content

content

<div style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#ffffff; ">

65

By Sukh Sandhu

66

<HTML>

<HEAD>

<TITLE> Qi’s web! </TITLE>

</HEAD>

<BODY>

<H1> Hello World </H1>

<! Rest of page goes here. This is a comment. >

</BODY>

</HTML>

<BODY attributename="attributevalue">

» Deprecated attributes (but still used) ˃ BACKGROUND=“Sunset.jpg” (can be tiled)

˃ BGCOLOR=color

˃ TEXT=color

˃ LINK=color (unvisited links)

˃ VLINK=color (visited links)

˃ ALINK=color (when selected)

67

68

<H1 ...> text </H1> -- largest of the six

<H2 ...> text </H2>

<H3 ...> text </H3>

<H4 ...> text </H4>

<H5 ...> text </H5>

<H6 ...> text </H6> -- smallest of the six

ALIGN="position" --left (default), center or right

69

<HTML>

<HEAD>

<TITLE>Document Headings</TITLE>

</HEAD>

<BODY>

Samples of the six heading types:

<H1>Level-1 (H1)</H1>

<H2 ALIGN="center">Level-2 (H2)</H2>

<H3><U>Level-3 (H3)</U></H3>

<H4 ALIGN="right">Level-4 (H4)</H4>

<H5>Level-5 (H5)</H5>

<H6>Level-6 (H6)</H6>

</BODY>

</HTML>

» <P> defines a paragraph

» Add ALIGN="position" (left, center, right)

» Multiple <P>'s do not create blank lines

» Use <BR> for blank line

» Fully-specified text uses <P> and </P>

» But </P> is optional

70

71

<BODY>

<P>Here is some text </P>

<P ALIGN="center"> Centered text </P>

<P><P><P>

<P ALIGN="right"> Right-justified text

<! Note: no closing /P tag is not a problem>

</BODY>

72

<PRE>

if (a < b) {

a++;

b = c * d;

}

else {

a--;

b = (b-1)/2;

}

</PRE>

73

Character Use

< <

> >

& &

" "

Space

» Values for BGCOLOR and COLOR ˃ many are predefined (red, blue, green, ...)

˃ all colors can be specified as a six character hexadecimal value: RRGGBB

˃ FF0000 – red

˃ 888888 – gray

˃ 004400 – dark green

˃ FFFF00 – yellow

74

75

<FONT COLOR="red" SIZE="2" FACE="Times Roman">

This is the text of line one </FONT>

<FONT COLOR="green" SIZE="4" FACE="Arial">

Line two contains this text </FONT>

<FONT COLOR="blue" SIZE="6" FACE="Courier"

The third line has this additional text </FONT>

Note: <FONT> is now deprecated in favor of CSS.

76

<OL TYPE="1">

<LI> Item one </LI>

<LI> Item two </LI>

<OL TYPE="I" >

<LI> Sublist item one </LI>

<LI> Sublist item two </LI>

<OL TYPE="i">

<LI> Sub-sublist item one </LI>

<LI> Sub-sublist item two </LI>

</OL>

</OL>

</OL>

77

<UL TYPE="disc">

<LI> One </LI>

<LI> Two </LI>

<UL TYPE="circle">

<LI> Three </LI>

<LI> Four </LI>

<UL TYPE="square">

<LI> Five </LI>

<LI> Six </LI>

</UL>

</UL>

</UL>

78

<H1>Physical Character Styles</H1>

<B>Bold</B><BR>

<I>Italic</I><BR>

<TT>Teletype (Monospaced)</TT><BR>

<U>Underlined</U><BR>

Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>

Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR>

<SMALL>Smaller</SMALL><BR>

<BIG>Bigger</BIG><BR>

<STRIKE>Strike Through</STRIKE><BR>

<B><I>Bold Italic</I></B><BR>

<BIG><TT>Big Monospaced</TT></BIG><BR>

<SMALL><I>Small Italic</I></SMALL><BR>

<FONT COLOR="GRAY">Gray</FONT><BR>

<DEL>Delete</DEL><BR>

<INS>Insert</INS><BR>

79

<H1>Logical Character Styles</H1>

<EM>Emphasized</EM><BR>

<STRONG>Strongly Emphasized</STRONG><BR>

<CODE>Code</CODE><BR>

<SAMP>Sample Output</SAMP><BR>

<KBD>Keyboard Text</KBD><BR>

<DFN>Definition</DFN><BR>

<VAR>Variable</VAR><BR>

<CITE>Citation</CITE><BR>

<EM><CODE>Emphasized Code</CODE></EM><BR>

<FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR>

<ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM>

80

Link to an absolute URL:

If you get spam, contact <A HREF="htttp:www.microsoft.com">

Microsoft </A> to report the problem.

Link to a relative URL:

See these <A HREF="#references"> references </A>

concerning our fine products.

Link to a section within a URL:

Amazon provided a <A HREF="www.amazon.com/#reference">

reference for our company. </A>

81

<H2> <A NAME="#references"> Our References </A> </H2>

Example

http://www.people.virginia.edu/~qw2d/AOE/Example1reference.html

82

<BODY>

<H3>Welcome to <A HREF="http://www.cs.virginia.edu">

<STRONG>Computer Science</STRONG></A>

at the <A HREF="www.virginia.edu">University of Virginia.</A>

</H3>

</BODY>

» SRC is required

» WIDTH, HEIGHT may be in units of pixels or percentage of page or frame ˃ WIDTH="357"

˃ HEIGHT="50%"

» Images scale to fit the space allowed

83

84

Align=position Image/Text Placement

Left Image on left edge; text flows to right of image

Right Image on right edge; text flows to left

Top Image is left; words align with top of image

Bottom Image is left; words align with bottom of image

Middle Words align with middle of image

85

<BODY>

<img src="dolphin.jpg" align="left" width="150" height="15

0" alt="dolphin jump!">

This is a very cute dolphin on the left!<br>










You can see text wrap around it<br>

</BODY>

</HTML>

86

87

88

89

<TABLE> table tag

<CAPTION> optional table title

<TR> table row

<TH> table column header

<TD> table data element

90

<TABLE BORDER=1>

<CAPTION>Table Caption</CAPTION>

<TR><TH>Heading1</TH> <TH>Heading2</TH></TR>

<TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR>



</TABLE>

» ALIGN=position -- left, center, right for table

» BORDER=number -- width in pixels of border (including any cell spacing, default 0)

» CELLSPACING=number -- spacing in pixels between cells, default about 3

» CELLPADDING=number -- space in pixels between cell border and table element, default about 1

» WIDTH=number[%]-- width in pixels or percentage of page/frame width

91

» cellspacing=10

» cellpadding=10

92

93

BGCOLOR=color -- background color of table, also valid

for <TR>, <TH>, and <TD>

RULES=value -- which internal lines are shown; values are

none, rows, cols, and all (default)

EX: <TABLE COLS=“40%, *,*”>

<TABLE ROWS=“*,*”>

94

Valid for the table row:

ALIGN -- left, center, right

VALIGN -- top, middle, bottom

BGCOLOR -- background color

<TABLE ALIGN="center" WIDTH="300" HEIGHT="200">

<TR ALIGN="left" VALIGN="top" BGCOLOR="red"><TD>One</TD><TD>Two</TD>

<TR ALIGN="center" VALIGN="middle" BGCOLOR="lightblue"><TD>Three</TD><TD>Four</TD>

<TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD>

</TABLE>

95

Valid for the table cell:

colspan -- how many columns this cell occupies

rowspan – how many rows this cell occupies

<TABLE ALIGN="center" WIDTH="300" HEIGHT="200" border="1">

<TR>

<TD colspan="1" rowspan="2">a</TD>

<TD colspan="1" rowspan="1">b</TD>

</TR>

<TR>

<TD colspan="1" rowspan="1">c</TD>

</TR>

</TABLE>

» Frames help control navigation and display

» <FRAME> attributes include ˃ FRAMEBORDER – yes or 1 for borders

˃ FRAMESPACING – width of border

˃ BORDERCOLOR – color

˃ SRC – location of HTML to display in frame

˃ NAME – destination for TARGET attribute

96

˃ MARGINWIDTH – left/right margins

˃ MARGINHEIGHT – top/bottom margins

˃ SCROLLING – yes or 1 adds scroll bar

˃ NORESIZE – yes or 1 disables resizing

97

98

<FRAMESET ROWS="75%,25%">

<FRAMESET COLS="*,*,*">

<FRAME SRC="http://www.virginia.edu">



</FRAMESET>

<FRAMESET COLS="*,*">



</FRAMESET>

</FRAMESET>

99

<FRAMESET ROWS="25%,75%"

<FRAMESET COLS="*,*,*">




</FRAMESET>

<FRAMESET COLS="*,*">



</FRAMESET>

</FRAMESET>

10

0

<FRAMESET ROWS="*,*">

<FRAMESET COLS="15%, 2*, *">

<FRAME SRC="http://www.cs.virginia.edu/">



</FRAMESET>

<FRAMESET COLS="40%, *">



</FRAMESET>

</FRAMESET>

» A powerful way to specify styles and formatting across all documents in a web site

» Style sheets can be specified inline or as a separate document

» Helps to keep a common look and feel

10

1

» General form:

10

2

selector {property: value} or

selector {property1: value1;

property2: value2;

...

propertyn: valuen }

10

3

H1 {text-align: center;

color: blue;

font: Arial, Times New Roman}

P {text-align: left;

color: red;

font-family: Tahoma, Arial Narrow;

font-style: italics}

10

4

<HTML>

<HEAD>

<TITLE>New Advances in Physics</TITLE>

</HEAD>

<BODY>

<H1>New Advances in Physics</H1>

<H2>Turning Gold into Lead</H2>

In a startling breakthrough, scientist B.O. "Gus" Fizzics

has invented a <STRONG>practical</STRONG> technique for

transmutation! For more details, please see

<A HREF="give-us-your-gold.html">our transmutation thesis</A>.

...

</BODY>

</HTML>

From: Core Web Programming, Marty Hall and Larry Brown, © 2002

Styles enable you to define a consistent 'look' for

your documents by describing once how headings, paragraphs, quotes, etc. should be displayed.

Style sheet syntax is made up of three parts:

selector {property: value} selector = element.class

10

5

By Sukh Sandhu

H1 {text-align: center; color: blue}

A {color:green; font-familiy:arial,courier; font-weight:bold;}

td { align:center; background-color:grey; border-color:red;}

div {position:absolute; visibily:hidden; margin:10px }

font {color:navy; font-size:2pt; font-face:trebuchet; }

hr {color:#ff0000; width:80%; align:center; }

table {width:80%; align:center; border:2px; padding:5px; } 10

6

By Sukh Sandhu

H1 {text-align: center; color: blue}

H1.widget {text-align: center; color: red; font-size:80%; }

A {color:green; font-familiy:arial,courier; font-weight:bold;}

A.menu {color:cyan; font-familiy:arial,courier; font-style:italics;}

td { align:center; background-color:grey; border-color:red;}

td.figure { align:right; background-color:white; border-color:black;}

font {color:navy; font-size:2pt; font-face:trebuchet; }

font.fred {color:blue; font-size:2pt; font-face:trebuchet; font-weight:bold; }

element.class {property:value; }

10

7

By Sukh Sandhu

<head> <title> My Page Title </title> <style TYPE="text/css > <! - - element.class { property:value; } element.class { property:value; }

- - > </style>

</head>

10

8

By Sukh Sandhu

Styles can be defined in a separate file

<font style=“property:value; “> text </font>

<font class=“fred”> text </font>

mystyles.css

<head>

<LINK REL="stylesheet" HREF="mystyles.css“ TYPE="text/css">

</head>

10

9

By Sukh Sandhu

/* Example style sheet file (note how this comment was created) */

BODY {background: #FFFFD8; margin-top: 20}

A:link {color: #400080; background: #FFFFD8}

H1 {font-weight: bold; text-align: center; color: #006000; background: #FFFFD8; font-family: Gill Sans, Arial, sans-serif; }

font.caption {font-family: Gill Sans, Arial, sans-serif; font-style: italic; }

/* End of example style sheet file */

11

0

By Sukh Sandhu

Styles can be placed within individual elements

<font style=“color:red; font-face:ariel;” >

11

1

By Sukh Sandhu

Inline > Embedded > Linked

Defining the style of your text

» linked -> font-family:arial,georgia;

» embedded -> color:navy;

» inline -> font-size:2pt;

11

2

By Sukh Sandhu

Using IDs IDs enable you to define a unique style which you can apply to a number of

elements.

<STYLE> <!– #copyright {font-style:italic; font-size:smaller; } --> </STYLE> <p ID=“copyright”> Any textual content </p>

11

3

By Sukh Sandhu

<img src=“images/pic1.jpg” width=75px, height=50px />

<img class=“pics” src=“images/pic1.jpg” />

img.pics { width:75px; height:50px; border-width:3px }

11

4

By Sukh Sandhu

» Images take longer to download than text

» The larger the image, the slower the page

» Use optimization software

» Use thumb nail images

11

5

By Sukh Sandhu

Page background (not recommended) ˃<body background-image = “url” >

˃<body class=“background”> – body.background { background-image:$url; }

Table background ˃<table background-image=“url”>

˃<table class=“background”> – table.background { backlground-image:url; }

DIV background ˃<div style={ background-image:url; } >

11

6

By Sukh Sandhu

By Sukh Sandhu

11

7

»HTML Tutorials Learn HTML Learn XHTML Learn CSS Learn TCP/IP »Browser Scripting Learn JavaScript Learn DHTML Learn VBScript Learn HTML DOM Learn WMLScript »Server Scripting Learn SQL Learn ASP Learn ADO Learn PHP

»XML Tutorials Learn XML Learn XSL Learn XSLT Learn XSL-FO Learn XPath Learn XQuery Learn XLink Learn XPointer Learn DTD Learn Schema Learn XML DOM Learn XForms Learn SOAP Learn WSDL Learn RDF Learn RSS Learn WAP

.NET (dotnet) .NET Microsoft .NET ASP .NET Mobile

Multimedia Learn Media Learn SMIL Learn SVG Learn Flash

Web Building Web Building Web W3C Web Browsers Web Quality Web Semantic Web Careers Web Hosting Web Certification

Basic HTML Document Format

11

8

By Sukh Sandhu

<HTML>

<HEAD>

<TITLE>WENT'99</TITLE>

</HEAD>

<BODY>

Went'99

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>WENT'99</TITLE>

</HEAD>

<BODY>

Went'99

</BODY>

</HTML>

See what it

looks like:

How to Create and View an HTML document?

1.Use an text editor such as Editpad to write the

document.

2.Save the file as filename.html on a PC. This is called

the Document Source.

3.Open Netscape (or any browser) Off-Line

4.Switch to Netscape

5.Click on File, Open File and select the filename.html

document that you just created.

6.Your HTML page should now appear just like any

other Web page in Netscape.

11

9

By Sukh Sandhu

7.You may now switch back and forth between the

Source and the HTML Document switch to Notepad with the Document Source

make changes

save the document again

switch back to Netscape

click on RELOAD and view the new HTML Document

switch to Notepad with the Document Source......

12

0

By Sukh Sandhu

Tags in head

<HEAD>...</HEAD>-- contains information about the

document

<TITLE>...</TITLE>-- puts text on the browser's title

bar.

12

1

By Sukh Sandhu

Tags in Body

Let's talk Text Heading: <H1> </H1>

Center:<Center> </Center>

Line Break <P> ,<Br>

Phrase Markups: <I></I> ,<B></B>

Create a List Unordered list : <UL><li>

Ordered list: <OL><li>

Nested

12

2

By Sukh Sandhu

http://www.women.or.kr/skrhee/text.html

http://www.women.or.kr/skrhee

http://www.women.or.kr/skrhee/list.html

http://www.women.or.kr/skrhee/list.html

Add Images Use <IMG SRC=imagefilename> tags

How to specify Relative pathnames

Attributes of IMG tag

-width,height

-Alt

-Align

-<Img src=my.gif width=50 height=50 align=right

alt=“My image”>

12

3

By Sukh Sandhu

http://www.women.or.kr/skrhee/image.html

http://www.women.or.kr/skrhee/image.html

Add some Link

Use <A href=filename|URL></a>tags


Kinds of URLs -http://www.women.or.kr

- ftp://ftp.foo.com/home/foo

- gopher://gopher.myhost.com/

- news://news.nuri.net

- mailto:[email protected]

12

4

By Sukh Sandhu

http://www.women.or.kr/skrhee/link.html

http://www.women.or.kr/skrhee/background.html



How to make colors changes? Hexadecimal number :

Color names : <Font color=white>

Changing the Background color

<BODY BGCOLOR=#19378a>

Changing Text color

<BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66 VLINK=#66ffff>

Spot color

<FONT COLOR=#66ffcc>WENT'99</FONT>

Image Background

<BODY BACKGROUND=bgimg.gif >

12

5

By Sukh Sandhu


http://www.women.or.kr/skrhee/rgb.html

rgb.html

rgb.html

rgb.html

The current HTML document is my.html and the current directory is Iam

C:\- Iam -my.html

-your.html

Type this ; <A href=your.html>Your link </A>

C:\- Iam -my.html

Child -your.html

Type this ; <A href=Child/your.html>Your link </A>

C:\- Iam -my.html

Sister -your.html

Type this ; <A href=../Sister/your.html>Your link </A>

C:\- Mother -your.html

Iam -my.html

Type this ; <A href=../your.html>Your link </A> 12

6

By Sukh Sandhu


How to specify Relative pathnames The HTML document is my.html and the image file is dragonfly.gif

C:\- Iam -my.html ☞ Type this ; <IMG SRC=dragonfly.gif>

-dragonfly.gif

C:\- Iam -my.html ☞ Type this ; <IMG SRC=Image/dragonfly.gif>

Image

-dragonfly.gif

C:\- Iam -my.html ☞ Type this ; <IMG SRC=../Image/dragonfly.gif>

Image

-dragonfly.gif

C:\- Image -dragonfly.gif ☞ Type this ; <IMG SRC=../dragonfly.gif>

Iam

-my.html

By Sukh Sandhu

Education

The HTML Beginner Tutorial