HTML

HTML stands for Hyper Text Markup Language. It is the standard markup language for creating Web pages. It describes the structure of Web pages using markup. HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items. It can embed scripts written in languages such as JavaScript which affect the behavior of HTML web pages.

To read the living standard of HTML, head over here.

When writing HTML, you will typically be marking up or writing content inside a series of tags or elements. These elements are denoted by angle brackets, and most come in pairs: an opening tag and a closing tag. The opening tag denotes the start of a piece of content; the closing tag denotes the end. For instance, a paragraph element would look like this: <p> This is a paragraph </p>

I. The structure of HTML pages

                <!DOCTYPE html>
        <html lang="en">

        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="Styles.css">
        <title>Basics</title>
        </head>

The HTML 5 document starts with the <!DOCTYPE html> declaration. This declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
The <html> element is the root element of an HTML page.
The lang attribute inside the <html> tag sets the language of the document.
The <head> element contains meta-information about the document, such as its title, scripts, and style sheets.
Character encoding is specified with the <meta charset="UTF-8"> tag. It tells the browser how to interpret the characters in your HTML document.
The <title> element specifies a title for the document.

<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

HTML elements are used to describe the structure of the text on a page. They also provide semantic information about where emphasis should be placed, the definition of acronyms and abbreviations, when something is a citation, and other such semantic information.

II.1 Headings

HTML has six levels of headings, which use the elements <h1> through <h6>. Headings are used to represent the hierarchical structure of the content, and are displayed in a larger font size than the surrounding text.

HTML

<h1> This is a Level 1 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 Level 1 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

The <p> element is used to create a paragraph. Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified using CSS.

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

The <b> element is used to represent text in a bold format. The <i> element is used to represent text in an italic format.

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

The <sup> element is used to represent superscript text. The <sub> element is used to represent subscript text.

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

The <br /> element is used to add a line break in a paragraph. The <hr /> element is used to add a horizontal rule.

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

Lists are used to group a set of related items together. There are three types of lists in HTML:

Ordered lists: Lists where each item in the list is numbered.
Unordered lists: Lists that begin with a bullet point.
Definition lists: Made up of a set of terms along with the definitions for each of those terms.

III.1 Ordered Lists

The <ol> element is used to create an ordered list. This list will be displayed with numbers by default. The <li> element is used to create each item in the list.

We can change the numbering style using the type attribute. The type attribute can take the following values: 1, A, a, I, i.
1. When the value is set to 1, the list items will be numbered with numbers.
2. When the value is set to A, the list items will be numbered with uppercase letters.
3. When the value is set to a, the list items will be numbered with lowercase letters.
4. When the value is set to I, the list items will be numbered with uppercase Roman numerals.
5. When the value is set to i, the list items will be numbered with lowercase Roman numerals.
The start attribute can be used to start the numbering from a specific number. The value of the start attribute should be a number.
The value attribute can be used to specify the number that the list item should be associated with. If the value attribute is not specified, the list items will be numbered sequentially.
The reversed attribute can be used to reverse the numbering of the list items.
The compact attribute can be used to reduce the space between the list items.

HTML

          <ol>

          <li>HTML</li>

          <li>CSS</li>

          <li>JavaScript</li>

          <li>PHP</li>

          </ol>

Result

HTML
CSS
JavaScript
PHP

III.2 Unordered Lists

The <ul> element is used to create an unordered list. This list will be displayed with bullets by default. The <li> element is used to create each item in the list.

HTML

          <ul>

          <li>HTML</li>

          <li>CSS</li>

          <li>JavaScript</li>

          <li>PHP</li>

          </ul>

Result

HTML
CSS
JavaScript
PHP

III.3 Definition Lists

The <dl> element is used to create a definition list. This list will be displayed with terms and their definitions. The <dt> element is used to create each term in the list, and the <dd> element is used to create each definition.

HTML

<dl>

<dt>HTML</dt>

<dd>Hyper Text Markup Language</dd>

<dt>CSS</dt>

<dd>Cascading Style Sheets</dd>

<dt>JavaScript</dt>

<dd>JavaScript is a programming language that enables you to create dynamically updating content, control multimedia, animate images, and much more.</dd>
<dt>PHP</dt>

<dd>PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language.</dd>

</dl>

Result

HTML: Hyper Text Markup Language
CSS: Cascading Style Sheets
JavaScript: JavaScript is a programming language that enables you to create dynamically updating content, control multimedia, animate images, and much more.
PHP: PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language.

IV. Links

The a tag (short for anchor tag) is arguably the most important and defining tag of HTML. The anchor tag is the tag used to link from the document a user is on to another document elsewhere on the internet, or another point in the same document. The anchor tag is written as <a href="URL">Link Text</a>.

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.

IV.1 Absolute Links

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.

HTML

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

Result

The National School of Artificial Intelligence

IV.2 Relative Links

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.

HTML

<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>

Result

IV.3 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.

HTML

<a href="#Text">Text section</a>

Result

Text section

IV.4 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.

HTML

<a href="https://ensia.edu.dz/#colophon">ENSIA Footer </a>

Result

ENSIA Footer

IV.5 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.

HTML

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

Result

Opening links in a new window

The National School of Artificial Intelligence

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

IV.6 Email Links

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.

HTML

<a href="mailto:mohamed.mahmoudi@ensia.edu.dz">Contact me<a>

Result

Contact me

V. Images

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.

HTML

<img src="./SRC/IMAGES/Oran.jpg" alt="Oran" width="500" height="300">

Result

VI. Tables

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

HTML

          
<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

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.

HTML

          
<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. It should carry the for attribute that should match the id attribute of the control element.
<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>

Result

VIII Videos

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

src: tells the browser where it can find the video file.
controls: adds a set of controls to the video player.
autoplay: the video will start playing as soon as it is ready.
loop: the video will start playing again when it finishes.
muted: the audio will be muted.
poster: a placeholder image that is displayed before the video plays.
width: specifies the width of the video in pixels.
height: specifies the height of the video in pixels.

HTML

<video src="./SRC/VIDEOS/Video.mp4" controls autoplay loop muted poster="./SRC/IMAGES/Oran.jpg" width="500" height="300">

HTML

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 Level 1 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

III.3 Definition Lists

HTML

Result

IV. Links

IV.1 Absolute Links

HTML

Result

IV.2 Relative Links

HTML

Result

IV.3 Linking to a specific part of the same page

HTML

Result

IV.4 Linking to a specific part of another page

HTML

Result

IV.5 Opening links in a new window

HTML

Result

Opening links in a new window

IV.6 Email Links

HTML

Result

V. Images

HTML

Result

VI. Tables

HTML

Result

VI.1 Spanning columns and rows

HTML

Result

VII. Forms

HTML

Result

VIII Videos

HTML