INTRODUCTION TO

INTERNET, HTML
& CSS

1
Neema
Rajabu
Contact Me
neyrajy@gmail.com;
0769129676
 UNDERSTANDING
THE WEB AND THE
INTERNET
Outline
What is the internet? Navigate with DNS and IP
What is the web? addresses
Databases

What is www? Understand mobile devices as part of

Web browsers the internet

Clients and servers Stay safe online

4
 What is the
Internet
The internet is a global system of interconnected computer

networks that use the standard Internet Protocol Suite

(TCP/IP) to serve billions of users worldwide.

It is a network of networks that consists of millions of

private, public academic, business, and government

networks.
 The Web
The term refers to all the interlinked
HTML pages that can be accessed
over the Internet.
The World Wide Web was originally
designed in 1991 by Tim Berners-Lee

It is unique in that it allows

documents to be linked to one
another using hypertext links—thus
forming a huge “web” of connected
information.
Webpage Website WEB Browsers

A web page is an A website is a collection A web browser is the

electronic document of related web pages of program you use to view
that typically contains a certain individual, pages and navigate the
several types of group, or organization. World Wide Web.
information accessible Examples:- Microsoft
via the World Wide Web Internet Explorer, Safari,
Mozilla Firefox, Google
Chrome.
 Client Server Web Server

Is the machine that Is a computer program or a A web server is the program

that runs on a computer and is
requests the web page. device that provides
responsible for replying to web
For example, when you functionality for other browser requests for files.
type “must.ac.tz" into a programs or devices, called In order for a computer to be
web browser’s URL bar "clients". Servers can part of the Web, it must be
running special web server
at the top of the provide various
software that allows it to
window, your computer functionalities, often called handle Hypertext Transfer
is the client, and "services", such as sharing Protocol transactions.
“must.ac.tz" is the web data or resources among
page that you are multiple clients, or
requesting. performing computation for
a client.
IP Address DNS

An Internet Protocol address is a DNS stands for Domain Name

numerical label assigned to each System, and it is a global
device connected to a computer system that takes and
network that uses the Internet translates human-readable
Protocol for communication. An IP names like “must.ac.tz” to
address serves two main functions: specific IP addresses.
host or network interface The domain name is more
identification and location accessible to humans.
addressing. Example 41.59.86.234 Matching the text domain
The numeric IP address is useful for names to their respective
computer software. numeric IP addresses is the job
of a separate DNS server.
 Databases

A database is an organized collection of data, so that it can

be easily accessed and managed.

10
READY TO
CODE?
 Web
TheDesign
term “web design” has come to encompass a number of
disciplines,
including:
 Visual (graphic) design
 User interface and experience design
 Web document and style sheet production
 Scripting and programming
 Content strategy
 Multimedia
 What Does a Web Designer Do?
Design
User Experience, Interaction, and User Interface design

Before picking colors and fonts, it is important to identify the site’s goals, how it
will be used, and how visitors move through it.

 The goal of the Interaction Designer is to make the site as easy, efficient, and
delightful to use as possible.

 User Interface design, which tends to be more narrowly focused on the

functional organization of the page as well as the specific tools (buttons, links,
menus, and so on) that users use to navigate content or accomplish tasks.

 User Experience Designer. The UX designer takes a more holistic view—

ensuring the entire experience with the site is favorable. UX design is based
on a solid understanding of users and their needs based on observations and
interviews.
 Continued….
According to Donald Norman (who coined the term), user
experience design includes “all aspects of the user’s
interaction with the product: how it is perceived, learned, and
used.”

For a website or application, that includes the visual design,

the user interface, the quality and message of the content,
and even overall site performance. The experience must be in
line with the organization’s brand and business goals in order
to be successful.
 Documents Produced By
an IxD, UI, or UX designer
 User research and testing reports

This approach of designing around the user’s needs is referred to as

User Centered Design (UCD).

Site designs often start with user research, including interviews and
observations, in order to gain a better understanding of how the site
can solve problems or how it will be used.

It is typical for designers to do a round of user testing at each phase of

the design process to ensure the usability of their designs.
If users are having a hard time figuring out where to find content or
how to move to the next step in a process, then it’s back to the
drawing board.
 Continued….
 Wireframe diagrams

A wireframe diagram shows the structure of a web page

using only
outlines for each content type and widget.
The purpose of a wireframe diagram is to indicate how the
screen real estate is divided and indicate where
functionality and content such as navigation, search boxes,
form elements, and so on, are placed, without any
decoration or graphic design.
They are usually annotated with instructions for how things
should work so the development team knows what to build.
 Continued….
 Site diagram

A site diagram indicates the structure of the site as a

whole and how
individual pages relate to one another. The following
figure shows a very simple site diagram. Some site
diagrams fill entire walls!
Storyboards and user flow charts

A storyboard traces the path through a site or application

from the point of view of a typical user (a persona in UX
lingo).
It usually includes a script and “scenes” consisting of
screen views or the user interacting with the screen.
The storyboard aims to demonstrate the steps it takes to
accomplish tasks, possible options, and also introduces
some standard page types. The following figure shows a
simple storyboard.
A user flow chart is another method for showing how the
parts of a site or application are connected that tends to
focus on technical details rather than telling a story. For
example, when the user does this, it triggers that function
Visual (graphic) Design
Because the Web is a visual medium, web pages require
attention to presentation and design.

A graphic designer creates the “look and feel” of the site—

logos, graphics, type, colors, layout, etc.—to ensure that the
site makes a good first impression and is consistent with the
brand and message of the organization it represents. Visual
designers typically generate sketches of the way the site
might look, as shown in the figure.
Development
A fair amount of the web design process involves the creation
and troubleshooting of the documents, style sheets, scripts, and
images that make up a site.

At web design firms, the team that handles the creation of the
files that make up the website (or templates for pages that get
assembled dynamically) is usually called the development or
production department.

Web developers may not design the look or structure of the site
themselves, but they do need to communicate well with
designers and understand the intended site goals so they may
suggest solutions that meet those goals.
Continued..
The broad disciplines that fall under development are:-

 Authoring

 Styling and

 Scripting/Programming.
Authoring/Markup
Authoring is the term used for the process of preparing
content for delivery on the Web, or more specifically,
marking up the content with HTML tags that describe its
content and function.

If you want a job as a web developer, you need to have an

intricate knowledge of HTML and how it functions on various
browsers and devices.
Styling
In web design, the appearance of the page in the browser is
controlled by style rules written in CSS (Cascading Style
Sheets).

We’ll get deep into CSS in next few chapters of the course
(including what “cascading” means!), but for now just know
that in contemporary web design, the appearance of the
page is handled separately from the HTML markup of the
page.
Scripting and Programming
JavaScript is the language that makes elements on web
pages do things. It adds behaviors and functionality to
elements in the page and even to the browser window
itself.

There are other web-related programming languages as

well, including PHP, Ruby, Python, and ASP.NET, that run
on the server and process data and information before it
is sent to the user’s browser.
Content Strategy and
Creation
Though ideally first in the actual website creation
process, is the critical matter of the site’s content itself.

Anyone who uses the title “web designer” needs to be

aware that everything we do supports the process of
getting the content, message, or functionality to our
users.

Furthermore, good writing can help the user interfaces we

create be more effective. Of course, someone needs to
create the content and maintain it—don’t underestimate
the resources required to do this successfully.
Multimedia
One of the cool things about the Web is that you can add
multimedia elements to a site, including sound, video,
animation, and even interactive games.

You may decide to add multimedia skills, such as audio and

video
editing or Flash development to your web design tool belt, or
you may decide to go all in and become a multimedia specialist.

If you are not interested in becoming a multimedia developer,

you can always hire one. Web development companies usually
look for people who have mastered the standard multimedia
tools, and have a good visual sensibility and an instinct for
intuitive and creative multimedia
design.
What Languages Do You Need to Learn?
Web-related technologies:

 Hypertext Markup Language (HTML)

 Cascading Style Sheets (CSS)
 JavaScript and DOM scripting
 Server-side programming and
database management
 HTML
HTML stands for Hypertext
Markup Language. It is the
language for building web
pages.
HTML defines the structure of
a Web page.
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>.
HTML Document Example
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>

<body>

<h1>Heading One</h1>
<p>My first paragraph.</p>

</body>
</html>
The first line <!DOCTYPE html> is the document type declaration.
It instructs the web browser that this document is an HTML5 document. It is case-
insensitive.

The <head> element is a container for the tags that provides information about the
document, for example, <title> tag defines the title of the document.

The <body> element contains the document's actual content (paragraphs, links,
images, tables, and so on) that is rendered in the web browser and displayed to the
user.

**A DOCTYPE declaration appears at the top of a web page before all other elements;
however the doctype declaration itself is not an HTML tag. Every HTML document
requires a document type declaration to insure that your pages are displayed
correctly.
HTML Elements

An HTML element is defined by a start tag, some content, and an end tag.
<tagname>Text...</tagname>.
Example <p>My paragraph</p>

Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end
tag!
<p>My paragraph <br/> is too long</p>
HTML Attributes

All HTML elements can have attributes. Attributes provide

additional information about elements.

Attributes are always specified in the start tag. They usually

come in name/value pairs like: name="value“

Example <img src="img_girl.jpg">

HTML Basic Elements
Headings: Are used to add titles to sections of a page.
Example <h1>This is my Heading</h1>

Paragraphs: A paragraph always starts on a new line, and is usually a block of tex
Example <p>My first paragraph</p>

HTML Horizontal Rule: The <hr> element defines a thematic break in an

HTML page.
Example <p>This is my paragraph</p> <hr>
<p>This is my other paragraph</p>
HTML Line Breaks: The HTML <br> element defines a line break.
Example <p>This is<br>a paragraph<br>with line breaks.</p>
HTML Basic Elements
Links: Anchor tag allows you can click on a link and jump to another document.
Example: Go back to <a href="menu.html">Main Menu</a>

Images: A paragraph always starts on a new line, and is usually a block of text.
Example <img src="img_girl.jpg">

Lists: HTML lists allow web authors to group a set of related items in lists.
Example:
Ordered List Unordered List

<ol> <ol>

<li>Tea</li> <li>Tea</li>

<li>Coffee<li> <li>Coffee<li>

</ol> </ol>
HTML Basic Elements
Tables: They allow web authors to arrange data like text, images, links,
other tables, etc. into rows and columns of cells. Example
<!DOCTYPE html>
<html>
<head> <title>HTML Tables</title> </head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html> 40
HTML Basic Elements
Forms: HTML Forms are required, when you want to collect some data
from the site visitor. For example, during user registration you would like
to collect information such as name, email address, credit card, etc..
Example
<!DOCTYPE html>
<html>
<head> <title>HTML Forms</title> </head>
<body>
<form action = "Script URL" method = "GET|POST">
First name: <input type = "text" name = "first_name" ><br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>

41
HTML Form Elements
Tag Description
<form>: Defines an HTML form for user input
<input>: Defines an input control
<textarea>: Defines a multiline input control (text area)
<label>: Defines a label for an <input>
element
<fieldset>: Groups related elements in a form
<legend>: Defines a caption for a <fieldset> element
<select>: Defines a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button

42
Frames
While all modern browser offer support for frames today, the W3C has
unequivocally stated that frames “are not to be used by Web developers” and that
support for frames in web browsers is offered for historical purposes only.

The Problem with Frames

Usability challenges: With the rise in popularity of mobile devices and tablets with
small displays it’s more important than ever that websites offer multiple views
which change based on the size of the device viewport. While frames can be
manipulated to provide a certain degree of responsiveness, they are simply not
well-suited to creating responsive websites.

Accessibility challenges: Screen readers and other assistive technologies have a

very hard time understanding and communicating websites that use frames.

Read more: https://html.com/frames/#ixzz6QNjxCuzp

43
 HTML5 Structural Elements
<header>: The section at the top of a web page that often includes a logo and
sometimes a nav

<nav>: A set of menu items that allow a user to navigate to different pages on
a site

<section>: A general section of related content

<article>: a piece of content that can be independently shared, like a blog

post or newspaper article (even if you don't display the full article text, like you
just show a preview, you can still use an article tag to delineate this content)
 HTML5 Structural Elements
<footer>: the section at the bottom of a page that often has
additional links and perhaps social sharing icons

<aside>: content that is complementary but not crucial to the page's

main content (this could be an informative side section on a related
subject)

<figure>: a grouped image and caption that create an informative

visual of some kind
Webpage Structure
Webpage Structure
 Webpage Structure
<header>
<!--content-->
</header>
<nav>
<!--content-->
</nav>

<section>
<!--content-->
</section>

<article>
<!--content-->
</article>

<footer>
<!--content-->
</footer>
HTML Block and Inline Elements

Inline elements, which means they will

Block-level elements, which
means that they block off a automatically be placed next to one
whole
line for themselves. another on the same line.

49
 HTML Block and Inline Elements
Block-level elements include: Inline elements include:
 Headings
 Paragraphs (p)  Images (img)
 Lists and list items (ul, ol, li)  Emphasized text (em)
 Structuring elements (header, nav,
 Strong text (strong)
section, article, aside, figure, footer)
 Links (a)

50
HTML Block and Inline Elements
HTML Block and Inline Elements
 Group Content with Divs and Spans
The difference between divs and spans is simple: one is block-level,
and the other is inline.
Divs
Divs are a block-level element used to group content together, not dissimilar to <header>,
<nav>, <section>, <article>, <footer>, <figure>, and <aside>. There's one key
difference, though.

Most of the time, when you want to group content together, you'll be able to do it using an
HTML5 semantic element like header, nav, section, article, footer, figure, or aside.
However,
sometimes your content doesn't really fit any of these categories! In that case, you're
encouraged to use divs to create block-level content groups.
Divs
Divs
 Spans
Spans are similar to divs, except they are inline elements.

You might use them to group words together, since words appear inline and not each
on their own line.

Imagine the newspaper above always prints its name in bolded light green. You need
to grab those two words — "Sun Journal" — to be able to apply CSS to them. Why not
wrap them in a <span>?
Spans
 Add Classes and Ids to elements
Class and id tags will revolutionize your HTML. They're absolutely necessary when your
pages start becoming more complex.
 Add Classes and Ids to elements
Classes and ids are custom attributes you can add to your elements in order to
distinguish them from one another.

Classes apply to groups of elements, and ids apply to only one single element on an
entire page. Let's check out classes first.

These examples will include basic CSS to help you visualize how ids and classes are
used, but you're not expected to know CSS yet! Don't stress about it.
Classes
Classes Example
Classes Example
 Ids
Ids are just like classes,they are custom attributes that can be added to elements —
except they'll only apply to one element per page.
There were multiple warning paragraphs. On the same page, let's say we want to have
one single key takeaway (added to the HTML above):
<p id="key-takeaway">Therefore, this is the one thing you should remember from the
whole page.</p>
There will only be one key takeaway per page, so we're safe to use an id on this
element instead of a class!
Now in CSS, you can adapt that one element's appearance!
 HTML Comment Tags
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.
Comments are not displayed by the browser, but they can help document your HTML
source code. With comments you can place notifications and reminders in your HTML
code:
 HTML Comment Tags
Example
<!-- My comment goes here-->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
 CSS

HTML is the language that handles the first concern: creating structured content to tell a
story.
CSS covers the second concern: customizing the appearance of that content to visually
bring it to life.

67
 CSS
CSS stands for Cascading
Style Sheet.
Definition of css
Cascading Style Sheets (CSS)
Is a style sheet language used for describing the look and formatting of
a document written in a markup language.
You write CSS rules in elements, and modify properties of those
elements such as color, background color, width, border, font etc.

69
CSS
• Cascading style sheets, or CSS, is a style sheet language used on the
web
• CSS specifications are maintained by the world wide web consortium
(W3C)
• Three versions of CSS exist: CSS1, CSS2, and CSS3

70
CSS applied to HTML
There are two steps while using CSS to make your HTML look awesome:

Identify and select the relevant HTML element (ex. paragraph, header, etc).

Add some styles (specify how it should look).

Example Syntax
p{ selector { property: value }
color: blue;
font-family: Arial;
}
Methods for adding css
There are 3 ways to associate styles with your HTML document. Most
commonly used methods are inline CSS and external CSS.
1. Embedded css - the <style> element
You can put your css rules into an html document using the <style>
element. This tag is placed inside the <head>...</head> tags.
<head>
<style type="text/css"
style rules
............
</style>
</head> 72
2. Inline CSS - the style attribute
You can use style attribute of any HTML element to define style rules. These rules
will be applied to that element only. Here is the generic syntax:
<element style="...style rules....">
<h1 style =" color:red;"> This is inline CSS </h1>
3. External CSS - the <link> element
The <link> element can be used to include an external stylesheet file in your
HTML document.
An external style sheet is a separate text file with .css extension.
You define all the style rules within this text file and then you can include this file
in any HTML document using <link> element.
Here is the generic syntax of including external css file:
<head>
<link type="text/css" rel="stylesheet" href="..." />
</head>
73
74
CSS Syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts:
• Selector: A selector is an HTML tag at which a style will be applied. This could be any tag
like <h1> or <table> etc.
• Property: a property is a type of attribute of html tag. Put simply, all the HTML attributes
are converted into CSS properties. They could be color, border, etc.
• Value: values are assigned to properties. For example, color property can have the value
either red or #F1F1F1 etc.
You can put css style rule syntax as follows:
Selector { property: value; }
Example: you can define a table border as follows:
table{ border :1px solid #c00; }
75
Selectors

Selectors are used to declare which part of the markup a style applies to, a
kind of match expression.
3 types of selectors
1. Tag selectors (body, p, div, a)
2. ID selectors (#wrapper, #sidebar)
3. Class selectors (.content, .menu)

*The selector is normally the html element you want to style

*Selectors should never start with a number, nor should they have spaces in them

76
 Tag selectors (body, p, div, a)
The element selector selects HTML elements based on the element
name. Forexample,
p{
text-align: center;
color: red;
}
Id Selector
The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the html element, and is defined
with a "#".

The style rule below will be applied to the element with id="wrapper":
#wrapper
For example, to identify a paragraph as “head”,
{
use the code:
text-align : center;
border : 1px solid red;
<div id=“wrapper”>… </div>
width: 200px;
height: 100px
} 78
 Class selectors
The class selector is used to specify a style for a group of elements.
The class selector is most often used on several elements. This allows you to
set a particular style for many html elements with the same class.
The class selector uses the html class attribute, and is defined with a "."
<h1 class=“heading”>Heading 1</h1>
.heading { h1.black { color: #000000; }
This rule renders the content
color: #000000; in black for only <h1> elements
background-color: blueviolet; with class attribute set to black.

}
Property & Value
The property is the style attribute you want to change. Each property
has a value

*Properties are separated from their respective values by colons :

*pairs are separated from each other by semicolons ;
80
81
CSS Properties
CSS control many style properties of an element:
Coloring
Size
Position
Visibility
Many more: (e.g. p: { text-decoration: line-through; })
Also used in animation

82
CSS: Color
CSS uses color values to specify a color. Typically, these are used to set
a color either for the foreground of an element (i.e., Its text) or for the
background of the element. They can also be used to affect the color
of borders and other decorative effects.
You can specify your color values in various formats. Following table
lists all the possible formats:

83
 Size Properties - Element, Padding,
Margin, Border
width - Override element defaults Borders
height border-bottom-color
border-bottom-style
Padding border-bottom-width
padding-top border-left-color
padding-right border-left-style
padding-bottom border-left-width
padding-left border-right-color
border-right-style
Margin border-right-width
margin-top etc.
margin-right p {
margin-bottom border: 5px solid red;
margin-left }

84
 Box Model
All HTML elements can be considered as boxes. In CSS, the term "box model" is used
when talking about design and layout.

85
Elements as boxes

• Element - The content of the box, where text and images

appear

• Padding - Clears an area around the content. The padding is

transparent

• Border - A border that goes around the padding and content

• Margin - Clears an area outside the border. The margin is

transparent
86
Position Property
• Position: static; (default) - position in document flow
• Position: relative; position relative to default position via top, right,
bottom, and left properties
• Position: fixed; position to a fixed location on the screen via top, right,
bottom, and left properties
• Position: absolute; position relative to ancestor absolute element via
top, right, bottom, and left properties
• Fixed position (0,0) is top left corner

87
Some More Common Properties
• Background-image: image for element's background
• Background-repeat: should background image be displayed in a
repeating pattern (versus once only)
• Font, font-family, font-size, font-weight, font-style: Font information
for text
• Text-align, vertical-align: alignment: center, left, right

88
Safe Web Fonts

89
 Element Visibility Control Properties
• Display: none; - element is not displayed and takes no space in layout.
• Display: inline; - element is treated as an inline element.
• Display: block; - element is treated as a block element.
• Display: flex; - element is treated as a flex container(Layout one
dimension (row or column) of elements).
• Display: grid; - element is treated as a grid container(Layout in two
dimensions (rows and columns) of elements).
• Visibility: hidden; - element is hidden but space still allocated.
• Visibility: visible; - element is normally displayed
90
 CSS Units
CSS supports a number of measurements including absolute units and
relative units.
The absolute length units are fixed and a length expressed in any of
these will appear as exactly that size.
Absolute length units are not recommended for use on screen, because
screen sizes vary so much. However, they can be used if the output
medium is known, such as for print layout) such as inches, centimeters,
points, and so on.

91
 CSS Units
Relative length units specify a length relative to another length
property. Relative length units scales better between different
rendering mediums.) such as percentages and em units.
You need these values while specifying various measurements in your
style rules e.g. border="1px solid red".

92
93
THANKS!
ANY QUESTIONS?