All HTML documents have the same basic structure or boilerplate that needs to be in place before anything useful can be done.
~CREATING A HTML FILE:
- first of all,create a new folder on your computer "html-boilerplate"
2.now, within folder create a new file and named "index.html"
*THE DOCTYPE:
Every html page starts with a doctype declaration.The doctype's purpose is to tell the browser what version of html it should use to render the document.
The latest verSion HTML5 and the doctype for that version is simply <!DOCTYPE html> .
Now, open the index.html file created and add <!DOCTYPE html> to the very first line.
~HTML ELEMENTS:
After studying doctype, we need to provide an elements. This becomes more important later on when we learn about manipulating HTML with javascript.
For now, just know that the HTML elements should be induced on every document.
-
Back in the index.html lets add the elements by typing out its opening and closing tags line.
<!DOCTYPE html> <html> </html>
~HEAD ELEMENTS:
The
elements is where we put important meta-information about our webpages and stuffs required for our webpages to render correctly in the browser.NOTE: Anything included within the head elements will not be displayed to the user.
~TITLE ELEMENTS:
One elements we should use always include in the head of an html document is the title element.
~THE CHARSET META ELEMENTS:
Another important element we should always have in the head element is the meta tag for the CHARSET ENCODING OF WEBPAGE.
*Back in the index.html,let's add a head element with a title and a charset meta element within it.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
</head>
</html>
~BODY ELEMENTS:
It is the final element needed to complete the html boilerplate is the <body> element.This is where all the content that will be displayed to users will go-the text, images, lists, links etc.
<body>
</body>
</html>
*Back in the index.html file , let's add a heading to the body and save the file.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
</head>
<body>
<h1>HELLO WORLD!</h1>
</body>
</html>
Now, finally save all of this...
~HOW TO VIEW HTML FILES IN THE BROWSER:
you can drag and drop the html file from your text editor into the address bar of your favourite browser.
you can find the html file in your file system and then double click it. This will open up the file in the default browser of your system user.
-
you can use the terminal to open the file in your browser.
thank you..........
Top comments (0)