Introduction to HTML




                       1
HTML


ORGANISERS:
     Ram Dutt Shukla
     Rakesh Dwivedi
     Rohtash
Contents
• History
• What is HTML?
• How to create and View an HTML document?
• Basic HTML Document Format
• The HTML Basi...
History
• Ted Nelson in 1960’s
  – First use Hypertext
• Tim Berners-Lee in 1990’s
  – Came with HTML
• Dan Connolly
  – I...
What is HTML?
    Telling the browser what to do, and what props to use.
    A series of tags that are integrated into a t...
The second tag(off switch) starts with a forward slash.
     For example ,B text /B

can embedded, for instance, to do thi...
Basic HTML Document Format




                         See what it
HTML                   looks like:
HEAD
TITLEWENT'99/T...
Tags in head
HEAD.../HEAD-- contains information about the
  document
TITLE.../TITLE-- puts text on the browser's title
 ...
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

Cre...
How to make colors changes?
  a) Hexadecimal number :
  b) Color names : Font color=white
  c) Changing the Background col...
Add Images
  a) Use IMG SRC=imagefilename tags
  b) How to specify Relative pathnames
  c) Attributes of IMG SRC tag
     ...
Add some Link
  Use A href=filename|URL/atags
  How to specify Relative pathnames
  Kinds of URLs
     -http://www.women.o...
How to Create and View an HTML document?
  1.Use an text editor such as Editpad to write the
    document.
  2.Save the fi...
7.You may now switch back and forth between the
  Source and the HTML Document
   switch to Notepad with the Document Sou...
Upcoming SlideShare
Loading in...5
×

Rd.Html

381
-1

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
381
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Rd.Html

  1. 1. Introduction to HTML 1
  2. 2. HTML ORGANISERS: Ram Dutt Shukla Rakesh Dwivedi Rohtash
  3. 3. Contents • History • What is HTML? • How to create and View an HTML document? • Basic HTML Document Format • The HTML Basic tags 3
  4. 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. 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. 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. 7. Basic HTML Document Format See what it HTML looks like: HEAD TITLEWENT'99/TITLE /HEAD BODY Went'99 /BODY /HTML 7
  8. 8. Tags in head HEAD.../HEAD-- contains information about the document TITLE.../TITLE-- puts text on the browser's title bar. 8
  9. 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. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×