This is ground zero. This is where we'll begin our journey of mastering the building block of a website i.e. learning about HTML. I will be documenting my learning about HTML in 5 chapters. Today will be the article that will focus on the basics and the subsequent chapters will dive even deeper.
So without further ado, let's begin.
We start building a website by creating a file named 'index.html'.
Index.html is a special file name presented when the website root address is typed. We tell the server that whenever it serves our website, it should start from the 'index.html' file.
A basic HTML page:
<!Doctype html>: specifies that this is an HTML document.
<html>: the root of an HTML page.
<head>: contains page metadata.
<title>--name of the page--</title>: contains the title of your web page.
</head>: closing head tag
<body>: The main body of the page rendered by the browser.
<h1>heading1</h1>: The heading tag. It can range from heading 1 to heading 6.
<p>--sometext--</p>: The paragraph tag.
</body>: The body closing tag.
</html>: The HTML closing tag.
A tag is like a container for either content or some other HTML tags.
Almost all the tags have opening and closing tags except a few that are called as empty tags. For example: <br>,<hr>.
In VS code editor, if you want to generate some dummy text, to fit in your paragraph tag, you can type 'lorem' followed by the number of words you want to generate. Eg: lorem45 will generate a dummy text having 45 words.
The website code or the source code comes to the browser from the server and then the browser renders the contents of your website.
The browser converts the source code into a viewable form.
Important notes:
The head and body are the children of the HTML tag. In other words, the head and body are siblings.
<h1>and<p>are the children of body tag but not always applicable.We can use either the
.htmlor.htmextension to create an html file.
Note: In VS code editor, the live server extension may not detect index.htm file as the starting page. Because, in the backend code, the developer might skip writing a code that supports a file or a page having .htm extension as .html is a widely used extension.
You can use the 'inspect element' and 'view page source' options when you right-click on your mouse to look into a website's code. You can edit the code there and the changes will be visible on your browser temporarily. But that does not change the code in the backend. When you refresh the page, the changes won't be seen and the default page will show up.
HTML element= start tag + content + end tag
Comments in HTML:
Comments are used to mark text that should not be parsed by the browser. These are used to document the source code to improve the readability for other developers.
<!--html comment-->: Example of an html comment.
Tip: ctrl + / in VS code editor to comment in HTML.
Case sensitivity:
HTML is case insensitive. The tags can be either upper case or lower case but it is recommended to use the lower case tags.
And, that's a wrap for today. Tomorrow I'll shed some more light on HTML tags and attributes to gain a strong grasp of html. This may not look like a lot but tiny steps make it easier to learn and digest. I know, this is not something that many wouldn't know, but as a part of me documenting my learning, I felt it's important to share my learning in public.