Writing for the Web Part IV---Designing Web pages

 

Jyothi Kiran

 

 

 

1. Designing a professional website requires a number of skills that include writing, image editing and HTML skills. In this lesson we will focus on basic HTML skills.
   
   While writing requires the mastery of the language, image editing requires you to be proficient in software applications like Photoshop, Adobe Illustrator and web programming called HTML or Hyper Text Mark up Language.
   
   
2. Before you can start designing a web page you will have to understand terms such as a browser and what are the elements of a web page.
   When you look at any web page, you see a document containing all or some of the web elements such as text, images, links and sometimes audio and video files. These files are written in a simple program called as Hype Text Mark up Language. But when you look at a web page, you don’t see the HTML code because a browser interprets the HTML commands and displays the web page.
   
   
3. Equipment: To design a web page, you will require a PC that is loaded with a browser such as Microsoft Internet Explorer (IE) or Netscape Navigator. A browser is an application that reads the HTML code and displays the Web pages.
   
   
4. You will also need a word processor such as Notepad or WordPad. Microsoft Windows package comes bundled with both IE and Notepad. To open Notepad, click on the Start button, go to programs and choose Accessories. You will find Notepad in the Accessories list. Notepad is the text editor on which you write the HTML code and all the data.
   
   
   
5. Open Notepad and get ready to create your first HTML page. You will first create

·         a title

·         add headings and paragraphs

·         add links and to other pages

·         add images

6. Add a title
   Open Notepad and type as you would in a word document the following:
   <title>My first HTML page</title>
   
   The little angle brackets you see before and after ‘My First HTML page’ are called as tags. All HTML codes begin with a start tag <> and are followed by a close tag /<>. Once you write the title tag, you are ready to save the file in .html format.
   
   
   To view the page you just created in Notepad, go to save as and change the *txt extension to *html. You have just changed the type of file from a text to that of an HTML file. Call this as test.html file.
   
   Note: To create any HTML page, you need to have two windows open, the IE browser to View the HTML document and the Notepad text editor on which you write/edit the code.
   
   You may also View Source thus:
   Right click on the web page and select option View source. This will open the Notepad editor that contains all the HTML code.
   
   In the Internet Explorer browser Open test.html file. You will see a blank document. But look closely, at the top of the window caption bar right next to the little IE logo. It reads My first HTML page-Microsoft Internet Explorer.
   
   This is your first web page. But it is blank. Let us fill it up with a nice heading and other web elements.
   
   
   
7. Add a Heading
   Go back to your Notepad, and add another line below the title line.
   Type <h1> A Nice Heading </h1>. Save the notepad file and view it in IE. You will have to refresh(press F5) the file before you can see the result. You should be able to see the following:
   
   A Nice Heading
   
   Next, you might want to center the heading. To do so, type the following:

          <H1 align="center"> A Nice Heading</H1>.
          Now save the document and view the file in IE.
          Refresh (Press F5) before viewing.
          You will find that the heading is aligned in the center.

 

     8. To add a Paragraph, type the following in your Notepad
          <p> Type a few sentences to make a paragraph.
          You can have any number of lines in a paragraph.
          And you can have any number of paragraphs you want.
          But each paragraph has to end with a </p> tag.
          Save the file and view it in IE. Again, refresh before you   

          view the page.

 

9. To add a link, read the following:
Links are defined within the <a> </a> tags. Write the text between these tags for describing the link.

To link to a page on another website you need to give the full Web address (commonly called a URL), for instance to link to the website thehoot.org you need to type the following:

This is a link to <a href ="http://thehoot.org/">The Hoot</a>

Note: The URL is in double quotes. Save the file and view it in IE. To view what you just created, Click on the blue underlined text, the link should take you to the homepage of thehoot.org in a new window.

       You can also give links to email ids.
       Instead of typing the URL of a website within double quotes,

       give your email id
       <a href="mailto:jyothi@iijnm.org">Jyothi</a>

 

       10. To add an image, use the <img> image tag
      and link to the source file where the image is  stored.
       
        Images are commonly stored as .gif or .jpeg formats.
        Let`s assume you have an image file called "rose.jpg"
        in the same folder/  /directory as your HTML file.
        Its dimensions are 200 pixels wide by 150 pixels high.
        Now type <img src ="rose.jpg" width="200" height="150">

        The src attribute names the image file.
        The width and height specify the size of the picture.
         You can also add a description of the image as follows:
         <img src="rose.jpg" width="200" height="150" alt= "My
         favorite flower">

 

        Save the file, refresh the browser to view the image.
        If you cannot see the image, make sure the img src is  

        attributed properly with the correct file path.

        In this lesson, you have learnt how to design a web page

        using HTML code. Advanced HTML lessons include how to create  

        tables and forms.

         Note: You can also design web pages directly using HTML

         editors like Microsoft Frontpage and Netscape Navigator.
         Here, you don’t need to write HTML code. Using editors also  

         gives you the option of working simultaneously in three

         modes.  Normal, HTML and Preview.

 

Jyothi Kiran teaches online journalism at the institute of Journalism and New Media. Contact: JyothiK@iijnm.org