HTML
What is HTML?
HTML (Hypertext Markup Language) is not a programming language; it is a
markup language used to tell your browser how to structure the web pages you
visit.
HTML consists of a series of elements, which you use to enclose, wrap, or mark
up different parts of the content to make it appear or act a certain way.
To make the line appear as a paragraph, we enclose it in a <p> element
Anatomy of a HTML element
◎ The main parts of HTML elements are:
◎ The opening tag: This consists of the name of the element (in this case, p),
wrapped in opening and closing angle brackets.
◎ The closing tag: This is the same as the opening tag, except that it includes a
forward slash before the element name.
◎ The content: This is the content of the element, which in this case is just text.
◎ The element: The opening tag plus the closing tag plus the content equals the
element.
Nesting elements
Elements can be placed within other elements too — this is called nesting.
If we wanted to state that our cat is very grumpy, we could wrap the word "very"
in a <strong> element, which means that the word is to be strongly
emphasized:
You do however need to make sure that your elements are properly nested: in the example
we opened the <p> element first then the <strong> element, therefore we have to close
the <strong> element first then the <p>
Block vs. inline elements
There are two important categories of elements in HTML:
◎ Block level element
◎ A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
◎ Inline Element
In contrast to a block-level element, an inline element:
It can begin within a line.
It does not start a new line.
Its width only extends as far as it is defined by its tags.
◎ An example of an inline element is the <strong>, which makes the font of the
n example
textofcontent
an inlinecontained
element iswithin
the <strong>, which
boldface. makeselement
An inline the font of the text content
generally only contained
ithin boldface.
contains other inline elements, or it can contain nothing at all, such as the
n inline element generally only contains other inline elements, or it can contain nothing at all,
<br /> break tag.
uch as the <br /> break tag.
Block vs. inline elements
You can change an element's type from inline to block, or vice versa, using one
of these CSS properties
The CSS display property lets you change an inline property to block, or a block
to inline, or not to display at all.
of an inline
<strong>, which makes the font of the text content contained within boldface.
Block vs. inline elements
There is also a third type of element in HTML: those that aren't displayed at all.
These elements provide information about the page but aren't displayed
when rendered in a Web browser.
For example:
<style> defines styles and style sheets.
<meta> defines meta data.
<head> is the HTML document element that holds these elements example of
an inline
<strong>, which makes the font of the text content contained within boldface.
An inline element generally only contains other inline elements, or it can contain
nothing at all, such as the <br /> break tag.
Empty elements
Not all elements follow the above pattern of an opening tag, content, and a
closing tag.
Some elements consist only of a single tag, which is usually used to
insert/embed something in the document at the place it is included.
For example, the <img> element embeds an image file onto a page in the
position it is included in: example
This would output an image
an inline element is the <strong>, which makes the font of the text content
contained within boldface. An inline element generally only contains other inline
Attributes
Elements can also have attributes, which look like this:
An attribute should have:
A space between it and the element name (or the previous attribute, if the
element already has one or more attributes).
The attribute name, followed by an equal sign.
An attribute value, with opening and closing quote marks wrapped around it
Attributes provide additional information about HTML elements.
Attributes defines the behavior of that element.
an inline element is the <strong>, which makes the font of the text content
Adding Attributes to an element
Another example of an element is <a> — this stands for "anchor" and will make
the piece of text it wraps around into a hyperlink.
The anchor element can take a number of attributes, as follows :
Href : This attribute's value specifies the web address that you want the
link to point to;
href="[Link]
Title: The title attribute specifies extra information about the link, such as
what page is being linked to. title="The Mozilla homepage"
Target: The target attribute specifies the browsing context that will be used to
display the link. For example, target="_blank" will display the link in a new
Activity
Activity
Edit the line below in the Input area to turn it into a link to your favorite
website.
First, add the <a> element.
Second, add the href attribute and the title attribute.
Lastly, specify the target attribute to open the link in the new tab
Your solution will look like this:
Boolean Attributes
You'll sometimes see attributes written without values — this is perfectly
allowed.
These are called Boolean attributes, and they can only have one value,
which is generally the same as the attribute name
As shorthand, it is perfectly allowable to write this as follows :
an inline element is the <strong>, which makes the font of the text content
contained within boldface. An inline element generally only contains other inline
elements, or it can contain nothing at all, such as the <br /> break tag.
Anatomy of a HTML document
HTML elements, aren't very useful on their own.
Individual elements are combined to form an entire HTML page:
<!DOCTYPE html>: The
doctype. In the mists of
time, when HTML was young
(about 1991/2), doctypes
were meant to act as links to
a set of rules that the HTML
an inline element is the <strong>, which makes the font of the text content
page had to follow to be
contained within boldface. An inline element generally only contains other inline
considered good HTML, which
elements, or it can contain nothing at all, such as thecould
<br mean
/> break tag. error
automatic
checking and other useful
things.
Anatomy of a HTML document
HTML elements, aren't very useful on their own.
Individual elements are combined to form an entire HTML page:
<html></html>: The <html>
element.
This element wraps all the content on
the entire page
an inline element isThe
<head></head>: the <head>
<strong>, which makes the font of the text content
contained
[Link] boldface. An inline element generally only contains other inline
elements,
This elementoracts
it can
as contain nothing
a container atthe
for all all, such as the <br /> break tag.
stuff you want to include on the HTML
page, that isn't the content you are
showing to your page's viewers
Anatomy of a HTML document
HTML elements, aren't very useful on their own.
Individual elements are combined to form an entire HTML page:
<meta charset="utf-8">: This
element specifies the character set for
your document to UTF-8, which includes
most characters from the vast majority
of human written languages
<title></title>: The <title>
an inline element is the <strong>, which makes the font of the text content
element. This sets the title of your
contained within boldface. An inline element generally only contains other inline
page, which is the title that appears in
elements, or it can contain nothing at all, such as the <br /> break tag.
the browser tab the page is loaded in,
and is used to describe the page
when you bookmark/favorite it
Anatomy of a HTML document
HTML elements, aren't very useful on their own.
Individual elements are combined to form an entire HTML page:
<body></body>: The <body> element.
This contains all the content that you want
to show to web users when they visit your
page,
an inline element is the <strong>, which makes the font of the text content
contained within boldface. An inline element generally only contains other inline
elements, or it can contain nothing at all, such as the <br /> break tag.
Activity
Activity
If you want to experiment with writing some HTML on your local
computer, you can:
Copy the HTML page example listed in the previous slide.
Create a new file in your text editor.
Paste the code into the new text file.
Save the file as [Link]
You can now open this file in a web browser to see what the rendered
code looks like, and then edit the code and refresh the browser to see
what the result is
an inline element is the <strong>, which makes the font of the text content
Including special characters in HTML
In HTML, the characters <, >,",' and & are special characters.
They are parts of the HTML syntax itself, so how do you include one of
these characters in your text? For example, if you really want to use an
ampersand or less-than sign, and not have it interpreted as code.
We have to use character references — special codes that represent
characters, and can be used in these exact circumstances.
Each character reference is started with an ampersand (&), and ended by a
semicolon (;).
Including special characters in HTML
Each character reference is started with an ampersand (&), and ended by a
semicolon (;).
an inline element is the <strong>, which makes the font of the text content
contained within boldface. An inline element generally only contains other inline
elements, or it can contain nothing at all, such as the <br /> break tag.
Including special characters in HTML
Example:
The output will be:
HTML Comments
To turn a section of HTML content into a comment, you need to wrap it in the
special markers <!-- and -->, for example:
an inline element is the <strong>, which makes the font of the text content
contained within boldface. An inline element generally only contains other inline
elements, or it can contain nothing at all, such as the <br /> break tag.
HTML head
The HTML head is the contents of the
<head> element — unlike the contents of
the <body> element (which are displayed
on the page when loaded in a browser),
the head's content is not displayed
on the page.
Instead, the head's job is to contain
metadata about the document. In the
above example, the head is quite small:
Adding a title
The <title> element can be used to add a title to the document.
This however can get confused with the <h1> element, which is used to add a
top level heading to your body content
The <h1> element appears on the page when loaded in the browser
The <title> element is metadata that represents the title of the overall
HTML document (not the document's content.)
an inline element is the <strong>, which makes the font of the text content
Headings and Paragraphs
Most structured text consists of headings and paragraphs, whether you are
reading a story, a newspaper, a college textbook, a magazine, etc.
In HTML, each paragraph has to be wrapped in a <p> element, like so:
Each heading has to be wrapped in a heading element:
There are six heading elements — <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>.
Each element represents a different level of content in the document; <h1>
represents the main heading, <h2> represents subheadings, <h3> represents
sub-subheadings, and so on
Activity
Activity
In the example below, add elements to the raw text , so that it appears as a
heading and two paragraphs in the Output field.
Raw Text
Expected Output
an inline element is the <strong>, which makes the font of the text content
contained within boldface. An inline element generally only contains other inline
Span
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a
document
It has no semantics.
You use it to wrap content when you want to apply CSS to it (or do something to
it with JavaScript) without giving it any extra meaning.
The <span> element above is used to color part of a text
Lists
1. Unordered lists
Unordered lists are used to mark up lists of items for which the order of the
items doesn't matter
.Every unordered list starts off with a <ul> element — this wraps around all
the list items
The last step is to wrap each list item in a <li> (list item) element:
an inline element is the <strong>, which makes the font of the text content
contained within boldface. An inline element generally only contains other inline
Lists
2. Ordered lists
Ordered lists are used to mark up lists of items for which the order of the
items does matter
.Every ordered list starts off with a <ol> element — this wraps around all the
list items
The last step is to wrap each list item in a <li> (list item) element:
an inline element is the <strong>, which makes the font of the text content
contained within boldface. An inline element generally only contains other inline
elements, or it can contain nothing at all, such as break tag.
Lists
Nesting lists
It is perfectly ok to nest one list inside another one. You might want to have
some sub-bullets.
Example:
an inline element is the <strong>, which makes the font of the text content
contained within boldface. An inline element generally only contains other inline
elements, or it can contain nothing at all, such as break tag.
Emphasis and Importance
Emphasis
When we want to add emphasis in spoken language, we stress certain
words, subtly altering the meaning of what we are saying .
In HTML we use the <em> (emphasis) element to mark up such instances.
Browsers style this as italic by default, but you shouldn't use this tag purely to get italic
styling .
To do that, you'd use a <span> element and some CSS, or perhaps a <i> element
Emphasis and Importance
Strong importance
To emphasize important words, we tend to stress them in spoken language
and bold them in written language. For liquid
This example:
is highly toxic.
I am counting on you. Do not be late!
In HTML we use the <strong> (strong importance) element to mark up such
instances.
Browsers style <strong> as bold text by default, but you shouldn't use this tag purely to get
bold styling.
To do that, you'd use a <span> element and some CSS, or perhaps a <b> element
Italic, Bold and underline
<i> is used to convey a meaning traditionally conveyed by italic: Foreign words,
taxonomic designation, technical terms, a thought...
<b> is used to convey a meaning traditionally conveyed by bold: Key words,
product names, lead sentence...
<u> is used to convey a meaning traditionally conveyed by underline: .
Activity
Activity
Consider the output below. Using the elements learnt, write code that will
produce the output.
Hyperlinks
What is a hyperlink?
Hyperlinks allow us to link our documents to any other document
(or other resource) we want to, we can also link to specific parts of
documents, and we can make apps available at a simple web address.
Anatomy of a link
A basic link is created by wrapping the text (or other content, see Block level
links) you want to turn into a link inside an <a> element, and giving it an href
attribute (also known as a Hypertext Reference , or target) that will contain the
web address you want the link to point to.
Gives us the following results:
Anatomy of a link
A basic link is created by wrapping the text (or other content, see Block level
links) you want to turn into a link inside an <a> element, and giving it an href
attribute (also known as a Hypertext Reference , or target) that will contain the
web address you want the link to point to.
Gives us the following results:
Adding supporting information to
the link
Another attribute you may want to add to your links is title; this is intended to
contain supplementary useful information about the link, such as what kind of
information the page contains, or things to be aware of. For example:
URLs and paths
A URL, or Uniform Resource Locator is simply a string of text that defines
where something is located on the Web.
For example Mozilla's English homepage is located at
[Link]
URLs use paths to find files. Paths specify where in the filesystem the file
you are interested in is located.
URLs and paths
Directory Structure
URLs and paths
Directory Structure Explained
The root of this directory structure is called creating-hyperlinks.
When working locally with a web site, you will have one directory that the
whole site goes inside.
Inside the root, we have an [Link] file and a [Link].
In a real website, [Link] would be our home page or landing page (a web
page that serves as the entry point for a website or a particular section of a
website.).
There are also two directories inside our root — pdfs and projects.
These each have a single file inside them — a PDF ([Link]) and an
[Link] file, respectively.
Note how you can quite happily have two [Link] files in one project as
URLs and paths
Same directory:
If you wanted to include a hyperlink inside [Link] (the top level [Link])
pointing to [Link], you would just need to specify the filename of the
file you want to link to, as it is in the same directory as the current file.
So the URL you would use is [Link]:
URLs and paths
Moving down into subdirectories:
If you wanted to include a hyperlink inside [Link] (the top level [Link])
pointing to projects/[Link], you would need to go down into the projects
directory before indicating the file you want to link to.
This is done by specifying the directory's name, then a forward slash, then
the name of the file. so the URL you would use is projects/[Link]:
URLs and paths
Moving back up into parent directories:
If you wanted to include a hyperlink inside projects/[Link] pointing to
pdfs/[Link], you'd have to go up a directory level, then back
down into the pdf directory. "Go up a directory" is indicated using two dots —
.. — so the URL you would use is ../pdfs/[Link]:
Questions
