Introduction to WWW
Download
Report
Transcript Introduction to WWW
Introduction to WWW
21:40
1
1.HTML - HyperText Markup
Language
• An HTML file consist of text, which is
displayed to the reader of your HTML
document, and tags, which tell the
browser how to format that text.
21:40
2
Example contents of an HTML file
<HTML>
<HEAD>
<TITLE> IT Fundamentals </TITLE>
</HEAD>
<BODY>
Everything you need to know about <B> IT Fundamentals </B> is on
the Web Page
</BODY>
</HTML>
21:40
3
2.REQUIREMENTS
• Writing Vehicle
– You will need a text editor to write the
HTML code.
– We will be using Notepad, which can be
found with the following selections.
• START->PROGRAM->ACCESSORIES->
NOTEPAD
21:40
4
2.REQUIREMENTS
• Browser
– You will need a browser to test the code to
see if your Web Page successful.
– We will be using either INTERNET
EXPLORER or NETSCAPE.
• Server
– You will need to be connected to a server to
test links to other sites and to make your
page visible to the world.
21:40
5
3. TAGS
• Tags tell the browser how to display the
information provided.
• Tags often (usually) come in pairs, a beginning
tag and an ending tag.
• Each tag is enclosed on the < and > symbols.
– Eg 1: <HTML>
</HTML>
• <HTML> indicates the beginning of an HTML file
• </HTML> indicates the end of an HTML file
– Eg 2: <B> This text will be bold </B>
• The / indicates the end of the tag.
• Tags are not case sensitive.
21:40
6
4. Basic HTML Document
Structure
• EXAMPLE1.HTML
– <HEAD> defines the HEAD section which
contains the pair of <TITLE> tags that
provide the title for the page.
– The entire contents of the web page will be
enclosed within the 2 <BODY> tags.
21:40
7
5. Some HTML Tags
• Used in the <BODY> section of the document.
–
–
–
–
–
–
–
–
–
21:40
<B>bold</B>
<I>italic</I>
<U>underline</U>
<CENTER> Center text horizontally </CENTER>
<EM> Emphasis </EM>
<STRONG> Strong emphasis </STRONG>
<BR>
Break to new line
<P> …. </P> Paragraph
<HR>
Horizontal line
8
5. Some HTML Tags
• Used in the <BODY> section of the
document.
– <PRE> preformatted text </PRE>
• White space is not ignored in the <PRE>
tag.
• Other markup tags can be embedded into
the preformatted text.
21:40
9
try to draw the following
web page
NAME
AGE
POSITION
Billy
30
CHF
Gary
35
Full Forward
Result: example1_1.htm
21:40
10
6. Heading Tags
• Produce 6 text sizes.
<H1>Largest Heading </H1>
<H6>Smallest Heading</H6>
• Example2.html
21:40
11
7. Font Size and colors
• Pages font size
– Include the following in the <HEAD>
section
<BASEFONT size = 7>
largest = 7
default = 3
– Example3.html
21:40
12
7. Font Size and colors
• Pages font color and background colors
– BGCOLOR=“yellow" TEXT="blue“
– This is included in the opening <BODY> tag.
– Example3_1.htm
• ie: <BODY> is replaced by
<BODY BGCOLOR = “blue” TEXT =“yellow”>
21:40
13
7. Font Size and colors
• To only change one words color or size
– <FONT COLOR = “red”>Geelong
</FONT>
– <FONT SIZE = 7>Go cats </FONT>
– <FONT FACE = “ARIAL”>China</FONT>
• Example4.html
21:40
14
Steps to Create a Web Page
(1) Get into Notepad;
(2) Type in the text;
(3) Save as filename.html;
(4) Get into Windows Explorer;
(5) double click on filename.html , enjoy your web
page;
(6) Go back to notepad – make changes, and Save;
(7) Refresh in Windows Explorer, enjoy your web
page;
(8) Repeat steps 6 and 7 to develop your web page.
21:40
15
Lab 3
• Creating your first webpage
– USE YOUR NAME AND EMAIL: NOT Melissa
Jiang’s
– Save the file as “NONAME1.html" in your hard
disk drive (eg, C:\homework).
• NO: YOUR STUDENT ID
• NAME: YOUR REAL NAME
– Click on My Computer on the desktop. Go to
C:\homework, double click on NONAME.html.
– Every time you make some changes in
tute1.html in Notepad, save the document, go to
Internet Explorer window and press REFRESH.
This will give you the updated version of your
21:40
16
web page.
Lab 3
• Change the font size for the document
to be 5 by using the BASEFONT tag in
the document header.
• Change the text and background colors
of the document to some colors of your
choice.
21:40
17
Lab 3
• Add the following lines of text to the
document body:
21:40
18
Lab 3
• Experiment by adding more text to your
document and trying out some of the physical
and logical appearance markup tags. eg. bold,
italic, strong etc.
<b> </b>, <i> </i>, <u> </u>, <br> </br>
<p> ,<hr> ,<em> </em>,<strong> </strong>
<cite> </cite>,<code> </code>
• Save the file, Keep it by yourself.
21:40
19