Let’s create your first ever webpage. First you will need a text editor to code out HTML. We would recommend that you install atom.io as your text editor to code HTML, as it is free and easy to use. Next, install and open atom. You will need to make a file to your computer with the extension “.html”, e.g."MyFirstWebsite.html", and get ready to code!
| Tags | Definition |
|---|---|
<!DOCTYPE html> |
The !DOCTYPE html this tag is a declaration that makes this document HTML5. |
<html>...</html> |
The html tag tells the browser that this is an HTML document. It represents the root of an HTML document and it is the container for all other HTML elements. |
<head>...</head> |
The head element is a container for all the head elements. It can include a title for the document, scripts, styles, meta information, and more. |
<title>...</title> |
The title tag is required in all HTML documents and it defines the title of the document. It also defines a title in the browser toolbar, provides a title for the page when it is added to favorites and displays a title for the page in search-engine results.
|
<body>...</body> |
The body tag defines the document's body. It contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. |
<h1>...</h1> |
The h1 The <h1> tag are used to define HTML headings. <h1> defines the most important heading. |
<p>...</p> |
The p tag defines a paragraph. |
For a start, we will need to use the <html> tag to allow the text editor know that we are using HTML from that point on. The HTML tag must be finished off by another HTML tag like this.
<html> <!--This is where the HTML code goes. This code does not necessarily have to be displayed on the website--> </html>
Next we will add the <head>. This tag links files and provides extra information about the webpage. Your webpage should now look like this:
<html> <!-- The 'head' tag should be contained inside the 'html' tag, as all the HTML code goes inside here--> <head> <!-- This is where the content in the 'head' code goes--> <title>My First Website</title> </head> </html>
Finally we will add the <body> tag. This shows what will be displayed on the webpage. Your webpage should now finally look like this:
<html>
<!-- The 'head' tag should be contained inside the 'html' tag, as all the HTML code goes inside here... -->
<head>
<!-- This is where the content in the 'head' code goes -->
</head>
<body>
<!-- This is where the content in the 'body' code goes -->
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
See the Pen Assignment 2-FirstWebsite by Sithum Dissanayake (@SithumD) on CodePen.
and BOOM!, You have just Created Your first web page!
Sithum Dissanayake
@Coding_Flow