Web Development

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

element.

Element

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.
    [/code]

    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.

    WHAT’S NEXT?

    Let’s create a simple HTML Form.

     

    Join Our Newsletter Today

    Stay updated with all latest updates.
    Give it a try, you can unsubscribe anytime.
    Subscribe
    SUBSCRIBE NOW

    About the author

    Sandeep Likhar

    Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

    Leave a Reply

    20 Comments on "Layout Your Webpage"

    Notify of
    avatar
    Sort by:   newest | oldest | most voted
    laurie hylton
    Guest

    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.

    Raymond Strode
    Guest

    Very shortly this web site will be famous among all
    blogging people, due to it’s pleasant posts

    James
    Guest

    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!

    Paulette Fredericks
    Guest

    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.

    Tommie
    Guest

    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..

    John
    Guest

    Pretty! Tɦis wass an increԁibly wondeгful post. Thank youu for providing this information.

    Anton Porter
    Guest

    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!

    Jon Hylton
    Guest

    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!

    Janina
    Guest

    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.
    . . . . .

    Roxanna
    Guest

    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!

    Consuelo
    Guest

    TҺesе are genuiunely great ideas in concerning blogging.

    You hаvе touched some nice things here. Anny way keep up wrinting.

    Daryl
    Guest

    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.

    Sibyl Monette
    Guest

    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

    Cathy Bollinger
    Guest

    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!

    Tiffani
    Guest

    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.

    Hyman Dethridge
    Guest

    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?

    Sebastian LLanos
    Guest

    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.

    Janis Karn
    Guest

    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
    blog!

    Angeline
    Guest

    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..

    Katherine
    Guest

    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.

    wpDiscuz

    The Man Behind LetsDnD

    Sandeep Likhar

    Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

    © Copyright 2016 - Lets Design n Develop

    DON’T MISS OUT!
    Subscribe To Newsletter
    Be the first to get latest updates and exclusive content straight to your email inbox.
    Stay Updated
    Give it a try, you can unsubscribe anytime.

    Join Our Newsletter Today

    Stay updated with all latest updates.
    Give it a try, you can unsubscribe anytime.
    Subscribe
    SUBSCRIBE NOW