Upload
sukh-sandhu
View
657
Download
2
Embed Size (px)
DESCRIPTION
This HTML Beginner Tutorial assumes that you have no previous knowledge of HTML or CSS. It should be quite easy to follow if you work through each step, which are all brought together at the end, before moving on to the CSS Beginner Tutorial.
Citation preview
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
» Clients and Servers
» Internet Service Providers
» Web Site Hosting Services
» Domains Names, URL’s and Ips
» Registrars
8
By Sukh Sandhu
By Sukh Sandhu
9
»Phone Company
»AOL
»Earthlink
»Verizone
»NetZero
»Basic internet connection
»Dialup/DSL/Cable/Sat
» Clients and Servers
» Internet Service Providers
» Web Site Hosting Services
» Domains Names, URL’s and Ips
» 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
» Clients and Servers
» Internet Service Providers
» Web Site Hosting Services
» Domains Names, URL’s and Ips
» 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
» Clients and Servers
» Internet Service Providers
» Web Site Hosting Services
» Domains Names, URL’s and Ips
» 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”>
<b>Sukh Sandhu</b><br>
71 Gentles Avenue<br>
Campbellfield, Victoria <br></font>
</body>
27
By Sukh Sandhu
header
<body>
<p align=‘center’> <font face=“Arial,Lucida Sans” color=“red” size=“3”>
<b>Sukh Sandhu</b><br>
71 Gentles Avenue<br>
Campbellfield, Victoria <br></font>
</p>
</body>
28
By Sukh Sandhu
header
<body>
<p align=‘center’>
<font face=“Arial,Lucida Sans” color=“red” size=“3”>
<b>Sukh Sandhu</b><br>
71 Gentles Avenue<br>
Campbellfield, Victoria <br></font>
</p>
<img src=‘http://photos.academia.edu/440204/141167/163626/large_sukh.sandhu.jpg’/>
</body>
29
By Sukh Sandhu
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
<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
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>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
This is a very cute dolphin on the left!<br>
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>
<TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR>
<TR><TD>Row3 Col1 Data</TD><TD>Row3 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">
<FRAME SRC="http://www.virginia.edu">
<FRAME SRC="http://www.virginia.edu">
</FRAMESET>
<FRAMESET COLS="*,*">
<FRAME SRC="http://www.virginia.edu">
<FRAME SRC="http://www.virginia.edu">
</FRAMESET>
</FRAMESET>
99
<FRAMESET ROWS="25%,75%"
<FRAMESET COLS="*,*,*">
<FRAME SRC="http://www.virginia.edu">
<FRAME SRC="http://www.virginia.edu">
<FRAME SRC="http://www.virginia.edu">
</FRAMESET>
<FRAMESET COLS="*,*">
<FRAME SRC="http://www.virginia.edu">
<FRAME SRC="http://www.virginia.edu">
</FRAMESET>
</FRAMESET>
10
0
<FRAMESET ROWS="*,*">
<FRAMESET COLS="15%, 2*, *">
<FRAME SRC="http://www.cs.virginia.edu/">
<FRAME SRC="http://www.cs.virginia.edu/">
<FRAME SRC="http://www.cs.virginia.edu/">
</FRAMESET>
<FRAMESET COLS="40%, *">
<FRAME SRC="http://www.cs.virginia.edu/">
<FRAME SRC="http://www.cs.virginia.edu/">
</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
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
Add some Link
Use <A href=filename|URL></a>tags
How to specify Relative pathnames
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
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
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
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