Web1 (1) HTML

Introduction to HTML
1999 Asian Women's Network Traini 1

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

ng 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 t
o 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 documen
t.
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.

ng 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 a
ttributes.

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

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

ng Workshop
How to Create and View an HTML document?
1.Use an text editor such as Editpad to write the docum
ent.
2.Save the file as filename.html on a PC. This is called t
he 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 d
ocument that you just created.
6.Your HTML page should now appear just like any othe
r Web page in Netscape.

ng 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......

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

ng 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
ng 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”>

ng 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

ng 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=#6
6ffff>
Spot color
WENT'99
Image Background
<BODY BACKGROUND=bgimg.gif >
ng 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

ng 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

ng Workshop

Web1 (1) HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web1 (1) HTML

Uploaded by

Copyright:

Available Formats

Introduction to HTML

1999 Asian Women's Network Traini 1

1999 Asian Women's Network Traini 2

1999 Asian Women's Network Traini 4

1999 Asian Women's Network Traini 5

<HTML> See what it

1999 Asian Women's Network Traini 6

1999 Asian Women's Network Traini 7

1999 Asian Women's Network Traini 8

1999 Asian Women's Network Traini 9

1999 Asian Women's Network Traini 11

1999 Asian Women's Network Traini 12

C:\- Iam -my.html

C:\- Iam -my.html

C:\-  Iam -my.html

C:\-  Mother -your.html

1999 Asian Women's Network Traini 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 Traini 15

You might also like