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,
- Create an empty document
- Write content in the document
- Save document with .html extension
- View document in browser
- Add some tags to the text
- View document in browser again
- Different websites’ layouts
- Write your own web page
Create an empty document
Create an empty 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.
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).
View document in browser
So now lets see how it works!
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!
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
Write your own web page
Furthermore, I will show you designing web layouts in my next post. So Stay Tuned.