Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this


  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 - - - gopher:// - news:// -
  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