Creating a HTML Webpage

0
990

Hello friends! We will try to create a webpage using HTML.

  • Friends we will now just try to make a webpage using whatever we learned previously.
  • To create a HTML webpage, the editor you can use, is the simple notepad or notepad++ which is free to download.
  • Just open Google and search for “download notepad++”.
  • In this webpage, we will be showing a heading, a paragraph and an image.
  • After that we will use the inline style attribute for styling the page.
  • The final webpage will look like this:

final_output
fig 1

  • Let us start our work by following the steps below.
  1. Open a notepad++ editor:
    • First thing to create a webpage is to open a notepad++ editor.
    • Save the file before you start writing the code, giving it name as index.html and then click on Save button as shown in fig 1.1.

    save_file
    fig 1.1

    • Open the webpage in browser. You can use any browser viz. Internet Explorer, Mozilla Firefox, Google Crome etc.
    • We will use Internet Explorer.
    • Steps for opening “index.html” in browser are:
      • Open Internet Explorer.
      • Click on File->Open->Browse.
      • Browse your file and select it.
      • Click on Open->OK.
      • Page will look like this.

    html_file_in_browser_after_saving
    fig 1.2

    • You will see nothing in it except the address of “index.html” in address bar, because still code is not written.
    • You can view the source file i.e. the code file of this page by clicking on “View” on menu bar and the on “Source”. For every browser, viewing source file has different steps.
  2. Writing HTML code in notepad editor:
    • Let us now write the code step by step.

    complete_body_code
    fig 2.1

    • Now let us try to understand this code:
      • Step (1) indicates that, we are using html language to design this webpage. If we were using xhtml,we would have written it as “DOCTYPE xhtml”
      • Step (2) is a starting tag of html page.
      • Steps (3), (4) and (5) define the header section.
      • The title given within the head is showed on the title bar of the browser.
      • This—is optional. If you don’t give any title, the whole address of the html document will be shown on the title bar of browser instead of the title of the webpage, exactly as it is shown in the address bar of the browser in fig 1.2.
      • You can see it in the figures below that, due to header section, only the title is shown on the title bar and the webpage is blank.

    head_title
    fig 2.2
    page_after_giving_title
    fig 2.3

    • Steps (7) to (11) is the body section, it is the actual content of the webpage.
    • In body section step (8) is the heading given in h1 tag and end of h1 tag.
    • The size of the heading tag is decided by the browser, h1 tag being the largest and h6 tag being the smallest.
    • The heading shown in step (8) will be viewed as below.

    heading_in_body_code
    fig 2.4

    heading_in_browser
    fig 2.5

    • After the heading we have a paragraph written in p and end of p tag in step (9).
    • It appears below heading on a new line.
    • The code and output for it is shown below.

    complete_body_code
    fig 2.6

    complete_body_tag_output
    fig 2.7

    • Next we have shown an image of Christmas greeting in step (11) in fig 2.8.
    • img tag is a singleton tag or unpaired tag.i.e. It does not have an ending tag.
    • Singleton tags can be written in 2 ways:
      1. Only starting tag with attributes
      2. Starting tag with attributes and then a trailing slash (/).
    • But the one with trailing slash is written in xhtml and not in html.
    • Here we are using html, so we have coded img tag as shown in figure:
    • Here img tag has 2 main attributes,
    • src – source
    • alt – alternate
    • “src” is used to get the source; I mean the path of the image location.eg: src=”D:Documents and SettingsShriDesktopdownloadchristmas picschristmas-greeting-card.gif”
    • “alt” is used as the alternate for the image. That means, if the browser has some problem in displaying the image, it will show the alternate text instead of the image.eg: alt=”Christmas Greeting”
    • This was for html ,but if we were using xhtml , we would have given a trailing slash (/) for the img tag.
    • Let us view the code and output:

    image_code_in_body
    fig 2.8

    img_output
    fig 2.9

    • This is the end of our webpage designing, it is good, but if we apply some style to it, it will look better.
    • So friends let’s start styling our webpage.
  3. Styling the webpage:
    • To apply style, first thing is to divide the webpage into blocks.
    • div and end of div tag is used to define a block.
    • When we apply style attribute to the tags, the code will look like this.

    styling_of_heading_code
    fig 3.1

    • body tag and div tag styling:
    • styling_of_body_tag
      fig 3.2

      • Here, we have given style to the whole webpage body in the body tag; style has following selectors:
        style=”margin:0;background-color:green;color:white;”
      • Here, margin:0 ->means no margin is left on any side. You can compare between the output below and the output before styling. You will understand the difference.
      • background-color:green -> gives green colour at the background of the page.
      • color:white -> foreground color i.e. the colour of text becomes white.
      • You can give colour name as well as the hexadecimal value of colour.
      • Hexadecimal value for white colour is “ffffff” and that for black colour is “000000”.
      • The style selector width in div tag specifies the width of the content as 510px.

      output_of_body_styling
      fig 3.3

    • h1 tag styling:
      • Here, h1 tag is styled by giving it margin,background-color and padding.
      • The selectors used for style in h1 tag are :

      • style=”margin:0;background- color:#53324d; padding:5px;”
      • Here, margin specifies the outer space of the heading.
      • Padding specifies the inner space of the heading block.
      • First you see the output, and then I will explain the difference between margin and padding.

      output_of_styled_heading
      fig 3.4

      • Now if we write h1 tag with the following change in the style selector value :
        style=”margin:30px;background-color:#53324d;padding:5px;”
      • I have changed margin from “0” to “30px”.
      • The output will look like this.

      fig_when_margin_is_changed
      fig 3.5

      • You can observe the difference in fig 3.4 and fig 3.5.
      • When the margin is changed from “0” to “30px”, the space between the top margin of page and the heading is left. This space is outer to heading block.
      • Now, again if we change the values of selectors of style in h1 tag style, by changing its padding from “5px” to “30px”.viz.
        style=”margin:0;background- color:#53324d; padding:30px”
      • The output is shown below:
      • fig_when_padding_is_changed

      fig 3.6

      • Now to identify the difference between margin and padding, observe fig 3.4, fig 3.5 and fig 3.6.
      • You will understand that in fig 3.5 the outer i.e. the space near to margin have been left by 30px.This is because of style=”margin=30px;”.
      • Next, in fig 3.6, the inner space i.e. the space around the heading having coffee colour has been increased by 30px above the heading as well as below the heading.This is because of style=”padding=30px;”.
    • p tag styling:
      • p tag tag has been given same style as that of h1 tag.
      • Here, p tag is styled by giving it margin, background-color and padding.
      • The style selectors are shown below :
        style=”margin:0;background-color:#000000; padding:5px;”
      • The output is shown as below:

      final_output
      fig 3.7

    • We have finished creating our webpage.