MM211 –

THE WEB & INTERNET

Lecture 3
Zoubeir Aungnoo
Overview

■ HTML5
■ Website Design Factors
■ Dev Environment Setup
■ Web Hosting
■ DOM
■ HTML Tags
■ HTML Attributes

2
HTML
History of HTML
What is HTML5?
Goals of
HTML5
New Elements in HTML5
HTML Elements
■ Each markup code represents an HTML element

■ Each element has a purpose.

■ Most elements are coded as a pair of tags:

– an opening tag and a closing tag.

■ Tags are enclosed in angle brackets, "<" and ">“

symbols.
■ <openingTag> … </closingTag>
■ <p> some contents </p>
■ <b> some text which is bold formatted </p>
 Other New Features in

HTML5
Built-in audio and video support (without
plugins)
 Enhanced form controls and attributes
 The Canvas (a way to draw directly on a web
page)
 Drag and Drop functionality
 Support for CSS3 (the newer and more
powerful version of CSS)
 More advanced features for web developers,
such as data storage and offline applications.
 ■ When setting out to design a new
website, we have plenty of
decisions to make. Standard
web design principles offer us
some guidance on key aspects,
such as:

Designin 1. Choice of a site color scheme.

ga 2. Choice of text font and size.
Website 3. Placeholder text.
4. Use of white space.
5. Location of navigation menus.
6. Planning for different
browsers and screen
resolutions.
7. Testing
Choosing a Color
Scheme
■ The background colors and graphics we use
have a tremendous effect on the mood
evoked for our visitors. We can use a color
wheel to assist us with making selections:
Complementary Color
Scheme
■ Complementary colors are directly across from
each other on the color wheel:
Analogous Color Scheme
■ Analogous colors are those that are next to
each other on the color wheel:
 Choosing Fonts and Sizes
■ Many designers use two different fonts for their
sites: one for headings and one for regular body
text.
■ Font size must be large enough to read easily.
Consider 12px to be the minimum acceptable size.
■ Black text on a white background is the most
common. However, any light color text with a
dark background or dark color text with a light
background can be acceptable, provided there is
strong contrast.
■ Avoid using bright colors for text.
■ Avoid underlining text or making text blue for
emphasis, as this can easily be mistaken for link
text. Use bold or italics for emphasis instead.
 White Space
■ White space is the space between the elements
of your web page. It does not literally have to be
white; it can be the color of your background:
■ Note: Too many elements crammed onto a page
can be overwhelming to the visitor
Navigation Menus
■ Most websites
have their
navigation links
across the top or
down the left side
of the screen:
■ Note: Navigation
menus should be
consistent on all
pages of a site.
More Design Tips
■ Aim for consistency in the look and feel of the site. Logos,
headers, footers, and navigations bars should reside in the
same spot from page to page, and site colors and text
should remain consistent site-wide.

■ Align groups of elements horizontally or vertically on the

page. Alignment makes a site both easier to use and more
visually appealing.

■ Always proofread your site content. There's no excuse to

have misspelled words or grammatical errors. Such errors
reflect poorly on you as a designer.
HTML
Dev Environment
■ What do you need?
■ Text Editor
– Notepad / notepad ++ / sublime text / vs code
/ any other

■ Web Browser Access

– Chrome / Firefox / Brave / Edge

■ Web Server Access (offline / online)

– Static: Optional for simple html, css & js dev
– Dynamic: Mandatory offline web server for
server side dev (php)
Web Browser Access
■ Open the folder on the computer containing the
html file
■ Double click
■ It will open in the default web browser
Online Web Server
Access
■ https://www.000webhost.com/
– (You can choose another one too)
■ Create an account
■ Confirm the account
■ Upload your files to the server:

1. Manually: Tools > File Manager > Upload

– https://files.000webhost.com/
– Not advisable

2. Use FTP to connect to the server

– preferred
FTP connect to Server
Step 1: Download & Install FTP client
■Use a FTP client
■FileZilla: https://filezilla-project.org/download.php
■Download FileZilla Client > basic edition
■Install like a normal software

Step 2: connect to the server through ftp

■If you are using 000webhost, click on the following
link but change <siteName> to your website
name:
■https://www.000webhost.com/members/website/
<SiteName>/settings#ftp
■Gather FTP info
FTP connect to Server
.

■Open FileZilla and enter connection details:

■Click Quickconnect button

FTP connect to Server
■ You can then transfer local files to the web server

Local Online
files files
FTP connect to Server
■ Your website is now public.
■ Access it through the url provided by your
webserver (if free) or connect your domain name to
the webserver.

■ View your website public url at:

– Home > Website Settings > General
 A Simple HTML Page
<!DOCTYPE html>
<html lang="en">
<head>
<title>hello,
title</title>
</head>
<body>
hello, body
</body> The above can be typed in any editor
(VS Code), saved as index.html and
</html> viewed in any browser.
Result
The above output is rendered in the
browser for the file hello.html
DOM Tree
■ Document Object Model (DOM) Tree
■ The html page is loaded into the browser as a data
structure, like this tree

■ JS allows us to access & modify this tree => functionalities!

Explanation of The Tags
■ <!DOCTYPE html> - This tag defines the document
type and HTML version.
■ <html> .. </html> - indicate start & end of page.
Comprises of 2 children nodes:
1. <head>...</head> document header
■ Has a child <title> </title> contains content for the
tab
2. <body>...</body> contains the contents of the
page

– <html> has an attribute lang=“en” specifies

language of the page. Help with translation if
needed
■ Each open tag has a corresponding close tag – with
some exceptions
 Explanation of code

Document Type Defnition (DTD)

■doctype statement
■identifies the version of HTML contained in your
document.
■placed at the top of a web page document
■XHTML 1.0 Transitional DTD
– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN“
http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd>
■HTML5 DTD
– <!DOCTYPE html>
 Explanation of code
Head Section
■Contains information that describes the Web page
document
■Contents do not display on the page
– <head>
…head section info goes here (meta data)
– </head>

Body Section
■Contains text and elements that display on the page
– <body>
– …body section info goes here
– </body>
Explanation of code

■ THE <HEAD> ELEMENT

■ The following Child elements
– <base>
– <link>
– <meta>
– <script>
– <style>
– <title>
Explanation of code

■ E.g. <meta charset=“utf-8”>

 ■ The paragraph tag <p> is used to
indicate paragraphs in a
<p> tag document
– <p> .. text goes here .. </p>
 ■ Can have many headings in HTML
■ <h1>, <h2> up to <h6>
■ Headings are important - search
engines use them to index the
structure and content of web pages.
Heading ■ Since users get an idea of a webpage
tags by its headings, it is important to use
headings to show the document
structure.
■ H1 headings should be used as main
headings, followed by H2 headings,
then the less important H3 headings,
and so on
Heading tags

■.
HTML Block vs Inline tags

■ Block: they always start on a new line and

stretches full width
■ Inline: doesn’t start on a new line and only
takes as much space as needed
DIV Element

■ Defines a division or a section in an HTML

document.
■ The <div> element is often used as a container
for other HTML elements to style them with CSS
or to perform certain tasks with JavaScript.
■ Block-Level Element
■ Configures a structural block area or “division”
on a web page with empty space above and
below.
■ Can contain other block display elements,
including other div elements
– <div>Home Services Contact</div>
SPAN Element

■ Inline-Level Element
■ Used to mark up a part of a text, or a part of a document.
■ <span> tag provides no visual change by itself, but when
it is marked, you can style it with CSS, or manipulate it
with JavaScript.
Empty HTML Tags

■ Empty elements are used primarily to describe pieces of

data that do not contain any content.
■ For example, some common empty elements in HTML5
are:
– <br> for line break
– <img> for image
– <hr> for horizontal rule

■ Closing an empty tag is invalid HTML

Nesting Tags

■ What if you need to make text bold and italic?

– <b><i>My bold and italic text.</i></b>
– <i><b>My bold and italic text.</b></i>

– [incorrect] <b><i>My bold and italic

text.</b></i>
HTML Comments

■ Good programmers write good comments

■ <!-- your comment goes here -->

Lists in HTML
■ HTML can also be used to
create lists – ordered and
unordered

■ Ordered list are created using

the <ol> tag and the items in
the list are created using <li>
■ UnOrdered list are created using
the <ul> tag and the items in
the list are created using <li>
■ Description List <dl> Useful to
display a list of terms and
descriptions or a list of FAQ and
answers. Here we need <dt> &
<dd> as well.
Lists in HTML – Unordered
List
■ Displays a bullet, or list marker, before each
entry in the list.

■ <ul>
– Contains the unordered list
– Default bullet type is disc (but depends
on the browser)
■ Can be changed using:
– html attributes
– CSS
■ <li>
– Contains an item in the list
Lists in HTML – Unordered
List
■Class Practical
■Using h2 for the heading, write html codes
to produce the following output:
Lists in HTML – Unordered
List
■Class Practical
■Using h1 for the heading, write html codes to
produce the following output:
Lists in HTML – Ordered List
■ Displays a numbering or lettering system to
itemize the information contained in the list

■ <ol>
– Contains the ordered list
– default numbering scheme is numerals
■ Can be changed using:
– html attributes
– CSS

■ <li>
– Contains an item in the list
Lists in HTML – Ordered List

■Class Practical
■Using h1 for the heading, write html codes to
produce the following output:
Class Research Work

■ How do we change the

numbers or bullets such
that instead of 1,2,3 or
default bullet a,b,c or
some other bullet is
displayed?

■ For ordered lists, how do

you change the starting
number of the list, i.e.
instead of starting at 1, it
starts at 3 for example?

■ Hint: use of html

attributes
Class Practical – Lists’
Attributes
■Class Practical
■Create the following list to start at number 6 and
make use of Roman Numerals:
Attributes in
html
Attributes in html
■ HTML5 attributes are pieces of information that help to
describe elements. Some elements have required
attributes, others are optional

■ Attributes are referred to as name-value pairs and have

the following syntax:
– name = “value”

■ Here are a few examples:

– href
– src
 ■ The image tag <img> is used to add
an image
■ The name of the file is indicated by
the attribute src
– E.g. <img src = “banner.jpg”/>
■ Images are often found in subfolders
Image – E.g. if images are in subfolder
tag ‘images’, the url is then
– <img src =
“images/banner.jpg”/>

Read on:
1. Absolute path
2. Relative path
Practical
Hyperlinks
■ The <a> tag

■ Used to provide a link:

1. To a document within the site
2. To another website
3. To a mail composer
4. To define a section within a document
(html bookmark)

■ Used for navigation: internally and externally

Hyperlinks
■ Examples:
■ <a href=“modules.html">Modules</a>
– This link takes you to the page modules.html
found within the website and is located in the
same folder

■ <a href=“pages/phpmodule.html">PHP
Module</a>
– This link takes you to the page modules.html
found within the website and is located in the
sub folder pages

■ <a href=“http://www.poly.ac.mu">PML</a>
– This link takes you to another website
Link to a
mail ■ Clicking on link opens
composer email client with email
specified in the “to” field
■
Homework

■ Sent separately