Scribd
Upload
16 views45 pages

HTML5 - Eng

The document provides an overview of HTML5 including how it works, main tags, and structure of an HTML document. It describes common HTML tags like paragraphs, lists, images, links, formatting, tables, forms and more. Examples are given for each tag discussed.

Uploaded by

ismail.zenati.1999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views45 pages

HTML5 - Eng

The document provides an overview of HTML5 including how it works, main tags, and structure of an HTML document. It describes common HTML tags like paragraphs, lists, images, links, formatting, tables, forms and more. Examples are given for each tag discussed.

Uploaded by

ismail.zenati.1999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

Chapter 1: HTML5

UP Web

AU: 2022/2023
PLAN
How does it work?

HTML: Presentation and Versions

First Example

HTML Tags

Comments

HTML document

Main tags

2
Objectives

To know the most useful tags.

Structure HTML documents semantically.

3
How it works?
Client Server
The client requests a page from
the server

JavaScript code is executed


by the client browser to The server sends the obtained HTML
modify the HTML page page to the client

4
HTML: Presentation and Versions

• HTML stands for « HyperText Markup Language ».

• HTML is not a programming language.

• HTML is used to create and compose the content of a web page and its structure.

• HTML contains approximately 140 tags.

Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element 5
HTML: Presentation and Versions

HTML 1.0 HTML 3.2 HTML 5 HTML 5.3


1991 1997 2008 En cours

1995 2000 2017


HTML 2.0 HTML 4 HTML 5.2

6
First Example

File:
index.html

For testing, use an editor:

7
HTML Tags
• Anatomy of an HTML element
Element

Content

<p>Hello World!</p>

Opening Tag Closing Tag

8
HTML Tags
• Nesting elements
Example

<p>Hello <strong> World </strong>!</p>

Result

9
HTML Tags
• Empty elements
Example:
<img src="image.jpg" alt="logo">
<br>
<hr>

10
HTML Tags
• Attributes
<a href ="www.esprit.tn">Site Esprit</a>

Attribute Value
name

An attribute can be used to:


• Add additional information to the element.
• Define the element’s behavior and formatting.

NB: There are binary attributes that do not require a value


example: checked, selected…
11
HTML Tags
• Attributes
Example:
<a href="www.esprit.tn">Esprit</a>
<img src="assets/images/logo.jpg" alt="Esprit logo"
height="100" width="150">

Attribute Value
name

Result:

12
Comments

• Comments in HTML are delimited by <!-- and -->.


Example:

<!– This is a comment-->

13
HTML document

<!DOCTYPE html>

• necessary item to indicate the type of document to the browser.


• is not case sensitive.

14
HTML document

<html> … </html>

• is the root element of the document.


• its presence is mandatory.
• must contain the following child tags: <head> and <body>. 15
HTML document

<head> … </head>
• Acts as a container for any information needed for the page but is not part of
the displayed content: meta tags (keywords, description, author …), page title
and links to CSS and JS files.
16
HTML document

<title> … </title>
• defines the page title.
• This title will appear on the tab
when the page is loaded.
17
HTML document

<body> … </body>
• Contains the document body.
• The content will be seen by visitors
(text, image, sound…)
18
Tags: Title
• There are 6 title levels:
<h1> - <h6>
• By default the title tag adds an empty line.
• Generally, 3 to 4 levels are enough.

19
Tags: Paragraph
Tag <p>…</p>
• Is preceded and followed by a line break.
• Eliminates redundant spaces and line breaks.

20
Tags: List
• Ordered list <ol>…</ol>
• Unordered list <ul>…</ul>
• Description list <dl>…</dl>

• The elements of an (un)-ordered


list are tagged with<li>.

• The elements of a description list


is tagged with <dd>.

21
Tags: Image
• We use the tag: <img>
• Example:
<img src="assets/images/logo.jpg" alt="Esprit Logo"
height="100" width="150">

• src and alt attributes are mandatory.


– src: indicates the path of the image.
– alt: contains a text that describes the image.
• The formats supported by the browsers are jpeg, gif, png
and bmp.

Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element#image_and_multimedia 22
Tags: Link
• We use the tag: <a>
Example: <a href= "link target" > text </a>
• There are 4 different cases:
– A link to a website or a page of site.
• <a href= "https://www.google.com" > google </a>
– A link to a downloadable file.
• <a href= "link target" > download </a>
– A link to an email or phone address.
• <a href= "mailto:[email protected]"> Contact us</a>
• <a href= "tel:+21698765432"> Contact us</a>
– A link to a target on the same page.
• <h1 id="anchor"> Contact </h1>
• <a href="#anchor"> Jump to Contact </a>
23
Tags: Formatting
• These tags can be contained in a paragraph.

• Do not cause line breaks.


– <b> … </b> Puts text in bold

– <i> … </i> Puts text in italics

– <u> … </u> Underlines the text

– <s> … </s> Adds a strikethrough text

– <small> … </small> Sets text to a smaller size

• More tags to discover <strong>, <mark>, <em>, <abbr>, <cite>, <q>, <code>
24
Tags: Structure
• Without a semantic meaning:
– <div> … </div>
– <span> … </span>
• With a semantic meaning:
– <header> … </header>
– <article> … </article>
– <nav> … </nav>
– <aside> … </aside>
– <footer> … </footer>
– <section> … </section>

25
Tags: Table
• We use the tag:
<table> … </table>
• The table is then constructed line by line:
<tr> … </tr>
• The row contains cells:
<td> … </td>

26
Tags: Table
• We can add a header:
<th> … </th>

27
Tags: Table
• We can use the border attribute
<table border = "1">
But in HTML5, its usage is obsolete.

28
Tags: Table
Advanced concepts
• Horizontal merge – Column merge
<td colspan = "2">

• Vertical merge – Line merge


<td rowspan = "2">

29
Tags: Table
Advanced concepts
• We use the tag
<caption> … </caption>
to add a title to the table.
It can be added after the opening
of the table tag or just before
closing it.

30
Tags: Form
• We use the tag
<form> … </form>

• To specify the form behavior, we add the following attributes:


– Action: where to send the data collected from the form.

– Method: The HTTP method used to send the data. It is either GET or
POST.

31
Tags: Form
The components of a form

• label: <label> Text to display</label>


• Field <input> creates an interactive control in a form.
• The input and behavior of the element depends on the value of the
type attribute.

32
Tags: Form
The components of a form

• The available field types for an input element:


– button
– checkbox
– color
– date
– datetime-local
– email
– file
– hidden
– image
33
Tags: Form
The components of a form

• Text Area: <textarea> </textarea>

34
Tags: Form
The components of a form

• Multiple choice list: <select> … </select>

35
Tags: Form
The components of a form

• Attributes:
– autocomplete

– autofocus

– checked, selected

– disabled, readonly

– max, min, step

– maxlength, minlength
36
Tags: Form
The components of a form
• Examples
– checked / selected

37
Tags: Form
The components of a form

• Examples
– checked / selected

38
Tags: Form
The components of a form

• Examples
– disabled / readonly

39
Tags: Form
The components of a form

• Examples
– Max / Min / Step

40
Tags: Form
The components of a form

• Examples
– Maxlength / Minlength

41
Tags: Form
The components of a form

• Examples
– placeholder

42
Tags: Form
The components of a form

• Examples
– pattern

43
General Remarks
• Many other tags already exist + new ones added in HTML 5.
• There are few rules to follow when placing the tags (i.e. no <li> on its own).
• There are some validators, you can use them. https://validator.w3.org/

• In general, spaces are ignored. They must be used to make the code of the
page readable.

• The default style is quite rudimentary. This style can be modified using CSS
properties.

44
Thank you for your attention

45

You might also like