Html is the abbrevation of "Hyper Text Markup Language" and is used for web development. The first step of web development and web designing is to learn Html. Html together with css is
used to make the layout of the webpages. In this lesson we will start learning Html and Css from the very beginning to make our first very simple webpage.
To start our journey of web development there are a couple of things we will need first. We will need a decent source code editor to write our code and a web browser preferably google chrome to test our code. The code editor i use is notepad++ and you can download it here.
Open your code editor, go to file, open a new file and save it as an html document. Open your newly saved html file in a web browser and as the newly saved file is blank the output seen in the browser will be a blank page. Now let us make our first web page and the first thing we will need to make a web page is to get some knowledge about the html tags. The first tag of html language is <html></html>. This tag tells the browser to treat anything between the opening <html> tag and closing </html> tag as html content. A few more tags necessary for a basic webpage layout are listed below:
Head Tag:
Any thing written between the opening and closing head tags (<head></head>) will appear in the head of the web page. Forexample the title of the website will appear in the head of the page i.e
Body Tag:
Any thing written between the opening and closing body tags (<body></body>) will appear in the body of the web page. Forexample If we write "This is test sentence" between the body tags the output in the browser will be something like this.
Title Tag:
Anything written between the title tags (<title></title>) will appear as the title of the page in the head.So the basic chunk of code we will need in all of our html files is this:
<html>
<head>
<title> Title of the Website </title>
</head>
<body> All the content of the website </body>
</html>
Div Tag: Div is the most important tag of html. Div tag is used to define a block or a section in an html web page. The css we will use for now is inline css. In inline css the style of the html element is written inside the element itself. Consider the following code:
<div style="width:100px;height:100px;border:1px solid black;"></div>
In the above code we have used the div tag along with the inline css to make a box in html. If we remove style from the div the page output will be blank again. The div will still be there but without styling we just cannot see it in the browser. Consider the following code for a very simple single column web page layout.
<html>
<head>
<title> Title of the Website </title>
</head>
<body>
<div style="height:100px;border:1px solid black;background:red"></div>
<div style="height:450px;border:1px solid black;background:orange"></div>
<div style="height:70px;border:1px solid black;background:brown"></div>
</body>
</html>
In the above code we have used 3 div tags to make 3 blocks and each block has it's own css to make it distinguished from others. The scope of this lesson ends here. In the next lesson we will learn a little more about html and css.
To start our journey of web development there are a couple of things we will need first. We will need a decent source code editor to write our code and a web browser preferably google chrome to test our code. The code editor i use is notepad++ and you can download it here.
Open your code editor, go to file, open a new file and save it as an html document. Open your newly saved html file in a web browser and as the newly saved file is blank the output seen in the browser will be a blank page. Now let us make our first web page and the first thing we will need to make a web page is to get some knowledge about the html tags. The first tag of html language is <html></html>. This tag tells the browser to treat anything between the opening <html> tag and closing </html> tag as html content. A few more tags necessary for a basic webpage layout are listed below:
Head Tag:
Any thing written between the opening and closing head tags (<head></head>) will appear in the head of the web page. Forexample the title of the website will appear in the head of the page i.e
Body Tag:
Any thing written between the opening and closing body tags (<body></body>) will appear in the body of the web page. Forexample If we write "This is test sentence" between the body tags the output in the browser will be something like this.
Title Tag:
Anything written between the title tags (<title></title>) will appear as the title of the page in the head.So the basic chunk of code we will need in all of our html files is this:
<html>
<head>
<title> Title of the Website </title>
</head>
<body> All the content of the website </body>
</html>
Div Tag: Div is the most important tag of html. Div tag is used to define a block or a section in an html web page. The css we will use for now is inline css. In inline css the style of the html element is written inside the element itself. Consider the following code:
<div style="width:100px;height:100px;border:1px solid black;"></div>
In the above code we have used the div tag along with the inline css to make a box in html. If we remove style from the div the page output will be blank again. The div will still be there but without styling we just cannot see it in the browser. Consider the following code for a very simple single column web page layout.
<html>
<head>
<title> Title of the Website </title>
</head>
<body>
<div style="height:100px;border:1px solid black;background:red"></div>
<div style="height:450px;border:1px solid black;background:orange"></div>
<div style="height:70px;border:1px solid black;background:brown"></div>
</body>
</html>
In the above code we have used 3 div tags to make 3 blocks and each block has it's own css to make it distinguished from others. The scope of this lesson ends here. In the next lesson we will learn a little more about html and css.
Related Posts
Html Text Tags
Html Image and Anchor Tags
Html Form Elements
Html Tables
Row and Column Span in html
Iframe tag in html
Simple 2 column layout of a web page
3 column layout of a web page
No comments:
Post a Comment