Web Design
MOT TO: THINK TWICE, CODE ONCE
OBJECTIVE: DESIGN & BUILD WEBSITES
Requirements for this training
➢ A Computer System(Desktop, laptop)
➢ A Web browser(Google Chrome: Recommended)
➢ An IDLE(Integrated Development & Learning Environment)
➢ Notepad – To jot
THINGS TO BE A Website is a collection of web pages and
CONSIDERED related content that is identified by a common
domain name and published on at least one
web server.
1. What is a Website,
webpage. How do people access websites – People
access websites using software called a web
2. How people access
browser. Popular examples include Firefox,
websites.
Internet Explorer, Safari, Chrome, and Opera..
3. What is the web and
how does it works. What is the Web? Is basically a system of
internet servers that support specially
4. How websites are formatted documents.
created.
Websites are created through the use of HTML
and CSS, but content management systems,
blogging software, and e-commerce platforms
often add a few more technologies into the
mix
HTML: Describes the Structure of Pages
The HTML code is made up of characters
that live inside angled brackets — these
are called HTML elements. Elements are
usually made up of two tags: an opening
tag and a closing tag. (The closing tag has
an extra forward slash in it.) Each HTML
element tells the browser something about
the information that sits between its
opening and closing tags.
Closer Look at HTML Tags
Tags are indicators used to identify the type of a particular content.
Opening Tag Closing Tag
Attributes: Tell Us More About Elements
Attributes provide additional
information about the
contents of an element. They
appear on the opening tag of
the element and are made
up of two parts: a name and
a value, separated by an
equals sign.
Working with Tags
Html tag(<html></html>): tag indicates that anything
between it and a closing tag is an html code.
Head tag(<head></head>): is the container of the
meta tag and the title tag.
Meta tag(<meta></meta>): used to specify character
set, page description, keywords, author of the
document.
Title tag(<title></title>): defines the document’s
title.
Body tag(<body></body>): tag indicates that
anything between it and the closing tag is inside its
window.
Words between <h1> and </h1> are a main heading.
A paragraph of text appears between these <p> and
</p> tags.
Words between <h2> and </h2> form a sub-heading
Creating a Web Page on a PC
To create your
first web page
on a PC, start
up Notepad.
Type the code
shown on the
right.
Looking at How Other sites are Built
When the web was first taking off, one
of the most common ways to learn
about HTML and discover new tips and
techniques was to look at the source
code that made up web pages.
Once you have opened this page, you
can look for the View menu in your
browser, and select the option that
says Source or View source. (The title
changes depending on what browser
you are using.)
Summary: HTML Structure
➢ HTML pages are text documents.
➢ HTML uses tags (characters that sit inside angled brackets) to give the information they
surround special meaning.
➢ Tags are often referred to as elements.
➢ Tags usually come in pairs. The opening tag denotes the start of a piece of content; the
closing tag denotes the end.
➢ Opening tags can carry attributes, which tell us more about the content of that element.
➢ Attributes require a name and a value.
➢ To learn HTML you need to know what tags are available for you to use, what they do, and
where they can go.
Headings
HTML has six "levels" of
headings: is used for main
headings is used for
subheadings If there are
further sections under the
subheadings then the element
is used, and so on...
PARAGRAPHS
To create a paragraph,
surround the words that
make up the paragraph
with an opening <p> tag
and closing </p> tag.
BOLD & ITALICS
Bold(<b></b>): By enclosing words
in the <b></b> tags and we can
make characters appear bold.
Italics tag(<i></i>):By enclosing
words in the<i> </i>tags and we
can make characters appear italic
Superscript & Subscript tags
Superscript tag(<sup></sup>): is
used to contain characters that
should be superscript such as the
suffixes of dates or mathematical
concepts like raising a number to
a power such as 2 squared .
Subscript tag(<sub></sub>): is
used to contain characters that
should be subscript. It is
commonly used with foot notes or
chemical formulas such as H20.
Line Breaks & Horizontal Rules
Line Break(<br />): to
add a line break inside
the middle of a
paragraph you can use
the line break tag.
Takes you to a new line.
Horizontal Rule(<hr />):
Creates a line between
texts.
Strong & Emphasis
Strong tag(<strong></strong>): The use of the
<strong> element indicates that its content has
strong importance.
Much more similar to the Bold tag.
Emphasis(<em></em>): The <em> element
indicates emphasis that subtly changes the
meaning of a sentence. Much more similar to
the italics tag.
Abbreviations & Acronyms
If you use an
abbreviation or an
acronym, then the <abbr>
element can be used. A
title attribute on the
opening tag is used to
specify the full term.
Citations & Definitions
Cite Tag(<cite></cite>): When you are
referencing a piece of work such as a book,
film or research paper, the element can be
used to indicate where the citation is from.
Definition(<dfn></dfn>): The first time you
explain some new terminology (perhaps an
academic concept or some jargon) in a
document, it is known as the defining instance
of it.
Author Details
The <address> element has quite
a specific use: to contain contact
details for the author of the page.
It can contain a physical address,
but it does not have to. For
example, it may also contain a
phone number or email address.
Changes to Content: <ins> <del>
The <ins> element can be used to show content that has been inserted
into a document, while the <del> element can show text that has been
deleted from it.
NOTE: Equivalent of <del> is <s> or <strike>
LISTS: Ordered & Unordered Lists
The ordered list is created with the <ol>
element. Each item in the list is placed
between an opening <li> tag and a
closing </li> tag. (The li stands for list
item.)
The unordered list is created with the
<ul>
element.
LINKS Links are the defining feature of the
web because they allow you to move
from one web page to another —
enabling the very idea of browsing or
• Creating links
between surfing.
pages
• Linking to
other sites
• Email links
Linking to Other Pages on the Same Site
When you are linking to other pages within the same site, you do not
need to specify the domain name in the URL. You can use a shorthand
known as a relative URL.
Directory Structure
On larger websites
it's a good idea to
organize your code
by placing the pages
for each different
section of the site
into a new folder.
Folders on a website
are sometimes
referred to as
directories.
Email Links
mailto: To create a link that starts
up the user's email program and
addresses an email to a specified
email address, you use the <a>
element. However, this time the
value of the href attribute starts
with mailto: and is followed by the
email address you want the email
to be sent to.
Opening Links in a New Window
Target tag: If you want a
link to open in a new
window, you can use the
target attribute on the
opening tag. The value of
this attribute should be
_blank.
Linking to a Specific Part of the Same Page
Before you can link to a specific part of
a page, you need to identify the points in
the page that the link will go to. You do
this using the id attribute (which can be
used on every HTML element). the value
of the href attribute starts with the #
symbol, followed by the value of the id
attribute of the element you want to link
to.
Summary: Links
➢ Links are created using the element.
➢ The element uses the href attribute to indicate the page you are linking to.
➢ If you are linking to a page within your own site, it is best to use relative
links rather than qualified URLs.
➢ You can create links to open email programs with an email address in the
"to" field.
➢ You can use the id attribute to target elements within a page that can be
linked to.
IMAGES A picture can say a
thousand words, and
great images help
➢How to add make the difference
images to pages. between an average-
looking site and a
➢ Choosing the really engaging one.
right format
➢ Optimizing
images for the
web
Adding Images
To add an image into the page you need to use an <img> element. This is an empty element
(which means there is no closing tag). It must carry the following two attributes:
src: This tells the browser where it can find the image file. This will usually be a relative URL
pointing to an image on your own site.
alt :This provides a text description of the image which describes the image if you cannot see
it.
Title: You can also use the title attribute with the element to provide additional information
about the image. Most browsers will display the content of this attribute in a tootip when the
user hovers over the image.
Formatting Our Image
Create an Images Folder to
store all your images.
<img src="images/name_of_image.typ
e" alt="Description" width="600px" hei
ght="450px">
Height - This specifies the height of the
image in pixels.
Width - This specifies the width of the
image in pixels.
Aligning Images
The align attribute was commonly used to indicate how the other parts of a page
should flow around an image.
Align Horizontally:
left This aligns the image to the left (allowing text to flow around its right-hand
side).
right This aligns the image to the right (allowing text to flow around its left-hand
side).
Align Vertically:
top This aligns the first line of the surrounding text with the top of the image.
middle This aligns the first line of the surrounding text with the middle of the
image.
bottom This aligns the first line of the surrounding text with the bottom of the
image.
HTML5: Figure and Figure Caption
Images often come with captions. HTML5
has introduced a new <figure> element to
contain images and their caption so that
the two are associated.
The <figcaption> element has been added
to HTML5 in order to allow web page
authors to add a caption to an image.
BASIC TABLE STRUCRURE
TABLES
The <table> element
is used to create a
table.
What's a Table?
A table represents You indicate the start
information in a of each row using the
grid format. opening <tr> tag.
Examples of tables (The tr stands for
include financial table row.)
reports, TV Each cell of a table is
schedules, and
sports results. represented using a
<td> element.(The td
stands for table data.)
Table Heading
The <th> element is used just
like the <td> element but its
purpose is to represent the
heading for either a column or a
row(The th stands for table
heading)
Summary: Tables
➢The <table> element is used to add tables to a web page.
➢A table is drawn out row by row. Each row is created with the <tr>
element.
➢Inside each row there are a number of cells represented by the <td>
elements(or <th> if it is a header).
➢You can make cells of a table span more than one row or column using
the rowspan and colspan attributes.
➢For long tables you can split the table into a <thead> , <tbody>, and <tfoot>
Forms
Traditionally, the term 'form' has referred to a printed
document that contains spaces for you to fill in information.
Why Forms? The best known form on the web is probably the search
box that sits right in the middle of Google's homepage.
Form Controls
Form controls live inside a element.
This element should always carry
the action attribute and will usually
have a method and id attribute too.
FORM STRUCTURE
Action: Every element requires an action attribute. Its
value is the URL for the page on the server that will
receive the information in the form when it is
submitted.
Method: Forms can be sent using one of two
methods: get or post.
Get- when you are just retrieving data from the web
server .
Post - With the post method the values are sent in
what are known as HTTP headers
INPUT in Forms
The <input / > element is used to create
several different form controls.
type="text" When the type attribute has a
value of text, it creates a singleline text
input.
type="password" When the type attribute
has a value of password it creates a text
box that acts just like a single-line text
input, except the characters are blocked
out.
TEXT AREA
The <textarea> element
is used to create a mutli-line
text input. Unlike other input
elements this is not an empty
element. It should therefore
have
an opening and a closing tag.
Radio Button
type="radio"
Radio buttons
allow users to
pick just one of a
number of options.
Checkbox
type="checkbox" Checkboxes
allow users to select (and
unselect) one or more options
in answer to a question.
Drop Down List Box
A drop down list box (also known
as a select box) allows users to
select one option from a drop down
list. The <select> element is used to
create a drop down list box. It
contains two or more <option>
elements.
File Input Box :<input type=“file” />
If you want to allow users to upload a file (for example an image,
video, mp3, or a PDF), you will need to use a file input box.
SUBMIT BUTTON
type="submit" The submit button is used to send a form
to the server.
Labelling Form Controls
When introducing form controls,
the code was kept simple by
indicating the purpose of each one
in text next to it. However, each
form control should have its own
element as this makes the form
accessible to vision-impaired
users.
Grouping Form Elements
You can group related
form controls together
inside the <fieldset>
element. This is
particularly helpful for
longer forms.
The <legend> element
contains a caption that
helps identify the
purpose.
HTML5: More Input Type
type="date" If you are asking the user for a date, you can use
an <input> element and give the type attribute a value of date.
This will create a date input
type="email" If you ask a user for an email address, you can
use the email input.
type="url" A URL input can be used when you are asking a
user for a web page address.
type="search" If you want to create a single line text box for
search queries, HTML5 provides a special search input.
CLASS ACTIVITY
TASK: CREATE AN EXAMPLE FORM USING VISUAL STUDIO
CODE.
COMMENTS IN HTML
If you want to add a comment to your code that will
not be visible in the user's browser, you can add the
text between these characters:
<!-- comment goes here -->
Grouping Text & Elements In a Block
The <div> element allows you to group a set of elements together
in one block-level box. For example, you might create a <div>
element to contain all of the elements for the header of your site
(the logo and the navigation), or you might create a <div> element
to contain comments from visitors.
IFRAME: <iframe> </iframe>
An iframe is like a little window that has been cut into your page — and in that
window you can see another page. The term iframe is an abbreviation of inline
frame.
One common use of iframes (that you may have seen on various websites) is
to embed a Google Map into a page.
<iframe width=“”450 height=“350”
src="https://www.google.com/maps/embed?</iframe>
MEDIA: Adding Audio
HTML5 introduced the <audio> element to
include audio files in your pages.
The <audio> element has a number of
attributes which allow you to control audio
playback:
src:: This attribute specifies the path to the
audio file.
controls: This attribute indicates whether
the player should display controls.
MEDIA: Adding Video
The <video> element has a number of
attributes which allow you to control video
playback:
src This attribute specifies the path to the
video.
poster This attribute allows you to specify an
image to show while the video is downloading
or until the user tells the video to play..
controls When used, this attribute indicates
that the browser should supply its own controls
for playback.
autoplay When used, this attribute specifies
that the file should play automatically.
loop When used, this attribute indicates that
the video should start playing again once it has
ended..
CSS: Cascading CSS (Cascading Style Sheet) is used for
Style Sheet beautification.
Types of Styling in CSS
1. Inline Styling: This styling is placed in
CSS allows you the tag example: style = “”.
to create rules 2. Internal Styling: This styling is placed
that specify how in the head tag example:
<style></style>.
the content of
3. External Styling: This styling is placed
an element in a separate page linked back to
should appear them to the main page to take effect.
CSS Associates Style rules with
HTML elements
These rules govern how
the content of specified
elements should be
displayed. A CSS rule
contains two parts: a
selector and a declaration.
