resource material 1

Download Report

Transcript resource material 1 

1





Create a basic webpage
Structure the content on your webpage
Apply styles to the page elements
Create, modify, and format a table
Link webpages
2




WWW -- a software infrastructure layered on
top of the Internet
HTTP -- HyperText Transport Protocol,
layered on top of TCP
HTTPS -- secure HTTP using encryption
HTML -- HyperText Markup Language,
version 4.01 is current
3
World Wide Web(www) or simply the web is a part of the internet that
stores and connects an indescribably large quantity of hypertext
multimedia document called web pages. Using an application called the
web browser, you can access, view and interact with the content on
these web pages.
Process of Retrieving Web Pages
When you Enter an address in the address bar of your browser, your
computer makes a request to a remote computer. This request is called
an http request. The remote computer that stores and processes the
web pages is called a webserver.
The webserver receives the HTTP request from your browser; process any
scripts that may be found within the requested file and then sends the
file encoded with a markup language to your browser
The browser then displays what it interprets on your computer screen.
Markup Language
A markup language is a set of symbols that allow you to render text,
graphics, animation etc on your browser. The symbols usually known as
tags are separated from the content by their surrounding angular
brackets. Eg HTML,XHTML,XMLS,GML
SGML
Standard Generalize Markup Language is
use to define HTML
HTML
Hypertext is use because it enables
navigation from one webpage to the
other using links
XML
Extensible Markup Language
XHTML
Is the combination of XML and HTML
Element
Element are a set of instruction that describe the structure and content of a web page. Element
can either be empty(<br/>, <hr/>) or container element(<h1> hello</h1>.
Attributes
Is the part of XHTML that modifies the characteristics of that element. Its always included in the
opening tag of a container element eg <h1 align=“center”>hello</h1>
The Global Structure

DTD(Document Type Definition) is used to determine the element and attribute allowed in an
XHTML document.

Namespace use to inform the browser about the language used

<head></head> it contains information such as title of the webpage, character set and the
style sheet of the document.

<title></title> the title of the page

<body></body>consist of the element to be displayed on the webpage

<p></p> a paragraph containing some text to be displayed.

</html> the closing HTML tag
Types of DTD

XHTML 1.0 Strict

XHTML 1.0 Transitional eg <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

XHTML 1.0 Frameset
Tags are indicators used to identify the type of
a particular content.
The general syntax of an element containing
tags is <tag>content</tag>.
In case of an empty element, it is <tag/>
6
Difference Between XHTML and HTML
XHTML
HTML
The doctype is required
Not required
All tags and attribute must be written in
lowercase
Not necessary
All element must be properly closed
Not necessary
Attributes must always be quoted
Not necessary
All the element must be properly nested
Not necessary
Comments
They are use to describe code segment in an XHTML document <!-- content -->
Images
They can be use to display company logo, as list or as a bullets of
list. Image type used in web design are jpeg, jpg, png, gif
<HTML>
<HEAD>
<TITLE> Qi’s web! </TITLE>
</HEAD>
<BODY>
<H1> Hello World </H1>
<! Rest of page goes here. This is a comment. >
</BODY>
</HTML>
8
<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)
9
<H1
<H2
<H3
<H4
<H5
<H6
...>
...>
...>
...>
...>
...>
text
text
text
text
text
text
</H1> -- largest of the six
</H2>
</H3>
</H4>
</H5>
</H6> -- smallest of the six
ALIGN="position" --left (default), center or right
10
<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>
11






<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
12
<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>
13
<PRE>
if (a < b) {
a++;
b = c * d;
}
else {
a--;
b = (b-1)/2;
}
</PRE>
14
Character
Use
<
&lt;
>
&gt;
&
&amp;
"
&quot;
Space
&nbsp;
15

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
16
<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.
17
HORIZONTAL RULE
This is a long line or bar used to visually divide sections of a
webpage
18
<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>
19
<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>
20
<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>
21
<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>
22
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>
23
<H2> <A NAME="#references"> Our References </A> </H2>
Example
24
<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>
25


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
26
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
27
<BODY>
<img src="dolphin.jpg" align="left" width="150" height="150"
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>
28
29
30
31
<TABLE>
<CAPTION>
<TR>
<TH>
<TD>
table tag
optional table title
table row
table column header
table data element
32
<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>
33





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
34

cellspacing=10

cellpadding=10
35
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=“*,*”>
36
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>
37
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>
38


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
39
◦
◦
◦
◦
MARGINWIDTH – left/right margins
MARGINHEIGHT – top/bottom margins
SCROLLING – yes or 1 adds scroll bar
NORESIZE – yes or 1 disables resizing
40
<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>
41
<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>
42
<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>
43



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
44
To send email, you use the A tag with href
attribute value equals to mailto:
<a
href="mailto:[email protected]">email
</a>

45
To create a web page that contain a media
objects you can use the embed or object tag
Example
<object data="images/return of jenifa.mp4"
width="320" height="320" >

<embed src="images/return of jenifa.mp4"
height="300" width="200"
autostart="false"></embed>
46

General form:
selector {property: value} or
selector {property1: value1;
property2: value2;
...
propertyn: valuen }
47
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}
48
<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>
New Horizons , © 2002
49