Web Creator

Basic HYPER TEXT MARKUP LANGUAGE (HTML)

Lesson 1.

WHAT IS HTML?

  • HTML (Hyper Text Markup Language) is a language for specifying how text and graphics appear on a web page
  • When you visit a web site (e.g., www.google.com) your web browser retrieves the HTML web page and renders it
  • The HTML page is actually stored on the computer that is hosting the web site and the page is sent to your browser
  • To see what HTML looks like go to your web browser View menu and select View Source


HTML

  • HTML is a textual language that includes special markup tags such as:

            <title> Bob’s Diner </title>

  • The <title> ... </title> tag specifies a title for the web page
  • HTML code is stored in a simple text file that as either a .htm or a .html filename extension (e.g., restaurant.html)


HOW TO AUTHOR HTML

  • Use a simple text editor such as notepad to create simple web documents
  • Use a web editor tool (next week we will give you a professional web editor tool) to create more professional looking web documents
  • The tool is simple to use. Use the editor tools to author a document as you would using a text editor such as Microsoft Word
  • When you save the document it creates an .html file


HTML TITLE

  • A title is usually displayed on the top bar of a web browser’s window when you visit a web site
  • The title will now be displayed in the main web browser window, just on the top bar
  • <title> Your title text goes here </title>
  • <title> is the start tag and </title> is the end tag


HTML HEADINGS

  • HTML allows you to create sections in a document using headings, there are six levels of headings
  • The first level creates the most significant heading, e.g.,

                    <H1> This is a major section </H1>

  • ...
  • and the sixth level creates the least significant heading, e.g.,

                    <H6> This is a minor section </H6>

  • After each heading you insert the text and images that pertain to that section, like you would do in MS Word


HTML PARAGRAPHS

  • The <p> tag is used to start a paragraph
  • The </p> tag is used to end a paragraph
  • <p> The text in between the two tags is your paragraph ... </p>
  • The </p> tag is optional, HTML assumes that you are in the same paragraph until it encounters the next <p> tag
  • You can force a line break using the <br> tag


FORMATTING TEXT

  • <i> italics </i>
  • <em> also italics </em>
  • <b> bold </b>
  • <i><b> italics and bold </b></i>
  • 2 <sup> 4 </sup> = 16
  • H <sub> 2 </sub> O
  • This text is <del> scratched </del> out

NOTE: The underlined "scratched" above should be crossed-over but the programme we used in developing this doesn't support that feature; that is why we used underline.

  • <code> use this tag for computer code </code>


PRE FORMATTING TEXT

  • Text will always be formatted automatically unless you use the pre format <pre> ... </pre> tags to force a different format
  • Very useful when you want to display examples of code (I suggest using <pre><code> ... </code></pre> for that purpose

                <pre> This text will appear

                                    on the website

                                          exactly how

                                                 I pre formatted it

                 </pre>


INSERTING IMAGES

  • <img src="dog.jpg" width="120" height="100" align="left">
  • The image source is in file dog.jpg and the width and height attributes specify the dimensions of the image on the web page in pixels
  • You can also add a brief description of the image in case the user cannot see the image e.g.,
  • <img src="dog.jpg" width="120" height="100" alt="My pet dog">



HTML LISTS

        Unordered Lists

<ul>                                            

    <li> Gold

    <li> Silver

    <li> Bronze

</ul>


  • Gold
  • Silver
  • Bronze

   

        Ordered Lists

<ol>

    <li> Gold

    <li> Silver

    <li> Bronze

</ol>

   

     1. Gold

    2. Silver

    3. Bronze


        Definition Lists

<dl>

    <dt> Gold

    <dd> For the best

    <dt> Silver

    <dd> ... second best

</dl>


Gold

    For the best

Silver

    ... the second best


LISTS CAN BE NESTED TOO

    <ul>

            <li> A Students

                <ol>

                     <li> John

                     <li> Mary

                     <li> Peter

                </ol>

  • A Students

                1. John

                2. Mary

                3. Peter


        <li> B Students

            <ol>

                    <li> Paul

                    <li> Cathy

                    <li> Jill

            </ol>

</ul>

  • B Students

                1. Paul

                2. Cathy

                3. Jill


Sponsored

Post your ad here

Sponsored



HTML TABLES

    <table

    cellpadding="2"

    cellspacing="4"

    border="1"

    bordercolor="black"

    bgcolor=rgb(0,255,0)>

        <tr>

                <th> Column 1 </th>

                <th> Column 2 </th>

        </tr>

        <tr>

                <td> (1,1) </td>

                <td> (1,2) </td>

        </tr>

        <tr>

                <td> (2,1) </td>

                <td> (2,2) </td>

        </tr>

</table>


  • cellpadding determines the space between the cell borders and the text
  • cellspacing determines the width of the border
  • bgcolor defines the table’s background color
  • The table rows are defined one after the other; some rows can be headers and others data



LINKING TO OTHER PAGES

<a href="http://www.fast.org.ng/institute"> Institute Page </a>

             

                This links to a page on the World Wide Web (WWW)


<a href="courses.html"> Institute Courses </a>

           

                This links to a page called courses.html in the same directory as the html file


<a href=".../websitesdevelopment.html"> Institute Websites Development </a>


                This links to a page called websitesdevelopment.html in the directory above the directory of the html file


<a href="materials/appsdevelopment.html"> Institute Materials </a>


                This links to a page called appsdevelopment.html in the materials sub-directory



LINKING TO ANOTHER PART OF THE SAME PAGE

First define a link target header (anchor):

                

                   <h2><a name="soccer-scores"> Soccer Scores </a></h2>


Or you can avoid the use of <a>


                    <h2><id="soccer-scores"> Soccer Scores </h2>


Then reference the link target:


                    <a href="#soccer-scores"> Go to Soccer Scores </a>


Or you can reference the link target from a remote web site:


                    <a href="http://www.soccer.com/#soccer-scores"> Go to Soccer Scores </a>



LINKING TO AN EMAIL ADDRESS

<a href="info@fast.org.ng"> Send Fast a message </a>

Caution: Web crawlers will find this e-mail address and I might start to get more spam messages!

Better idea to use an image with the email address



HTML SOUND FILES

  • You can link sound files to your web pages:
  • <a href="http://fast.org.ng/materials/music/mysong2.mp3" type="audio/mpeg"> listen to a song as from an mp3 </a>


With this, we have come to the end of Basic HTML. Send us your questions and comments below.

Ask your questions and comments below

Your questions and comments should be based on the lesson.