HTML Tutorial – Part 1
THE BEGINNING OF HTML TUTORIAL
In this tutorial, we will learn about HTML. This tutorial will be divided into several parts. Let’s get started with the tutorial.
Q. What is HTML ?
- HTML is an acronym for Hypertext Markup Language. HTML describes the structure of Web pages using markups. It is used for creating websites. You need a good understanding of HTML to become a better web designer or a web developer. The latest version of HTML is HTML5.
Q. Do you know who introduced HTML?
- If you google, “Who invented HTML”, you will get the answer as “Tim Berners Lee”
Q. How does a simple HTML look?
- Below is the HTML startup template.
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title> We are learning HTML</title> </head> <body> <h1> Hello World! </h1> <h3> Learn HTML easily</h3> </body> </html> |
Output:
Q. How to view HTML of any website?
- Go to the website that you want to see for HTML source code.
- Right click on the page.
- Select View Source.
Q. What do we need to start writing HTML?
- A text editor which allows you to save with an extension, “.html”. (I will be using Notepad++)
- Any web browser. (I will be using Firefox)
Checkpoint:
At this point, make sure that you have completed following steps.
- You have a text editor and a browser.
- Copy the starter code from above, paste it into new file and save it as hello.html .
- Double click your new file, hello.html .
- Compare your output with the output above.
If you were unable to do any steps above or you did not get any similar output then comment below so that we could help you at this point. Otherwise, you can proceed further with the tutorial.
Before we begin writing HTML, it is important to know some basic terms in HTML.
Some basic HTML terms to remember:
HTML structure
- I am sure that you have seen or read newspaper and books. There are headings, sub headings, paragraphs, images and so on. There are different pages for different sections. It has been structured well so that readers are able to differentiate between articles. Similarly, HTML needs to be structured well. We use HTML elements to structure our HTML page.
Simple example on structuring the web page using limited HTML elements. Do not worry about all the HTML tags shown below, we will learn them later in this tutorial.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <title> We are learning HTML</title> </head> <body> <h1>DS Solutions Tutorial</h1><hr> <a href="#"> HOME </a> <a href="#"> CONTACT</a> <a href="#"> ABOUT</a> <hr> <h1> Article title 1</h1> <h3> Subheading2</h3> <img src="images/structureExample.jpg" alt="Example Image1.jpg" width="450" height="200"> <p> First paragraph content is here.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin malesuada elit, non malesuada mauris pretium ac. Curabitur vitae gravida mi. Curabitur elementum tellus libero. Aliquam et nibh eu nulla rhoncus facilisis. Quisque ut auctor ex, sit amet dapibus ligula. Cras mi leo, aliquet vitae bibendum id, dignissim ut eros. Duis gravida leo ac odio aliquam mollis. Nulla venenatis pretium libero, a pretium dui. Nullam sed dignissim tortor. Aliquam pulvinar imperdiet pellentesque. Phasellus varius in neque id aliquam. Morbi dignissim porta orci, sit amet consectetur leo. Cras laoreet et leo eget laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed id purus eu nisi finibus tempus. </p> <p> Second paragraph content is here.Quisque mollis ipsum purus, vel maximus augue venenatis ut. Mauris et consequat ex. In non malesuada lectus. Donec molestie sit amet dui ac scelerisque. Proin nisi arcu, commodo ut consectetur in, sodales non neque. Integer viverra lacinia ex, non auctor nisi elementum vitae. Nullam sagittis et quam eget bibendum. Donec eget erat dignissim, sollicitudin metus vel, porta nibh. Ut placerat, est ac tempus ultricies, nunc dui sagittis odio, vel eleifend odio magna non lacus. </p> <h1> Article title 2</h1> <h4> Subheading2</h4> <p> Content of the article 2 is here. Ut at enim nisl. Proin blandit feugiat porttitor. Quisque nibh turpis, ultricies eu suscipit vel, varius ut tellus. Praesent eleifend nulla nec nibh auctor iaculis. Phasellus eu ipsum mi. Nam accumsan varius turpis, id fringilla mi varius ac. Nunc sit amet lectus sed augue consequat ullamcorper vel ut arcu. </p> <hr><hr> <p> FOOTER GOES HERE </p> </body> </html> |
Output:
HTML Elements
- HTML elements starts with opening tag and ends with closing tags. Generally, HTML tags are referred as elements. Some important HTML elements are <head> … </head>, <title> … </title>, <br>, <p>…</p> and so on.
HTML Tags
- “<” is a left angle bracket and “>” is right angle bracket.
- The starter of an element is known as opening tag and the tag that ends the HTML element is known as the closing tag. In the closing tag, we add the forward slash (“/”) before the tag name. Most of elements will have opening tags as well as closing tags in a pair such as
- <div>… </div>
- (Here, <div> is opening tag and </div> is closing tag)
- <p>…</p>
- (Here, <p> is opening tag and </p> is closing tag)
- <div>… </div>
- There are self-closing tags in HTML which do not need closing tags to end it.
- <br>
- <hr>
- <input>
- NOTE: The term for tags and elements is often used interchangeably.
HTML attributes
- Attributes are added to any elements to make elements more descriptive. It provides extra information to the element. Certain attributes like src, alt, width and height is used to specify the source, alternative text, width and height of the image in the html.
- <img>
- (Here, <img> is HTML element without any attributes)
- <img src = “myImage1.jpg” alt = “My Image 1” width= “800” height = “600” >
Attribute Name
Attribute Values
src
myImage1.jpg alt
My Image 1 width
800 height
600
- <img>
Block Elements
- Elements that take the whole area from left to right in any section is known as Block elements. For example, <h1>…</h1>, <p>…</p>, are block elements. Whenever you define a <p>…</p> element, it will start in a new line or say it will make up a block.
Inline Elements
- Elements that continue to align with another elements on same line is known as Block elements. For example, <em>…</em>,<img>, <a>…</a> are block elements.
Below you can see the difference between the block element and inline element. The red box is the area occupied by each block element whereas the white box is the area occupied by each inline elements.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title> Block Element Vs Inline Element</title> </head> <body> <h1>h1 element</h1> <p> p element</p> <p> Second p element, <h3>h3 element inside p element</h3></p> <em> em element</em> <a href="#">a element</a> <p>Third p element, <em>em element inside p element</em></p> </body> </html> |
Output:
That’s all for the HTML tutorial Part 1.
Continue learning on HTML tutorial Part 2.
August 7, 2018 @ 8:30 pm
Where is the tutorial ?
August 8, 2018 @ 3:17 am
Coming soon. Get ready for Tutorial and articles everyday.