HTML

Basic Structure of an HTML Tag

An HTML tag is enclosed in angle brackets < >. It usually
comes in pairs: an opening tag and a closing tag.
<element>content</element>
Opening tag: <element> (for example, <p>)
Closing tag: </element> (for example, </p>)
Content: This is what is displayed or used by the
browser (e.g., text, images).
Ex. <p>This is a paragraph of text.</p>
<p> is the opening tag.
</p> is the closing tag.
The text inside the tags ("This is a paragraph of
text.") is the content.
 Syntax
refers to the rules and structure that define how code
should be written in a particular programming
language or markup language. It specifies how the
components of the language (like keywords,
operators, tags, or commands) should be arranged
to create meaningful and functional statements or
expressions.

In HTML, syntax refers to the rules for structuring

tags and attributes.

If the syntax is incorrect (like missing a closing tag),

the browser might not render the content properly.
 HTML Formatting Elements
Formatting elements were designed to display special types
of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
HTML <b> and <strong>
Elements

The HTML <b> element defines

bold text, without any extra
importance.
HTML <i> and <em> Elements

The HTML <i> element defines a part of text in

an alternate voice or mood. The content inside
is typically displayed in italic.

Tip: The <i> tag is often used to indicate a

technical term, a phrase from another
language, a thought, a ship name, etc.
HTML <i> and <em> Elements

The HTML <em> element defines emphasized

text. The content inside is typically displayed in
italic.

Tip: A screen reader will pronounce the words

in <em> with an emphasis, using verbal stress.
HTML <small> Element

The HTML <small>

element defines smaller
text:
HTML <del> Element

The HTML <del> element defines

text that has been deleted from a
document. Browsers will usually
strike a line through deleted text:
HTML <mark> Element

The HTML <mark> element

defines text that should
be marked or highlighted:
HTML <ins> Element

The HTML <ins> element defines

a text that has been inserted
into a document. Browsers will
usually underline inserted text:
HTML <sub> Element

The HTML <sub> element defines subscript

text. Subscript text appears half a
character below the normal line, and is
sometimes rendered in a smaller font.
Subscript text can be used for chemical
formulas, like H2O:
HTML <sup> Element

The HTML <sup> element defines superscript

text. Superscript text appears half a
character above the normal line, and is
sometimes rendered in a smaller font.
Superscript text can be used for footnotes,
like WWW[1]:
 HTML Comments
HTML comments are not displayed in the browser,
but they can help document your HTML source
code.

You can add comments to your HTML source by

using the following syntax:

<!-- Write your comments here -->

Notice that there is an exclamation point (!) in the

start tag, but not in the end tag.
 HTML Comments
Hide Content
Comments can be used to hide content.
This can be helpful if you hide content temporarily

You can also hide more than one line. Everything

between the <!-- and the --> will be hidden from
the display.
Border Color
CSS &
HTML
 CSS
stands for Cascading Style Sheets.
Cascading Style Sheets (CSS) is used to format
the layout of a webpage.

With CSS, you can control the color, font, the

size of text, the spacing between elements, how
elements are positioned and laid out, what
background images or background colors are
to be used, different displays for different
devices and screen sizes, and much more!
CSS - Cascading Style Sheets.
The word cascading means that a style
applied to a parent element will also
apply to all children elements within the
parent. So, if you set the color of the
body text to "blue", all headings,
paragraphs, and other text elements
within the body will also get the same
color (unless you specify something
else)!
 Using CSS
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML
elements
Internal - by using a <style> element in the
<head> section
External - by using a <link> element to link to an
external CSS file
The most common way to add CSS, is to keep the
styles in external CSS files. However, in this tutorial we
will use inline and internal styles, because this is
easier to demonstrate, and easier for you to try it
yourself.
 Inline CSS
An inline CSS is used to apply a unique style
to a single HTML element.

An inline CSS uses the style attribute of an

HTML element.
 Internal CSS
An internal CSS is used to define a style for a
single HTML page.

An internal CSS is defined in the <head> section

of an HTML page, within a <style> element.

The following example sets the text color of ALL

the <h1> elements (on that page) to blue, and
the text color of ALL the <p> elements to red. In
addition, the page will be displayed with a
"powderblue" background color:
Internal CSS
 External CSS
An external style sheet is used to define the
style for many HTML pages.

To use an external style sheet, add a link to it

in the <head> section of each HTML page:
 External CSS
The external style sheet
can be written in any text
editor. The file must not
contain any HTML code,
and must be saved with a
.css extension.
 Curly Bracket
In CSS, curly brackets {}
are used to enclose the
styles applied to a specific
selector. Here's an
example of how they are
used:
 CSS - SYNTAX
selector {
property: value;
property: value;
}
Selector: Targets an HTML element (e.g.,
body, h1, .class-name, #id-name).
Property: Specifies the style property (e.g.,
color, font-size, margin).
Value: Defines the value for the property.
 CSS Colors, Fonts and Sizes
The CSS color property defines the
text color to be used.

The CSS font-family property

defines the font to be used.

The CSS font-size property defines

the text size to be used.
 CSS Border
The CSS border
property defines a
border around an HTML
element.
 CSS Border
The CSS border property defines
a border around an HTML
element.
 CSS Border
The CSS border property defines
a border around an HTML
element.
 CSS Padding
The CSS padding property defines a
padding (space) between the text
and the border.
 CSS Margin
The CSS margin property defines a
margin (space) outside the border.
 CSS Margin
The CSS margin property defines a
margin (space) outside the border.
 Link to External CSS
External style sheets can be
referenced with a full URL or with a
path relative to the current web
page.
Summary
 HTML Links - Hyperlinks
HTML links are hyperlinks.

You can click on a link and jump to another

document.

When you move the mouse over a link, the

mouse arrow will turn into a little hand.

Note: A link does not have to be text. A link

can be an image or any other HTML
element!
 HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has
the following syntax:

The most important attribute of the <a> element is the

href attribute, which indicates the link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the

specified URL address.
 HTML Links - Syntax
example

By default, links will appear as follows in all

browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
HTML Links - The target Attribute
By default, the linked page will be displayed in the current
browser window. To change this, you must specify another
target for the link.

The target attribute specifies where to open the linked

document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same
window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the
window
HTML Links - The target Attribute
Example
Use target="_blank" to open the linked document in a new
browser window or tab:
 Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web
address) in the href attribute.
A local link (a link to a page within the same website) is
specified with a relative URL (without the "https://www" part):
Example
 Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web
address) in the href attribute.
A local link (a link to a page within the same website) is
specified with a relative URL (without the "https://www" part):
Example
 HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the
<a> tag:
 Link to an Email Address

Use mailto: inside the href attribute to

create a link that opens the user's email
program (to let them send a new email):
 Button as a Link
You can style a button to function as a
link by wrapping the <button> element
inside an <a> tag or using the onclick
event to redirect the user.
 HTML <button> Tag
The <button> tag defines a clickable button.
Inside a <button> element you can put text (and tags like
<i>, <b>, <strong>, <br>, <img>, etc.). That is not possible
with a button created with the <input> element!
Tip: Always specify the type attribute for a <button>
element, to tell browsers what type of button it is.
Tip: You can easily style buttons with CSS! Look at the
examples below or visit our CSS Buttons tutorial.
 Link Titles
The title attribute specifies extra
information about an element. The
information is most often shown as a
tooltip text when the mouse moves over
the element.
 Link Titles
The title attribute specifies extra
information about an element. The
information is most often shown as a
tooltip text when the mouse moves over
the element.
 Summary
Use the <a> element to define a link
Use the href attribute to define the link
address
Use the target attribute to define where
to open the linked document
Use the <img> element (inside <a>) to
use an image as a link
Use the mailto: scheme inside the href
attribute to create a link that opens the
user's email program
 HTML Images Syntax
The HTML <img> tag is used to embed an image in a web
page.
Images are not technically inserted into a web page; images
are linked to web pages. The <img> tag creates a holding
space for the referenced image.
The <img> tag is empty, it contains attributes only, and does
not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
 The src Attribute
The required src attribute specifies the path (URL) to the
image.
Note: When a web page loads, it is the browser, at that
moment, that gets the image from a web server and inserts it
into the page. Therefore, make sure that the image actually
stays in the same spot in relation to the web page, otherwise
your visitors will get a broken link icon. The broken link icon
and the alt text are shown if the browser cannot find the
image.
 The alt Attribute
The required alt attribute provides an alternate
text for an image, if the user for some reason
cannot view it (because of slow connection, an
error in the src attribute, or if the user uses a
screen reader).

If a browser cannot find an image, it will display

the value of the alt attribute:
Common Image Formats
 HTML Tables

A table in HTML
consists of table cells
inside rows and
columns.
HTML Tables - Syntax
 Table Cells
Each table cell is defined by a <td> and a
</td> tag.
td stands for table data.
Everything between <td> and </td> are the
content of the table cell.
Note: A table cell can contain all sorts of
HTML elements: text, images, lists, links, other
tables, etc.
 Table Rows
Each table row starts with a <tr> and ends with
a </tr> tag.
tr stands for table row.
You can have as many rows as you like in a
table; just make sure that the number of cells
are the same in each row.
Note: There are times when a row can have less
or more cells than another. You will learn about
that in a later chapter.
 Table Headers
Sometimes you want your cells to be table
header cells. In those cases use the <th> tag
instead of the <td> tag:
th stands for table header.
 HTML Lists
HTML lists allow web developers to group a set
of related items in lists.
 Unordered HTML List
An unordered list starts with the <ul> tag. Each
list item starts with the <li> tag.
The list items will be marked with bullets (small
black circles) by default:
 Ordered HTML List
An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
The list items will be marked with numbers by
default:
 HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a
description of each term.
The <dl> tag defines the description list, the
<dt> tag defines the term (name), and the
<dd> tag describes each term:
 HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a
description of each term.
The <dl> tag defines the description list, the
<dt> tag defines the term (name), and the
<dd> tag describes each term:
 Block-level Elements
A block-level element always starts on a new line,
and the browsers automatically add some space (a
margin) before and after the element.
A block-level element always takes up the full width
available (stretches out to the left and right as far as
it can).
Two commonly used block elements are: <p> and
<div>.
The <p> element defines a paragraph in an HTML
document.
The <div> element defines a division or a section in
an HTML document.
Block-level Elements
Inline Elements
 HTML Div Element
The <div> element is used as a
container for other HTML elements.
The <div> element is by default a
block element, meaning that it takes
all available width, and comes with
line breaks before and after.
The <div> element has no required
attributes, but style, class and id are
common.
HTML Div Element
 <div> as a container
he <div> element is often used to group
sections of a web page together.
 Multiple <div> elements
If you have a <div> element that is not 100%
wide, and you want to center-align it, set
the CSS margin property to auto.
Multiple <div> elements
Multiple <div> elements
Center align a <div> element
If you have a <div> element that is not 100%
wide, and you want to center-align it, set
the CSS margin property to auto.
Center align a <div> element
If you have a <div> element that is not 100%
wide, and you want to center-align it, set
the CSS margin property to auto.
Aligning <div> elements side by side
When building web pages, you often want to have two or more
<div> elements side by side, like this:
 Float
The CSS float property was not
originally meant to align <div>
elements side-by-side, but has been
used for this purpose for many years.
The CSS float property is used for
positioning and formatting content
and allows elements to be positioned
horizontally, rather than vertically.
Float
Float
 Inline-block
If you change the <div> element's display property
from block to inline-block, the <div> elements will no
longer add a line break before and after, and will be
displayed side by side instead of on top of each
other.
 Inline-block
If you change the <div> element's display property
from block to inline-block, the <div> elements will no
longer add a line break before and after, and will be
displayed side by side instead of on top of each
other.
 Flex
The CSS Flexbox Layout Module was introduced to
make it easier to design flexible responsive layout
structure without using float or positioning.
To make the CSS flex method work, surround the
<div> elements with another <div> element and give it
the status as a flex container.
 Flex
The CSS Flexbox Layout Module was introduced to
make it easier to design flexible responsive layout
structure without using float or positioning.
To make the CSS flex method work, surround the
<div> elements with another <div> element and give it
the status as a flex container.
 Grid
The CSS Grid Layout Module offers a grid-based
layout system, with rows and columns, making it
easier to design web pages without having to use
floats and positioning.
Sounds almost the same as flex, but has the ability to
define more than one row and position each row
individually.
The CSS grid method requires that you surround the
<div> elements with another <div> element and give
the status as a grid container, and you must specify
the width of each column.
Grid
 HTML class Attribute
The class attribute is often used to point to a
class name in a style sheet. It can also be
used by a JavaScript to access and
manipulate elements with the specific class
name.

In the following example we have three <div>

elements with a class attribute with the value
of "city". All of the three <div> elements will be
styled equally according to the .city style
definition in the head section:
HTML class Attribute
 HTML class Attribute

Tip: The class attribute can be

used on any HTML element.

Note: The class name is case

sensitive!
 The Syntax For Class

To create a class; write a period

(.) character, followed by a class
name. Then, define the CSS
properties within curly braces {}:
 Multiple Classes
HTML elements can belong to more than one
class.
To define multiple classes, separate the class
names with a space, e.g. <div class="city
main">. The element will be styled according
to all the classes specified.
In the following example, the first <h2>
element belongs to both the city class and
also to the main class, and will get the CSS
styles from both of the classes:
Multiple Classes
Different Elements Can Share Same Class

ifferent HTML elements can point to the same

class name.
In the following example, both <h2> and <p>
point to the "city" class and will share the
same style:
Different Elements Can Share Same Class

ifferent HTML elements can point to the same

class name.
In the following example, both <h2> and <p>
point to the "city" class and will share the
same style: