The Global Open University
Nagaland
HTML
Special guide for
2
INTRODUCTION TO HTMLINTRODUCTION TO HTML
Contents
Getting Started..
What is HTML?
How to create and View an HTML document?
Basic HTML Document Format
The HTML Basic tags
3
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. 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.
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.
6
Basic HTML Document Format
7
<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:
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.
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.
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
11
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”>
12
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
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 >
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
15
How to specify Relative pathnames
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
16
This material has been taken from Online
Certificate course on HTML from Global Open
University Online certification programme. For
complete course material visit:
http://tgouwp.eduhttp://tgouwp.edu
About Global Open University :
The global open university is now offering certification courses in
various fields. Even you can study, give exam from comfort of your
home. These are short term and totally online courses. For more
details you can visit:
Email id: info@tgouwp.edu
THANKS for being here

Basics tags for HTML

  • 1.
    The Global OpenUniversity Nagaland HTML Special guide for
  • 2.
  • 3.
    Contents Getting Started.. What isHTML? How to create and View an HTML document? Basic HTML Document Format The HTML Basic tags 3
  • 4.
    What the followingterm 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. 4
  • 5.
    What is HTML? Tellingthe 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. 5
  • 6.
    The second tag(offswitch) 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. 6
  • 7.
    Basic HTML DocumentFormat 7 <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:
  • 8.
    How to Createand 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. 8
  • 9.
    7.You may nowswitch 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
  • 10.
     Tags inhead <HEAD>...</HEAD>-- contains information about the document  <TITLE>...</TITLE>-- puts text on the browser's title bar. 10
  • 11.
     Tags inBody 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 11
  • 12.
    Add Images Use <IMGSRC=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”> 12
  • 13.
    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 13
  • 14.
    How to makecolors 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 > 14
  • 15.
    The current HTMLdocument 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 15 How to specify Relative pathnames
  • 16.
    How to specifyRelative 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 16
  • 17.
    This material hasbeen taken from Online Certificate course on HTML from Global Open University Online certification programme. For complete course material visit: http://tgouwp.eduhttp://tgouwp.edu About Global Open University : The global open university is now offering certification courses in various fields. Even you can study, give exam from comfort of your home. These are short term and totally online courses. For more details you can visit: Email id: info@tgouwp.edu THANKS for being here