Web Design & Development

By : Abdul Wahed Atta

ICT Trainer
 Objectives & Outcome

Students should be able to design and develop Websites and

Web based Enterprise Applications.

HTML, HTML5, XHTML, XML, CSS, LESS, Sass.

Bootstrap, Responsive Design, WordPress, PSD to HTML,
PSD to WordPress, JavaScript, JQuery, Ajax, MySQL, PHP,
ASP. Net and much more programming concepts.

By : Abdul Wahed Atta

ICT Trainer
 World Wide Web (WWW)

It is an information system on the Internet Which allows

documents to be connected to other documents by hypertext
links, enabling the user to search for information by moving
from one document to another.
World Wide Web is basically a system of Internet Servers
that support specially formatted documents.
By : Abdul Wahed Atta
ICT Trainer
 HTTP

Original web communication protocol

Request-Response type
Client (browser) will open a connection to a server and
then send a request using a very specific format
Server will respond and close the connection.
Hyper Text Transfer Protocol.
By : Abdul Wahed Atta
ICT Trainer
 Hyperlink

A hypertext link, or hyperlink, contains a

reference to a specific Web page that you
can click to quickly open that Web page

By : Abdul Wahed Atta

ICT Trainer
 URL

A document on the Web is called a Web page,

identified by a unique address called the
Uniform Resource Locator, or URL.
URL commonly referred to as a Web address.
By : Abdul Wahed Atta
ICT Trainer
 Web Site

A Web site refers to the location on the

Internet of the Web pages and related files
(such as graphic files) that belong to a
company, organization, or individual.
By : Abdul Wahed Atta
ICT Trainer
 Web Page

A document on the World Wide Web, consisting

of an HTML files and any related files for scripts
and graphics, and often hyperlinked to other
documents on the Web. The content of webpages
is normally accessed by using a browser.
By : Abdul Wahed Atta
ICT Trainer
 Web Browser

A web browser, or simply “browser,” is an

Application used to access and view websites.
Common web browsers include Microsoft
Internet Explorer, Google Chrome, Mozilla
Firefox, Opera and Apple Safari.
By : Abdul Wahed Atta
ICT Trainer
 Web Applications

Web Page View/Front-End Development

HTML, CSS, XHTML, JavaScript, JQuery…
Server-Side/Back-End Development PHP, ASP,
RUBY, PYTHON…
By : Abdul Wahed Atta
ICT Trainer
 Lesson 1
Introduction to HTML

By : Abdul Wahed Atta

ICT Trainer
 Introduction to HTML5

 Tim Berners lee a computer scientist introduce HTML 0.1 version = 1991

 after 1991 W3C (world wide web community), some computer scientist
introduce HTML version 4.01 = 1999.

 Then after HTML4 version the WHATWG (web hyper application technology
working group) 2004- 2012 introduce HTML 0.5 version.

By : Abdul Wahed Atta

ICT Trainer
 What is HTML

• HTML stands for hyper text markup language

• HYPER text is the method by which you move around on the
web by clicking on special text called hyperlink which bring you
to the next page
• HTML is not a programming language it is a markup language

• A markup language is a nets of markup tags

• HTML uses markup tags to descried web pages

By : Abdul Wahed Atta

ICT Trainer
 HTML Versions

Since the early days of the web, there have been many versions of HTML:

Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
By : Abdul Wahed Atta
ICT Trainer
 HTML Elements & tags

• HTML elements are component to create different type of

content on webpage

• HTML tags are composed of html elements inside an angle

bracket

By : Abdul Wahed Atta

ICT Trainer
 Html elements & tags
closing tag
opening tag Content may be text or other start with/

<element name> content here </element name>

Element

example <h1> black goose bistro <h1/>

By : Abdul Wahed Atta
ICT Trainer
 Examples

Elements
• P, pre ,h 1 h2,h3,h4,h5,h6 hr...Est ……
Tags
• <p>,<pre>,<h1><h2>,<h3>,<h4>,<h5>,h6> eats

By : Abdul Wahed Atta

ICT Trainer
 2ndlesson
Page Structure
By Abdul Wahed Atta

By : Abdul Wahed Atta

ICT Trainer
 Basic structure
• <html>
• <head>
• <title> page title here </title>
• </head>
• <body content here </body>
• </html>
By : Abdul Wahed Atta
ICT Trainer
 IDE Programs for Web Designing

1. Notepad
2. Notepad++
3. Adobe Dreamweaver
4. Sublime text
5. Php Storm
6. Emmet
7. Exammp
8. Brackets
9. Etc…

By : Abdul Wahed Atta

ICT Trainer
 HTML,Pragraph,Pre tags …

• <html>
• <head>
• </head>
• <body>
• <h1> I am From Afghanistan </h1>
• <h2> I am From Afghanistan </h2>
• <h3> I am From Afghanistan </h3>
• <h4> I am From Afghanistan </h4>
• <h5> I am From Afghanistan </h5>
• <h6> I am From Afghanistan </h6>
• <p> lorem </p>
• <pre> lorem </pre>
• </body>
By : Abdul
• Wahed
</html> Atta
ICT Trainer
 Reserved characters

 Some special characters are reserved for use in HTML, meaning that your browser will
parse them as HTML code. For example, if you use the less-than (<) sign, the
browser interprets any text that follows as a tag.

 To display these characters as text, replace them with their corresponding character
entities, as shown in the following table.

By : Abdul Wahed Atta

ICT Trainer
 Special character

Character Entity Note

Interpreted as the beginning of an entity or character
& &amp;
reference.

< &lt; Interpreted as the beginning of a tag

> &gt; Interpreted as the ending of a tag

" &quot; Interpreted as the beginning and end of an attribute's value.

By : Abdul Wahed Atta

ICT Trainer
 Syntax of reversed code

By : Abdul Wahed Atta

ICT Trainer
 3rd lesson
HTML Line Break Tag, horizontal line tags and
font style.

By : Abdul Wahed Atta

ICT Trainer
 Break tags <Br>

<html>
<head>
<title> page title here </title>
</head>
<body>
<p> hello how are you ? <br> I am fine </p>

</body>
</html>

By : Abdul Wahed Atta

ICT Trainer
 Horizontal tags <hr>

<html>
<head>
<title> page title here </title>
</head>
<body>
<p> hello how are you ? <br> I am fine </p>
<hr width=“10%”>
<hr width=“50%” align=“left”>
<hr width=“50%” align=“left” color=“red”>
<hr width=“50%” align=“left” color=“red” size=“10px >
</body>
</html>

By : Abdul Wahed Atta

ICT Trainer
 Font style tags <b> <u> <i>

<html>
<head>
<title> page title here </title>
</head>
<body>
Or <body text=“red”>
<p> <b>hello how are you</b> ? <i><br> I am fine</i> </p>
<p> <u> I live in Parwan Province </u></p>
X₂
X³
</body>
</html>

By : Abdul Wahed Atta

ICT Trainer
 4th lesson comment tag

By Abdul Wahed Atta

By : Abdul Wahed Atta

ICT Trainer
 Comment tag

 <html>
 <head>
 <title> My site </title>
 <body>
 <!– it’s starttitng paragraph-->
 <p> Hello dear friend </p>
 </body>
 </html>

By : Abdul Wahed Atta

ICT Trainer
 Creating Table in HTML
<table> , <tr>, <td> <thead>, <tbody>

<html>
<head>
<title> My site </title>
<body>
<Table border size=“1”>
<thead>
<tr>
<td> Name </td>
<td> f/name </td>
<td> Program </td>
</tr>
<tbody>
</tbody>
</table>
</body>
</html>
By : Abdul Wahed Atta
ICT Trainer
 5 th lesson

Continue.. Table Attribute

By Abdul Wahed Atta

By : Abdul Wahed Atta

ICT Trainer
 Tables in HTML <table>

Table attributes
Align Horizontal alignment is controlled by the align attribute.
It can be set to left , center or rigth..
Valign Controls the vertical alignment of cell content . It accepts the top , middle or bottom.

Width Sets the width to s specific number of pixel or to adjusted based on cell data.

Cellpadind This attributes controls the distance between data in a cell and boundaries of cell.

Cell spacing Controls the spacing between adjacent cells.

Colspan This attributes is useful when one row of the table needs to be a certain number of columns
wide.
Row span This attribute works in same way as COLSPAN except that it allow a cell to take more than
one more.
By : Abdul Wahed Atta
ICT Trainer
 Table attributes

 <Table border size=“1” width="200px" height="100px" align="center" cellspacing="5"

cellpadding="10px">
 <thead>
 <td colspan=3 align="center"> info</td>
 <tr height="5px" valign="middle">
 <td valign="top">Name </td>
 <td> f/name </td>
 <td> Program </td>
 </tr>
 <tr>
 </tr>
 <tr>
 <td>ali </td>
 <td> rahim </td>
 <td> excel </td>
By : Abdul Wahed Atta  </tr>
ICT Trainer  </table>
 14 th lesson

iframe– in HTML

By Abdul Wahed Atta

By : Abdul Wahed Atta

ICT Trainer
 Iframe – in HTML <iframe>

 <html>
 <head>
 </head>
 <center>
 <iframe width="300" height="400"></iframe>
 <iframe width="300" height="400" src=[Link] allowfullscreen></iframe>
 <iframe width="300" height="400" src=[Link] frameborder=“1” ></iframe>
<iframe width="300" height="400" src=[Link] style=“border:0” ></iframe>

 </center>
 </html>

By : Abdul Wahed Atta

ICT Trainer
 Iframe attributes – in HTML

 <html> <iframe src="contecnt [Link]" align="left"

frameborder="1" scrooling="no">
 <head>
 </head>
 <body
 <p>
 <iframe src="contecnt [Link]" align="left" frameborder="1" scrolling="no"> </iframe>
 This is text . i live in Parwan. This is text . i live in Parwan
 This is text . i live in [Link] is text . i live in Parwan</p>
 </iframe>
 </html>

By : Abdul Wahed Atta

ICT Trainer
 16 th lesson

Marquee Tag – in HTML

By Abdul Wahed Atta

By : Abdul Wahed Atta

ICT Trainer
 Marquee tag
 <html>
 <head>
 <marquee > X-pert learning Center</marquee>
 <marquee direction="right" >X-pert learning Center</marquee>
 <marquee scrollamount="15“> behavior="slide"> X-pert learning
Center</marquee>
 <marquee behavior="slide"> X-pert learning Center</marquee>
 </head>
 <body
 </body>
 </html>
By : Abdul Wahed Atta
ICT Trainer
 Marquee tag
 <html>
 <head>
 <marquee scrolldelay=“100"> X-pert learning Center</marquee>
 <marquee direction="right" loop="2"> X-pert learning Center</marquee>
 <marquee direction="right" loop="2“ bgcolor=“black”> X-pert learning Center</marquee>
 <marquee scrolldelay=“100“ width=“100% height=“80%”> X-pert learning Center</marquee>
 <marquee hspace=“50” vspace=“60”>X-pert learning Center</marquee>
 <marquee onmouseover="[Link]()" onmouseout="[Link]()"> X-pert learning
Center</marquee>
 <marquee behavior="alternate" bgcolor="red"> X-pert learning Center</marquee>
 <marquee direction="right"><img src="[Link]" height="100px" width="150"></marquee>
 </head>
 <body
 </body>
 </html>
By : Abdul Wahed Atta
ICT Trainer
 18th lesson
Favicon – in HTML

By Abdul Wahed Atta

By : Abdul Wahed Atta

ICT Trainer
 Favicon tag …

 <html>

 <head>

 <link rel="shortcut icon" href="[Link]">

 </head>

 <body>

 </html>

By : Abdul Wahed Atta

ICT Trainer
 Language - Tag in HTML

 <html lang="fa" dir="rtl">

 <title> /< ‫سایت من‬title>
 <h1> /<‫سایت کاریابی‬h1>
 <head>
 <body>
 </body>
 </html>

By : Abdul Wahed Atta

ICT Trainer
 Simple project

<html>
<title> simple quiz</title>
<head>
simple Quiz
<body text="red"/>
<p>
question What's the fastest animal in the world?
<p>
<input type="checkbox"/>tiger
<p>
<input type="checkbox" />Elphent
<p>
<input type="checkbox"/>lion
<p>
<input type="checkbox"/>leopard
<p>
<hr>
</hr>
</html>
Only one choise

By : Abdul Wahed Atta

ICT Trainer
 Thanks

By : Abdul Wahed Atta

ICT Trainer