General Page Structure of HTML

General page structure

 In this we see how to create a general page, how to add images to web page, links, attributes etc.

Lets see links and understand Attributes......

    HTML links are hyper link. Link allow to jump to a new page. link are made with an <a> tag.

    Where 'a' stands for "Anchor". eg. <a>........</a>.

Attributes......

    Attributes are used to give additional information .There are no of attributes in HTML wee 

   see some of them.

• href  (Hypertext Referance) :-     Syntax=<element="attribute name//value"> 
•  src :- src content include where the image is stored. An image can be loaded from.
• alt :-  When we add the location of image using <img>tag then we must add a discription of the                  image with in another attribute i.e.'alt'.
• title :-The title of the  image appears when a user move their curser over the image itself.

            How to organize element in a list?

                    There are two types of list...  

1. Unorderd list
2. Orderd list  

  Unorderd List :-  To create list like this use the HTML tag <ul>is appropriate. This <ul>

                                    tga only use for define a type of list. In order to do so you need another

                                     HTMlL tag: <li> which is stand for list item.

                              Eg.                                                                 And the output

                                 <h1>Fruits Name</h1>                             Fruits Name

                                        <ul>                               

                                        <li> Apple</li>                                          Apple

                                        <li>Banana</li>                                         Banana

                                        <li>Kiwi</li>                                             Kiwi   

                                        </ul>

                                 

Orderd List :- To create orderd list using <ol> tag warp your list items in an 

                             <ol>opeaning tag and </ol> colsing tag.

                             Eg.       

                                 <h1>Fruits Name</h1>                              Fruits Name

                                        <ol>                               

                                        <li> Apple</li>                                        1. Apple

                                        <li>Banana</li>                                      2.  Banana

                                        <li>Kiwi</li>                                          3.  Kiwi   

                                        </ol> 

  How to add image to your web page?

                      Every thing is added in HTML by a tag to add image to web page use <img> tag. For                              <img> tag closing tag is not necessary. All the information necessary for the image to be                        displayed is placed in the attribute of first tag. The attributes we had seen above they are                        used to add image to web page.

    Image placement....

                You can add image where ever you want but you will get different resulteven with subtle                        change. Eg. placing the image appear on the first line of the paragraph putting two                                  conectives <img>tag makes the image appear right two the next each other.

  Figures....

                HTML offers a specific kind of image tag for figure. A figure is an image that could be moved around in your web page without dramatically alternating the flow of the page.                                           This is similar to how we think figures in encyclopedia. Figures also know for captions.To insert figure surround your <img>tag with two other tags<figure> and <figcoption>.

Eg.

         <figure>                                                                                                                                                          <img                                                                                                                                                              src=                                                                                                                                                               alt                                                                                                                                                                   title       >                                                                                                                                                       <figcaption>                                                                                                                                                 </figure>

    Use the Best image possible.....

               When adding image to your code there are few things to bear in a mind like intellectual propertyand file format/sizes that ensure best browsing experience.

      Image formats....

     JPEG :- It is good format to use when adding photo.

     GIF:- Animated GIFs loves everyone. It is perfect file for animated image.

      There are many image formats.

Note - While creating your web page keep mind in that keep your image size is reasanable and measure in pixels 200px by 2000px it should be help faster page loading.

   Create General page structure......

 Structure elements or zones- Headers,navigation,areas,sections,articles.

1. <header>: The section at the top of the page that often includes a logo and sometimes a nav.
2. <nav>: A set of menu items that allow a user to navigate to different pages on a site.
3. <section>: A general section of a related content.
4. <article>: A piece of content that can be independently sheared,like a blog post or newspaper.
5. <footer>: The section at the bottom of a page that often has a additional links and perhaps social shearing icons.
6. <aside>: This could be a informative side section on a related subject.
7. <figure>: A grouped image and caption that create an informative visual of some kind.