Hey guys!! Hope you are doing well. In the this post we are going to delve introduction to html.
Here i’ll cover html definition and its prerequisites.
Introduction To HTML: what is html?
If you are going to follow along this post, you should be having at least two web browsers installed on your system. So if you are Microsoft Windows user you would probably be having internet explorer already. So what you can do in that case is you can download and install Google Chrome or Firefox and if you are a Mac user then you probably use Safari. Make sure that whatever examples we discuss in this post you check them out across different web browsers. Just to make sure that whatever code you write looks the same across different browsers and this is very important because you wouldn’t want to ever make a website that looks one way or functions one way in one browser and functions in a different way on another browser.
Another thing is that you would also need a good text editor. And again if you are a Microsoft windows user then Microsoft notepad would probably be your default text editor and notepad is not a bad program. It’s a good piece of software but it doesn’t fulfill all our requirements. So i’m using notepad++. It’s a free tool that you can download and install from the internet. It provides syntax highlighting feature which allows users to detect bugs in websites. It makes debugging very easy and even otherwise i personally like the look and feel of the software. It provides lot of features and it’s a good software.
example: Introduction To HTML
Over here i have a very simple HTML document,
<!DOCTYPE html> <html> <head> <title>Introduction - Structure of HTML</title> </head> <body> <h1> Heading </h1> <p> This is a paragraph </p> </body> </html>
All html files have to be saved with the extension dot html (.html). This is very important. Even if you’re going to use microsoft notepad you would have to save all your html documents with the extension dot htm (.htm) or dot html (.html). Because only then will web browsers understand that these are html files and would process them accordingly.
What i have in above file is the doctype declaration,
Above declaration is very simple. You have exclamation symbol and the word doctype and html and this is enclosed between less than symbol (<) and the greater than symbol (>). The purpose of having this file is that it instructs web browsers that whatever follows after the declaration in the file is all HTML. It’s kind of like a warning to web browsers. This is the HTML5 way of including the doctype declaration. Above declaration should be included in all the web pages.
Also Read – HTML Attributes
Next we have <html> tag. All the HTML elements have to go between the opening (<html>) and closing (</html>) tags. Although the doctype declaration takes the form of an html tag it’s not actually an html tag. That is, the html tag is enclosed between the less than symbol and greater than symbol. But <html> tag is part of the html language whereas doctype declaration is not an html element. It’s something that you have for the sake of your web browsers. But doctype declaration is not going to change the functionality of web pages in any way. However <html> is a requirement you need to have. If you don’t have it then web browsers won’t render the webpage at all.
Any html document have two sections. It’s going to have head section and body section. Whatever you’re going to put within the body section of html document is going to be displayed within the main window of web browser. Whereas whatever we are going to put in the head section is not going to be displayed within the main window but you would save things like description about web pages, information about the author, title of the page as well. Let’s see how the page looks in web browser,
As you see over here at the top of the page, title of the window says “Introduction – Structure of html” (keep or hover your mouse pointer on it to see full title).
Then i have the body section which again is very simple. You have the word body between the less than and greater than symbols. In between opening and closing tags i have two more elements. First one is h1 element and this is for largest possible heading, by default html standard. Then you also have paragraph which is included through the “p” tag. Between the opening and closing <h1> tag i have the text and between opening and closing <p> tag i have the text “This is a paragraph”.
So this is how the website looks if you open in the browser. Obviously that heading is bold and bigger and the paragraph text is smaller. I hope you guys have understood the structure of basic html document.