Today, the Internet is among the most powerful pieces of equipment throughout the world. And in today’s society, the world wide web is the main issue with everyone’s life. Whether it is school, business, or entertainment, it has influenced us immensely.
There are millions of websites providing information and services. These websites display information in the form of web pages.
This article will help you to build your first web page.
HTML (Hypertext Markup Language) is used to create web pages. W3C (World Wide Web Consortium) develops standards to ensure the long-term growth of the Web. The structure of an HTML document consists of many tags. A tag specifies how content will be displayed by the browser over the user’s screen.
Structure of an HTML Document
HTML document is written between <html> and </html> and “<” represents an opening tag and “</” represents a closing tag.
An HTML document has two main parts – Head and Body.
The head part contains information such as the document’s title. The web browser does not display the content of this part.
The BODY part of an HTML document is where all the information you wish to view must appear. This section contains all the information that appears on the web page formatted by using different types of tags.
Example of an HTML document:
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
This is a very simple HTML document having one line.
</body>
</html>Styling Text in a Web Page
HTML provides several tags to style the text, such as Bold, Underline, Italics.
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
<b> This line in BOLD. </b>
<u> This line is underlined. </u>
<i> This line in Italics. </i>
</body>
</html>You can also use these tags together. When two or more tags are used together, then the one that opens first closes last.
For example:
<b><i> This line is bold and italics </i></b>
<b><u> This line is bold and underlined </u></b>
<b><i><u> This line is bold, italics and underlined </u></i></b>As you can see, there is no line break between the lines. You can provide line breaks between the lines by using the <br> tag.
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
<b> This line in BOLD. </b> <br>
<u> This line is underlined. </u> <br>
<i> This line is in Italics. </i> <br>
</body>
</html>This line is underlined.
This line is in Italics.
Presenting information in paragraphs makes it easy to read and understand. You can use the <p> tag to create paragraphs.
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
<p> HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. </p>
<p> HTML consists of a series of elements. HTML elements tell the browser how to display the content. </p>
</body>
</html>HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page.
HTML consists of a series of elements. HTML elements tell the browser how to display the content.
You can also choose from different heading styles to display the text on a web page. There are six heading styles available from <h1> to <h6>, <h1> being the biggest and <h6> the smallest.
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</body>
</html>Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Linking Web Pages
A website consists of several web pages that are linked to one another. One can move from one page to another by clicking on the links provided on the pages. These links are commonly known as hyperlinks. The hyperlinks are created using the anchor tags <a>.
The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination. By default, links will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
A linked page is normally displayed in the current browser window unless you specify another target.
<html>
<body>
<h1>The a element</h1>
<a href="https://www.codinghero.ai">Visit CodingHero.ai!</a>
</body>
</html>The a element
Visit CodingHero.ai!CSS – Styling Sheets
In addition to the tags used for text markup that we have seen above, the CSS (Cascading Style Sheets) can be used to style a chunk of text. Instead of styling individual elements, with CSS, you can style a whole group of elements in an HTML document.
With CSS, you can control the colour, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colours are to be used, different displays for different devices and screen sizes, and much more!
CSS can be added to HTML documents in 3 ways:
- Inline – by using the style attribute inside HTML elements
- Internal – by using a <style> element in the <head> section
- External – by using a <link> element to link to an external CSS file
Here we will be using the first two ways (Inline and Internal) to style the web page.
An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element. The following example sets the text colour of the <h1> element to blue, and the text colour of the <p> element to red.
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>A Blue Heading
A red paragraph.
An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element. The following example sets the text colour of all the <h1> elements (on that page) to blue, and the text colour of all the <p> elements to red. In addition, the page will be displayed with a green background colour.
<html>
<head>
<style>
body {background-color: pink;}
h1 {color: blue; }
h1 {text-align: center;}
h2 {color: brown; }
h2 {text-align: left;}
p {color: red;}
</style>
</head>
<body>
<h1>About CSS</h1>
<h2>Inline CSS</h2>
<p> An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the "h1" element to blue, and the text color of the "p" element to red:
<h2>Internal CSS</h2>
<p>An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the head section of an HTML page,
within a style element. The following example sets the text colour of all the "h1" elements (on that page) to blue, and the text
colour of all the "p" elements to red. In addition, the page will be displayed with a green background colour.</p>
</body>
</html>About CSS
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element. The following example sets the text color of the “h1” element to blue, and the text color of the “p” element to red:
Internal CSS
An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the head section of an HTML page, within a style element. The following example sets the text colour of all the “h1” elements (on that page) to blue, and the text colour of all the “p” elements to red. In addition, the page will be displayed with a green background colour.
Tables in HTML Document
Data is an important part of the information and it helps in making decisions and inferences. The data becomes more meaningful and understandable when represented in a presentable manner. There are many ways to present data. The table is one such tool.
The <table> tag defines an HTML table. Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag. By default, the text in <th> elements are bold and centered. By default, the text in <td> elements are regular and left-aligned.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The table element</h1>
<table>
<tr>
<th>Grade</th>
<th># of Students</th>
</tr>
<tr>
<td>VI</td>
<td>38</td>
</tr>
<tr>
<td>VII</td>
<td>32</td>
</tr>
<tr>
<td>VIII</td>
<td>34</td>
</tr>
</table>
</body>
</html>The table element
| Grade | # of Students |
|---|---|
| VI | 38 |
| VII | 32 |
| VIII | 34 |
You can decorate the table by using tags like rowspan, colspan, and CSS attributes of the table such as border, width, height, text-align, vertical-align. And along this one can have an image and link also as the content of the table.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;}
table {width: 100%;
border-color: red;}
th {height: 50px;
color: red;}
tr {height: 50px;
text-align: center;
color: blue;}
</style>
</head>
<body>
<table style="background-color:#cceeaa">
<tr>
<th rowspan = "2">Name</th>
<th colspan = "3">Marks</th>
<th rowspan = "2">Total</th>
</tr>
<tr>
<td>Mathematics</td>
<td>Science</td>
<td>English</td>
</tr>
<tr>
<td>Ravi</td>
<td>83</td>
<td>88</td>
<td>82</td>
<td>253</td>
</tr>
<tr>
<td>Saurabh</td>
<td>78</td>
<td>92</td>
<td>85</td>
<td>255</td>
</tr>
<tr>
<td>Shweta</td>
<td>79</td>
<td>85</td>
<td>89</td>
<td>253</td>
</tr>
</table>
</body>
</html>The table element
| Grade | # of Students |
|---|---|
| VI | 38 |
| VII | 32 |
| VIII | 34 |
Lists in HTML Document
One of the important tags that are available in HTML is for creating lists. One can create two types of lists in HTML – Ordered list and Unordered list. The items of the ordered list are preceded by numbers, whereas the items of an unordered list are preceded by symbols like dots.
The ordered lists are created by using the tag <ol>, where the unordered lists are created using the tag <ul>. The list items in both cases are designated by the tag <li>.
Creating an Ordered List:
<html>
<head></head>
<body>
<h4>List of Colours</h4>
<ol>
<li>Violet</li>
<li>Indigo</li>
<li>Blue</li>
<li>Green</li>
<li>Yellow</li>
<li>Orange</li>
<li>Red</li>
</ol>
</body>
</html>List of Colours
- Violet
- Indigo
- Blue
- Green
- Yellow
- Orange
- Red
Creating an Unordered List:
<html>
<head></head>
<body>
<h4>List of Colours</h4>
<ul>
<li>Violet</li>
<li>Indigo</li>
<li>Blue</li>
<li>Green</li>
<li>Yellow</li>
<li>Orange</li>
<li>Red</li>
</ul>
</body>
</html>List of Colours
- Violet
- Indigo
- Blue
- Green
- Yellow
- Orange
- Red
Nested Lists
<html>
<head></head>
<body>
<h4>List of Items</h4>
<ol>
<li>Notebook</li>
<ul>
<li>Long Notebook</li>
<ul>
<li>Red Cover</li>
<li>Blue Cover</li>
<li>Green Cover</li>
</ul>
<li>Short Notebook</li>
<ul>
<li>Red Cover</li>
<li>Blue Cover</li>
<li>Green Cover</li>
</ul>
</ul>
<li>Pen</li>
<ul>
<li>Fountain Pen</li>
<li>Ballpoint Pen</li>
<ul>
<li>Red</li>
<li>Blue</li>
<li>Black</li>
</ul>
</ul>
<li>Pencil</li>
<ul>
<li>Black Lead</li>
<li>Colour</li>
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
</ul>
</ol>
</body>
</html>List of Items
- Notebook
- Long Notebook
- Red Cover
- Blue Cover
- Green Cover
- Short Notebook
- Red Cover
- Blue Cover
- Green Cover
- Pen
- Fountain Pen
- Ballpoint Pen
- Red
- Blue
- Black
- Pencil
- Black Lead
- Colour
- Red
- Blue
- Green
You can also list by using different CSS properties of lists such as
- Set different list item markers for ordered lists
- Set different list item markers for unordered lists
- Set an image as the list item marker
- Add background colours to lists and list items
To set the list item marker for an unordered list as squares, use ul{ list-style-type: square;}
<html>
<head>
<style>
ul{
list-style-type:square;
}
</style>
</head>
<body>
<h2>An Unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>An Unordered HTML list
- Coffee
- Tea
- Milk
ol{ list-style-type: upper-roman;} will set the list item marker as upper roman numerals.
<html>
<head>
<style>
ol{
list-style-type:upper-roman;
}
</style>
</head>
<body>
<h2>An Ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>The list-style-image property replaces the list-item marker with an image.
<html>
<head>
<style>
ol{
list-style-image:url("tom.jpg");
}
</style>
</head>
<body>
<h2>An HTML list with image</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>An HTML list with image
- Coffee
- Tea
- Milk
You can also add special characters to list items by using <li> <span> 😀 </span> Coffee </li> (128512 is a code for a special character that you want to include).
<html>
<head> </head>
<body>
<h2>An HTML list with special characters</h2>
<ul>
<li> <span> 😀 </span> Coffee </li>
<li> <span> 😀 </span> Tea </li>
<li> <span> 😀 </span> Milk </li>
</ul>
</body>
</html>An HTML list with special characters
- 😀 Coffee
- 😀 Tea
- 😀 Milk
Image Credit: Banner vector created by vectorpouch – www.freepik.com
