HTML Tutorial Part 2. How To Create Your First HTML Website
Posted by TotalDC
In part 1 I explained how to declare an HTML document and I explained how HTML was built up using tags. Now lets create your first HTML website.
Below is the HTML you added in the last part.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
</html>For this section of the tutorial I will show you how to create a simple homepage.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>This is the skeleton code of an HTML file. Now let’s walk through this and understand what’s actually going on.
- As we talked in HTML tutorial part 1 <!DOCTYPE html> is the very first line which will tell the browser that this is an HTML5 document.
- The <head></head> section is going to contain all the meta data as well as title tag which defines the title of your website.
- The <body></body> section contains the content that will be visible in your browser’s screen. For now I just added “Hello World” with <p></p> tag which is used for creating a paragraph.
Now if you save this file with .html extension and open it you will see something like this.
Paragraphs and headings in HTML
<!DOCTYPE html>
<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>This is a paragraph</p>
</body>
</html>In this code I’ve defined six headings and a paragraph.
<h1>to<h6>: H1 tag is used for largest heading size and H6 tag is used for smallest heading size. Such hierachy for heading sizes is followed:- h1 > h2 > h3 > h4 > h5 > h6
- The text enclosed within heading tags will be bold.
<p>:<p>tag is used to define a paragraph in HTML.
You can copy or type the code above to your code editor and save it. The result in your browser will be like this.
Text styling in HTML
Various stylings can be applied on text or content in HTML like Bold, Italics and Underline.
- Bold: Bold effect can be applied by <b> or <strong> tag.
- Underline: Underline effect can be applied by <u> tag.
- Italics: Italics can be applied by <i> or <em> tag.
- <sup> tag is used to make superscript effect.
- <sub> tag is used to make subscript effect.
- <mark> tag is used to highlight the text.
Lists in HTML
There are twp types of lists in HTM – ordered lists and unordered lists. Ordered lists are lists that starts with numbers and are in a sequential position. Unordered lists start whit bullets and are not in a sequential position.
Ordered Lists: Ordered lists can be created with <ol></ol> tag. To add list items to the lists <li></li> tag is used.
<html>
<head>
<title>Lists</title>
</head>
<body>
<ol>
<li>First item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html>Result of this code will be –
Unordered Lists: Unordered lists can be created with <ul></ul> tag. And <li></li> tag is used to add list items.
<html>
<head>
<title>Lists</title>
</head>
<body>
<ul>
<li>First item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html>Result of this code will be –
HTML Attributes
Attributes allows us to add more information to HTML tags. They define how the element should behave.
Common attribute examples:
<img src="path.png">. Here in this tag src is the attribute which defines the source of the image from where it is displayed.<a href="https://google.com">. In this anchor tag href is the attribute which contains the path to another html file or a url<p style="color: red;">. In this paragraph tag, style attribute is used to add CSS properties to the element.
Images and hyperlinks in HTML
Images can be added to HTML document by using <img> tag. Image path must be provided in src attribute. But if no image is found or image path is broken then alt attribute is displayed.
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<img src="./dog..jpg" alt="dog image">
</body>
</html>Output of the code above will be –
Hyperlinks
Hyperlinks are used to reference an external HTML document or webpage. Hyperlinks can be added with <a></a> tag.
<a href="another_page.html">Click Here</a>Links can be styled by using CSS and manipulated with JavaScript but about that later.
Summary
In this article we talked about some of the most basic HTML elements. By now you should be able to create very simple HTML documents.
Leave a Reply