Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

Author Topic: Simple steps to make your first web page.  (Read 29941 times)

0 Members and 1 Guest are viewing this topic.

Ivy

    Topic Starter
  • CH Queen


  • Specialist

    Thanked: 50
    Simple steps to make your first web page.
    « on: October 26, 2008, 06:00:11 AM »
    Simple steps To make a webpage:
    Here I will throw light on very simple steps to make your own webpages, We'll be working in NotePad (Its the simplest and the best)

    Lets get started with opening your notepad , start with typing these:
    <html>
    </html>


    These are called  tags.

    Starting tag -->  <html>
    closing tag -->  </html>

    Next, Every HTML document needs a pair of head tags.
    <html>
    <head>
    </head>

    </html>

    The only thing we have to use with in the head tags (for now) are the title tags.

    <html>
    <head>
    <title></title>
    </head>
    </html>

    The Main Body of your page is going to be within the body tags.
    <html>
    <head>
    <title></title>
    </head>
    <body>
    </body
    >
    </html>


    Let us begin by giving your document a Title, and put something in the body aswell.

    <html>
    <head>
    <title>My first page</title>
    </head>
    <body>
    Hey Ivy, this is my page!
    </body>
    </html>

    Time to save this, So in your Notepad window click File then Save As.
    You will see  the Save As dialog box. Make a new folder by clicking the New Folder icon in the Save As dialog box.
    Name the new folder whatever you want. Then double click on it to open it. Now you're ready to save the file into the the new folder you just made. Where it says File name: type in page1.html and Where it says Save as type: make sure it says All Files(*.*).Click Save.

    If you are using Internet explorer your file icon will look like this-->
    If you are using Firefox your file icon will look like this-->

    Just double click on the icon now and see the results!

    Important Note:make sure you save your file with the file extension .html
    « Last Edit: February 10, 2009, 10:36:07 PM by Ivy »
    Use what talent you possess.
    The woods would be very silent
    If no birds sang except those that sang best-
    Henry Van Dyke

    Ivy

      Topic Starter
    • CH Queen


    • Specialist

      Thanked: 50
      Re: Simple steps to make your first web page.
      « Reply #1 on: October 26, 2008, 06:02:20 AM »
      Now let us start working within the body tags, I'm not going to use the other tage here, but you have to use them in your document, so keep them there.
      <body>
      </body>

      Type 'Hi Ivy,this is my page! inside the body tage.

      <body>
      Hi Ivy,this is my page!
      </body>



      IMPORTANT NOTE:
      Whenever you make a change to your document, just save it, then hit the Refresh/Reload button on your browser.

      Let us proceed to the background colour,
      <body bgcolor="#0099ff">
      Hi Ivy,this is my page!
      </body>
      #0099ff is a nice shade of blue!



      Here are codes to a few colours!


      Some more HTML Codes

      Some of us might want to use a background image instead, here how to do that:
      <body background="Blue Hill.GIF">
      Hi Ivy!This is my page!
      </body>


      Important Note: the image should be in the same folder as your HTML file.

      Intresting point:

      You must have seen pages where the background is fixed and the page just scrolls over it,here's how you can do that.

      Simple, add style="background-attachment:fixed" to the <body> tag

      <body background="mybackground.gif" style="background-attachment:fixed">

      « Last Edit: October 28, 2008, 03:40:22 AM by Ivy »
      Use what talent you possess.
      The woods would be very silent
      If no birds sang except those that sang best-
      Henry Van Dyke

      Ivy

        Topic Starter
      • CH Queen


      • Specialist

        Thanked: 50
        Re: Simple steps to make your first web page.
        « Reply #2 on: October 26, 2008, 08:51:58 AM »
        Now let us start experimenting a little with the text!

        <body background="Blue Hills.GIF">
        Hi Ivy, This is my page!
        </body>

        We can make text bold.
        <body background="Blue Hills.GIF">Hi Ivy, This is my page!

        In simple words, start making things bold, and at the stop making things bold, in other words we are suggesting to the browser that all text contained within the element should be rendered bold.





        Now lets try Itallics, same principles apply here aswell.
        <body background="Blue Hills.GIF">
        Hi Ivy, This is my page!
        </body>





        Now comes underlining.
        <body background="Blue Hills.GIF">
        Hi Ivy , This is my   page!
        </body>

        « Last Edit: April 22, 2009, 12:58:49 AM by Ivy »
        Use what talent you possess.
        The woods would be very silent
        If no birds sang except those that sang best-
        Henry Van Dyke

        Ivy

          Topic Starter
        • CH Queen


        • Specialist

          Thanked: 50
          Re: Simple steps to make your first web page.
          « Reply #3 on: October 26, 2008, 10:22:47 AM »
          Now let us come to Font size, We can change Font Size very easily!
          First start by adding the <font> tags
          <body>
          Hey Ivy, this is my <font>page</font>!
          </body>


          Then specify the size of the font.
          <body>
          Hey Ivy, this is my <font size="6">page</font>!
          </body>

          Font comes in 7 sizes.

          Extra Knowledge:The default font size is usually 3(the default value is a value that the browser assumes if you have not told it otherwise).


          Lets come to Font name.
          the default font name is usually Times New Roman or Verdana 12pt, but ofcourse we can use font names other than the defaults.lets try arial.
          <body>
          Hey Ivy, this is my <font face="arial">page</font>!
          </body>


          Interesting point:
          The font will only display if your visitor has that font installed on their computer.Arial, Comic Sans MS and Impact are easy to find. but you can always use more than one font,like this--><font face="arial,helvetica,lucida sans">So many fonts lol!</font>

          here's what it'll do, The browser looks for arial. If it finds it, it uses it. If not, it goes on to helvetica. If it can't find that, it looks for lucida sans. And if it can't find that it uses the default font.

          Now lets come to colour(its a colourful world so how can we leave out the colours!)
          <body>
          Hey Ivy, this is my <font color="#ff0000">page</font>!
          </body>


          Are you beginning to enjoy this? Hope so cause I've tried my best to make this simple and fun!
          « Last Edit: October 28, 2008, 03:45:46 AM by Ivy »
          Use what talent you possess.
          The woods would be very silent
          If no birds sang except those that sang best-
          Henry Van Dyke

          Ivy

            Topic Starter
          • CH Queen


          • Specialist

            Thanked: 50
            Re: Simple steps to make your first web page.
            « Reply #4 on: October 26, 2008, 12:21:24 PM »
            Now let us take this a little in detail, let us proceed to section headings.
            <body>
            <h1>Hi ivy, this is my first page!</h1>
            <h2>Hi ivy, this is my first page!</h2>
            <h3>Hi ivy, this is my first page!</h3>
            <h4>Hi ivy, this is my first page!</h4>
            <h5>Hi ivy, this is my first page!</h5>
            <h6>Hi ivy, this is my first page!</h6>

            </body>



            Another good  attribute to know here will be  align.
            <body>
            <h2 align="left">Hi ivy, this is my first page!</h2>
            <h2 align="center">Hi ivy, this is my first page!</h2>
            <h2 align="right">Hi ivy, this is my first page!</h2>
            </body>




            Now I would like to share something very important about how a browser works.
            If we write something like this(given below)
            <body>
            Hi ivy,
            this is my first page!
            </body>

            It will show exactly in the same way as(given below)
            <body>
            Hi ivy,this is my first page!
            </body>


            Both will appear the same(just like in the picture given above),The reason for this is because the browser doesn't recognize formatting.it just displays the characters in a steady stream. If you want to start a new line you have to use a line break.
            <body>
            Hi Ivy,

            this is my first page!
            </body>

            basically says - start a new line.Using many
             you can skip many lines at a time.


            Another important point is that the browser won't recognize more than 1 space.
            There  code that means "space" to the browser is &nbsp.
            <body>
            Hi Ivy,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            This is my first&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Page
            </body>
            « Last Edit: October 28, 2008, 03:52:48 AM by Ivy »
            Use what talent you possess.
            The woods would be very silent
            If no birds sang except those that sang best-
            Henry Van Dyke

            Ivy

              Topic Starter
            • CH Queen


            • Specialist

              Thanked: 50
              Re: Simple steps to make your first web page.
              « Reply #5 on: October 28, 2008, 01:03:05 AM »
              Now this is the part that the ones who are new to this will enjoy most!

                                          The making of Links

              It really simple and fun, I shall make a link to my favourite site, that is ComputerHope.

              Start with this
              <body>
              Go to ComputerHope
              </body>


              Next add a pair of anchor tags.
              <body>
              Go to <a>ComputerHope[/url]
              </body>

              Next Add the URL and you're done!
              URL stands for Uniform Resource Locator, In simple words A URL is just an address on the web.You specify it like so: href="url".And since ComputerHope URL is http://www.computerhope.com/ our code ends up like this..
              <body>
              Go to <a href="http://www.computerhope.com/">ComputerHope[/url]
              </body>

              and this is what your final page will look like!


              Now let us proceed to email links.
              An email link works almost in the same way. We just use mailto: and an email address instead of a page address.
              <body>
              Send me Mail!
              </body>



              « Last Edit: February 10, 2009, 05:33:10 AM by Ivy »
              Use what talent you possess.
              The woods would be very silent
              If no birds sang except those that sang best-
              Henry Van Dyke

              Ivy

                Topic Starter
              • CH Queen


              • Specialist

                Thanked: 50
                Re: Simple steps to make your first web page.
                « Reply #6 on: October 28, 2008, 02:37:54 AM »
                Now let us work on some useful tools,
                Lets start with a list.There are ordered lists and unordered lists.

                This is an ordered list:

                   1. Red
                   2. Blue
                   3. Green
                   4. Yelolow

                This is an unordered list:

                    * Red
                    * Blue
                    * Green
                    * yellow

                First, we will learn how to build an unordered list.
                Start with this...
                <body>
                My favourite colours!
                </body>

                Now Add a pair of unordered list tags.
                <body>
                My favourite Colours!
                <ul>
                </ul>

                </body>

                Next,Add a list item.
                <body>
                My favourite colours!
                <ul>
                <li>Red
                </ul>

                </body>


                Add a few more...
                <body>
                My favourite colours!
                <ul>
                <li>Red
                <li>blue
                <li>Green
                <li>Yellow
                </ul>

                </body>

                There ya go! you learn so fast!!


                Next,How to make an ordered list? Easy! Change the <ul> tag to <ol>.
                <body>
                My favourite colours!
                <ol>
                <li>Red
                <li>blue
                <li>Green
                <li>Yellow
                </ol>
                </body>

                Yes its that easy!!


                Next we shall learn how to change the Type of an unordered list....
                <body>
                My favourite colours!
                <ul type="circle">
                <li>Red
                <li>blue
                <li>Green
                <li>Yellow
                </ul>

                </body>



                Now lets change the type of an ordered list...
                <body>
                My favourite colours!
                <ol type="A" >
                <li>Red
                <li>blue
                <li>Green
                <li>Yellow
                </ol>

                </body>


                The following list types are available...
                <ol> Ordered List         
                type="1" - numeric: 1,2,3,4... (default)
                type="a" - lower alpha: a,b,c,d...
                type="A" - upper alpha: A,B,C,D...
                type="i" - lower roman: i,ii,iii,iv...
                type="I" - upper roman: I,II,III,IV...
                        
                <ul> Unordered List
                    * type="disc" (default)
                    * type="circle"
                    * type="square"


                Another type of list is a definition list.
                Ivy
                  A plant that runs up trees, walls, etc. "Ivy is the symbol of eternal life." The arms of the Town of St. Ives. ar. an Ivy branch overspreading the whole field vert.

                Start with this...
                <body>
                <dl>
                </dl>

                </body>

                Then add a definition title...
                <body>
                <dl>
                <dt>Ivy
                </dl>

                </body>

                And then the definition...
                <body>
                <dl>
                <dt>Ivy
                <dd> A plant that runs up trees, walls, etc. "Ivy is the symbol of eternal life." The arms of the Town of St. Ives. ar. an Ivy branch overspreading the whole field vert.
                </dl>

                </body>

                You can make the definition title bold(looks better that way..)
                <body>
                <dl>
                <dt>>Ivy
                <dd> A plant that runs up trees, walls, etc. "Ivy is the symbol of eternal life." The arms of the Town of St. Ives. ar. an Ivy branch overspreading the whole field vert.
                </dl>
                </body>


                Use what talent you possess.
                The woods would be very silent
                If no birds sang except those that sang best-
                Henry Van Dyke

                Ivy

                  Topic Starter
                • CH Queen


                • Specialist

                  Thanked: 50
                  Re: Simple steps to make your first web page.
                  « Reply #7 on: October 28, 2008, 02:56:44 AM »
                  This is the End of this part of ''Simple steps to make your first web page''

                  I have tried to keep this as simple as possible.

                  Hope this can change your opinion about HTML, HTML is actually pretty easy to learn and I believe anyone can make a website with just a little knowledge of HTML, little more dedication and a lot of will!

                  Best of luck!
                                                                                                                              ....Ivy
                                                                                                                                                     
                  Use what talent you possess.
                  The woods would be very silent
                  If no birds sang except those that sang best-
                  Henry Van Dyke