introduction to web development
TRANSCRIPT
By:
Muhammad shafiq Abasyn University Peshawar
Web Development Desktop application Web Application How Web application Work
HTTP Hypertext Transfer Protocol Send Our URL to the DNS Server
DNS Server Domain Name System Give Name to IP Address That Name is Called Domain Name Like : http://www.google.com Its work like Contact in Our Mobile.
2
Web DevelopmentURL
Uniform resource locator It Points Location of Every Single Page. Like : aup.edu.pk/result.php
Domain If You want user to access your Website through
web You will must Purchase a Domain Name From DNS.
Like aup.edu.pk After Purchasing a domain name your website
will be accessible through HTTP. Why DNS
Just like your mobile contact.
3
Web DevelopmentHow Web Application Work
Enter URL in Browser Browser send URL to DNS through HTTP DNS Search for IP of required URL If DNS Find URL in There Table they will send back
IP address of required URL to The User otherwise they will Send Message
“This webpage is not available”
After receiving IP the Browser Will Send Request to the required Server.
The server will send back all the required data to the browser in the form of HTML.
The Browser Will read the tags and generate the page.
4
Web DevelopmentWeb Technologies
HTML (HyperText Markup Language) use to give layout to resources(text, image,
video) in webpage. CSS (Cascading Style Sheets)
Give style to the page JAVASCRIPT
Give programming tools to the HTML(Var, Condition, Loops tec)
JQUERY Third party package of JavaScript Readymade
Code. AJAX (asynchronous JavaScript & XML)
Change page Without Refreshing/Reloading. PHP
Give Connectivity between HTML and Database. MySQL
Database Where all website data store.5
Web Development Web Browser :
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages
The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
like : h1 give bigger layout and img insert image Static web page:
A web page that displays same page/information to all users.
No user interaction No Database Create in HTML,CSS,JS
Dynamic web page: Information is different for each user e.g.
Facebook, Google+ Involves user interaction Must Have Database create in HTML, CSS, JS, php, Mysql
6
HTML not a programming language, markup
language Consist of set of markup tags Markup tags use to add resources to the
page and give layout to resources. HTML tags are keywords surrounded
by angle brackets like <html> attribute/property :
every Tag have there Own Property to specify the tag like for img tag you must have picture (Location, Width, Height) so we will use attribute for these Information.
Give additional info to tag Name=“Value”
7
First Code
Hello World <html>
<head><title>Hello World</title>
</head><body>
<p>Hello World.</p></body>
</html> Nested HTML Elements
- Most HTML elements can be nested
8
Heading Heading
Heading 1Heading 2Heading 3Heading 4 Heading 5 Heading 6
Attributes Align = Left, center, right Title = “text”
9
Hr and Comments HTML Lines
The <hr > tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
<p>This is a paragraph</p><hr ><p>This is a paragraph</p> Align, noshade, size, width, title
HTML Comments Comments can be inserted into the HTML
code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.
Comments are written like this: <!-- This is a comment -->
10
Subscript or superscript Subscript: <sub> value </sub> Superscript: <sup> value </sup> Example H2O, 10^3<html> <body> H<sub>2</sub>O 10<sup>3</sup> </body></html>
11
HTML Font tag To change text size
<font size=“+3”>Hello</font> Output: Hello
To change text color <font color=“red”>Hello</font> Output: Hello
To change font style <font size=“+3” color=“red”
face=“Impact”>Hello</font> Output: Hello
12
Image Insertion For image insertion <img> tag is used Place all images in the same directory/folder
where you web pages are <html> <head> <title>image Insertion</title> </head> <body> <p>This is the inserted image:</p> <br> <img src="imagename.jpg“ border=“1”
hspace=“10px” vspace=“10px” alt="image not found" width="40" height="40" />
</body> </html>
13
Background and marquee For web page background color the attribute
is: <body bgcolor=“red”> Or <body bgcolor=“rgb(255,0,255)”> Marquee help in scrolling the text: <marquee direction=“right”> text </marquee> Direction can be “right”,“left”,”up” and
“down” scrollamount=“int“ onMouseOver="this.stop()“ onMouseOut="this.start()”
14
Hyperlinks Hyperlinking is used link web pages Suppose we want to link two web pages page1.html and
page2.html…. Syntax: <Html> <body> <a href=“page2.html”>jump to page2</a> </body> </html> Attributes Download,
15
Hyperlinks Attributes Download
<a href=“link" download>Abc</a> Target
<a target="_blank"> _blank = Opens the linked document in a
new window or tab. _self = Opens the linked document in the
same frame as it was clicked (this is default)
Hyperlinking image <a href=“link”><img src=“abc.jpg”></a>
16
Usemap It is the property of image in which
you can create map (multiple link in one image) of image.
<img src=“imagename.jpg" width=“400" height=“400" usemap="#mapname">
<map name="mapname"> <area shape="rect" coords="0,0,82,126" href=“1.htm" > <area shape="circle" coords="90,58,3" href=“2.htm" > <area shape="circle" coords="124,58,8" href=“3.htm" ></map>
17