Learning basic HTML fundamentals in simple and easy steps to start building your own website.
The aim of this tutorial is for you to create a simple webpage, and I hope that with this you will inspire to explore more about the web.
What is HTML?
To begin with, we write HTML codes to be able to create a webpage and display the results through a web browser.
HTML stands for HyperText Markup Language used to create pages and make them more meaningful.
HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. Hypertext means that the document contains links that allow the reader to jump to other pages within the document or another document.
To do this remember these two things: Tags and Attributes are the basis of HTML.
Tags
Are used to mark up the start of an HTML element and they are usually enclosed with a brackets
An example of a tag is: <html>
Most tags must be opened <html> and closed </html> in order to function.
Attributes
Contains additional information of a certain tag or properties of a tag. Attributes take the form of an opening tag and additional info is placed inside.
An example of an attribute is: <img src=”apple.jpg” alt = “apple image”>
In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.
The majority of tag must be opened (<tag>) and closed (</tag>).
When using multiple tags, the tags must be closed in order in which they were opened.
<strong><h1>This is really important!</h1></strong>
Editors
A program for editing HTML tags and attributes that can offer convenience with added functionality.
There are so many downloadable text editors, but for now, we will use the built-in Notepad (Windows PC) or TextEdit (MacOSx).
Your first HTML page
First things first, open your HTML editor. You will find a clean white page on which to write your code.
Next, you need to layout your page with the following tags.
These tags should be placed underneath each other at the top of every HTML page.
<!DOCTYPE html> Specify the language you will write on the page. In this case, the language is HTML 5.
<html> The starting point of HTML code.
<head> This is where all the metadata for the page goes.
<body> This is where the content of the page goes.
<title> This is where we insert the page name as it will appear at the top of the browser window or tab.
<meta> This is where information about the document is stored: character encoding, name (page context), description.
Basic HTML structure
<!DOCTYPE html>
<html>
<head><title>This is your Title</title></head>
<body>
<p>This is the content of your page</p>
</body>
</html>- Save your HTML file as index.html
- Use the *.html or *.htm extension to save your webpage.
- To view the webpage just simply double click index.html file or open your favorite browser (e.g. Firefox, Chrome, Edge, etc)
The above codes should look like this.
The next step is to create contents of a page this inside between the <body> . . . . </body> tag.
The HTML <body> is where we add the content which is designed for viewing by human eyes including text, images, tables, forms, videos, and a lot more.
We will add also an attribute to the <body> tag like this the background color is green.
<body bgcolor = “green”>
Example:
The above codes should look like this in a webpage.
Congratulations on your first webpage!
Some body tags and attributes:
<BODY>...</BODY> | Contains the viewed portion of the document |
<BODY bgcolor="color"> | Sets the color of the background in hexadecimal code |
<BODY background="filename.jpg"> | Sets an image as a page’s background (wallpaper) |
<BODY text="color"> | Specifies the color of normal text in hexadecimal code |
<BODY link="color"> | Specifies the default color of unvisited links in hexadecimal code |
<BODY alink="color"> | Specifies the color of links on click in hexadecimal code |
<BODY vlink="color"> | Specifies the color of followed links in hexadecimal code |
You might check this reference to know more about HTML Tags list.
Technopreneur. Foodie. Traveler. {Ex REMO @Mozilla @MozillaPhilippines} is particularly interested in earth science, cybersecurity, cloud services, market research, data visualization, and analytics.
2
0