What is HTML?
HyperText Markup Language is a programming language used for creating the structure of web pages. Web pages are the major constituents of the internet today. Creating a website without the help of HTML is not possible. It decides the structure of the website, while CSS (Cascaded Style Sheet) and JavaScript decides the styling and computing respectively.
Let’s understand this better with an example. In order to get started off with HTML on your computer, you will need nothing more than a web browser (Google Chrome, Safari, Microsoft Edge, Mozilla Firefox etc) and a Text editor.
Setup for Learning HTML
Here are a few suggestions for Text editors that would make web computing easier:
Simplified
If you are all set by downloading one of the browsers and the text editor, you can now move on to code your first ever HTML web page.
HTML forms the structure of the website. Whereas JavaScript is like the nervous system and CSS like the clothes. Here is a representation for better understanding :
Code
Use the following code displayed below in a new file and save it as First_Page.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First Webpage</title>
</head>
<body>
<h1>Football</h1>
<img src="sub.jpg"> <!--Add your img with the filename & extension-->
<p>
<b>Why Football is my Favourite Sport? </b> Everyone has a
favorite sport; my favorite sport is football. I love the game of
football, it is a fun game to watch and play. The game is also a
physical game to play; I love to be physical. That’s probably why I
like it; also, football brings people together. There’s nothing better
than getting together on thanksgiving to watch football. I like every
sport, but football is my favorite because of the love I have for the
game, the physicality of the game, and the way the game
brings people together.
</p>
</body>
</html>In the above code you will observe tags of HTML that are written in the format <html> and </html>.
<html> – This is called as the open tag. Whereas </html> is called as the close tag. The close tag has a forward slash that makes it different from open tag. These start and close tags mention the beginning and the ending of the tag.
HTML structure has a systematic order. Multiple tags can be written inside one html file. As you go along, you will understand a lot more about HTML.
The HTML page has 2 Major parts :
- Head – The code written here runs before the webpage loads
- Body – The code here gets loaded last and can include link of scripts and other resources.
Below is a list of a few basic HTML tags used in the above activity :
| <Tag Syntax> | Tag Name | Tag Purpose |
|---|---|---|
| <h1> to <h6> | Heading Tags | To add headings on a webpage |
| <p> | Paragraph Tags | To display text in a paragraph format on the webpage |
| <b> | Bold Tags | To change the appearance of the text to bold |
| <img> | Image Tags | To add images on the webpage |
<img src=" your_file_destination / filename.extension ">In the image tag src stands for the source of the file. We need to specify the file destination along with the file name. HTML then tries to fetch the image. If it is located, then the image will be displayed or else a broken image thumbnail will be displayed.
The tags which are used on the webpage have no style or CSS (Cascaded Style Sheet) applied. HTML pages without CSS do not look appealing. Download all the files from the link below and edit the file for more fun.
2 thoughts on “Creating Your First Web Page using HTML for Kids”