WEB DESIGN
CONTENTS
WEB DESIGN...............................................................................................................................................1
WEB DESIGN...............................................................................................................................................2
1.0 INTRODUCTION...................................................................................................................................2
1.1 INTERNET........................................................................................................................................2
1.2 WORLD WIDE WEB (WWW).........................................................................................................2
1.3 TOOLS USED IN WEB DESIGN....................................................................................................2
1.3.1 WEB SERVERS........................................................................................................................2
1.3.2 WEB CLIENTS.........................................................................................................................2
1.4 WEB DESIGN...................................................................................................................................2
1.5 INTRODUCTION TO HTML.................................................................................................................2
1.5.1 CODING...............................................................................................................................................2
1.7 CASCADING STYLE SHEET...............................................................................................................3
1.8 MYSQL....................................................................................................................................................3
1.9 PHP..........................................................................................................................................................3
2.0 JAVA SCRIPT.........................................................................................................................................3
2.1 BASIC WEBSITES.................................................................................................................................3
Web Design Notes by: Yiaro David Page 1
WEB DESIGN
1.0 INTRODUCTION
Web Design refers to writings, markup and coding involved in web development which includes
web content, web client, server scripting and Network security.
1.1 INTERNET
Internet is the global interconnection of computers for the purpose of sharing Web resources and internet.
Web resources include: Files like videos, Documents, Graphics etc.
Internet is facilitated by:
1. web browsers used to navigate through web pages
2. Web Servers that provides response to client requests.
REQUEST
CLIENT/ WEB/SERVER
BROWSER
RESPONSE
1.2 WORLD WIDE WEB (WWW)
World Wide Web, commonly referred to as WWW refers to a vast collection of globally sharable
resources hosted in the space and accessible on client request to Web hosts referred to as Web Servers.
Web sharable resources include: Files (Videos, Music, documents etc.) and Internet.
1.3 TOOLS USED IN WEB DESIGN
1.3.1 WEB SERVERS
These are software solved within the globe central location used to give response on the
browsers searches
1.3.2 WEB CLIENTS
These are software installed in a user computer used to access web resources
1.4 WEB DESIGN
1.5 INTRODUCTION TO HTML
1.5.1 CODING
Coding is how we communicate with computers and tell them what to do by use of instructions
written on different programming languages.
Web Design Notes by: Yiaro David Page 2
1.6 HTML CODING
Html is a language for describing Web Pages. HTML stands for Hypertext Markup Language.
Html is a markup language that uses a set of markup tags. HTML tags are key words (tag names)
surrounded by carets (Angle brackets). The tags describe the content of the document. Html
documents contain HTML tags and plain text.
Features of Html tags
Html is a language for describing Web Pages. HTML stands for Hypertext Markup Language.
Html is a markup language that uses a set of markup tags. HTML tags are key words (tag names)
surrounded by carets (Angle brackets). The tags describe the content of the document. Html
documents contain HTML tags and plain text.
Features of Html tags
Most of them come in pairs, opening tags and closing tags
The name of the opening tag correspond to the name of the closing tag
Tag names are reserved words
Writing a html document
A html document is also known as a web page.
To create a html document you will require:
1. Text editor like: VS code/Sublime text/Notepad
2. Local host: XAMPP made up of a local server called Apache used to host local files
3. Web browser: MICROSOFT Edge/ Google Chrome/Mozilla Firefox
Basic Html terminologies
1. Tag-Formatting i.e. how a website will appear: <head>, <title>, <h>, <p>
among others. Tags are enclosed with angle brackets known as carets.
2. Content between the tags-It’s found between the opening and closing tags i.e. It
is the actual content to be displayed on the web browser.
<p>This is the content between the p tag</p>
Web Design Notes by: Yiaro David Page 3
HTML Syntax
The basic structure of a html file looks like:
<!DOCTYPE tml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
……This is where the main content is defined like Paragraphs, Headings and other objects……….
</body>
</html>
<html>- Identifies the document as an html document.
<head>- Includes title, scripts used, styles definition and document description
<title>- Contains the document title that appears at the title of the document on the browser.
<body>- All the content including heading tags, paragraphs tags etc. are quoted here
HTML ATTRIBUTES
1. HTML Marquee
Html marquee helps users create a flowing text, its defined using the marquee tag
<marquee>
<marquee behavior="" direction="">This is a flowing text</marquee>
Web Design Notes by: Yiaro David Page 4
2. HTML Fieldset
It is used to group the logically related labels within an html form. The <legend> is used
with <fieldset> as first-child to define the caption for the grouped related fields e.g
<fieldset>
<legend>This is a grouped content</legend>
</fieldset>
3. HTML Lists
Lists in html are used to display items in a certain order.
HTML Lists are classified into: Ordered and unordered lists.
a. Ordered Lists: The content of ordered list is organized in an order.Ordered list
is defined using <ol> tag. <li> is used to define list items.
<ol>
<li>Tea</li>
<li>Coffee</li>
<li>Chocolate</li>
</ol>
b. Unordered Lists
The items of unordered list are not orderly listed. They are listed using dots rather. <ul>
defines unordered list.
<ul>
<li>Tea</li>
<li>Coffee</li>
<li>Chocolate</li>
</ul>
4. HTML images
Images can be inserted into a web page by html code. The <img> defines a html image. The src
attribute defines the name and location of an image from a user computer while the alt defines an
alternative image if the original image is not found.
<img src="image.jpg" alt="">
Web Design Notes by: Yiaro David Page 5
5. HTML Links
A html link is a text that contains an address of another location like a web page. Once a link is
clicked, it directs a user to another web page. Anchor tag <a> is used to define html links.
<a href="#">A link is an address to another location</a>
6. HTML Forms
Html forms are used to collet user input, send them to the server for processing and storage in the
databases. The <form> defines a html form.
Form data DB
<form action=""></form>
7.HTML BOXES AND BUTTONS
Boxes in HTM are used to select options and buttons are used to give alerts.
1. Check boxes
Used when a user is to select one or more options from a list of given options.
<input type="checkbox">Software Engineering</input>
<input type="checkbox">Software Development</input>
<input type="checkbox">Computer Hardware</input>
<input type="checkbox">Networking</input>
2. Radio buttons
They are used to restrict user selection to only one.
<button type="radio">Male</button> <br>
<button type="radio">Female</button>
Web Design Notes by: Yiaro David Page 6
3. ALERT BUTTONS
They are used to give message popups to the users when an action is triggered on them.
<button type="submit" onclick="alert('I am a an alert button')">Click
Me</button>
4. SUBMIT BUTTONS
It is used to send form data to form handler.
<button type="submit">Submit</button>
5. RESET BUTTON
It is used to clear from data
<button type="reset">Submit</button>
1.7 CASCADING STYLE SHEET
1.8 MYSQL
1.9 PHP
2.0 JAVA SCRIPT
2.1 BASIC WEBSITES
Web Design Notes by: Yiaro David Page 7
