Last updated on December 28th, 2023
Code of basic structure of an HTML page:
<!DOCTYPE html>: Defines the document type and version, HTML5 in this case.
<html>: The root element of an HTML document.
<head>: Contains data that is not displayed on the screen.
<title>: Contains the title of the page that appears in search results.
<body>: Contains the visible content of the page.
Example:
<!DOCTYPE html> <html> <head> <title> HTML example </title> </head> <body> Here goes the content. </body> </html>
Basic HTML text codes:
<h1>: The most important heading tag.
<p>: Defines a paragraph of text.
<br>: Inserts a line break in text. No closing tag (no </br>).
<b>: Tag for making text bold.
<i>: Tag for making text italic.
Examples:
<h1> This is a very important title </h1> <p> This is a text paragraph. </p> <b> This is a bold text. </b>
Basic HTML link codes:
<a>: Creates a hyperlink to another web page.
href (<a> attribute): Specifies the URL of the linked page.
Example:
<a href="https://webcodes.org">Link to WebCodes.org</a>
Basic HTML image codes:
<img>: Inserts an image into the page. No closing tag (no </img>).
src (<img> attribute): Specifies the URL (location) of the image.
Example:
<img src="https://webcodes.org/img/example.png">
What types of images are there?
On the Internet, the most used image types are JPG and PNG (file extension .jpg and file extension .png). JPG (JPEG) stands for “Joint Photographic Experts Group” and PNG stands for “Portable Network Graphic”. The main difference between the two types is that PNG images can contain transparent elements through which the background color or background image can be seen. The JPG image type is intended for creating high-quality photographic images that cannot contain transparent elements.
Where to find free images?
There are many websites that offer free images. Search Google for keywords “download free images” or something similar. There are also many sites on the internet that offer free logo creation online. Search by keywords “free logo maker online”. For the purposes of these tutorials, we will use an example image hosted at: https://webcodes.org/img/example.png
Basic HTML list codes:
<ul>: Defines an unordered list.
<ol>: Defines an ordered list.
<li>: Defines each item in a list.
Example:
<ul> <li>First list item.</li> <li>Second list item.</li> </ul>
Basic HTML table codes:
<table>: Defines a table.
<tr>: Defines a table row.
<td>: Defines a table data cell.
Example:
<table> <tr> <td> Table cell with some content. </td> </tr> </table>
Basic HTML form codes:
<form>: Defines a form that collects user input.
<input>: Defines an input field, such as a text box or a checkbox.
type (<input> attribute): Specifies the type of input field.
Basic input types: text, date, radio, checkbox, file, submit.
name (<input> attribute): Specifies the name of input field.
id (<input> attribute): Specifies the identifier of input field.
Example:
<form> <input type="text" id="identifier" name="name_of_field"> </form>
Note: The input tag can have several attributes, the most important of which is the name attribute. Specifying a name for the input element is important if the information from the field is to be sent to a PHP script to store the data written in the field.
Other important tags for styling and formatting the content of an HTML page:
<div>: This tag is used to group elements together and apply styles to them.
<textarea>: Defines a multi-line text input control. The rows and cols attributes define the height and width of the textarea respectively.
<hr>: Inserts a horizontal line on the page. No closing tag (no </hr>).
<!–…–>: HTML comment tag to insert comments and hints in the HTML code.
Examples:
<!-- Below you can see examples of <div>, <textarea> and <hr> tag. --> <div> Here goes the content. </div> <textarea rows="5" cols="50"> Write some text here: </textarea> <hr>
Let’s combine some of the above codes into one HTML page, like this:
<!DOCTYPE html> <html> <head> <title> Basic HTML examples </title> </head> <body> <!-- Text Examples --> <h1> This is a very important title </h1> <p> This is a text paragraph. </p> <b> This is a bold text. </b> <br> <br> <!-- Link Example --> <a href="https://webcodes.org">Link to WebCodes.org</a> <br> <br> <!-- Image Example --> <img src="https://webcodes.org/img/example.png"> <br> <br> <!-- Line Example --> <hr> <br> <br> </body> </html>
Paste the above code into Notepad and save it as basic.html on your desktop. If everything is OK, your page should look like this:
But only HTML is not enough to make an HTML page. Along with HTML you need to use CSS.