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.

HTML 101


Published on

et online subject

Published in: Technology
  • Be the first to comment

HTML 101

  1. 1. H  Basic language of the World Wide Web  English rootsT  Invented in 1989 by Tim Berners-Lee, Swiss  Uses embedded code tags to describe elementsM  Simple ASCII text files  Scripting and NOT PROGRAMMINGL Versions - HTML 2.0, HTML 3.0, and HTML 3.5 1
  2. 2. Basic Tools to setup a Web SiteText editor - Page Spinner for Macintosh - NotePad for WindowsWeb Browser - Google Chrome - Internet Explorer - Mozilla FirefoxA graphic program - Graphic Animator - Photo Editor Photoshop 2
  3. 3. HTML Document Template <HTML> - tells the web browser on the type of document <HEAD> - technical information about the document is stated. <TITLE> - gives the document a name. <BODY> - where the actual document contents are placed 3
  4. 4. HTML Document Example<HTML><HEAD><TITLE> A BASIC HTML FILE </TITLE></HEAD><BODY>This is a very basic HTML file showing the useof document template tags. It’s very easy!</BODY></HTML> 4
  5. 5. HTML Tag - Any Object or Element enclosed in < > angle brackets <tag attribute=“value“> Webpage Property Value Element or Format assigned or Object to attribute
  6. 6. Items enclosed by this tag is the<BODY> actual document content. BACKGROUND = “image file” - the image file to be used as page background - this will be tiled if it is smaller than the viewing screen BGCOLOR = “color or Hexa Decimal” - defines the background color of the page TEXT = “color or Hexa Decimal” - defines the color of the normal body text LINK = “color string” - defines the text color of the hypertext link VLINK = “color string” - defines the text color of the visited links ALINK = “color string” - defines the text color of the active link (it’s the color that briefly flashes when the link text is clicked) 6
  7. 7. formats the texts of the<Font>...</Font> web page • Size = n (n = 1 to 7) normal size is 3 Attributes : • Color = “#rrggbb” or “color name” • Face = “font name”Other Text Control Tags <Small>...</Small>  makes text smaller <Big>...</Big>  makes text bigger <SUB>...</SUB>  makes text subscript <SUP>...</SUP>  makes text superscript <I>...</I>  makes text italic <B>...</B>  makes text bold <U>...</U>  makes text underlined  7 <STRIKE>...</STRIKE> makes text strike
  8. 8. &nbsp; - syntax for declaring single space<br> - bring object to the next line (line break) PARAGRAPHS<P>  defines the paragraph element  </P> is optional since a new <P> : implies the end of the preceding : paragraph</P> <P align = left / center / right > 8
  9. 9. HEADING TAGS<H1>….</H1><H2>….</H2>  heading tag marks<H3>….</H3> texts as heads  it has 6 level H1 to H6<H4>….</H4>  H1 has the largest font<H5>….</H5> size while H6 the smallest<H6>….</H6><H4 ALIGN = left / center / right >…. </H4> 9
  10. 10. HORIZONTAL RULED LINE  used to separate different areas<HR> of a web page  it does not have a closing tagAttributes : color = “#ffffff” defines the color of the line width = n (pixel width) = n% (certain percent of screen width) size = n (line thickness in pixel) NOSHADE ---- to turn off line shading align = left / center / rightExample: <HR width=80% size=4 align=right NOSHADE> 10
  11. 11. ListOrdered List (Numbered)Syntax: <ol>… </ol>Unordered List (Bulleted) Syntax: <ul>… </ul>
  12. 12. <ol > <li> ..list items </li> <li> ..list items </li> <li> ..list items </li></ol>
  13. 13. ANCHORED LINKS <A>  indicates an anchor for a piece of : text or image that serves as the </A> origin of the hyperlink<A href = “URL”>linking text and/or image</A> •This URL can be another HTML document, a program, an image, an audio, or video file. 13
  14. 14. <A>…</A> attributes :HREF = “link destination” • specifies the hyperlink reference : the file to be accessed, in the form of a filename or URL.NAME = “bookmark” • gives a name to the link destination marker. It is used to identify a bookmark destination within an HTML file.TARGET = “frame label” • Indicates the name of a specific frame into which you load the linked document.Special TARGETS :“_BLANK”  link is loaded into a new blank window“_SELF”  link is loaded into the current browser window“_TOP”  link is loaded into the frame where link was clicked on“_PARENT”  link is loaded into in the immediate frameset parent 14