HTML

HyperText Markup Language

www.dominusoft.co
Table of Content
❑ Introduction to WEB
❑ HTTP
❑ Static Web & Dynamic Web
❑ Introduction to HTML
❑ HTML Elements:
o Text o Div and Span
o Lists o Forms
o Links o Audio and Video
o Images o Favicon
o Tables
 Introduction WEB -
World Wide Web (www)
❑ The World Wide Web (www, W3) is an information system of
interlinked hypertext documents and other digital resources that
are accessed via the Internet.
❑ Set of:

o Communication protocols;
o Data formats.

❑ Build on top of TCP/IP channels.

 What is a Website?

❑ A web page is a hypertext document built using HTML, CSS,

JavaScript, and other technologies.

❑ A website is a collection of web pages that are identified with

the same domain.

❑ Domain is the name by which a website is accessed.

 Protocols for the web

❑ Several existing protocols can be used:

o HTTP;
o FTP.
❑ The application protocol determines which functions are available
(e.g. with FTP only GET and PUT of files).

❑ HTTP is an application layer protocol.

❑ HTTP functions as a request-response protocol in the client- server
computing model.
 HTTP –
Hypertext Transfer Protocol
❑ HTTP defines methods to indicate the desired action to be
performed on the identified resource:
o GET - Requests a representation of the specified resource;
o POST - Requests that the server accept the entity enclosed in
the request as a new subordinate of the web resource identified
by the URI;
o PUT, DELETE, OPTION.

❑ An HTTP session is a sequence of network request-response

transactions.
 HTTP –
Hypertext Transfer Protocol

❑ The first line of the HTTP response is called the status

line and includes a numeric status code and a textual phrase:
o 1xx Informational : 100 Continue, 101 Switching Protocols;
o 2xx Success: 200 OK, 201 Created, 202 Accepted, 204 No Content;
o 3xx Redirection: 301 Moved Permanently, 304 Not Modified;
o 4xx Client Error: 400 Bad Request, 403 Forbidden, 404 Not Found;
o 5xx Server Error: 500 Internal Server Error, 501 Not Implemented.
Static Web & Dynamic Web
The Static Web
 In The Static web:

❑ The web page never changes its content, until the author changes it.
❑ The content of the page:
o Does not depend on the interaction with the user;
o Does not depend on the information sent by the client to the
server;
o Does not depend on the time it is requested.
❑ Page implemented in HTML / CSS.
 Static web: pros and cons
❑ Every web page is associated with an HTML file.

Props: Cons:
❑ Maximum efficiency (low load ❑ Data is static;
on CPU);
❑ No adaptation to clients and
❑ Possibility to perform page their capabilities.
caching:
o in RAM (by the server);
o on disk (by client).
❑ Pages can be indexed by search
engines.
 Static web with dynamic pages
❑ The client evaluates the dynamic content of the page (script, or Java
applet, or ActiveX control).
 In Static Web with Dynamic
pages

❑ Pages change their content depending on user interaction:

o E.g., the context menu pops up when the mouse is positioned
over a specific area.
❑ Pages generically are known as DHTML:
o HTML 4.0 or greater;
o CSS (Cascaded Style Sheet);
o client-side scripting languages.
 Static web with Dynamic pages :
pros and cons
❑ Content presentation is variable.

Props: Cons:
❑ Efficient (low CPU load on ❑ Inefficient (medium-high CPU
servers); load on clients);

❑ (~) Possibility to perform page ❑ Static data;

caching; ❑ Functionality depends upon
❑ (~) Pages can be indexed by client capabilities.
search engines (but only the
static data …).
The dynamic web
 The dynamic web
❑ Page is dynamically generated by the server,
❑ Its information content changes depending on:
o Request sent by the client;
o Content of a database;
o Date/time of the request.
❑ Techniques to implement the dynamic web:
o CGI;
o Server-side scripting language (PHP, PerlScript, Python);
o Servlet, JSP (Java Server Pages).
 Dynamic Web: pros and cons

❑ Adaptation of pages to variable conditions:

o Input provided by client;
o Client capabilities.
Props: Cons:
❑ Maximum dynamicity for the ❑ Low efficiency (high CPU load);
data; ❑ Pages cannot be indexed by
❑ Optimal adaptability to clients search engines.
and their capabilities.
 server-side or client-side
❑ server-side:
o (pro) Higher security;
o (con) Server overload.
❑ client-side:
o (pro) Computation on the client;
o (con) Client capabilities (functionality and performance).
❑ In general:
o Better server-side for security and functionality;
o Better client-side to improve performance;
o Often used together simultaneously.
 HTML
❑ HyperText Markup Language, commonly referred to as HTML, is the
standard markup language used to create web pages:
o HyperText - Refers to links that connect web pages to one
another, either within a single website or between websites;
o Markup Language - Is used by people and computers to add
information to computer documents to help make their
structure and content easier to understand.
❑ Web browsers can read HTML files and render them into visible
or audible web pages.
❑ The World Wide Web Consortium(W3C), maintainer of both the
HTML and the CSS standards.
 HTML documents:

❑ Are normal US-ASCII texts:

o Therefore, letters with accents or other “extended” characters
are not allowed.
❑ Enriched with hypertext and hypermedia links.
❑ With limited text formatting capabilities.
❑ All these additional capabilities are achieved through
annotations expressed with tags.
❑ Tags act like containers. They tell you something about the
information that lies between their opening and closing tags.
 HTML - Tags
❑ HTML uses tag-s (characters that sit inside angled brackets) to give the
information, they surround special meaning.
❑ Tags are often referred to as elements.
❑ Tags usually come in pairs. The opening tag denotes the start of a piece of
content; the closing tag denotes the end.
❑ Enclosed between the symbols "less than" and "greater than".
❑ Usually they are paired: start tag – end tag (the final tag is the same of the
initial one, preceded by the symbol “/”):
o <h1> … </h1>
❑ Tags can also be standalone (unpaired):
o <br>
❑ They are case insensitive.
 HTML - The attributes

❑ You can better characterize a tag by using a set of attributes.

❑ Attributes provide additional information about an element.
❑ Attributes come in name/value pairs like: name="value“.
❑ Every attribute is placed inside the opening tag:

<hr width=“90%”>

Name of Value of
attribute attribute
 The browsers
❑ Visualizing HTML documents (and navigate them) requires an
appropriate program, an HTML browser.
❑ A browser is an interpreter:
o Reads the source code (HTML + extensions);
o Tries to understand it (hoping there are no errors …);
o Does its best to visualize what is described by the source code.
❑ Attention! Not every browser visualizes a given document in the
same way.
❑ Graphical browsers: Firefox, Chrome, Opera, Internet Explorer,
Safari.
 The browsers: Notes

❑ Browsers do not signal errors: they ignore them!

❑ White spaces and end of lines:
o Multiple spaces are treated as a single space;
o End-of-lines has no effect on the formatting.
❑ HTML is an extensible language:
o Often new tags are added;
o Browsers ignore unrecognized tags (or attributes) but visualize
the text enclosed inside the tag.
 Tools for checking HTML

❑ http://validator.w3.org
o Allows verifying if a page fully satisfies the official syntax.
o Can provide detailed explanations on the errors and on
how to correct them.
❑ http://tidy.sourceforge.net:
o "Cleans" the HTML code and transforms it to more
recent versions recent versions.
❑ Problems with dynamically generated HTML (cannot validate an
ASP or PHP source page).
 How to create HTML
documents - 1
❑ Right click on desktop.
 How to create HTML
documents - 1
1. Create a txt file – give a name to the file
and end it with .html.
2. Click Yes.

3. The file should take the icon of the

default browser in your computer.
4. If the file does not take the icon of one of the
browsers than check "File name extensions":
 How to create HTML
documents - 2
❑ Create a HTML file using VSC (visual studio code).
❑ After opening VSC -> Go to file -> Click New File -> Press Enter:
 How to create HTML
documents - 2
❑ Ctrl + s(or go to file and find save as) : A save as window will pop up ->
give the file a name and it with .html -> Save as type (select All Files) ->
Press Save.
❑ The saved file should have the icon of the tag in html.
 HTML – Structure
<!DOCTYPE html> Doctype
<html lang="en">
<!-- Comment for the document --> comment

<head>
<meta charset="UTF-8"> meta
<meta http-equiv="X-UA-Compatible" content="IE=edge">
head <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the tab</title> title
</head>
html
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation Paired
body ullamco laboris nisi ut aliquip ex ea commodoconsequat. tag
Duis aute irure dolor in reprehenderit in voluptate velit
</p>
</body>

</html>
 HTML – Structure tags
❑ DOCTYPE html – Ensures that the browser makes a best-effort attempt
at following the relevant specifications, tell browsers which version of
HTML you are using.
❑ html - Represents the root (top-level element) of an HTML document,
so it is also referred to as the root element. All other elements must be
descendants of this element.
❑ head – Contains information about the page.
❑ title - The title (and in general the data inside the head) is very
important since it is the element most used by automatic indexing
services. Are 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.
❑ body - Everything inside this element is shown inside the main browser
window.
 Comments
❑ If you want to add a comment to your code that will not be visible in the
user's browser.
❑ Can be inserted at every point in the text.
❑ Can span multiple lines.
❑ Enclosed inside <!-- and -->.
❑ You can use comment for:
o When you come back to the code later (or if someone else needs to
look at the code), comments will make it much easier to understand;
o To indicate where sections of the page start or end;
o Can also be used around blocks of code to stop that code from being
displayed in the browser.
 Meta-data
❑ Meta data are set inside <head> ….</head>.
❑ It is not visible to users.
❑ It uses attributes to carry the information.
❑ Data useful for:
o Indexing the HTML page;
o Providing information to the web server and / or to the browser.
❑ Syntax:
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Introduction to HTML, Static Web
vs Dynamic Web, HTML Elements" />
<meta name="keywords" content="HTML, art, opinion" />
<meta http-equiv="author" content="Jane Doe" />
 HTML Text: Headings
❑ There are six levels of headings or titles:
• <h1> is used for main headings,
<h2> is used for subheadings. If Headings in HTML file
there are further sections under the
subheadings then the <h3> element <h1>This is a Main Heading</h1>
is used, and so on...; <h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
• Browsers display the contents of <h4>This is a Level 4 Heading</h4>
headings at different sizes; <h5>This is a Level 5 Heading</h5>
• Should be used according to the <h6>This is a Level 6 Heading</h6>
logical meaning (semantics), not to
achieve a specific formatting;
• In particular, it is not correct to
us <hN> if not preceded by
<hN-1>.
 HTML Text: Paragraphs
❑ To create a paragraph, surround the words that make up the
paragraph with an opening and closing tag <p>…</p>.
❑ By default, a browser will show each paragraph on a new line with
some space between it and any subsequent paragraphs.

❑ Example:
<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>
 HTML Text: White Space
❑ In order to make code easier to read, web page authors often add
extra spaces or start some elements on new lines;
❑ When the browser comes across two or more spaces next to each
other, it only displays one space;
❑ Similarly, if it comes across a line break, it treats that as a single
space too;
❑ This is known as white space collapsing;
❑ If you wanted to add a line break inside the middle of a paragraph or
between other HTML elements, you can use the line break tag <br>
or <br/>;
❑ To create a break between themes we can add a horizontal line using
<hr> or <hr/>.
 HTML Text Formatting:
physical styles
Example:

❑ <b>…</b> / <strong> … </strong> <b>bold</b> -> bold

<strong>bold</strong> -> strong importance
o bold text
❑ <i> … </i> / <em> … </em> <i>italic</i> -> italic
<em>italic</em> -> changes the meaning of a
o italic text sentence
❑ <u> . . . </u> <u>underline text</u> -> underline text
o underlined text
❑ <s> . . . </s> / <strike> … </strike> <s>Strikethrough text </s> -> longer accurate
or relevant
o Strikethrough text <strike>Strikethrough text </strike> ->
strikethrough text
 HTML Text Formatting
❑ A text block can be characterized based on the role it plays in the
document (logical style) or based on the way we want to visualize it.
❑ <address> . . . </address>
o Address (typically e-mail), contain contact details.
❑ <blockquote> . . . </blockquote>
o Long Citation - it is used for longer quotes that take up an entire paragraph.
❑ <q> . . . </q>
o Is used for shorter quotes that sit within a paragraph.
❑ <center> . . . </center>
o Centered text.
❑ <pre> . . . </pre>
o Preformatted text (spacing is preserved).
 HTML Text Formatting
❑ <font . . . > . . . </font> (not used):
o Font for the text block included within the tags;
o Deprecated (use CSS) deprecated (use CSS).
❑ Attributes:
<font size="number" color="name color" face="name of font"> Some text </font>
❑ Example:
<font size="4" color="green" face="Comic sans MS"> Some text </font>
❑ Result:
 Colors
❑ Some predefined colors are accessible by name:
o Black, White, Gray, Silver, Yellow, Red, Purple, Fuchsia, Yellow,
Red, Purple, Fuchsia, Maroon, Green, Lime, Olive, Aqua, Teal,
Blue, Navy…
❑ These are six-digit codes that represent the amount of red, green and
blue in a color, preceded by a pound or hash # sign.
( # rr gg bb ) – (red, green, blue)
❑ Example:
<font color="#ffffff"> White! </font>
Standard colors
 HTML Lists

❑ There are lots of occasions when we need to use lists:

o Unordered lists are lists that begin with a bullet point (rather
than characters that indicate order)
o Ordered lists are lists where each item in the list is
numbered. For example, the list might be a set of steps for a
recipe that must be performed in order, or a legal contract
where each point needs to be identified by a section number.
 HTML Lists - Unorder List

❑ The unordered list is created with the element <ul> </ul>.

❑ Each item in the list is placed between an opening <li> tag and a
closing </li> tag. (The li stands for list item).
❑ Browsers indent lists by default.
❑ Sometimes you may see a type attribute used with the <ul>
element to specify the type of bullet point (circle, square).
 HTML Lists - Unorder List
Example
❑ Example 1:
<ul>
<li>JavaScript</li>
<li>HTML</li>
<li>CSS</li>
</ul>

❑ Example 2:
<ul type="circle">
<li>JavaScript</li>
<li>HTML</li>
<li>CSS</li>
</ul>
 HTML Lists - Order List

❑ The ordered list is created with the element <ol> </ol>.

❑ Each item in the list is placed between an opening <li> tag and a
closing </li> tag. (The li stands for list item) .
❑ Browsers indent lists by default.
❑ Sometimes you may see a type attribute used with the <ol>
element to specify the type of numbering (numbers (default),
letters (A or a), roman numerals (I or i)).
 HTML Lists - Order List
Example
❑ Example 1:
<ol>
<li>Attend the lessons</li>
<li>Perform the lab exercises</li>
</ol>

❑ Example 2:
<ol type="a">
<li>Attend the lessons</li>
<li>Perform the lab exercises</li>
</ol>
 HTML Links (Hyperlinks)
❑ By using hyperlinks, you can move automatically from a resource to another
— enabling the very idea of browsing or surfing.
❑ You will commonly come across the following types of links:
o Links from one website to another;
o Links from one page to another on the same website;
o Links from one part of a web page to another part of the same page;
o Links that open in a new browser window.
❑ The HTML tag identifying the presence of a link is named anchor and is
identified with <a> </a>.
Attribute Closing tag

<a href="url(path)">name of the destination</a>

Open tag
 HTML Links:
Absolute and relative links
❑ URL stands for Uniform Resource Locator. Every web page has its own URL.
This is the web address that you would type into a browser if you wanted to
visit that specific page.
❑ Absolute URL starts with the domain name for that site and can be followed
by the path to a specific page.
❑ Example:
o <a href="https://www.google.com/">Google</a>
❑ Relative URLs can be used when linking to pages within your own website.
They provide a shorthand way of telling the browser where to find your files.
❑ Example:
o <a href="about.html">About</a>
❑ Note:
❑ <a href=" https://www.domainName.com/about.html">About</a> - is
absolute url
 HTML Links:
Document access points

❑ In the target document, define the access point through an anchor

with the attribute name, in the origin document, include the name
of the access point in the URL:
o <h1 name="top">Top of the page</h1>
o <a href="#top"> Go to the top of page</a>
❑ The access point can also be any element identified through its id:
o <h1 id="top">Top of the page</h1>
o <a href="#top"> Go to the top of page</a>
 HTML Links:
Frame navigation

❑ Links should indicate into which frame (or window) the target
page should be visualized:
o <a href="URL" target="name_of_the_frame">...</a>
❑ Special values for target:
o "_blank" (new window);
o "_self" (in the same frame) = default;
o "_top" (span the entire window).
 General attributes
of HTML tags
❑ id= "string ":
o Anchor for a link;
o Reference to an element from a script;
o Reference to a field in a form;
o Reference for a specific style in CSS;
o Is unique.
❑ class = "class1 class2 … ":
o List of classes to be used e.g., as CSS selectors;
o HTML elements can have more than one class name;
o They are not unique.
❑ title = "title ":
o Visualized when pointing to the element
❑ lang = "language":
o For automatic text reading (values: en, it, fr, de …)
 HTML Links: Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the tab</title>
</head>
<body>
<h1 id="top">Top of the page</h1>
<h3>Links from one website to another</h3>
<a href="https://dominusoft.co/">Dominusoft</a>
<h3>Links from one page to another on the same website</h3>
<a href="about.html">About page</a>
<h3>Links from one part of a web page to another part of the same page</h3>
<a href="#top"> Go to the top of page</a>
<h3>Links that open in a new browser window</h3>
<a href="https://developer.mozilla.org/en-US/" target="_blank"> MDN </a>
</body>
</html>
 HTML Images
❑ There are many reasons why you might want to add an image to a web
page: you might want to include a logo, photograph, illustration, diagram,
or chart.
<img src="file name or the path where the image is located" alt="a description of
image">
o src=“image.png” - Inserts the image contained in the file image.png.
o alt=“Picture of something” - Inserts the image, but if the browser does not
support graphics or fails to load the URL, It visualizes the text.
o Difference between linking and inserting an image:
• <img src="image.png"> - inserts the image inside the page;
• <a href="image.png"> - by following the link, you visit a page containing
only the image.
 HTML Images

❑ Attributes used in images:

o <img src="image.png" width="number" height="number"> - Image size allows

rapid visualization of the page;
o <img src="image.png" vspace="number" hspace="number"> - Minimum
distance between text and the image vertical and horizontal space;
o <img src="image.png" border="number"> - Set of border for the image.
 HTML Table
❑ There are several types of information that need to be displayed in a grid or table. For
example: sports results, stock reports, timetables. When representing information in
a table, you need to think in terms of a grid made up of rows and columns (like excel
sheet).
❑ Table is created with the element <table> </table>.

❑ Attributes:
o align= left / center / right;
o border= size;
o width= size;
o cellspacing= size;
o cellpadding=size;
o summary= text;
o frame= void / above / below / hsides / lhs / rhs / vsides / box / border.
 HTML Table
❑ To build a table we need rows and columns:
o <tr> … </tr> - Table row, indicate the start of each row;
o Inside the row we find cells:
▪ <th> … </th> - Table heading, its purpose is to represent the
heading for either a column or a row;
▪ <td> … </td> - Table data, represent each cell of the table.
❑ Sometimes you may need the entries in a table to stretch across more than
one row or column:
o colspan = "number_of_columns " - The colspan attribute can be used on
a <th> or <td> element and indicates how many columns that cell should
run across ;
o rowspan = "number_of_rows " - The rowspan attribute can be used on a
<th> or <td> element and indicates how many rows that cell should span
down the table.
 HTML Table: Example
<table border="2">
<tr>
<th></th>
<th>Web Design</th>
<th>Web Development</th>
<th>Graphic Design</th>
</tr>
<tr>
<th>11:00 - 13:00</th>
<td rowspan="2">Frontend</td>
<td>Frontend</td>
<td>Illustrator</td>
</tr>
<tr>
<th>17:00 - 19:00</th>
<td>Backend</td>
<td>Photoshop</td>
</tr>
</table>
 HTML Long Table

❑ There are three elements that help distinguish between the main
content of the table and the first and last rows:
o <thead> … </thead> - Table head, the headings of the table;

o <tbody> … </tbody> - Table body, the contents of the tables;

o <tfoot> … </tfoot> - Table footer, the end of the table, can be a

replica of the head or the row when we explain the table.

❑ <caption> … </caption> - Caption text describes the nature of the table.
 HTML: Div and Span
❑ The <div> element allows you to group a set of elements together in one
block-level box.
❑ Using an id or class attribute on the <div> element, means that you can create
CSS style rules to indicate how much space the element should occupy on the
screen and change the appearance of all the elements contained within it.
❑ The <span> element acts like an inline equivalent of the element. It is used to
either:
o Contain a section of text where there is no other suitable element to
differentiate it from its surrounding text;
o Contain a number of inline elements.
❑ Like <div> element, in <span> can be used id or class attribute in order to
create CSS style rules.
 HTML: Div and Span Example
<div id="text_layout">
<img src="image.avif" alt="Description" width="200px" height="200px">
<div>
<h1>Web - Building a website</h1>
<p>The creation process of your <span class="web-text"> website</span>
begins at the conception phase, <br> where you are simply thinking
about what kind of website you want. <br>This thought should be driven
by your goals for your site and who <br>your target audience is.</p>
</div>
</div>
 HTML Form
❑ Form refers to different elements that allow you to collect information
from visitors to your site.
❑ There are several types of form controls that you can use to collect
information from visitors to your site:
o text (single line);

o password;

o textarea (multi-line);

o radio buttons (user must select one of the options);

o check boxes (users can select and unselect one or more options);

o number;

o email;

o data, time, data and time;

o submit;

o file etc..
 HTML Form Structure
❑ <form> … </form> - Where form controls stay:
o method="…" - Forms can be sent using one of two methods: get or
post;
o action="…" - Its value is the URL for the page on the server that will
receive the information in the form when it is submitted.
❑ <label> … </label> - Indicating the purpose of each:
o for="…" - Which form control the label belongs to.
❑ <input> … </input> - Where the user can enter data, most important form
element:
o type="…" - Type of input;
o id="…" - The same as the value of for;
o required – The field must be filled.
<form method="... " action="…">
<label for="…"></label>
<input type="…" id="…">
</form>
 HTML Form Example
<form method="" action="POST">
<div>
<label for="username">Username</label>
<input type="" id="usename" required>
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" required>
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" required>
</div>
<div>
<label for="age">Age</label>
<input type="number" min="16" id="age" required>
</div>
<input type="submit">
</form>
 HTML Form Select
❑ A dropdown list box (also known as a select box) allows users to select one
option from a dropdown list.
❑ <select>…</select> - It is used to create a dropdown list box;
o name = "…" - The name attribute indicates the name of the form
control being sent to the server, along with the value the user
selected.
❑ <option> … </option> - Is used to specify the options that the user can
select from:
o value = "…" - Is used to specify the options that the user can select
from.
<select name="..." id="...">
<option value="...">...</option>
<option value="...">...</option>
<option value="...">...</option>
<option value="...">...</option>
</select>
HTML Form Select: Example

<form method="" action="POST">

<label for="cars">Cars</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
 HTML Favorite icon
❑ Favicon is the little icon near the URL:

o A 16 x 16 pixel image (icon, png, gif, jpeg, svg).

❑ Old browsers:
o Only in icon format;
o In a fixed position and with fixed name = /favicon.ico.
❑ First step to standardization:
o <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
❑ New browsers support the de-facto standard:
o <link rel="icon" href="html5.png" type="image/png">

Note: tag <link> is set inside <head> </head>

 HTML Audio and video
❑ The <audio> element is used to embed sound content in a document,
such as music or other audio streams.
❑ The <video> element is used to show a video on a web page.
❑ The <source> element allows to specify more than one audio or video
file:
o src="…" - Indicate where the audio file is located;
o type= "…" - Informs about the file format;
o controlls - This attribute indicates that the browser should supply
its own controls for playback;
o autoplay - This attribute specifies that the file should play
automatically;
o loop - This attribute indicates that the file should start playing again
once it has ended.
 HTML Audio: Example

❑ Audio Example:

o Example 1:
<audio src="audio.ogg" controls autoplay></audio>
o Example 2:
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
</audio>
 HTML Video: Example

❑ Video Example:

o Example 1:
<video src="video.mp4" poster="image.jpg" width="400" height="300“ controls loop>
</video>
o Example 2:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>
Questions?

www.dominusoft.co