3. Contents
• History
• What is HTML?
• How to create and View an HTML document?
• Basic HTML Document Format
• The HTML Basic tags
3
4. History
• Ted Nelson in 1960’s
– First use Hypertext
• Tim Berners-Lee in 1990’s
– Came with HTML
• Dan Connolly
– Includes <head>,<body>,<title>
• David Raggett
– Includes images &<form>
4
5. What is HTML?
Telling the browser what to do, and what props to use.
A series 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 5
Training Workshop
6. The second tag(off switch) starts with a forward slash.
For example ,B text /B
can embedded, for instance, to do this:
HEADTITLE Your text /HEAD/TITLE it won't work.
The correct order is HEADTITLE 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.
6
7. Basic HTML Document Format
See what it
HTML looks like:
HEAD
TITLEWENT'99/TITLE
/HEAD
BODY
Went'99
/BODY
/HTML
7
8. Tags in head
HEAD.../HEAD-- contains information about the
document
TITLE.../TITLE-- puts text on the browser's title
bar.
8
9. Tags in Body
Let's talk Text
b)Heading: H1 /H1
c)Center:Center /Center
d)Line Break P ,Br
e)Phrase Markups: I/I ,B/B
Create a List
a) Unordered list : ULli
b)Ordered list: OLli
c)Nested 9
10. How to make colors changes?
a) Hexadecimal number :
b) Color names : Font color=white
c) Changing the Background color
BODY BGCOLOR=#19378a
d) Changing Text color
BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66
VLINK=#66ffff
a) Spot color
FONT COLOR=#66ffccWENT'99/FONT
a) Image Background
d) BODY BACKGROUND=bgimg.gif
10
11. Add Images
a) Use IMG SRC=imagefilename tags
b) How to specify Relative pathnames
c) Attributes of IMG SRC tag
i. -width,height
ii.-Alt
iii.
-Align
iv.-Img src=my.gif width=50 height=50
align=right
v. alt=“My image”
11
12. Add some Link
Use A href=filename|URL/atags
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
13. 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.
13
14. 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......
14
