I. The structure of HTML pages

<html>

The opening <html> tag indicates that anything between it and a closing </html> tag is HTML code.

<head>

This contains information about the page (rather than information that is shown within the main part of the browser window). You will usually find a <title> element inside the <head> element.

<title> The contents of the <title> element are either shown in the top of the browser, above where you usually type in the URL of the page you want to visit, or on the tab for that page (if your browser uses tabs to allow you to view multiple pages at the same time). </title>

</head>

<body>

The <body> tag indicates that anything between it and the closing </body> tag should be shown inside the main browser window.

<main>

</main>

</body>

</html>

II. Text

II.1 Headings

HTML

<h1> This is a Main Heading </h1>

<h2> This is a Level 2 Heading </h2>

<h3> This is a Level 3 Heading </h3>

<h4> This is a Level 4 Heading </h4>

<h5> This is a Level 5 Heading </h5>

<h6> This is a Level 6 Heading </h6>

Result

This is a Main Heading

This is a Level 2 Heading

This is a Level 3 Heading

This is a Level 4 Heading

This is a Level 5 Heading

This is a Level 6 Heading

II.2 Paragraphs

HTML

<p>
A paragraph consists of one or more sentences that form a self-contained unit of discourse. The start of a paragraph is indicated by a new line.
</p>

<p>
Text is easier to understand when it is split up into units of text. For example, a book may have chapters. Chapters can have subheadings. Under each heading there will be one or more paragraphs
</p>

Result

A paragraph consists of one or more sentences that form a self-contained unit of discourse. The start of a paragraph is indicated by a new line.

Text is easier to understand when it is split up into units of text. For example, a book may have chapters. Chapters can have subheadings. Under each heading there will be one or more paragraphs

II.3 Bold and Italic

HTML

<p>
This is how we make a word appear <b>bold. </b>
</p>

<p>
This is how we make a word appear <i>italic. </i>
</p>

Result

This is how we make a word appear bold.

This is how we make a word appear italic.

II.4 Superscript and Subscript

HTML

<p>
On the 10 <sup>th </sup> of February, you will have the most difficult exam. Your grade <sup>3 </sup> will be less than 10. </p>

<p>
The first ten students (student <sub>1 </sub> to student <sub>10 </sub>) will have gifts. </p>

Result

On the 10^th of February, you will have the most difficult exam. Your grade³ will be less than 10.

The first ten students (student₁ to student₁₀) will have gifts.

II.5 Line Breaks and Horizontal Rules

HTML

<p>
We can break a line by using the <br /> tag.

We can add a horizontal rule by using the <hr /> tag.

Result

We can break a line by using the <br />
tag.

We can add a horizontal rule by using the

<hr /> tag.

III. Lists

III.1 Ordered Lists

HTML

<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ol>

Result

HTML
CSS
JavaScript
PHP

III.2 Unordered Lists

HTML

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>

Result

HTML
CSS
JavaScript
PHP

IV. Links

IV.1 Absolute and relative Links

HTML

Links are created using the <a> element. Users can click on anything between the opening <a> tag and the closing </a> tag. You specify which page you want to link to using the href attribute.

When you link to a different website, the value of the href attribute will be the full web address for the site, which is known as an absolute URL.

Absolute URL

<a href="https://ensia.edu.dz/"> The National School of Artificial Intelligence</a>

When you are linking to other pages within the same site, you do not need to specify the domain name in the URL. You can use a shorthand known as a relative URL.

Relative URL

<ul>
<li> <a href="index.html">Home</a> </li>
<li> <a href="CSS.html">CSS</a> </li>
<li> <a href="JAVASCRIPT.html">JavaScript</a> </li>
<li> <a href="PHP.html">PHP</a> </li>
</ul>

Linking to a specific part of the same page

To link to an element that uses an id attribute you use the <a> element again, but the value of the href attribute starts with the # symbol, followed by the value of the id attribute of the element you want to link to.
<a href="#Top">Top</a>

Linking to a specific part of another page

If you want to link to a specific part of a different page the href attribute will contain the address for the page followed by the # symbol, followed by the value of the id attribute that is used on the element you are linking to.
<a href="https://ensia.edu.dz/#Top">ENSIA Top</a>

Opening links in a new window

If you want a link to open in a new window, you can use the target attribute on the opening <a> tag. The value of this attribute should be _blank.

<a href="https://ensia.edu.dz/" target="_blank" rel="noopener noreferrer">The National School of Artificial Intelligence</a>

Adding rel="noopener noreferrer" to links protects your site's users against having the site you've linked to potentially hijacking the browser.

Result

Absolute URL

The National School of Artificial Intelligence

Relative URL

Linking to a specific part of the same page

Top

Linking to a specific part of another page

ENSIA Top

Opening links in a new window

The National School of Artificial Intelligence

IV.2 Email Links

HTML

To create a link that starts up the user's email program and addresses an email to a specified email address, you use the <a>
element. However, this time the value of the href attribute starts with mailto: and is followed by the email address you want the email to be sent to.
<a href="mailto:mohamed.mahmoudi@ensia.edu.dz">Contact me <a>

Result

Contact me

V. Images

V.1 Images

HTML

To add an image into the page you need to use an <img> element. It must carry the following attributes:

src: tells the browser where it can find the image file.
alt: provides a text description if the image cannot be loaded.
height: specifies the height of the image in pixels.
width: specifies the width of the image in pixels.

Result

VI. Tables

HTML

The <table> element is used to create a table. The contents of the table are written out row by row.

The <th> element is used to represent the heading for either a column or a row.

You indicate the start of each row using the opening <tr> tag.

Each cell of a table is represented using a <td> element

<table>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Grade</th>
</tr>
<tr>
<td>Amrani</td>
<td>Omar</td>
<td>5/20</td>
<th scope="row">Postponed</th>
</tr>
<tr>
<td>Mokhtari</td>
<td>Mokhtar</td>
<td>0/20</td>
<th scope="row">Postponed</th>
</tr>
</table>

Result

First name	Last name	Grade
Amrani	Omar	5/20	Postponed
Mokhtari	Mokhtar	0/20	Postponed

VI.1 Spanning columns and rows

HTML

The colspan and rowspan attributes can be used on a <th> or <td> elements and indicates how many columns or rows that cell should run across.

<table>
<tr>
<th>Days</th> <th>Morning</th> <th>Afternoon</th> <th>Night</th>
</tr>
<tr>
<th>Sunday</th> <td colspan="2">Study</td> <td rowspan="5">Sleep</td> </tr>
<tr> <th>Monday</th> <td colspan="2">Study</td> </tr>
<tr> <th>Tuesday</th> <td colspan="2">Study</td> </tr>
<tr> <th>Wednesday</th> <td colspan="2">Study</td> </tr>
<tr> <th>Thursday</th> <td colspan="2">Study</td> </tr>
<tr> <th>Friday</th> <td colspan="3">Relax</td> </tr>
<tr> <th>Saturday</th> <td colspan="2">Relax</td> <td>Sleep</td> </tr>
</table>

Result

Days	Morning	Night
Sunday	Study	Sleep
Monday	Study
Tuesday	Study
Wednesday	Study
Thursday	Study
Friday	Relax
Saturday	Relax	Sleep

VII. Forms

We create forms using the <form> tag. This element should always carry the action attribute and will usually have a method and id attribute too.

action: its value is the URL for the page on the server that will receive the information in the form when it is submitted.

method: Forms can be sent using one of two methods: get or post.

<label> element should be associated with every control element.

for attribute states which form control the label belongs to.

<input> element is used to create several different form controls. The value of the type attribute determines what kind of input they will be creating.

type="text": creates a singleline text input.
type="password": creates a single-line text input where the characters are blocked out (hidden).
type="date": create a date input.
type="email": browsers in the validation will check that the user has provided information in the correct format of an email address.
type="url": browsers in the validation will check that the user has provided information in the correct format of an URL.
type="search": a single line text box for search queries,
type="radio": creates radio buttons.
type="checkbox": allow users to select (and unselect) one or more options.
type="file": creates a box followed by a browse button.
type="submit": creates a submit button that is used to send a form to the server.
type="image"": creates an image submit button.
name: the value of this attribute identifies the form control and is sent along with the information they enter to the server.
value: is used to control the text that appears on a button
required: can be used on any form element that the user is expected to fill
maxlength: limit the number of characters a user may enter into the text field.
size: the number of characters that would be seen.
checked: when type="radio", indicate which value (if any) should be selected when the page loads.

<select> allows to select one option from a drop down list.

<option> element is used to specify the options of the drop down list.
- <option> element uses the value attribute to indicate the value that is sent to the server along with the name of the control if this option is selected.
- The selected attribute can be used to indicate the option that should be selected when the page loads.
multiple: allow to select multiple options from the list by adding the multiple attribute with a value of multiple.

<textarea> element is used to create a mutli-line text input.

cols: attribute indicates how wide the text area should be.
rows: indicates how many rows the text area should take up vertically.

HTML

<form action="#" method="post">
<label for="username">User name</label>
<input type="text" name="username" id="username" size="15" maxlength="30" required />
<label for="password">Password</label>
<input type="password" name="password" id="password" size="15" maxlength="30" required/>
<label for="birthdate">Birthdate</label>
<input type="date" name="birthdate" id="birthdate" size="15" maxlength="30" required/>
<label for="email">Email</label>
<input type="email" name="email" id="email" size="15" maxlength="30" required/>
<label for="personnal_page">Personnal page</label>
<input type="url" name="personnal_page" id="personnal_page" size="15" maxlength="30" required/>
<p>What are you?</p>
<input type="radio" name="Profession" id="Student" value="Student" checked="checked" />
<label for="Student">Student</label>
<input type="radio" name="Profession" id="Teacher" value="Teacher" />
<label for="Teacher">Teacher</label>
<p>What are your hobbies?</p>
<input type="checkbox" name="hobby" value="Sport" id="Sport" checked="checked" />
<label for="Sport">Sport</label>
<input type="checkbox" name="hobby" value="Painting" id="Painting" />
<label for="Painting">Painting</label>
<input type="checkbox" name="hobby" value="traveling" id="traveling" />
<label for="traveling">traveling</label>
<label for="sex">sex: </label>
<select name="sex" id="sex" title="sex">
<option value="male">Male</option>
<option value="female" selected>Female</option>
</select>
<p>What device do you need?</p>
<select name="instruments" size="3" multiple="multiple" title="Device">
<option value="Laptop" selected="selected">Laptop </option>
<option value="Phone">Phone</option>
<option value="keyboard" selected="selected">Keyboard </option>
<option value="GPU">GPU</option>
</select>
<label for="comments">Comments</label>
<textarea name="comments" id="comments" cols="20" rows="4">Enter your comments...</textarea>
<label for="cv">Upload your CV </label>
<input type="file" name="cv" id="cv"/>
<label for="image">Save </label>
<input type="image" id="image" src="./SRC/IMAGES/save.svg" alt="" title="image" width="100" height="40" />
<input type="submit" value="Submit" />
</form>

I. The structure of HTML pages

<html>

<head>

</head>

<body>

<header>

</header>

<main>

</main>

<footer>

</footer>

</body>

</html>

II. Text

II.1 Headings

HTML

Result

This is a Main Heading

This is a Level 2 Heading

This is a Level 3 Heading

This is a Level 4 Heading

This is a Level 5 Heading

This is a Level 6 Heading

II.2 Paragraphs

HTML

Result

II.3 Bold and Italic

HTML

Result

II.4 Superscript and Subscript

HTML

Result

II.5 Line Breaks and Horizontal Rules

HTML

Result

III. Lists

III.1 Ordered Lists

HTML

Result

III.2 Unordered Lists

HTML

Result

IV. Links

IV.1 Absolute and relative Links

HTML

Absolute URL

Relative URL

Linking to a specific part of the same page

Linking to a specific part of another page

Opening links in a new window

Result

Absolute URL

Relative URL

Linking to a specific part of the same page

Linking to a specific part of another page

Opening links in a new window

IV.2 Email Links

HTML

Result

V. Images

V.1 Images

HTML

Result

VI. Tables

HTML

Result

VI.1 Spanning columns and rows

HTML

Result

VII. Forms

HTML

Result