Week 2 - Intro To HTML

Introduction to HTML
1999 Asian Women's Network 1

Training Workshop
Contents
• Getting Started..
• What is HTML?
• How to create and View an HTML document?
• Basic HTML Document Format
• The HTML Basic tags

Training Workshop
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
 or .
 Most tags come in pairs
 exceptions: , , <li> tags …
 The first tag turns the action on, and the second turns it
off.

Training Workshop
 The second tag(off switch) starts with a forward slash.
 For example , text 
 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, centers the paragraph following it.
 Some browsers don't support the some tags and some
attributes.

Training Workshop
Basic HTML Document Format
<HTML> See what it

<HEAD> looks like:
<TITLE>WENT'99</TITLE>
</HEAD>
<BODY>
Went'99
</BODY>
</HTML>

Training Workshop
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.

Training Workshop
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......

Training Workshop
Tags in head
 <HEAD>...</HEAD>-- contains information about the
document
 <TITLE>...</TITLE>-- puts text on the browser's title
bar.

Training Workshop
Tags in Body
Let's talk Text
Heading: <H1> </H1>
Center:<Center> </Center>
Line Break , 
Phrase Markups: ,
Create a List
 Unordered list : <UL><li>
Ordered list: <OL><li>
Nested
Training Workshop
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”>

Training Workshop
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:skrhee@women.or.kr

Training Workshop
How to make colors changes?
Hexadecimal number :
Color names : 
Changing the Background color
<BODY BGCOLOR=#19378a>
Changing Text color
<BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66
VLINK=#66ffff>
Spot color
WENT'99
Image Background
<BODY BACKGROUND=bgimg.gif >
Training Workshop
How to specify Relative pathnames
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> Go to Back

Training Workshop
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
 Go to Back

Training Workshop

Week 2 - Intro To HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Week 2 - Intro To HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Introduction to HTML

1999 Asian Women's Network 1

1999 Asian Women's Network 2

1999 Asian Women's Network 4

1999 Asian Women's Network 5

<HTML> See what it

1999 Asian Women's Network 6

1999 Asian Women's Network 7

1999 Asian Women's Network 8

1999 Asian Women's Network 9

1999 Asian Women's Network 11

1999 Asian Women's Network 12

C:\- Iam -my.html

C:\- Iam -my.html

C:\-  Iam -my.html

C:\-  Mother -your.html

1999 Asian Women's Network 14

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

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

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

1999 Asian Women's Network 15

Anda mungkin juga menyukai