Unit 1

Basic HTML file structure

Introduction to HTML
● HTML (HyperText Markup Language) : standard for creating web
pages.
● Current version: HTML5.
● Not a programming language: it structures content using tags
but lacks logic, conditions, loops, and variables.
● Defined by W3C: developed by the World Wide Web Consortium,
which sets web standards.
Web Development Basics
● HTML: Defines the content and
structure of a webpage (e.g., headings,
paragraphs, lists).
● CSS: Manages the presentation of the
page, including font, colors, and layout.
● JavaScript: Adds behavior and
interactivity, such as dynamic content
and user interactions.
Together, these technologies form the
foundation of modern web development.
HTML and Browser Compatibility
● HTML defines the structure of a webpage using elements that organize
content.
● Browsers interpret the markup to display the content on screen.
● Modern browsers follow the HTML5 standard, but slight differences in
appearance may occur due to each browser's unique features.
● Recommendation: always test your website in multiple browsers to
ensure consistent appearance.
HTML elements
● HTML uses elements or tags to structure content.
● To display text as a paragraph, wrap it with opening (<p>) and closing
(</p>) tags.
● For example:
There are tons of
HTML elements

● These tags instruct the browser to format the text as a paragraph.

Editing HTML files
● HTML files can be edited with simple text editors like Notepad++.
● Advanced editors such as Visual Studio Code and Sublime Text offer
features like syntax highlighting and coding tips.
● Online editors like W3Schools and W3Docs work in a browser and
don’t require installation.
● File extension: Web pages are saved with the .html extension.
These tools make HTML editing accessible for all levels of developers.
Visual Studio Code
● Visual Studio Code is a powerful code editor by Microsoft for
Windows, Linux, and macOS.
● Supports various languages, including HTML, JavaScript, CSS, Python,
C#, and more.
● To install on Linux:
○ Download the .deb package from Visual Studio Code homepage
○ Navigate to the download directory and run the command: sudo
apt install ./downloaded_file.deb
HTML elements and empty elements
● Elements have three parts: start tag (<tag>), content and end tag
(</tag >)

● Empty elements do not have content and have only the start tag.

The <br> tag defines a line break

HTML Attributes
● Attributes provide extra information about HTML elements.
● All elements can have attributes; some are required, others optional.
● Attributes are placed in the start tag and typically consist of name/value
pairs. This helps in defining properties like IDs, classes, or styles for the
elements.
Example: <img src="image.jpg" alt="Description of image">
In this case, src specifies the image source, and alt provides alternative text
for accessibility.
HTML Attributes
HTML Attributes
● The <a> tag creates a hyperlink.
● The href attribute specifies the URL the link points to.

HTML code

HTML result in webpage

The text "Wikipedia" becomes a clickable link, directing users to the

specified URL.
Steps to make web pages accessible online
● Create the web pages using HTML, which tells browsers how to
display content.
● Upload the pages to a web server (e.g., using an FTP client to
transfer files).
● Users access the pages through various devices and browsers by
connecting to the Internet.
These steps ensure your web content is available to a global audience
across different platforms.
How a web server works
● The web server is a computer connected to the Internet waiting for
requests from web browsers:
● The developer stores resources like HTML, images, and other file
types on the server.
● Browsers request these resources (e.g., HTML pages or images).
● If the server finds the requested resources, it sends them back to the
browsers for display.
This process enables web pages to be delivered to users.
How a web browser works
● A web browser is an application responsible for displaying
websites.
● The server sends web pages to the browser upon request.
● The browser retrieves the web pages.
● The browser displays the HTML content for the user to view.
This process allows users to access and interact with web content
on their devices.
How a browser and server communicate

This process is part of the HTTP communication between the client and
server, using the TCP/IP protocol.
Learn more: how the Internet works
Extra information:
Playlist How the Internet works?

(click on the image)

Basic structure of an HTML document
The indentation in the HTML
code is not required but
strongly recommended.

The only reason we indent our

code is to make it easier to
read.
Doctype declaration: <!DOCTYPE …>
● It is a required tag at the top of all HTML documents.
● It informs the browser about the type of document is being
displayed and what specific version of HTML is being used.
● This ensures the correct rendering of the webpage across all
browsers.
● In HTML 5 the declaration is simple: <!DOCTYPE html>
<html> element
● Required tag: it wraps all the content of a webpage and is the root
element. It tells the browser that everything inside is HTML.
● lang attribute: it is recommended to use the lang attribute followed
by the language code to specify the page’s language, helping
browsers and search engines.
● Language codes like "en" for English, "es" for
Spanish, and "fr" for French are some
examples.
<head> and <body> elements
Inside the <html> element, the content is divided into a <head> and a <body>
elements:

● <head> element contains metadata and links (e.g., description, keywords,

stylesheets or scripts) that are not visible on the webpage.
● <body> contains all the visible content, such as text, images, and links.
Nesting HTML elements
● HTML elements can be nested inside each other to create a structured
layout for a webpage.
● For example, the <head> and <body> elements are nested inside the
<html> element.
● Any HTML element can be nested within another to better organize the
content.

In this example, a <div> element contains a

nested <h1> (heading), <p> (paragraph),
and <ul> (unordered list) elements.
<meta> elements
● The <meta> tag defines metadata for an HTML document.
● Metadata provides information about the document that is not displayed
on the page but helps search engines and browsers (e.g., title, author,
character encoding).
● Common uses include setting the character encoding and defining
viewport settings for mobile devices.
● <meta> tags are always placed inside the <head> element.
<meta> elements
<title> element
● The <title> element is required and represents the title of the
HTML document.
● It helps search engines determine the ranking of pages in search
results.
● The title appears:
○ In search results.
○ When the page is added to favorites or bookmarks.
<meta> elements
● <meta charset="UTF-8"> tells the browser to use the UTF-8 character
set, which supports nearly all characters and symbols (e.g., á, é, ü, ñ).
● <meta name="description" content="..."> provides a brief description
of the webpage, often displayed in search engine results as a snippet.
● <meta name="keywords" content=" …"> provide keywords for search
engines to determine relevance of that page for different search terms.
<meta> elements
<meta> elements
● <meta name="author" content=" …"> specifies the author or creator of
the webpage.
● <meta name=”viewport” content=”...”> defines the visible area of the
webpage, ensuring it displays correctly on different screen sizes.
○ width: controls the viewport size. (e.g., width=device-width adjusts to
100% of the device’s width).
○ initial-scale: sets the zoom level when the page loads. (e.g.,
initial-scale=1 sets a 100% zoom).
○ shrink-to-fit: prevents automatic content resizing on devices when
the content exceeds the viewport width. By setting it to "no", the
browser does not shrink the content, ensuring the page displays as
designed for mobile devices.
<meta> elements
Here’s what a page might look like
on mobile with and without a
meta viewport tag…

The viewport tag is not all that is

needed to make a website
mobile-friendly. Your website also
needs to make use of responsive
design.
Paragraphs and headings
● Text between <p> and </p> is a paragraph, with an automatic line break.
● Headings are defined using <h1> to <h6>:
○ <h1> is the most important heading; <h6> is the least.
○ Use only one <h1> per page, representing the main theme.
○ Follow the order of headings: start with <h1>, then <h2>, and so on.
BR element
● Insert single line breaks in a text
● It is useful for writing addresses or poems.
● It is an empty tag
PRE element
● Defines preformatted text.
● The text will be displayed exactly
as written in the HTML source
code.
● The text preserves both spaces
and line breaks
HTML Comments
● Comments are used to explain a part of the code or to delimit/mark an
area of the code to be able to identify it more easily.
● HTML comments begin with <!-- and end with --> . Whatever is between
these symbols is not displayed in the page content, it can only be read by
looking at the source code.
Block and inline elements
In HTML there are inline elements and block elements, and both refer to
how they are displayed in the browser.

● Inline elements are elements whose content is on the same line, so that
if we place two or more inline elements, they will be displayed one beside
the other in the same line. Some elements of this type are: <a> (to insert
links) , <img> (insert images), …
● Block elements are those that behave like blocks, each time a block
element is used, a line break is added by default. If we place several block
elements in a row, they will be displayed one below the other, regardless
of their width. Some elements of this type are: <p> , <h1>, …
Block and inline elements
Related links
● W3C Html Standard Documentation
● W3C Moocs
● HTML markup validator