HTML

  • HTML is the lingua franca for publishing hypertext on the World Wide Web.
  • It is a non-proprietary format based upon SGML, and can be created and processed by a wide range of tools, from simple plain text editors - you type it in from scratch- to sophisticated WYSIWYG authoring tools.
  • HTML uses tags such as <h1> and </h1> to structure text into headings, paragraphs, lists, hypertext links etc.
    •

    Session 1

  • 1.1 Format of HTML document
    <HTML>
    <HEAD>
    <TITLE> WEB PAGE title in the window caption bar </TITLE>
    </HEAD>
    <BODY>
    HTML Main Contant
    </BODY>
    </HTML>
    <!-- Commant will display in the HTML document -->
  • 1.2 add headings and paragraphs
    1.2.1 <h1> Heading </h1>
    Parameters 1, 2, 3, 4, 5, 6 ('1' large - '6' small font)
    1.2.2 <p> paragraph </p>
  • 1.3 add images
    <img src="[imaga URL]">
    Parameters width="[image width]", height="[image height]", alt="[pop up description]"
  • 1.4 Content Font family, style and size
    <font size="3">Text Here</font>
    Parameters size="[1, 2, 3, 4, 5, 6 ('1' large - '6' small font)]"
    <b> BOLD text </b>
    <i> Italic text </i>
    <u> Under line text </u>
  • 1.5 add links to other pages (Hyperlink)
    <a href="[link URL]">[link URL display text]</a>
    Parameters target="[_parent, _blank, _new]"
    Parameters target="[open a new browser and give it a name]"
  • 1.6 Alignment
    <font align="[alignment]" >
    <img align="[alignment]" >
    Parameters [alignment]=left, center, right

    • Session 2

  • 2.1 force line breaks
    <br>Change to next line at text end.</br>
  • 2.2 introduce non-breaking spaces
     
  • 2.4 link into the middle of pages
  • 2.6 create tables


    • How to use entities for special characters

    For copyright notices, or trademarks it is customary to include the appropriate signs:

    Symbol Entity Example
    Copyright sign &copy; Copyright © 1999 W3C
    Registered trademark &reg; MagiCo ®
    Trademark &#8482; Webfarer™

    Note HTML 4.0 defines &trade; for the trademark sign but this is not yet as widely supported as &#8482;

    There are a number of other entities you may find useful:

    Symbol Entity Example
    Less than &lt; <
    Greater than &gt; >
    Ampersand &amp; &
    nonbreaking space &nbsp;  
    em dash &#8212; —
    quotation mark &quot; "

    And then, there are entities for accented characters and miscellaneous symbols in the Latin-1 character set:

      &nbsp; &#160; Ð &ETH; &#208;
    ¡ &iexcl; &#161; Ñ &Ntilde; &#209;
    ¢ &cent; &#162; Ò &Ograve; &#210;
    £ &pound; &#163; Ó &Oacute; &#211;
    ¤ &curren; &#164; Ô &Ocirc; &#212;
    ¥ &yen; &#165; Õ &Otilde; &#213;
    ¦ &brvbar; &#166; Ö &Ouml; &#214;
    § &sect; &#167; × &times; &#215;
    ¨ &uml; &#168; Ø &Oslash; &#216;
    © &copy; &#169; Ù &Ugrave; &#217;
    ª &ordf; &#170; Ú &Uacute; &#218;
    « &laquo; &#171; Û &Ucirc; &#219;
    ¬ &not; &#172; Ü &Uuml; &#220;
    ­ &shy; &#173; Ý &Yacute; &#221;
    ® &reg; &#174; Þ &THORN; &#222;
    ¯ &macr; &#175; ß &szlig; &#223;
    ° &deg; &#176; à &agrave; &#224;
    ± &plusmn; &#177; á &aacute; &#225;
    ² &sup2; &#178; â &acirc; &#226;
    ³ &sup3; &#179; ã &atilde; &#227;
    ´ &acute; &#180; ä &auml; &#228;
    µ &micro; &#181; å &aring; &#229;
    &para; &#182; æ &aelig; &#230;
    · &middot; &#183; ç &ccedil; &#231;
    ¸ &cedil; &#184; è &egrave; &#232;
    ¹ &sup1; &#185; é &eacute; &#233;
    º &ordm; &#186; ê &ecirc; &#234;
    » &raquo; &#187; ë &euml; &#235;
    ¼ &frac14; &#188; ì &igrave; &#236;
    ½ &frac12; &#189; í &iacute; &#237;
    ¾ &frac34; &#190; î &icirc; &#238;
    ¿ &iquest; &#191; ï &iuml; &#239;
    À &Agrave; &#192; ð &eth; &#240;
    Á &Aacute; &#193; ñ &ntilde; &#241;
    Â &Acirc; &#194; ò &ograve; &#242;
    Ã &Atilde; &#195; ó &oacute; &#243;
    Ä &Auml; &#196; ô &ocirc; &#244;
    Å &Aring; &#197; õ &otilde; &#245;
    Æ &AElig; &#198; ö &ouml; &#246;
    Ç &Ccedil; &#199; ÷ &divide; &#247;
    È &Egrave; &#200; ø &oslash; &#248;
    É &Eacute; &#201; ù &ugrave; &#249;
    Ê &Ecirc; &#202; ú &uacute; &#250;
    Ë &Euml; &#203; û &ucirc; &#251;
    Ì &Igrave; &#204; ü &uuml; &#252;
    Í &Iacute; &#205; ý &yacute; &#253;
    Î &Icirc; &#206; þ &thorn; &#254;
    Ï &Iuml; &#207; ÿ &yuml; &#255;