Web Collectin Tutorial

Introduction to HTML
1999 Asian Women's Network Training Workshop
Contents Getting Started.. What is HTML? How to create and View an HTML document? Basic HTML Document Format The HTML Basic tags
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.
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.
Basic HTML Document Format
<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.
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......
Tags in head
<HEAD>...</HEAD>-- contains information about the document <TITLE>...</TITLE>-- puts text on the browser's title bar.
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
1999 Asian Women's Network Training Workshop 10
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>
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
12
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 >

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
14
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 Image -dragonfly.gif C:\- Iam -my.html Image -dragonfly.gif C:\- Image -dragonfly.gif Iam -my.html
Type this ; <IMG SRC=Image/dragonfly.gif>
Type this ; <IMG SRC=../Image/dragonfly.gif>
Type this ; <IMG SRC=../dragonfly.gif>
Go to Back
15

Web Collectin Tutorial

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Web Collectin Tutorial

Caricato da

Copyright:

Formati disponibili

Introduction to HTML

1999 Asian Women's Network Training Workshop

1999 Asian Women's Network Training Workshop

What the following term mean:

Think about the followings before working your Web pages.

Most tags come in pairs

1999 Asian Women's Network Training Workshop

The second tag(off switch) starts with a forward slash.

can embedded, for instance, to do this:

not case sensitivity. Many tags have attributes.

1999 Asian Women's Network Training Workshop

Basic HTML Document Format

<HTML> <HEAD> <TITLE>WENT'99</TITLE> </HEAD> <BODY> Went'99 </BODY> </HTML>

See what it looks like:

1999 Asian Women's Network Training Workshop

How to Create and View an HTML document?

1999 Asian Women's Network Training Workshop

1999 Asian Women's Network Training Workshop

1999 Asian Women's Network Training Workshop

-http://www.women.or.kr - ftp://ftp.foo.com/home/foo - gopher://gopher.myhost.com/ - news://news.nuri.net - mailto:skrhee@women.or.kr

1999 Asian Women's Network Training Workshop

<BODY BACKGROUND=bgimg.gif >

How to specify Relative pathnames

1999 Asian Women's Network Training Workshop

How to specify Relative pathnames

Type this ; <IMG SRC=../Image/dragonfly.gif>

Type this ; <IMG SRC=../dragonfly.gif>

1999 Asian Women's Network Training Workshop

Potrebbero piacerti anche