Html 1
Click here to load reader
-
Upload
anmol-pant -
Category
Education
-
view
112 -
download
2
description
Transcript of Html 1
1999 Asian Women's Network Training Workshop
1
Introduction to HTMLIntroduction to HTML
1999 Asian Women's Network Training Workshop
2
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.
1999 Asian Women's Network Training Workshop
4
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� <B> or <I>.
� Most tags come in pairs� exceptions: <P>, <br>, <li> tags …
� The first tag turns the action on, and the second turns it off.
1999 Asian Women's Network Training Workshop
5
� The second tag(off switch) starts with a forward slash. � For example ,<B> text </B>
� 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, <P ALIGN=CENTER> centers the paragraph following it.
� Some browsers don't support the some tags and some attributes.
1999 Asian Women's Network Training Workshop
6
Basic HTML Document Format
<HTML><HEAD> <TITLE>WENT'99</TITLE></HEAD><BODY> Went'99 </BODY> </HTML>
<HTML><HEAD> <TITLE>WENT'99</TITLE></HEAD><BODY> Went'99 </BODY> </HTML>
See what it looks like:
1999 Asian Women's Network Training Workshop
7
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.
1999 Asian Women's Network Training Workshop
8
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......
9
Tags in head <HEAD>...</HEAD>-- contains information about the
document <TITLE>...</TITLE>-- puts text on the browser's title
bar.
1999 Asian Women's Network Training Workshop
10
Tags in Body
Let's talk Text Heading: <H1> </H1>Center:<Center> </Center>Line Break <P> ,<Br>Phrase Markups: <I></I> ,<B></B>
Create a List Unordered list : <UL><li>Ordered list: <OL><li>Nested
1999 Asian Women's Network Training Workshop
11
Add ImagesUse <IMG SRC=imagefilename> tagsHow to specify Relative pathnamesAttributes of IMG tag
-width,height
-Alt
-Align
-<Img src=my.gif width=50 height=50 align=right
alt=“My image”>
1999 Asian Women's Network Training Workshop
12
Add some Link
Use <A href=filename|URL></a>tagsHow to specify Relative pathnamesKinds of URLs
-http://www.women.or.kr
- ftp://ftp.foo.com/home/foo
- gopher://gopher.myhost.com/
- news://news.nuri.net
- mailto:[email protected]
1999 Asian Women's Network Training Workshop
13
How to make colors changes? Hexadecimal number : Color names : <Font color=white>Changing the Background color
<BODY BGCOLOR=#19378a>
Changing Text color <BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66
VLINK=#66ffff>
Spot color <FONT COLOR=#66ffcc>WENT'99</FONT>
Image Background
<BODY BACKGROUND=bgimg.gif >
1999 Asian Women's Network Training Workshop
14
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
How to specify Relative pathnames
1999 Asian Women's Network Training Workshop
15
How to specify Relative pathnamesThe 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