Layout Your Webpage

Layout Your Webpage is the section 11 of Beginner’s Guide to HTML.

To create a standard web page, we need to learn a bit about how to design the layout of the page you are going to create. Good layout makes a good webpage.

When we’re in the table section we said, Tables are one way of layouting the webpage. It is the old way of designing layouts, because tables are now used only for display tabular data. So the new trend of layouting is using a



We called it as a block level element.

Block level elements normally start and end with a new line when displayed in a browser. 




    are few examples.

    Inline elements are normally displayed without starting a new line.,

    , , are few examples.
    element is also like

    element but it’s an inline element. It can be used as a container for text. When used together with CSS, the element can be used to set style attributes to parts of the text.

    or Division element can be used as a container for grouping other HTML elements.  When it displays on a web browser it displays as having line breaks before and after of the element. When used together with CSS, it can be used to set style attributes to large blocks of content.

    Following is a sample layout created using division tags.

    This is my personal website to share you the movies I watched.

    Most people like to create their web pages as magazine looking frontface. Putting content like in the multiple columns. CSS are used to position elements, or to create backgrounds or colorful look for the pages. See how the above demonstration has done.

    [code language=”html”]
    This is my personal website to share you the movies I watched.

    When designing layouts, it is necessary to use CSS to make it perfect. If you see, we used inline css for the above example. Inside the style attribute of each div tags we had defined inline CSSs. In code we had used, Width and Heights, Background colors and alignment of texts and contents.
    Sometimes people used 3rd party templates rather than defining their own layouts. Because advanced layouts take time to create. There are thousands of free layouts that you can get if you searched on the internet.

    So in this section we learned about making layouts for a web page. Nowadays people do not manually create their layouts. They always obtained 3rd party layouts which are more time saving. If you are layouting or not, it’s worth learning about

    tag.  Try to create the same example above using tables. In the next section we’ll try to create a simple form.


    Let’s create a simple HTML Form.


    Written by Sandeep Likhar

    Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.


    Leave a Reply
    1. I’ve been browsing online more than 4 hours today, yet I never found any interesting article like yours.

      It’s prety worth enough for me. In my view, if all site owners and bloggers made good content
      as you did, the internet will bbe much moore useful than ever before.

    2. Good ɗay! I could have sworn I’ve been to this
      website before bbut after looking at a fеw of the articles
      I realizеd it’s new too me. Anyways, I’m certainly drlighted
      I camne acrosws it and I’ll be boookmɑrking it aand checkіng Ьack fгequently!

    3. I’m now not ѕure where you are gеtting your info, hoաever good topic.
      I needs to ѕped some time learning more or understanding more.
      Thank you for fantastic info I was on the lookoսt for this information for my mission.

    4. I am really inspired together with your writing abilities as well as with the format to your blog.
      Is that this a paid subject matter or did you customize it yourself?
      Anyway keep up the excellent quality writing, it’s rare to look a great blog like this one nowadays..

    5. Wow, fantastic blog layout! Howw long hace you been blogging for?
      you make blogging lookk easy. The overall look of your web site is magnificent,
      as well as the content!

    6. wonderful put up, very informative. I’m wondering why the opposite experts of this sector do not understand
      this. You must continue your writing. I am confident, you’ve a huge readers’ base already!

    7. Hey very nice web ѕite!! Man .. Beautiful ..
      Superb .. Ι will bookmark your blog and take the feeds additіonally?

      I am happy to search out so many helpful informɑtion here iin the publish,
      we need work out extra tеchniques in this гegard, thanks for sharing.
      . . . . .

    8. I like the helpful info you supply on your articles.
      I will bookmark your weblog and test once more here frequently.
      I’m somewhat sure I’ll learn many new stuff proper here! Good luck
      for the following!

    9. I enjoy what you guy are up too. This sort of clever work and
      exposure! Keep up the fantastic works guys I’ve included you guys to my personal blogroll.

    10. I simply couldn’t depart your site before suggesting that I realpy
      enjoed the usujal info an individual supply for your visitors?
      Is gonna bee back incessantly in order to check up on new posts

    11. Excellent website. A lot of helpful information here.
      I am sending it to a few friends ans additionally sharing in delicious.
      And obviously, thank you for your effort!

    12. Hi, I do think this is an excellent web site.
      I stumbledupon it 😉 I will return once again since i
      have saved as a favorite it. Money and freedom is the greatest
      way to change, may you be rich and continue to help others.

    13. Thank you for the auspicious writeup. It in fact was
      a amusement account it.Look advanced to more added agreeable fro you!
      By the way, how could we communicate?

    14. Its like you llearn my thoughts! You seem to grasp so much approximately this, like you wrote the ebook in it or something.

      I think that yoou cann do with some p.c. too force the message house a little bit,
      but other than that, this is fantastic blog. A great read.
      I will definitely be back.

    15. Greetings from Florida! I’m bored to tears at work so I decided to check out your website
      on my iphone during lunch break. I enjoy the info you
      present here and can’t wait to take a look when I get home.
      I’m shocked at how quick your blog loaded on my phone ..

      I’m not even using WIFI, just 3G .. Anyhow, good

    16. I’m extremely impressed together with your writing abilities and also with the format on your blog.
      Is that this a paid topic or did you modify it your self?
      Either way keep up the nice quality writing, it is rare to
      peer a nice blog like this one today..

    17. Askіng questions are in fact good thing if you are not understanding
      sommething fullƴ, but tҺis article offers pleasant underѕtanding evеn.

    Comment Below

    Back to Top