HTML Introduction
Mary Precy T. Sy, MIT
1
What is HTML?
◼ stands for Hyper Text Markup Language
◼ is the standard markup language for creating Web
pages
◼ describes the structure of a Web page
◼ consists of a series of elements
◼ elements tell the browser how to display the content
◼ elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link",
[Link] tell Web browser how to display a page
◼ Can have either *.htm or *.html file extension
2
HTML Editors
◼ Web pages can be created and modified by
using professional HTML editors.
◼ However, for learning HTML we recommend a
simple text editor like Notepad or Sublime.
◼ We believe that using a simple text editor is a
good way to learn HTML.
◼ Follow the steps below to create your first web
page with Notepad or Sublime.
◼ Step 1: Open Notepad
◼ Step 2: Write Some HTML
◼ Step 3: Save the HTML Page
◼ Step 4: View the HTML Page in Your Browser
3
A Simple HTML Document
◼ <!DOCTYPE html>
◼ <html>
◼ <head>
◼ <title>Page Title</title>
◼ </head>
◼ <body>
◼ </body>
◼ </html>
◼ Save as.. ([Link])
4
◼ The <!DOCTYPE html> declaration defines that this document
is an HTML5 document
◼ The <html> element is the root element of an HTML page
◼ The <head> element contains meta information about the HTML
page
◼ The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
◼ The <body> element defines the document's body, and is a
container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
◼ The <h1> element defines a large heading
◼ The <p> element defines a paragraph
5
What is an HTML Element?
◼ An HTML element is defined by a start tag,
some content, and an end tag:
◼ <tagname> Content goes here... </tagname>
◼ The HTML element is everything from the
start tag to the end tag:
◼ <h1>My First Heading</h1>
◼ <p>My first paragraph.</p>
6
Web Browsers
◼ The purpose of a web browser (Chrome,
Edge, Firefox, Safari) is to read HTML
documents and display them correctly.
◼ A browser does not display the HTML tags,
but uses them to determine how to display
the document:
7
HTML Page Structure
◼ Below is a visualization of an HTML page
structure:
8
HTML Documents
◼ All HTML documents must start with a
document type declaration: <!DOCTYPE
html>.
◼ The HTML document itself begins with <html>
and ends with </html>.
◼ The visible part of the HTML document is
between <body> and </body>.
9
Test code tag:
◼ <!DOCTYPE html>
◼ <html>
◼ <head>
◼ <title>Page Title</title>
◼ </head>
◼ <body>
◼ <h1>This is a Heading</h1>
◼ <p>This is a paragraph.</p>
◼ </body>
◼ </html>
◼ Save as.. ([Link])
10
The <!DOCTYPE> Declaration
◼ The <!DOCTYPE> declaration represents the
document type, and helps browsers to display web
pages correctly.
◼ It must only appear once, at the top of the page
(before any HTML tags).
◼ The <!DOCTYPE> declaration is not case sensitive.
◼ The <!DOCTYPE> declaration for HTML5 is:
11
HTML Links
◼ HTML links are defined with the <a> tag:
◼ <a href=“[Link]">click this link</a>
◼ <a href=“[Link]">click back</a>
◼ The link's destination is specified in the href
attribute.
◼ Attributes are used to provide additional
information about HTML elements.
12
HTML Elements
◼ The HTML element is everything from the
start tag to the end tag:
◼ <tagname>Content goes here...</tagname>
Examples of some HTML elements:
◼ <h1>My First Heading</h1>
◼ <p>My first paragraph.</p>
13
Basic Tags
◼ Headings
◼ <h1>…</h1> to <h6>…</h6>
◼ Like in Word
◼ See example
◼ Paragraph
◼ <p>… </p>
◼ Inserts a line space before and after a paragraph
◼ See example
14
HTML Paragraphs
◼ A paragraph always starts on a new line, and
is usually a block of text.
◼ The HTML <p> element defines a paragraph.
◼ A paragraph always starts on a new line, and
browsers automatically add some white
space (a margin) before and after a
paragraph.
◼ <p>This is a paragraph.</p>
◼ <p>This is another paragraph.</p>
15
HTML Display
16
HTML Horizontal Rules
◼ The <hr> tag defines a thematic break in an
HTML page, and is most often displayed as a
horizontal rule.
◼ The <hr> tag is an empty tag, which means
that it has no end tag.
◼ The <hr> element is used to separate content
(or define a change) in an HTML page:
17
HTML Line Breaks
◼ The HTML <br> element defines a line break.
◼ Use <br> if you want a line break (a new line)
without starting a new paragraph:
◼ <p>This is<br>a paragraph<br>with line
breaks.</p>
◼ The <br> tag is an empty tag, which means
that it has no end tag.
18
Solution - The HTML <pre>
Element
◼ The HTML <pre> element defines
preformatted text.
◼ The text inside a <pre> element is displayed
in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:
19
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
◼ <small> - Smaller text
◼ <del> - Deleted text
◼ <ins> - Inserted text
◼ <sub> - Subscript text
◼ <sup> - Superscript text
20
HTML Lists
◼ TML lists allow web developers to group a set
of related items in lists.
21
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:
22
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:
23
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:
24
HTML List Tags
Tag Description
◼ <ul> Defines an unordered list
◼ <ol> Defines an ordered list
◼ <li> Defines a list item
◼ <dl> Defines a description list
◼ <dt> Defines a term in a description
list
◼ <dd> Describes the term in a
description list
25
HTML Colors
◼ HTML colors are specified with predefined
color names, or with RGB, HEX, HSL, RGBA,
or HSLA values.
◼ In HTML, a color can be specified by using a
color name:
26
Background Color
◼ You can set the background color for HTML
elements:
◼ <h1 style="background-
color:DodgerBlue;">Hello World</h1>
◼ <p style="background-color:Tomato;">Lorem
ipsum...</p>
27
Text Color
◼ An set the color of text:
◼ <h1 style="color:Tomato;">Hello World</h1>
◼ <p style="color:DodgerBlue;">Lorem
ipsum...</p>
◼ <p style="color:MediumSeaGreen;">Ut wisi
enim...</p>
28
Border Color
◼ Can set the color of borders:
◼ <h1 style="border:2px solid Tomato;">Hello
World</h1>
◼ <h1 style="border:2px solid
DodgerBlue;">Hello World</h1>
◼ <h1 style="border:2px solid Violet;">Hello
World</h1>
29
Color Values
◼ In HTML, colors can also be specified using
RGB values, HEX values, HSL values, RGBA
values, and HSLA values.
◼ The following three <div> elements have their
background color set with RGB, HEX, and
HSL values:
30
◼ The following two <div> elements have their background color
set with RGBA and HSLA values, which add an Alpha channel to
the color (here we have 50% transparency):
◼ <h1 style="background-color:rgb(255, 99, 71);">...</h1>
◼ <h1 style="background-color:#ff6347;">...</h1><h1
style="background-color:hsl(9, 100%, 64%);">...</h1>
◼ <h1 style="background-color:rgba(255, 99, 71,
0.5);">...</h1>
◼ <h1 style="background-color:hsla(9, 100%, 64%,
0.5);">...</h1>
31
HTML Images
◼ Images can improve the design and the
appearance of a web page.
◼ <img src="pic_trulli.jpg" alt="Italian Trulli">
◼ <img src="img_girl.jpg" alt="Girl in a jacket">
◼ <img src="img_chania.jpg" alt="Flowers in
Chania">
32
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
◼ <img src="url" alt="alternatetext"> 33
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.
◼ <img src="img_chania.jpg" alt="Flowers in
34
Chania">
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).
◼ The value of the alt attribute should describe the
image:
◼ <img src="img_chania.jpg" alt="Flowers in Chania">
◼ If a browser cannot find an image, it will display the
value of the alt attribute:
◼ <img src="[Link]" alt="Flowers in
Chania"> 35
Width and Height, or Style?
◼ The width, height, and style attributes are all
valid in HTML.
◼ However, we suggest using the style attribute.
It prevents styles sheets from changing the
size of images:
36
Image Size - Width and Height
◼ can use the style attribute to specify the width
and height of an image.
◼ <img src="img_girl.jpg" alt="Girl in a jacket"
style="width:500px;height:600px;">
◼ Alternatively, you can use
the width and height attributes:
◼ <img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">
◼ The width and height attributes always define
the width and height of the image in pixels.
37
◼ <!DOCTYPE html>
◼ <html>
◼ <head>
◼ <style>
◼ img {
◼ width: 100%;
◼ }
◼ </style>
◼ </head>
◼ <body>
◼ <img src="[Link]" alt="HTML5 Icon" width="128" height="128">
◼ <img src="[Link]" alt="HTML5 Icon" style="width:128px;height:128px;">
◼ </body>
38
◼ </html>
Images in Another Folder
◼ If you have your images in a sub-folder, you
must include the folder name in the src
attribute:
◼ <img src="/images/[Link]" alt="HTML5
Icon" style="width:128px;height:128px;">
39
Animated Images
◼ <img src="[Link]" alt="Computer
Man" style="width:48px;height:48px;">
40
Image as a Link
◼ To use an image as a link, put the <img> tag
inside the <a> tag:
◼ <a href="[Link]">
<img src="[Link]" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
41
Common Image Formats
◼ Here are the most common image file types,
which are supported in all browsers (Chrome,
Edge, Firefox, Safari, Opera):
42
◼ Use the HTML <img> element to define an image
◼ Use the HTML src attribute to define the URL of the
image
◼ Use the HTML alt attribute to define an alternate text
for an image, if it cannot be displayed
◼ Use the HTML width and height attributes or the CSS
width and height properties to define the size of the
image
◼ Use the CSS float property to let the image float to
the left or to the right
43
Image Source Tag
◼ Empty tag – no closing tag
◼ Components of Img tag
<img src="url“ alt = “description of image” />
◼ url = points to location of the image file
◼ alt = describes image for screen readers
44
Specify file location
◼ Same folder: “[Link]”
◼ Document-relative link
◼ Look for image in same folder
◼ Different folder named images:
“/images/[Link]”
45
HTML Attributes
46