Web Design Course – Part 2 – Basic Website Layouts

Hi Folks, I am glad to tell you that I am now finally writing my first HTML tutorial for you all. So I’m gonna show you basic website layouts in this tutorial. I will also guide you to write HTML for those web layouts. In addition to that, I will also provide you the files to download.

Every day, when you surf internet and visit websites, you see web pages with some sort of layout/designs they follow. But these designs and layout vary according to the type or nature of website you are visiting. So these websites’ layouts include Restaurant, Blog, Newspaper, E-Commerce Store, Journalism, Live TV, Media Sharing, Personal, Social Networking, Search Engine and so on. This list will never end. Therefore, the point to talk about the layout is that we all have basic idea about how the website must look according to the type or it’s nature. With the passage of time when we get familiarize with the HTML, we will be having a definite idea about how the website is structured and how it is designed in HTML. In this tutorial we will basically learn how to write web pages and how to structure it’s content.

So we’ll start by writing just random text on a document and learn how to make the document properly defined in HTML file format. Therefore, it is very necessary that you follow the guidelines of making any document an HTML file using it’s .html extension.

So let’s divide the topic into sections,

  1. Create an empty document
  2. Write content in the document
  3. Save document with .html extension
  4. View document in browser
  5. Add some tags to the text
  6. View document in browser again
  7. Different websites’ layouts
  8. Write your own web page

Create an empty document

Create an empty document

Web Design - Create New Document
Creating a New Document

 

I am creating it on my desktop because of my ease. But you can create this in any folder or directory.

Write content in the document

So to actually see how a content renders on a browser , I  write a text ‘hello world’ in the simple notepad file.

Web Design - Write Random Text
Write some random text in a document

 

So now lets see how the browser render’s it in the next step!

Save document with .html extension

Since to render your content on browser it is necessary to save your file with an appropriate extension. Browsers render file containing html extensions (But also renders files with php extensions, this falls under the dynamic web pages with advance functions. So for now lets not talk about it).

Web Design - Save HTML Document
Save document with html extension

View document in browser

So now lets see how it works!

Web Design - View Doucment In Browser
View document in browser

 

Yayyy! tap your self since you’ve your first step in to the web designing world. So you’ve learned how to render your text on web.

Therefore, you can now modify the styles according to your wish. Once you get the knowledge of its tags, attributes and elements you could be able to create wonderful web designs.

Add some tags to the text

So lets play with the text now. For that I will add some tags in it.

Here is my code below.

<html>
 <head>
  <title>hello</title>
 <head>
 <body>
  <h1>hello world</h1>
 </body>
</html>

As you can see four types of tags in the above piece of code and therefore it can be observed that each tag has its own purpose. But three tags which include in the basic structure in html are :

html, head and body tag.

Hence there are tags in html, every tag has its opening and closing. Therefore a tag with opening is defined using <>, and for closing its defined using </>. W3C standards define these standards so that every browser could easily render the customization in html file.

<html> – placed at the start of document because it tells browsers that the document is HTML based

<head> – contains title tag and meta tags. Hence, meta tag is important for search engines

<title> – title tag is important for the browser because it displays information about page properly

<body> – defines the document’s body hence it is called body tag

<h1>, <h2>, <h3>, <h4>, <h5> and <h6> – defines HTML headings. <h1> for the most important heading and therefore,  <h6> for the smallest heading in HTML

 

See document in browser again

So lets observe the changes on the browser!

Web Design Layout - See Document In Browser
See document in a browser

As a result, you can see the text style is changed and the title ‘hello’ is displaying in browser’s tab. So you can apply variety of changes in your html now to make beautiful web layouts.

Different websites’ layouts

Web Design Layout 1 - OnlineITGeek
Website Design Layout 1
Web Design Layout 2 - OnlineITGeek
Website Design Layout 2
Web Design Layout 3 - OnlineITGeek
Website Design Layout 3
Web Design Layout 4 - OnlineITGeek
Website Design Layout 4
Web Design Layout 5 - OnlineITGeek
Website Design Layout 5
Web Design Layout 6 - OnlineITGeek
Website Design Layout 6

Write your own web page

Furthermore, I will show you designing web layouts in my next post. So Stay Tuned.

 

 

 

 

8 thoughts on “Web Design Course – Part 2 – Basic Website Layouts

  • June 2, 2019 at 7:07 pm
    Permalink

    Great post! We will be linking to this particularly great post on our website.
    Keep up the great writing.

    Reply
  • June 13, 2019 at 5:04 pm
    Permalink

    I blog frequently and I really appreciate your information. Your article has
    truly peaked my interest. I’m going to book mark your website and keep checking for new information about once per week.
    I opted in for your Feed as well.

    Reply
  • July 11, 2019 at 11:02 pm
    Permalink

    Good day! Do you know if they make any plugins to help with Search Engine
    Optimization? I’m trying to get my blog to rank for some targeted keywords but I’m not
    seeing very good gains. If you know of any please
    share. Thank you!

    Reply
  • July 18, 2019 at 7:49 am
    Permalink

    Hi there to every one, the contents present at this web
    site are genuinely amazing for people knowledge, well, keep up the nice work fellows.

    Reply
  • August 3, 2019 at 6:10 am
    Permalink

    Nice blog here! Also your website loads up fast! What web host are you using?

    Can I get your affiliate link to your host? I wish my website loaded up as
    quickly as yours lol

    Reply
  • August 21, 2019 at 3:52 am
    Permalink

    I must thank you for the efforts you’ve put in writing this blog.
    I really hope to see the same high-grade blog posts from you in the future as well.
    In fact, your creative writing abilities has inspired me to get my own, personal website now ;
    )

    Reply
  • August 22, 2019 at 7:12 pm
    Permalink

    I think the admin of this web site is in fact working hard in support of
    his site, because here every stuff is quality
    based data.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *