Welcome to day 1 of my 100 days web development challenge. Yesterday, I announced this challenge on my blog post. It is a 100 day challenge that I have started to learn web development and improve my coding efficiency. It was a good start as I was able to understand the importance of HTML in website development and learnt some good things that I will be sharing with you all. Below are the topics I learnt today and I have tried to explain it.
Table of Content:
What is HTML?
HTML stands for Hypertext Markup Language and is the standard markup language for structuring the web content. It was released in 1993. As the name suggests, Hypertext means linking one web document to another web document via creating links and Markup means to provide structure to a web page. Structure of a web page simply means where the content should be present, For example, when you open YouTube's website, you see the YouTube's logo on top-left, a long search bar in top-middle, your profile on top-right, and numerous videos below. This is all pre-defined structure for displaying it's content in a good manner. HTML is not case sensitive, meaning we can write the tag in capital letters or in small letters, but both are same.
HTML is not a programming language, so we don't need to build logic to use it efficiently. It provides various tags that we use. The tags are enclosed within angular brackets and majority of the tags contains a starting tag and an ending tag, for example: <p>This is paragraph tag</p>. Note that the ending tag starts with a forward slash (/ ). There are empty tag also that don't require ending tag, for example: <img> tag. The <img> tag is an empty tag which is used to display image, we will learn about it later.
HTML Syntax:
To code in HTML, it is necessary to understand it's syntax. The HTML syntax is pretty simple and easy to implement. It's given below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page.</p>
</body>
</html>
Syntax Explanation:
<!DOCTYPE html> :
- The <!DOCTYPE> is a doctype declaration.
- This first line declares the type of the document in which the web page is written.
- It is a declaration that tells the browser that the following document is written in HTML language.
- It starts with less than angular bracket followed by an exclamation mark.
- We can avoid writing this line but it is recommended to write it.
<html lang="en">
- The <html> is the root tag in html.
- Browsers begin the execution of the document from this line.
- The 'lang' is an attribute that is used to specify the language of the document. Here the language is specified as English with 'en'.
<head>
<meta charset="UTF-8">
<title>Title goes here</title>
</head>
- The <head> tag is a container for meta data about the page, meaning: it contains information about the web page.
- The <meta> tag is an empty tag that defines the meta data. Here it sets the character encoding to UTF-8 with 'charset' attribute.
- The <title> tag is used to display the title of the web page and it is displayed in the tab bar in the browser.
- The content present in the <head> element is not displayed in the browser.
<body>
<h1>Hello World!</h1>
<p>This is my first web page.</p>
</body>
- The <body> tag is a container tag where we write the content that needs to be displayed in a web page.
- We will write our all the content in this element.
- <h1> is a heading tag that is used to display the heading with most importance. We will learn about it more later.
- <p> tag is a paragraph tag that is used to display a line or a paragraph.
This is my learning on the first day of the challenge. Tomorrow I'll be diving more into the language's core .i.e. tags.
As promised, I have uploaded this code on my GitHub profile. You can access it from here: GitHub
I have listed rest of the blogs of this challenge below.
All Links:
Comments
Post a Comment
If you have any doubts, Please let me know.