HTML & CSS
HTML
HTML is a markup language that specifies that structure and content of documents
that are displayed in web browsers
HTML are the building blocks of web pages
HTML elements are represented by tags
HTML is called a programming language but it has no logic, so it
is a markup language. HTML tags provide semantic meaning
and machine-readability to the content in the page.
Browsers (e.g. Brave, Opera GX, Chrome etc.) do not display the HTML tags, but
rather they use them to render the content of the page
Some History
HTML was invented by Tim Burners-Lee in 1991
HTML5 reached recommendation status in October 2014
The previous HTML was standardised in 1999 (HTML 4.01)
HTML5 is the 5th major revision of the core language of the World Wide Web
HTML & CSS 1
, HTML created by W3C (World Wide Web Consortium) and WHATWG (Web
Hypertext Application Technology Working Group)
WHATWG is a growing community of people interested in evolving the web
HTML: Creating & Editing
Create HTML documents by typing HTML markup text in a text editor
Notepad
Notepad++
Visual Studio
Atom
Sublime Text
Visual Studio Code
Save with .html or .htm filename extension (e.g. myPage.html)
HTML: Tags
HTML documents delimit most elements with a start tag and end tag with the content
inserted between them
<tagname>Content goes here</tagname>
A start tag consists of the element name inside angle brackets
<starttag>
An end tag follows the same principle, except the tagname is preceded by a forward
slash
</starttag>
Some tags do not have end tags. These are known as “void tags”
<meta>
Many start tags have attributes that provide additional information about an element,
which browsers use to determine how to process the element
Each attribute has a name and a value separated by an equal sign “=”. Note quoted
attributes
<div id = “mainContainer”> or <p style “color:red;”>
HTML & CSS 2
, HTML: Structure
Minimum required components for an HTML5 document to be valid:
<!DOCTYPE html> <!-- DOCTYPE -->
<html> <!-- Root Element-->
<head>
<meta charset="utf-8"/> <!-- character encoding -->
<title>This Is A Title</title>
</head>
<body>
<!--- page content --->
</body>
</html>
Create a “Hello World” HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph</p>
</body>
</html>
Title
Web Page
Tag Meaning
HTML & CSS 3
, Tag Meaning
Defines the HTML version used in the
<!DOCTYPE>
document
Opens the page. No markup should come
after the closing tag </html> The lang
<html> attribute declares the primary language of
the page use the ISO language codes (See
below)
Opens the head section Does not appear in
the main browser Contains information
<head> about the HTML document, called metadata
It contains imports from external stylesheets
and scripts. The closing tag is </head>
Gives the browser metadata about the
document charset attribute declares the
<meta> character encoding Modern HTML
documents always use “utf-8” No closing tag
required
The title of the page Text of the title is written
<title>
between the opening and closing tag
Opens the part of the document that is
<body>
displayed to the end-users
Level 1 heading for the page Ranges all the
<h1>
way to <h6>
<p> Represents a paragraph of text
List of ISO 639-1 codes - Wikipedia
ISO 639 is a standardized nomenclature used to classify
languages. Each language is assigned a two-letter (639-1) and
three-letter (639-2 and 639-3) lowercase abbreviation, amended
https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
Declaring character encodings in HTML
Intended audience: HTML authors (using editors or scripting), script developers (PHP, JSP, etc.), Web
project managers, and anyone who needs an introduction to how to declare the character encoding of their
HTML file. How should I declare the encoding of my HTML file? You should always specify the encoding
https://www.w3.org/International/questions/qa-html-encoding-declarations.en
HTML & CSS 4
HTML
HTML is a markup language that specifies that structure and content of documents
that are displayed in web browsers
HTML are the building blocks of web pages
HTML elements are represented by tags
HTML is called a programming language but it has no logic, so it
is a markup language. HTML tags provide semantic meaning
and machine-readability to the content in the page.
Browsers (e.g. Brave, Opera GX, Chrome etc.) do not display the HTML tags, but
rather they use them to render the content of the page
Some History
HTML was invented by Tim Burners-Lee in 1991
HTML5 reached recommendation status in October 2014
The previous HTML was standardised in 1999 (HTML 4.01)
HTML5 is the 5th major revision of the core language of the World Wide Web
HTML & CSS 1
, HTML created by W3C (World Wide Web Consortium) and WHATWG (Web
Hypertext Application Technology Working Group)
WHATWG is a growing community of people interested in evolving the web
HTML: Creating & Editing
Create HTML documents by typing HTML markup text in a text editor
Notepad
Notepad++
Visual Studio
Atom
Sublime Text
Visual Studio Code
Save with .html or .htm filename extension (e.g. myPage.html)
HTML: Tags
HTML documents delimit most elements with a start tag and end tag with the content
inserted between them
<tagname>Content goes here</tagname>
A start tag consists of the element name inside angle brackets
<starttag>
An end tag follows the same principle, except the tagname is preceded by a forward
slash
</starttag>
Some tags do not have end tags. These are known as “void tags”
<meta>
Many start tags have attributes that provide additional information about an element,
which browsers use to determine how to process the element
Each attribute has a name and a value separated by an equal sign “=”. Note quoted
attributes
<div id = “mainContainer”> or <p style “color:red;”>
HTML & CSS 2
, HTML: Structure
Minimum required components for an HTML5 document to be valid:
<!DOCTYPE html> <!-- DOCTYPE -->
<html> <!-- Root Element-->
<head>
<meta charset="utf-8"/> <!-- character encoding -->
<title>This Is A Title</title>
</head>
<body>
<!--- page content --->
</body>
</html>
Create a “Hello World” HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph</p>
</body>
</html>
Title
Web Page
Tag Meaning
HTML & CSS 3
, Tag Meaning
Defines the HTML version used in the
<!DOCTYPE>
document
Opens the page. No markup should come
after the closing tag </html> The lang
<html> attribute declares the primary language of
the page use the ISO language codes (See
below)
Opens the head section Does not appear in
the main browser Contains information
<head> about the HTML document, called metadata
It contains imports from external stylesheets
and scripts. The closing tag is </head>
Gives the browser metadata about the
document charset attribute declares the
<meta> character encoding Modern HTML
documents always use “utf-8” No closing tag
required
The title of the page Text of the title is written
<title>
between the opening and closing tag
Opens the part of the document that is
<body>
displayed to the end-users
Level 1 heading for the page Ranges all the
<h1>
way to <h6>
<p> Represents a paragraph of text
List of ISO 639-1 codes - Wikipedia
ISO 639 is a standardized nomenclature used to classify
languages. Each language is assigned a two-letter (639-1) and
three-letter (639-2 and 639-3) lowercase abbreviation, amended
https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
Declaring character encodings in HTML
Intended audience: HTML authors (using editors or scripting), script developers (PHP, JSP, etc.), Web
project managers, and anyone who needs an introduction to how to declare the character encoding of their
HTML file. How should I declare the encoding of my HTML file? You should always specify the encoding
https://www.w3.org/International/questions/qa-html-encoding-declarations.en
HTML & CSS 4
