Scribd
Upload
28 views

LMGSI Unit 2 HTML - Links - Student Version

This document provides an overview of HTML (Hypertext Markup Language), the standard markup language used to structure web pages. It discusses HTML tags and attributes that define elements like headings, paragraphs, links, images and forms. The document also covers the history and evolution of HTML standards, from versions 1.1 to the current HTML5, and how to set up the basic structure of an HTML file and add content.

Uploaded by

jorgebeneyto39
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

LMGSI Unit 2 HTML - Links - Student Version

This document provides an overview of HTML (Hypertext Markup Language), the standard markup language used to structure web pages. It discusses HTML tags and attributes that define elements like headings, paragraphs, links, images and forms. The document also covers the history and evolution of HTML standards, from versions 1.1 to the current HTML5, and how to set up the basic structure of an HTML file and add content.

Uploaded by

jorgebeneyto39
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 123

Markup Languages and Information

Management Systems
(Multiplatform Application Development)
Author:
José David Balibrea Sánchez
Computer Science Department
Unit 2: HTML
(HyperText
Markup
Language)
Author: José David Balibrea Sánchez
Índex
1. HTML: HyperText Markup 3. HTML Content and text tags
Language 3.1. HTML Content tags
1.1. What is a Markup Language? 3.1.1. Most commonly used
1.2. What is HTML? attributes in tags
1.3. HTML Editors
3.1.2. Attributes for lists
1.4. HTML Tags
1.5. Empty or self-closing tags in HTML 3.2. HTML Text tags
1.6. HTML document 3.2.1. Hyperlinks: values of the
1.7. HTML Comments href Attribute
3.2.2. Hyperlinks: target attribute
2. HTML Semantic tags
2.1. Semantic tags 3.2.3. Hyperlink: download
attribute
2.2. Advantages of using semantic tags
3.3. Special Characters in HTML
LMGSI (DAM) - IES El Pla 3
Índex
4. HTML Form tags 5. HTML Table tags
4.1. form attributes 5.1. Table tags
4.2. Form tags 5.2. Grouping cells in tables using
rowspan and colspan
4.3. Form input attributes
5.3. Table border, align, and bgcolor
4.4. Form input: type attribute values attributes
4.5. <textarea> tag
4.6. <select> tag
6. HTML tags for embedding content
6.1. Tags for embedding content
4.7. <button> tag
6.2. img tag
4.8. <label> tag
4.9. <fieldset> and <legend> tags 6.3. Embed YouTube videos &
playlists
4.10. Pattern attribute and regular
6.4. Embed a Google map
expression
LMGSI (DAM) - IES El Pla 4
Índex
7. Page jumping or jump links
7.1. How to create an jump link
7.2. How to create an anchor link that can be accessed from another page
8. Meta tags in HTML
9. W3C Markup Validation Service
10. Ordered elements in HTML5
10.1. HTML Block Elements
10.2. HTML Inline Elements
11. HTML. Technical Vocabulary
12. HTML Tags Summary

LMGSI (DAM) - IES El Pla 5


1. HTML: HyperText Markup Language
HTML (Hypertext Markup Language) is a standard markup language used for
creating the structure and presentation of web pages. It forms the backbone of the
World Wide Web and is understood by web browsers to render web content. Here
is a comprehensive explanation of HTML:
• Structure: HTML documents are structured using a series of elements or tags
enclosed within angle brackets (< >). The basic structure of an HTML document
consists of an opening <html> tag, a <head> section for metadata, and a <body>
section for the content.
• Tags: HTML tags define different elements and their purpose within a document.
They are written as opening and closing tags, with the content placed in between.
For example, <p>...</p> is used to define a paragraph, and <h1>...</h1> is used to
define a heading.
• Attributes: HTML tags can have attributes that provide additional information
about the element. Attributes are placed within the opening tag and contain a
name and a value. For instance, the <img> tag uses the "src" attribute to specify
the image URL.
LMGSI (DAM) - IES El Pla 6
1. HTML: HyperText Markup Language
• Document Structure: HTML provides a range of tags to structure the content of a
web page. These include headings (<h1> to <h6>), paragraphs (<p>), lists (<ul>,
<ol>, <li>), links (<a>), images (<img>), tables (<table>, <tr>, <td>), and many
more.
• Hyperlinks: HTML enables the creation of hyperlinks to link different web pages
or specific sections within a page. The <a> tag is used for this purpose, with the
"href" attribute specifying the URL or target location.
• Cascading Style Sheets (CSS): HTML is primarily responsible for defining the
structure of a web page, while CSS is used to control the presentation and layout.
CSS is typically included within the <head> section of an HTML document using
the <style> tag or linked externally using the <link> tag.
• Forms: HTML provides tags to create interactive forms, allowing users to input
data. The <form> tag is used to define the form, while various input elements like
text fields (<input type="text">), checkboxes (<input type="checkbox">), radio
buttons (<input type="radio">), and buttons (<button>) are used to gather user
input.
LMGSI (DAM) - IES El Pla 7
1. HTML: HyperText Markup Language
• HTML
Page
Structure

LMGSI (DAM) - IES El Pla 8


1. HTML: HyperText Markup Language
• Multimedia: HTML supports the inclusion of multimedia elements such as
images, audio, and video. The <img> tag is used to display images, while
the <audio> and <video> tags are used for audio and video content,
respectively.
• Semantic HTML: Semantic HTML tags provide additional meaning and
context to the structure of a web page. Examples include <header>, <nav>,
<main>, <article>, <section>, <footer>, which help define the different
parts of a page and improve accessibility and search engine optimization.
• Compatibility: HTML is designed to be backward compatible, meaning
newer versions of HTML can still interpret and display documents written
in older versions. The latest version of HTML is HTML5, which introduced
new features, including multimedia support, form enhancements, and
canvas for drawing graphics.
LMGSI (DAM) - IES El Pla 9
1. HTML: HyperText Markup Language
• Historical Introduction.
1. Tim Berners-Lee developed HTML in the early 1990s.
2. In 1992, first informal draft HTML 1.1
3. In 1995, the first official standard called HTML 2.0 was published.
4. In 1997, the W3C (World Wide Web Consortium), the official organization
responsible for publishing standards, released HTML 3.2.
5. In 1998, HTML 4.0 was introduced, which included support for scripting languages,
CSS style sheets, printing capabilities, and more.
6. In 1999, HTML 4.1, the latest official specification up to that point, was released.
7. In 2000, the W3C published XHTML 1.0, a reformulation of HTML 4.0 based on
XML. XHTML 1.0 was widely accepted and used.
8. In 2003, the famous XFORMS, XHTML forms, were introduced, significantly
improving upon their predecessors by separating content from presentation.
LMGSI (DAM) - IES El Pla 10
1. HTML: HyperText Markup Language
• Historical Introduction.
8. In 2004, Apple, Mozilla, and Opera created a working group called WHATWG to
continue HTML development.
9. In 2008, W3C and WHATWG collaborated to publish the first draft of HTML5,
which includes all valid elements from both HTML 4 and XHTML 1.0. HTML5
works on most existing platforms and it is compatible with older browsers. It
introduces new semantic markup elements associated with the meaning of the
content, for example, the <article> tag.
10. 2014, the W3C released HTML 5
11. 2016, the W3C released HTML 5.1
12. 2017, the W3C released HTML 5.2
LMGSI (DAM) - IES El Pla 11
1. HTML: HyperText Markup Language
How to program in html: To program in HTML (Hypertext Markup Language),
you need to follow these steps:
1. Set up your development environment: You can use any text editor to
write HTML code, such as Notepad, Sublime Text, Visual Studio Code, or
Atom. Choose a text editor that suits your preferences and install it on your
computer.
2. Create a new HTML file: Open your text editor and create a new file with
a ".html" extension. This will be your HTML file where you'll write your code.
3. Define the document structure: Begin by adding the basic structure of an
HTML document. Start with the <!DOCTYPE html> declaration, followed by
the <html> opening tag. Inside the <html> tag, you will have the <head> and
<body> sections

LMGSI (DAM) - IES El Pla 12


1. HTML: HyperText Markup Language
4. Add metadata with the <head> section: Within the <head> section, you
can include metadata about your HTML document. For example, you can set
the title of the webpage using the <title> tag. You can also link external
stylesheets or include inline styles using the <link> or <style> tags,
respectively.
5. Add content to the <body> section: The <body> section contains the
visible content of your webpage. You can use various HTML tags to structure
and format your content. For instance, you can use heading tags (<h1> to
<h6>) to create headings, paragraph tags (<p>) for text, and list tags (<ul>,
<ol>, <li>) for unordered and ordered lists.
6. Insert images: To add images to your webpage, use the <img> tag. Specify
the image source using the "src" attribute, which contains the URL or file
path of the image.
LMGSI (DAM) - IES El Pla 13
1. HTML: HyperText Markup Language
7. Create hyperlinks: Use the <a> tag to create hyperlinks. Set the "href"
attribute to specify the URL or the target location to which the hyperlink
should navigate.
8. Format text: You can format your text using various HTML tags. For
example, you can use the <strong> or <b> tags to make text bold, <em> or
<i> tags to italicize text, and <u> tag to underline text.
9. Test your HTML code: Save your HTML file with the ".html" extension.
Open the file in a web browser to see how it renders. You can simply
double-click on the file, and it will open in your default web browser.
10. Refine and enhance: HTML provides a wide range of tags and attributes
to enhance the appearance and functionality of your webpage. Explore
additional HTML tags like tables, forms, videos, audio, and more to
further customize your webpage.
LMGSI (DAM) - IES El Pla 14
1. HTML: HyperText Markup Language
HTML (HyperText Markup Language) is the standard markup language used for
creating web pages. It provides the structure and content of a web page, defining
the elements and their layout.

1.1. What is a Markup Language?


A markup language is a text-encoding system consisting of a set of tags inserted in
a text document to control its structure, formatting, or the relationship between
its parts. This type of language does not allow the implementation of algorithms
and does not have arithmetic functions or variables. Examples of this language are
HTML or XML.
• HTML: HyperText Markup Language.
• XML: eXtensible Markup Language.
LMGSI (DAM) - IES El Pla 15
1. HTML: HyperText Markup Language
1.2. What is HTML?
• It is the standard markup language for creating web pages.
• It describes the structure of a web page.
• It consists of a series of tags that tell the browser how to display the content.
• It was written by Tim Berners-Lee in 1993. Since then, there have been many
different versions.
1.3. HTML Editors
There are a large number of free HTML editors available online. Here are the top 4
of the most famous free editors:
- Atom. - Notepad++. - SublimeText. - Visual Studio Code.
In this course we will be using Visual Studio Code. It is important to use Emmet to
type faster in Visual Studio Code.
LMGSI (DAM) - IES El Pla 16
1. HTML: HyperText Markup Language
1.4. HTML Tags
The basic structure of an HTML tag consists of an opening tag, optional
attributes, and a closing tag (except for empty or self-closing tags). Here is
the general structure:
Opening tag: The opening tag denotes the start of an HTML element and is
enclosed within angle brackets < >. It identifies the type of element and may
contain attributes.
Attributes: Attributes provide additional information about the HTML
element. They are specified within the opening tag and consist of a name-
value pair separated by an equal sign. Attributes modify the behavior or
appearance of the element.
LMGSI (DAM) - IES El Pla 17
1. HTML: HyperText Markup Language
1.4. HTML Tags
Closing tag: The closing tag denotes the end of an HTML element and is also
enclosed within angle brackets < >. It has the same element name as the
opening tag but is preceded by a forward slash /.
Content: The content of an HTML element is the text, images, or other
elements contained within it. It is placed between the opening and closing
tags.
Empty or self-closing tags in HTML are those that do not contain any content
between an opening and closing tag. For example: <br>: Line break or line
break or <hr>: Horizontal rule.
LMGSI (DAM) - IES El Pla 18
1. HTML: HyperText Markup Language
1.4. HTML Tags
Here’s an example of the structure for a paragraph element:

<p class="intro">This is a paragraph.</p>

In this example, <p> is the opening tag, class =“intro” is the


attribute, This is a paragraph. is the content, and </p> is the
closing tag.
LMGSI (DAM) - IES El Pla 19
1. HTML: HyperText Markup Language
1.5. Empty or self-closing tags in HTML
Empty or self-closing tags in HTML are those that do not contain any content
between an opening and closing tag. These tags automatically close themselves
within the opening tag. Some examples of empty or self-closing tags are:
<br>: Line break or line break. <hr>: Horizontal rule.
<img>: Image. <input>: Data input field.
<meta>: Document metadata. <link>: Link to an external resource.
<wbr>: Word break opportunity. <area>: Area of an image map.
<base>: Base URL for relative links.
These tags are used to insert specific elements into the HTML document and do not
require a separate closing tag.
LMGSI (DAM) - IES El Pla 20
1. HTML: HyperText Markup Language
1.6. HTML document
The basic structure of an HTML document consists of several elements that define
the structure and content of a webpage.
Element Description
<!DOCTYPE html> It specifies the HTML version being used, which is HTML5 in
this case.
<html> It defines the document type as HTML and provides a
container for all other HTML elements, such as <head> and
<body>. The lang attribute specifies the language of the
document, which helps with accessibility and SEO.

LMGSI (DAM) - IES El Pla 21


1. HTML: HyperText Markup Language
1.6. HTML document
Element Description
<head> It is not visible to users but plays a crucial role in providing important
information to browsers and search engines. With the <head> section,
you can specify the document’s title, define character encoding, include
viewport settings for responsive design, add metadata for SEO purposes,
and link external resources like CSS stylesheets and JavaScript files.
<title> The title of the webpage, which is displayed in the browser’s title bar or
tab.
<link> It is used to establish a connection between an HTML document and an
external resource, such as a stylesheet (CSS).
LMGSI (DAM) - IES El Pla 22
1. HTML: HyperText Markup Language
1.6. HTML document
Element Description
<meta> It provides additional information about the document itself, for
example information for search engines, social media platforms, and
other web-based applications.
<style> It allows you to write CSS code directly within the HTML file, eliminating
the need for an external CSS file.
<body> It serves as the container for all the content that users see and interact
with.

LMGSI (DAM) - IES El Pla 23


1. HTML: HyperText Markup Language
1.7. HTML Comments
To leave a comment in HTML, place a <! — tag before the code and a –> tag after
the code that you want to hide.

LMGSI (DAM) - IES El Pla 24


1. HTML: HyperText Markup Language
Here’s an example of HTML code:

LMGSI (DAM) - IES El Pla 25


1. HTML: HyperText Markup Language
Exercises on this website
Exercise 1
• Install Visual Studio Code.
• Create a new HTML file in Visual Studio Code (help for editing files).
• Type html:5 (Emmet Abbreviation to write HTML5 code) and press Enter key. Visual Studio
Code automatically write the basic structure of an HTML document.
• To use Emmet abbreviation to generate lorem ipsum you only have to generate a chunk of
lorem ipsum text, simply type lorem in the editor.

LMGSI (DAM) - IES El Pla 26


1. HTML: HyperText Markup Language
Exercise 1

• Learn how to use Codepen (enables you to build web development projects online and to see
a lot of examples).
• Practice other Emmet abbreviations for high-speed coding.
LMGSI (DAM) - IES El Pla 27
1. HTML: HyperText Markup Language
Exercise 2. Basic structure of an HTML document. Fill in the Blanks:
<!DOCTYPE html>
<html ="en">
<head>
<meta ="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
< href="style.css" rel="stylesheet">
< >Document</ >
</head>
< >
Hello World!
</ >
</ >
LMGSI (DAM) - IES El Pla 28
1. HTML: HyperText Markup Language
Exercise 3. Drag the words and drop them into the answer area:

→ It specifies the HTML version being used, which is HTML5 in this case.
→ It defines the document type as HTML and provides a container for all other HTML
elements, such as <head> and <body>.
→ It is not visible to users but plays a crucial role in providing important information to
browsers and search engines.
→ The title of the webpage, which is displayed in the browser’s title bar or tab.

LMGSI (DAM) - IES El Pla 29


1. HTML: HyperText Markup Language
Exercise 3. Drag the words and drop them into the answer area:

→ It is used to establish a connection between an HTML document and an external


resource, such as a stylesheet (CSS).
→ It provides additional information about the document itself, for example
information for search engines, social media platforms...
→ It allows you to write CSS code directly within the HTML file, eliminating the need
for an external CSS file.
→ It serves as the container for all the content that users see and interact with.

LMGSI (DAM) - IES El Pla 30


2. HTML Semantic tags
A semantic tag describes its meaning. For
example <header>, <section>, <footer>,
<form>, <table>, <article>,<nav>…
Examples of non-semantic elements (tells
nothing about its content): <div> and
<span>.
Many web sites contain HTML code like:
<div class="header"> <div id="nav"> <div
id="section"> <div id="aside"> <div
id="footer">. It is so important to change
that code and use semantics tags:
<header> <nav> <section> <aside>
<footer>. LMGSI (DAM) - IES El Pla 31
2. HTML Semantic tags
2.1. Semantic tags
Element Description
<nav> It is used to designate a section of a web page that contains navigation
links or menus.
<article> It is used to define a self-contained piece of content within a web page.
It can contain various types of content, including text, images, videos, or
other multimedia elements.
<aside> It is often used for elements such as sidebars, advertisements, author
information, related links, or other content that is not directly part of the
main content flow but provides additional context or enhancements to
the page.
LMGSI (DAM) - IES El Pla 32
2. HTML Semantic tags
2.1. Semantic tags
Element Description
<section> It defines sections of a web page. Each section typically represents a
distinct thematic or conceptual grouping of content.
<h1> <h2> They are used to define headings in HTML. These headings represent
<h3> <h4> the hierarchical structure of the content on a web page, with <h1>
<h5> <h6> being the highest level of importance and <h6> being the lowest. It is
important to have only one <h1> heading per document.
<main> It represents the primary content area of a web page, excluding any
headers, footers, sidebars, or navigation elements. According to the
HTML specification, there should be only one <main> element per
document.
LMGSI (DAM) - IES El Pla 33
2. HTML Semantic tags
2.1. Semantic tags
Element Description
<header> The <header> element defines the header section of a web page or a
specific section within a document. It is typically used to encapsulate
introductory content or the topmost part of a web page, such as the
site logo, navigation menu, page title, or any other relevant
information that appears at the top of the page.
<footer> They are used to define headings in HTML. These headings represent
the level of importance and <h6> being the lowest. It is important to
have only one <h1> heading per document.
<address> It is used to define a section that contains contact information. It is
typically used to provide details such as the physical address, phone
number, email address, or other contact information.
LMGSI (DAM) - IES El Pla 34
2. HTML Semantic tags
2.2. Advantages of using semantic tags.
• The are several advantages of using semantic tags in HTML:
• It helps the search engines and other user devices to determine the importance
and context of web pages. It is important for SEO (Search Engine Optimization).
• It is much easier to read.
• It has greater accessibility.
• Example 

LMGSI (DAM) - IES El Pla 35


2. HTML Semantic tags
2.2. Advantages of using
semantic tags.
• Example 

• Exercises (on this webpage)

LMGSI (DAM) - IES El Pla 36


3. HTML Content and text tags
3.1. HTML Content tags
HTML content tags play a crucial role in organizing and presenting web content.
Element Description
<p> Paragraph. It is used to define a paragraph.
<hr> Horizontal Rule. It is used to indicate a visual separation between
sections of content.
<pre> Preformatted. It is used to enclose preformatted text. It preserves
both spaces and line breaks exactly as they are written in the HTML
code. This is useful for displaying code snippets, ASCII art, or any
other content that requires a fixed-width font or specific formatting.

LMGSI (DAM) - IES El Pla 37


3. HTML Content and text tags
3.1. HTML Content tags
Element Description
<blockquote> It is used to indicate a section of quoted content from another
source. Use <q> for short quotations.
<ol> Ordered list. It is used to create an ordered (numbered) list of items.
<ul> Unordered list. It is used to create an unordered (bulleted) list of
items.
<li> It is used to define an individual item within a list. It is typically used
within <ul> (unordered) or <ol> (ordered) lists to represent each
item in the list.

LMGSI (DAM) - IES El Pla 38


3. HTML Content and text tags
3.1. HTML Content tags
Element Description
<dl> Definition list. It is used to create a definition list, which consists of a
series of terms and their associated definitions.
<dt> Definition term. It represents the term being defined.
<dd> Definition description. It contains the definition of the term.
<figure> It is used to encapsulate media content, such as images.
<figcaption> It represents a subtitle or caption associated with the content of its parent.
<div> It is a generic container that is used to group and style content without
any specific meaning.
LMGSI (DAM) - IES El Pla 39
3. HTML Content and text tags
3.1. HTML Content tags
• Example

LMGSI (DAM) - IES El Pla 40


3. HTML Content and text tags
3.1. HTML Content tags
• Example result

LMGSI (DAM) - IES El Pla 41


3. HTML Content and text tags
3.1. HTML Content tags
• Example and result (cont.)

LMGSI (DAM) - IES El Pla 42


3. HTML Content and text tags
3.1. HTML Content tags
• Example and result (cont.)

LMGSI (DAM) - IES El Pla 43


3. HTML Content and text tags
3.1. HTML Content tags
• Example and result (cont.)

• Exercises (on this webpage)


LMGSI (DAM) - IES El Pla 44
3. HTML Content and text tags
3.1. HTML Content tags
3.1.1. Most commonly used attributes in tags
The most commonly used attributes are id and class.
• id: is used to uniquely identify an element. Since it’s a unique identifier
attribute, we should not add two blocks with the same id value in the
same HTML document. Example:
<div id="identifier">Container</div>
• class: is used to assign one or multiple classes to an HTML element.
Classes are very useful for applying CSS styles. The same class value can
be assigned to multiple elements. Example:
<div class="class1 class2">Container</div>

LMGSI (DAM) - IES El Pla 45


3. HTML Content and text tags
3.1. HTML Content tags
3.1.2. Attributes for lists
The attributes in HTML allow you to customize both ordered and unordered
lists. Here’s a description of some of the common attributes for both types of
lists:
• «type» attribute (for ordered lists):
• «1»: Decimal numbering (1, 2, 3, …).
• «A»: Uppercase letters (A, B, C, …).
• «a»: Lowercase letters (a, b, c, …).
• «I»: Uppercase Roman numerals (I, II, III, …).
• «i»: Lowercase Roman numerals (i, ii, iii, …).

LMGSI (DAM) - IES El Pla 46


3. HTML Content and text tags
3.1. HTML Content tags
3.1.2. Attributes for lists
Here’s a description of some of the common attributes for both types of lists
(cont.):
• «type» attribute (for unordered lists):
• «disc»: Solid dots (●, ●, ●, …).
• «circle»: Circles (○, ○, ○, …).
• «square»: Squares (■, ■, ■, …).
• «start» attribute (only for ordered lists): Sets the initial numbering value
of the list.
• «reversed» attribute (only for ordered lists): Reverses the numbering
order of the list.
LMGSI (DAM) - IES El Pla 47
3. HTML Content and text tags
3.1. HTML Content tags
3.1.2. Attributes for lists
Here’s an example that demonstrates the use of these attributes:
In this example, the ordered list will start
with the letter «C» and use uppercase
Roman numerals (III, IV, V, …).

The unordered list will use squares as


bullet points.

LMGSI (DAM) - IES El Pla 48


3. HTML Content and text tags
3.2. HTML Text tags
Text tags give meaning to the texts they contain.
Element Description
<a> Represents a hyperlink, allowing you to create clickable links to other web
pages, resources, or locations within the same page.
<em> Emphasize. It is used to emphasize text, typically displayed in italics. It gives
importance to the enclosed text.
<strong> It is used to indicate strong importance or emphasis. It typically renders the
enclosed text in bold.
<s> Strikethrough. It is used to indicate content that has been deleted or
marked as obsolete, typically displayed with a strikethrough style.
LMGSI (DAM) - IES El Pla 49
3. HTML Content and text tags
3.2. HTML Text tags
Element Description
<small> It is used to denote less significant text within a document. It is commonly
used for legal disclaimers, copyright notices, or auxiliary information that is
not essential for understanding the main content.
<cite> It is used to indicate the title or source of a work, such as a book, article, or
publication.
<q> Quotation marks. Defines a short quotation. Browsers normally insert
quotation marks around the quotation. Use <blockquote> for long
quotations.
<time> It defines a specific time.
LMGSI (DAM) - IES El Pla 50
3. HTML Content and text tags
3.2. HTML Text tags
Element Description
<dfn> It specifies a term that is going to be defined within the content. Use the
global title attribute to show a tooltip with the definition when you mouse
over the element.
<abbr> It defines an abbreviation or an acronym, like «HTML», «Mr.», «Dr.». Use
the global title attribute to show a tooltip with the definition when you
mouse over the element.
<code> It is used to represent programming code or a code snippet within the
document.

LMGSI (DAM) - IES El Pla 51


3. HTML Content and text tags
3.2. HTML Text tags
Element Description
<var> It is used to define a variable in programming or in a mathematical
expression. The content inside is typically displayed in italic.
<samp> It is used to define sample output from a computer program. The content
inside is displayed in the browser’s default monospace font.
<kbd> It is used to define keyboard input. The content inside is displayed in the
browser’s default monospace font.
<br> It inserts a single line break.
<wbr> Word Break Opportunity. It specifies where in a text it would be right to add
a line-break.
LMGSI (DAM) - IES El Pla 52
3. HTML Content and text tags
3.2. HTML Text tags
Element Description
<sub><sup> Subscript and superscript text.
<i> Italic text.
<b> Bold text.
<u> Underline text
<mark> Marked or highlighted text
<span> It specifies inline text.

LMGSI (DAM) - IES El Pla 53


3. HTML Content and text tags
3.2. HTML Text tags
• Example and result

LMGSI (DAM) - IES El Pla 54


3. HTML Content and text tags
3.2. HTML Text tags
• Example and result (cont.)

<p>Pasa el puntero por encima de la siguiente etiqueta abbr: <abbr title="Hypertext Markup Language">HTML</abbr></p>

LMGSI (DAM) - IES El Pla 55


3. HTML Content and text tags
3.2. HTML Text tags
• Example and result (cont.)

LMGSI (DAM) - IES El Pla 56


3. HTML Content and text tags
3.2. HTML Text tags
• Example and result (cont.)

LMGSI (DAM) - IES El Pla 57


3. HTML Content and text tags
3.2. HTML Text tags
• Example and result (cont.)

LMGSI (DAM) - IES El Pla 58


3. HTML Content and text tags
3.2. HTML Text tags
3.2.1. Hyperlinks: values of the href Attribute
In HTML, the href attribute is used in the anchor <a> tag to create
clickable links. It accepts various values, each serving a different purpose.
Two common cases are telephone links and email links. These links
enable users to click on them to make calls or open their default email
clients with the specified email address.
• To create a telephone link, we use the value «tel» followed by the
phone number. For example, <a href="tel:+1234567890">Call</a>.
• To create an email link, we use the value «mailto» followed by the
email address. For example,
<a href="mailto:[email protected]">Send Email</a>.
LMGSI (DAM) - IES El Pla 59
3. HTML Content and text tags
3.2. HTML Text tags
3.2.1. Hyperlinks: values of the href Attribute
• Example and result

LMGSI (DAM) - IES El Pla 60


3. HTML Content and text tags
3.2. HTML Text tags
3.2.2. Hyperlinks: target attribute
The target attribute specifies where to open the linked document.
Element Description
_blank Opens the linked URL/document in a new window.
_self Opens the linked URL/document in the same frame as it was clicked (this is
default).
• Example:

LMGSI (DAM) - IES El Pla 61


3. HTML Content and text tags
3.2. HTML Text tags
3.2.2. Hyperlink: download attribute
The download attribute in HTML is used to specify that a hyperlink should be
downloaded when clicked instead of navigating to it. It allows you to provide
a suggested filename for the downloaded file. Here’s how the download
attribute works:
<a href="path/to/file.pdf" download="myfile.pdf">Download PDF</a>
In this example, when the user clicks on the link «Download PDF» the file
specified in the «href» attribute (path/to/file.pdf) will be downloaded
instead of opening in the browser. The «download» attribute specifies the
suggested filename for the downloaded file (myfile.pdf)

LMGSI (DAM) - IES El Pla 62


3. HTML Content and text tags
3.3. Special Characters in HTML
HTML uses special character entities to display reserved characters that have
special meanings in HTML. These characters are often used for formatting or
to display symbols that cannot be directly represented in HTML.
The ASCII representation of HTML symbols can be done in three different
ways: using entities, decimal codes, and hexadecimal codes. Here’s an
explanation of the differences between them:
• HTML Entities: HTML entities are character sequences that represent
special symbols in HTML. They start with an ampersand (&), followed by a
name or number, and end with a semicolon (;). HTML entities are easy to
read and understand, making them convenient for use in HTML code.
LMGSI (DAM) - IES El Pla 63
3. HTML Content and text tags
3.3. Special Characters in HTML
• Decimal Codes: Decimal codes are numerical values that represent
symbols in the ASCII table. They are written in the form «&#x;», where «x»
is the decimal number corresponding to the symbol. Decimal codes are
useful when a specific HTML entity cannot be used or when a precise
numerical representation of the symbol is needed.
• Hexadecimal Codes: Hexadecimal codes are numerical values in base 16
that represent symbols in the ASCII table. Hexadecimal codes are similar to
decimal codes but use a base 16 representation instead of base 10.
In summary, HTML entities are more readable and convenient to use in
HTML code, while decimal and hexadecimal codes provide a precise
numerical representation of symbols. The choice between them depends on
the context and specific development needs.
LMGSI (DAM) - IES El Pla 64
3. HTML Content and text tags
3.3. Special Characters in HTML
Here are some commonly used
Special character Code Character entity
special characters in HTML and
their corresponding character & &#38; &amp;
entities and code  < &#60; &lt;
“ &#34; &quot;
> &#62; &gt;
© &#169; &copy;
÷ &#247; &divide;
€ &#8364; &euro;
← &#8592 &larr;
Exercises (click here)
LMGSI (DAM) - IES El Pla 65
4. HTML Form tags
To create an HTML form, use the <form> tag as the container. Inside the form, you
can add various input elements to collect user data. Here’s an example of a basic
form structure:

In this example, the form has an action attribute specifying where the form data
should be submitted. The method attribute determines the HTTP method to be
used (POST in this case). Each input element has a type, id, and name attribute for
identification and data collection. The submit input triggers form submission.
LMGSI (DAM) - IES El Pla 66
4. HTML Form tags
4.1. Form attributes
Both the action and method attributes are used together to determine how the
form data will be sent and processed. It is important to consider security and the
purpose of the form when choosing the appropriate method. Example:

• action: It specifies the URL or route to which the form data will be sent when it is
submitted. It can be a relative or absolute URL that indicates where the form data
will be sent for processing.
• method: It can be either «GET» or «POST» and determines the HTTP method that
will be used to send the form data to the server. The main difference lies in how
the data is transmitted.
LMGSI (DAM) - IES El Pla 67
4. HTML Form tags
4.1. Form attributes
• method: It can be either «GET» or «POST» and determines the HTTP method that
will be used to send the form data to the server. The main difference lies in how
the data is transmitted.
• GET: The form data is appended to the URL as query parameters. It is the
default method if the method attribute is not specified. It is useful when you
want the form data to be visible in the URL, for example, when performing
searches.
• POST: The form data is sent in the body of the HTTP request in a more secure
manner and is not shown in the URL. It is suitable for sending sensitive data
such as passwords or personal information.
(example and exercises click on this link)
LMGSI (DAM) - IES El Pla 68
4. HTML Form tags
4.2. Form tags
HTML form tags are used to create interactive forms on web pages. Here are some
commonly used form tags (example and exercises click on this link):
Element Description
<form> It is used to create a form for user input.
<fieldset> It is used to group elements in a form. It draws a box around the
elements.
<legend> It is used to define a caption for the <fieldset> element.
<input> It is used to specify an input field where the user can enter information.
<button> It specifies a button.

LMGSI (DAM) - IES El Pla 69


4. HTML Form tags
4.2. Form tags
Element Description
It defines an option in a select list. It goes inside a <select>, <optgroup>,
<option>
or <datalist> element.
<select> It is used to create a drop-down list.
It is used to group related options in a <select> element (drop-down
<optgroup>
list).
<datalist> It is used to specify a list of pre-defined options for an <input> element.
It defines a multi-line text input control. It is useful to collect user inputs
<textarea>
like comments or reviews.

LMGSI (DAM) - IES El Pla 70


4. HTML Form tags
4.3. Form input attributes
Form input attributes are used to specify additional properties or behaviors of HTML
input elements within a form. Here are some commonly used form input attributes:
Attribute Description
type Specifies the type of input control, such as text, password, checkbox, radio, ...
value Initial value for an input field.
readonly The input field is read-only.
disabled The input field is unusable and unclickable.
Visible width, in characters, of an input field. The default value for size is 20. It
size
works with these input types: text, search, tel, url, email, and password.
(example and exercises click on this link)
LMGSI (DAM) - IES El Pla 71
4. HTML Form tags
4.3. Form input attributes
Attribute Description
maxlength It specifies the maximum number of characters allowed in an input field.
min / max It specifies the minimum and maximum values for an input field.
It allows you to apply regular expressions to validate and control the input
pattern values of certain elements. It works with the following input types: text,
date, search, url, tel, email, and password.
placeholder It describes the expected value of an input field. It works with the following
input types: text, search, url, tel, email, and password.
required It specifies that an input field must be filled out.
It specifies that an input field should automatically get focus when the
autofocus
page loads.
LMGSI (DAM) - IES El Pla 72
4. HTML Form tags
4.3. Form input attributes
• Example
In this example, we have
used various attributes
such as type, id, name,
placeholder, required,
minlength, maxlength,
min, and max for the input
fields. We have also used
the for attribute in the
<label> tags to associate
them with the
corresponding fields.

(example and exercises click on this link)


LMGSI (DAM) - IES El Pla 73
4. HTML Form tags
4.4. Form input: type attribute values
The type attribute is used in HTML input elements to define the type of data that can
be entered or selected by the user. It helps to determine the appearance and behavior
of the input field. Here are some commonly used values for the type attribute:
Type Description
checkbox Check box allowing single values to be selected/deselected.
color Control for specifying a color; opening a color picker.
date Control for entering a date (year, month, and day, with no time).
Field for editing an email address. Looks like a text input, but has validation
email
parameters.
(example and exercises click on this link)
LMGSI (DAM) - IES El Pla 74
4. HTML Form tags
4.4. Form input: type attribute values
Type Description
Control that lets the user select a file. Use the accept attribute to define
file
the types of files that the control can select.
Graphical submit button. Displays an image defined by the src attribute.
image
The alt attribute displays if the image src is missing.
month Control for entering a month and year..
Control for entering a number. Displays a spinner and adds default
number
validation.
password Single-line text field whose value is obscured.

LMGSI (DAM) - IES El Pla 75


4. HTML Form tags
4.4. Form input: type attribute values
Type Description
Radio button, allowing a single value to be selected out of multiple choices
radio
with the same name value.
Control for entering a number whose exact value is not important. Displays
range as a range widget defaulting to the middle value. Used in conjunction min
and max to define the range of acceptable values.
search Single-line text field for entering search strings.
submit Button that submits the form.
tel Control for entering a telephone number.

LMGSI (DAM) - IES El Pla 76


4. HTML Form tags
4.4. Form input: type attribute values

Type Description
text Default value. A single-line text field.
time Control for entering a time value.
Field for entering a URL. Looks like a text input, but has validation
url
parameters.
week Control for entering a date.

(example and exercises click on this link)


LMGSI (DAM) - IES El Pla 77
4. HTML Form tags
4.5. <textarea> tag
<textarea> is an HTML tag used to create a multi-line text input area. It supports two
attributes, rows and cols, which define the visible number of rows and columns
respectively.
• The rows attribute specifies the visible height of the textarea in terms of rows. It
determines the number of lines visible without scrolling.
• The cols attribute specifies the visible width of the textarea in terms of columns. It
determines the number of characters visible horizontally without scrolling.
In this example, the textarea will be
displayed with 4 visible rows and 40
visible columns. The text inside the
<textarea> will be shown within this
specified size.
(example and exercises click on this link)
LMGSI (DAM) - IES El Pla 78
4. HTML Form tags
4.6. <select> tag
The <select> element in HTML is used to create a dropdown list or a selection menu. It
allows users to choose one or multiple options from a list of predefined values. Here
are two examples of how to use the <select> element:

You can also add the multiple attribute to allow multiple selections:

LMGSI (DAM) - IES El Pla 79


4. HTML Form tags
4.6. <select> tag

In this example, we have a <select> element with three <option> elements inside it.
Each <option> represents a selectable item in the dropdown list. The value attribute
specifies the value associated with each option, which can be used for form
submission or JavaScript manipulation. Furthermore, the second <option> element
has the selected attribute, which means «Option 2» will be pre-selected when the
page loads. Users can still change the selection if desired.
(example and exercises click on this link)
LMGSI (DAM) - IES El Pla 80
4. HTML Form tags
4.7. <button> tag
The <button> tag in HTML is used to create a clickable button on a webpage. It can be
used to trigger a specific action or behavior when clicked. Here’s an example:
<button>Click me</button>
In this example, a simple button with the text «Click me» is created.
You can also use the type attribute to define the type of button. Some common values
for the type attribute are:
• button (default): A standard button.
• submit: A button that submits a form.
• reset: A button that resets form inputs to their initial values.
Here’s an example with the type attribute:
<button type="submit">Submit</button>
This button, when clicked, will submit the form it belongs to.
(example and exercises click on this link)
LMGSI (DAM) - IES El Pla 81
4. HTML Form tags
4.8. <label> tag
The <label> tag in HTML is used to define a label for an HTML form element. It helps in
associating a text description with a form input, making it more accessible and user-
friendly. Here’s an example:

In this example, the <label> tag is used to create a label for the username input field.
The for attribute of the <label> tag specifies which input element it is associated with.
In this case, the for attribute value matches the id attribute of the input field.
When a user clicks on the label, the corresponding input field is focused or activated.
This improves usability and accessibility, as users can click on the label text instead of
directly clicking on the input field.
Using the <label> tag is important for creating accessible and well-structured forms in
HTML. It improves usability, especially for users with assistive technologies.
(example and exercises click on this link)
LMGSI (DAM) - IES El Pla 82
4. HTML Form tags
4.9. <fieldset> and <legend> tags
The <fieldset> and <legend> tags in HTML are used to group related form elements
together and provide a descriptive caption or title for the group.
The <fieldset> tag acts as a container that holds a group of form elements. It helps in
organizing and structuring the form by visually grouping related fields.
Here’s an example:

In this example, the <fieldset> tag wraps the group of form elements related to contact
information. The <legend> tag is used as a caption or title for the fieldset, providing a
description of the group.
LMGSI (DAM) - IES El Pla 83
4. HTML Form tags
4.9. <fieldset> and <legend> tags

The rendered output will display the legend text as the title of the fieldset, visually
separating the grouped fields from other form elements.

Using <fieldset> and <legend> tags helps improve the accessibility and usability of
forms by providing a clear structure and visual grouping of related fields. It also
enhances (mejora) the overall styling (estilo general) and organization of the form.
(example and exercises click on this link)
LMGSI (DAM) - IES El Pla 84
4. HTML Form tags
4.10. Pattern attribute and regular expressions
The pattern attribute allows you to apply regular expressions to validate and control
the input values of certain elements. Regular expressions are powerful patterns used
for matching and manipulating strings.
A regular expression, often abbreviated as regex or regexp, is a sequence of characters
that forms a search pattern. It is a powerful tool used for pattern matching and
manipulating strings. Here are some commonly used regular expressions in HTML
attributes:
Expression Description
[abc] Any of the characters between the brackets
[^abc] Any character NOT between the brackets
[a-g] Any of the characters between the brackets
(a|b) Any of the alternatives separated with |
LMGSI (DAM) - IES El Pla 85
4. HTML Form tags
4.10. Pattern attribute and regular expressions
Metacharacter Description
. A single character, except newline or line terminator
\w\ d \s Word, digit, whitespace character
\W \D \S Non-word character, non-digit character, non-whitespace character
\t \n \r Tab character, new line character, carriage return character
Quantifier Description
a* a+ a? Zero or more, one or more, zero or one occurrences
a{5} a{2,} Only 5, 2 or more
a{1,3} Between 1 and 3
^a Any string with a at the beginning of it
a$ (example
Any string withand
a atexercises
the end ofclick
it on this link)
LMGSI (DAM) - IES El Pla 86
4. HTML Form tags
4.10. Pattern attribute and regular expressions
Examples:
Here are some commonly used regular expressions in HTML attributes:
Email Validation: This pattern validates that the input value is a valid email address.
<input type="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
required>
URL Validation: This pattern ensures that the input value starts with either «http://» or
«https://».
<input type="url" pattern="https?://.+">
Numeric Input: This pattern allows only numeric input in the field.
<input type="number" pattern="[0-9]+">
Custom Pattern: This pattern specifies a custom format where the input should start
with three letters followed by three digits.
<input type="text" pattern="[A-Za-z]{3}\d{3}">
LMGSI (DAM) - IES El Pla 87
4. HTML Form tags
4.10. Pattern attribute and regular expressions
Examples:
Here are some commonly used regular expressions in HTML attributes:
ZIP Code Validation: This pattern ensures that the input value is a valid 5-digit ZIP
code.
<input type="text" pattern="[0-9]{5}">
Date Validation (YYYY-MM-DD format): This pattern validates the input value as a
date in the format of YYYY-MM-DD.
<input type="text" pattern="\d{4}-\d{2}-\d{2}">
Username Validation (alphanumeric characters only): This pattern allows only
alphanumeric characters for the username input.
<input type="text" pattern="[A-Za-z0-9]+">

(example and exercises click on this link)


LMGSI (DAM) - IES El Pla 88
5. HTML Table tags
To create a table in HTML, you can use the <table> element along with several other
elements to structure the table. Here’s an example of how to create a table:
In this example, we have a table with
three columns defined by the <th>
(table header) elements within the
<tr> (table row) of the first row. The
data rows are represented by the
<tr> elements, and the individual
cells are defined by the <td> (table
data) elements.
You can add more rows and columns
by adding additional <tr> elements
and their corresponding <td> or <th>
elements within the table.
LMGSI (DAM) - IES El Pla 89
5. HTML Table tags
5.1. Table tags
Element Description
<table> Defines a table
<caption> Defines a table caption
<tr> Defines a row in a table
<td> Defines a cell in a table
<th> Defines a header cell in a table
<colgroup> Specifies a group of one or more columns in a table for formatting
Specifies column properties for each column within a <colgroup>
<col>
element

LMGSI (DAM) - IES El Pla 90


5. HTML Table tags
5.2. Grouping cells in tables using rowspan and colspan
In HTML, the rowspan attribute is used to span a cell across multiple rows, while the
colspan attribute is used to span a cell across multiple columns. Example usage of
rowspan:

In this example, Cell 1 spans across two rows.


LMGSI (DAM) - IES El Pla 91
5. HTML Table tags
5.2. Grouping cells in tables using rowspan and colspan
Example of usage colspan:

In this example, Cell 2 spans across two columns. Using rowspan and colspan allows
for flexible table layouts and the merging of cells to create complex table structures.
(examples w3c, click on this link)
LMGSI (DAM) - IES El Pla 92
5. HTML Table tags
5.3. Table border, align, and bgcolor attributes
1. Border attribute: Specifies the width of the border around the table cells.
The value is given in pixels. Example: <table border="1">
2. Align attribute: Determines the horizontal alignment of the table within its
container. Possible values are «left,» «center,» or «right.» Example: <table
align="center">
3. Bgcolor attribute: Sets the background color of the table. You can use color
names or hexadecimal color codes. Example: <table bgcolor="#f1f1f1">
These attributes can be applied to the <table> tag to control the appearance and
layout of HTML tables. However, it is recommended to use CSS styles instead for
better control and separation of concerns.
(examples w3c, click on this link)
LMGSI (DAM) - IES El Pla 93
5. HTML Table tags
Exercise 4. Drag the words and drop them into the answer area:

→ Defines a table.
→ Defines a table caption.
→ Defines a row in a table.
→ Defines a cell in a table.
→ Defines a header cell in a table.
→ Specifies a group of one or more columns in a table for formatting.
→ Specifies column properties for each column within a <colgroup>.
(example and exercises click on this link)
LMGSI (DAM) - IES El Pla 94
6. HTML tags for embedding content
HTML provides several tags for embedding content within a web page.
6.1. Tags for embedding content
Here are some commonly used tags for embedding different types of content:
Tag Description
<img> Used to embed images.
<iframe> Used to embed content from another web page within the current page.
<embed> Used to embed multimedia content, such as Flash or interactive media.
<object> Used to embed multimedia content, such as Flash, audio, or video.
<video> Used to embed videos. View more
<audio> Used to embed audio files. View more

LMGSI (DAM) - IES El Pla 95


6. HTML tags for embedding content
HTML provides several tags for embedding content within a web page.
6.1. Tags for embedding content
Here are some commonly used tags for embedding different types of content:
Tag Description
Used as a child element within <video> or <audio> tags to specify
<source> alternative media sources (e.g., different file formats or resolutions) for
the browser to choose from.
<canvas> Used to embed dynamic, scriptable graphics and animations. View more
<svg> Used to embed scalable vector graphics.
Used to embed mathematical equations and formulas using MathML
<math> (Mathematical Markup Language). This tag allows you to display complex
mathematical expressions in a structured and accessible format.
LMGSI (DAM) - IES El Pla 96
6. HTML tags for embedding content
6.1. Tags for embedding content. Example

LMGSI (DAM) - IES El Pla 97


6. HTML tags for embedding content
6.2. img tag
The most common attributes in HTML image tags are:

• src: specifies the path or URL of the image.


• alt: provides alternative text that is displayed if the image cannot be loaded.
• title: provides descriptive text that is displayed when hovering over the image.
• width: specifies the width of the image in pixels or as a percentage of the
available width.
• height: specifies the height of the image in pixels or as a percentage of the
available height.
• border: specifies the width of the border around the image.
• align: specifies the alignment of the image. Values: left|right|middle|top|bottom

LMGSI (DAM) - IES El Pla 98


6. HTML tags for embedding content
6.2. img tag
Here’s an example of an image tag using these attributes:
<img src="image.jpg" alt="Image description" title="Image title"
width="300" height="200" border="1" align="left">
In this example, the image is loaded from the «image.jpg» file. If the image
fails to load, the text «Image description» will be displayed. When hovering
over the image, the text «Image title» will be shown. The image will have a
width of 300 pixels and a height of 200 pixels. A border with a width of 1 pixel
will be displayed around the image. The image will be aligned to the left of
the surrounding text.

LMGSI (DAM) - IES El Pla 99


6. HTML tags for embedding content
6.3. Embed YouTube videos & playlists
You can add a YouTube video or playlist to a website by embedding it.
1. Go to the YouTube video or playlist you want to embed and click .
2. From the list of Share options, click Embed.
3. From the box that appears, copy the HTML code.
6.4. Embed a Google map
You can add a Google map to a website by embedding it.
1. Go to the map you want to embed and click
2. Click Share or embed map.
3. Click Embed map.
4. To the left of the text box, pick the size you want by clicking the
5. From the box that appears, copy the HTML code.
(example and exercises click on this link)
LMGSI (DAM) - IES El Pla 100
7. Page jumping or jump links
Page jumping, anchor links or jump links are HTML elements used to create
clickable links within a web page. They allow users to navigate to different sections
of the same page or to external pages by clicking on the link text or associated
element.

7.1. How to create an jump link


To create a jump link, follow these steps:
1. Identify the section or element within the HTML document where you want
to create the anchor.
2. Within that section or element, add an <a> tag with the name attribute.
3. Assign a unique value to the name attribute to identify the anchor point. For
example: <a name="section1"></a>

LMGSI (DAM) - IES El Pla 101


7. Page jumping or jump links
7.1. How to create an jump link
To create a jump link, follow these steps (cont.):
4. Place the content or text that you want to link to this anchor within the
same HTML document.
5. To create a link that points to the anchor, use the href attribute in another
<a> tag. For example: <a href="#section1">Go to Section 1</a>

When a user clicks on this link, the browser will scroll to the section with the
corresponding name attribute, allowing them to quickly navigate to that specific
part of the page.

(example and exercises click on this link)


LMGSI (DAM) - IES El Pla 102
7. Page jumping or jump links
7.2. How to create an anchor link that can be accessed from another page
To create anchors links that can be accessed from another page, you can follow
these steps:
1. Identify the section or element within the HTML document where you want to
create the anchor, as described in the previous explanation.
2. Within that section or element, add an <a> tag with the name attribute, just like
before. For example: <a name="section1"></a>.
3. Save the HTML document with the anchor as a separate file, such as
page1.html.
4. In the HTML document where you want to link to the anchor from another
page, create an <a> tag with the href attribute pointing to the file and the
anchor name. For example:
<a href="page1.html#section1">Go to Section 1</a>.
LMGSI (DAM) - IES El Pla 103
7. Page jumping or jump links
7.2. How to create an anchor link that can be accessed from another page
To create anchors links that can be accessed from another page, you can follow
these steps (cont.):
5. When a user clicks on this link in the second HTML document, it will open
page1.html and automatically scroll to the section with the corresponding name
attribute, providing a seamless navigation experience across different pages.
By using this approach, you can create anchors in one HTML document and link to
them from multiple other pages, allowing users to easily access specific sections of
the referenced document.

(example and exercises click on this link)


LMGSI (DAM) - IES El Pla 104
8. Metadata or meta tags in HTML
Metadata in HTML is used to provide additional information about an HTML
document. This information is not displayed directly on the web page, but it can be
used by search engines, browsers, and other systems to understand and classify the
content of the document.

These tags are placed between the <head> and </head> tags. Some of the most
common meta tags for metadata in HTML are:
1. <title>: Defines the title of the document, which is displayed in the browser’s
title bar and search results.
2. <meta charset="UTF-8">: Specifies the character encoding used in the
document. UTF-8 is the most commonly used encoding to support multilingual
characters.
LMGSI (DAM) - IES El Pla 105
8. Metadata or meta tags in HTML
These tags are placed between the <head> and </head> tags. Some of the most
common meta tags for metadata in HTML are (cont.):
3. <meta name="description" content="Description of website">: Provides a
brief description of the website’s content. It is used by search engines to display
information about the site in search results.
4. <meta name="keywords" content=“keyword 1, keyword 2">: Specifies
keywords related to the website’s content. Although not as relevant for modern
search engines, it can still be used to understand the website’s theme.
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">:
Defines how the content should adjust and scale on mobile devices. It is
important for achieving a responsive design. See viewport meta tag
configuration.
LMGSI (DAM) - IES El Pla 106
8. Metadata or meta tags in HTML
These tags are placed between the <head> and </head> tags. Some of the most
common meta tags for metadata in HTML are (cont.):
6. <meta name="author" content=“Name of author of html document">:
Specifies the name of the document’s author.
7. <meta name="copyright" content=“year of copyright, name of the author’s
rights">: Indicates the copyright of the document.
8. <meta name="robots" content="index,follow">: Instructs search engines
whether they should index and follow links within the document.
9. <meta http-equiv="refresh" content="30">: Refresh document every 30
seconds
(example and summary table, click on this link)
LMGSI (DAM) - IES El Pla 107
8. Metadata or meta tags in HTML
These tags are placed between the <head> and </head> tags and his syntax is:
<meta attribute=“value”>. You can see a table with the most used attributes and
values:
Attributes Value Description
charset character_set Specifies the character encoding for the HTML
document
content text Specifies the value associated with the http-equiv
or name attribute
http-equiv content-security-policy Provides an HTTP header for the
content-type information/value of the content attribute
default-style
refresh
LMGSI (DAM) - IES El Pla 108
8. Metadata or meta tags in HTML
These tags are placed between the <head> and </head> tags and his syntax is:
<meta attribute=“value”>. You can see a table with the most used attributes and
values (cont.):

Attributes Value Description


name application-name Specifies a name for the metadata
author
description
generator
keywords
viewport

(examples and more information, click on this link)


LMGSI (DAM) - IES El Pla 109
9. HTML validation

Validating HTML is an important step to ensure that your HTML code follows
the correct syntax and adheres to the standards set by the HTML
specification. By validating your HTML, you can identify and fix any errors or
inconsistencies in your code, which helps improve the compatibility,
accessibility, and overall quality of your web pages.
There are several online tools and validators available that can help you
validate your HTML code. One popular option is the W3C Markup Validation
Service, which is provided by the World Wide Web Consortium (W3C). You
can access the service at validator.w3.org and submit your HTML code for
validation.
LMGSI (DAM) - IES El Pla 110
10. Ordered elements in HTML5
HTML elements can be categorized as either block-level elements or inline
elements based on their default display behavior.
10.1. HTML block elements
Block-level elements start on a new line and take up the full width available.
Block tags:
<address><article><aside><blockquote>
<canvas><dd><div><dl><dt><fieldset>
<figcaption><figure><footer><form>
<h1>-<h6><header><hr><li><main>
<nav><noscript><ol><p><pre>
<section><table><tfoot><ul><video>

LMGSI (DAM) - IES El Pla 111


10. Ordered elements in HTML5
10.2. HTML inline elements
Block-level elements start on a new line and take up the full width available.

Inline tags:
<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i>
<img><input><kbd><label><map><object><output><q><samp><script><select>
<small><span><strong><sub><sup><textarea><time><tt><var>

LMGSI (DAM) - IES El Pla 112


11. HTML. Technical vocabulary
Are you ready to test your technical vocabulary skills in HTML? Let’s dive into some
exercises to reinforce your knowledge! Below, you’ll find a series of technical words
related to HTML in both English and Spanish. Your task is to match the English words
with their corresponding Spanish translations. Remember to take your time and
have fun while learning!
Exercise 5. Drag the words and drop them into the answer area:
→ Accesibilidad
→ Anuncio
→ Atributo
→ Negrita
→ Navegador
→ Viñeta
→ Subtítulo
LMGSI (DAM) - IES El Pla 113
11. HTML. Technical vocabulary
Exercise 5 (cont.). Drag the words and drop them into the answer area:
→ Retorno de carro
→ Enlaces en los que se puede hacer clic
→ Editor de código
→ Fragmentos de código
→ Comentarios
→ Información de contacto
→ Contenedor
→ Avisos de derechos de autor

LMGSI (DAM) - IES El Pla 114


11. HTML. Technical vocabulary
Exercise 6. Drag the words and drop them into the answer area:

→ Desarrollo → ancho fijo


→ Mostrar → Pie de página
→ Documento → Cabecera
→ Lista desplegable → Título
→ Elemento → Estructura jerárquica
→ Texto enfatizado → Texto resaltado
→ Tecla Entrar, Tecla Intro → Pasar el cursor por encima de un enlace
→ Archivo, fichero
LMGSI (DAM) - IES El Pla 115
11. HTML. Technical vocabulary
Exercise 7. Drag the words and drop them into the answer area:

→ Hipervínculo → Lenguaje de marcado


→ Campo de entrada → Texto resaltado
→ Cursiva → Salto de línea
→ Artículo, punto, elemento, tema → Fuente monoespaciada
→ Entrada de teclado → Pasar el ratón sobre
→ Base de diseño de una página web. → Barra de navegación
→ Salto de línea → Lista ordenada
→ Contenido principal
LMGSI (DAM) - IES El Pla 116
11. HTML. Technical vocabulary
Exercise 8. Drag the words and drop them into the answer area:

→ Párrafo → Optimización en los


→ Texto preformateado motores de búsqueda
→ Cita → Barra lateral
→ Comillas → Red social
→ Contenido citado → Fuente
→ Recurso → Espacio
→ Salida de un programa → Texto tachado
→ Sección → Hoja de estilo
LMGSI (DAM) - IES El Pla 117
11. HTML. Technical vocabulary
Exercise 9. Drag the words and drop them into the answer area:

→ Subíndice → Texto subrayado


→ Superíndice → Lista desordenada
→ Etiqueta → Proyecto de desarrollo web
→ Sistema de codificación de texto → Sitio web
→ Mensaje que se muestra al pasar el ratón → Página web individual
→ Escribir más rápido dentro de un sitio web
→ Espacio en blanco

LMGSI (DAM) - IES El Pla 118


11. HTML. Technical vocabulary
Exercise 10. Drag the words and drop them into the answer area:

→ Etiqueta → Enlace → Lista → En línea


→ Elemento → Imagen → Ancla → Bloque
→ Atributo → Tabla → Valor del atributo
→ Cabecera → Formulario → Anidado
→ Cuerpo → Entrada → Nombre del atributo
→ Párrafo → Botón → Clase
LMGSI (DAM) - IES El Pla 119
11. HTML. Technical vocabulary
Final exercises. For each English word, you’ll need to provide the corresponding Spanish
translation. Here we go:
Exercise 1: Exercise 3: Exercise 5:
Accessibility → Code snippets → Emphasized text →
Advertisement → Comments → Form →
Attribute → Contact information → Heading →
Bold → Container → Horizontal rule →
Browser → Copyright notices → Hyperlink →
Exercise 2: Exercise 4: Exercise 6:
Bullet → Development → Enter key →
Caption → Display → File →
Carriage return character → Document → Fixed-width →
Clickable links → Drop-down list → Footer →
Code editor → Element → Header →
LMGSI (DAM) - IES El Pla 120
11. HTML. Technical vocabulary
Final exercises (cont). For each English word, you’ll need to provide the corresponding
Spanish translation. Here we go:
Exercise 7: Exercise 9: Exercise 11:
Heading → Line break → Preformatted text →
Hierarchical structure → Main content → Quotation →
Highlighted text → Markup Language → Quotation marks →
Hover a link → Marked text → Quoted content →
Hyperlink → New line character → Resource →
Exercise 8: Exercise 10: Exercise 12:
Input field → Monospace font → Sample output →
Italics → Mouse over → Section →
Item → Navigation bar → SEO search engine optimization →
Keyboard input → Ordered list → Sidebar →
Layout → Paragraph → Social network →
LMGSI (DAM) - IES El Pla 121
11. HTML. Technical vocabulary
Final exercises (cont.). For each English word, you’ll need to provide the corresponding
Spanish translation. Here we go:
Exercise 13: Exercise 15:
Source → Underlined text →
Space → Unordered list →
Strikethrough text → Web development project →
Stylesheet → Website →
Subscript → Web page →
Exercise 14: Exercise 16:
Superscript → Whitespace character →
Tag →
Text-encoding system →
Tooltip →
Type faster →
LMGSI (DAM) - IES El Pla 122
12. HTML Tags Summary
HTML Tags Summary Índex

1. Basic Structure 10. Input Types: type Attribute


2. Structural Elements 11. Patterns and Regular Expressions
3. Semantic Elements 12. Table of Contents
4. Content Tags 13. Embedded Content
5. Text Tags 14. Block-Level Elements
6. Hyperlinks: Target Attribute Values 15. Inline Elements
7. Special Characters 16. HTML Anchors or Links
8. Form Creation Tags 17. Meta Tags
9. <input> Tag Attributes Click here to access to summary

LMGSI (DAM) - IES El Pla 123

You might also like