Workshop on Web

mewstennisΛογισμικό & κατασκευή λογ/κού

4 Νοε 2013 (πριν από 3 χρόνια και 1 μήνα)

52 εμφανίσεις

Workshop on Web
Development

By

Praveen Kavuri, D Rajeev Reddy

Use

Use of Web designing:


Day by day users of internet has increased


Access to any information just at the fingertips


Social networking


And many more ……..


What’s in this for you:


Large scope in the future as site traffic increases.


Many start up’s intern opportunities and also as a
parttime

job.



www.prodex.org.in

Web Components


Clients and Servers


Internet Service Providers


Web Site Hosting Services


Domains Names, URL’s and
Ips

www.prodex.org.in

Clients & Servers

Clients (Browser)


Google Chrome


Internet Explorer


Mozilla Firefox


Opera


Safari

Servers


Apache


Microsoft


Netscape


zeus


AOLserver


AV


JavaWebServer


Oracle

www.prodex.org.in

Web Components


Clients and Servers


Internet Service Providers


Web Site Hosting Services


Domains Names, URL’s and
Ips

www.prodex.org.in

Internet Service Providers


Connect Clients to the Internet


Phone Company


AOL


Earthlink


Verizone


NetZero


Basic internet
connection


Dialup/DSL/Cable/Sat

www.prodex.org.in

Web Components


Clients and Servers


Internet Service Providers


Web Site Hosting Services


Domains Names, URL’s and
Ips

www.prodex.org.in

Web Hosting Services


Connects Web Sites to the Internet


Computer (server)


Web server software


Firewall hardware and software


IT services



(Backup, troubleshooting, hardware repair)


Disk space


Bandwidth / connection to internet


Routers and switchers


Email server / storage


www.prodex.org.in

Web Components


Clients and Servers


Internet Service Providers


Web Site Hosting Services


Domains Names, URL’s and Ips

www.prodex.org.in

Domain’s URL’s and IPs


Domain name: The specific address of a computer on the
Internet


microsoft.com


Uniform Resource Locator (URL):


http://www.microsoft.com/faqs.html


ftp://www.pcwebopedia.com/stuff.exe



Internet protocol (IP) address


192.168.1.1


www.prodex.org.in

Creating a Web Site

1.
Choose a domain name

2.
Register with a Registrar

3.
Choose a hosting service

4.
Create web content

5.
Store (publish) onto hosting server (FTP)

6.
Submit new site to search engines

www.prodex.org.in

Creating your Web Site

Technologies & Tools


Markup Languages


HTML, DHTML, XML, XSLT, etc....


Cascading Style Sheets (CSS)


Scripting languages


Browser Scripting like JavaScript etc.,


Server Scripting like Php , Asp etc
..


Web
creation and editing software


Notepad , Notepad++, Flash , Dreamweaver etc..



www.prodex.org.in

Work

flow of server scripting language

www.prodex.org.in

Markup Languages
-

HTML



H
yper
T
ext
M
arkup
L
anguage


www.prodex.org.in

HTML Fundamentals


HTML tags are keywords (tag names) surrounded by

angle
brackets

like <html
>


HTML tags normally

come in pairs

like <b> and </b>


Clear text, case insensitive


Ignores white space


Comprised of tags <tag />


Open tags and closed tags




www.prodex.org.in

HTML
-

Fundamentals


Open tags


<name attributes/>


<hr/>, <br/>


<img src=“url” width=‘100px’ height=’60px’/>


Closed tags


<name attributes> stuff </name>


<b>text to be bolded</b>


<h1>level 1 heading text</h1>


Comments


< !
-

-

comment text
--

>

www.prodex.org.in

HTML


Fundamentals

Document Structure

Header

Body

< / HTML>

< HTML >

www.prodex.org.in

HTML


Fundamentals

Basic Structure

<html>

<head>

<title>
The title of your html page
</title>

<meta_tags/>

</head>

<body>


<!
-

-

your web page content and markup
-

-
>


</body>

</html>

www.prodex.org.in

HTML
-

Fundamentals

header

<body>


Hello world


</body>

www.prodex.org.in

HTML
-

Fundamentals

header

<body>


Praveen Kavuri

B
-
208

VS HALL,IIT KHARAGPUR



</body>


www.prodex.org.in

HTML
-

Fundamentals

header

<body>


<b>PRAVEEN KAVURI</b><br>

B
-
208<br>

VS HALL,IIT KHARAGPUR<br>



</body>


www.prodex.org.in

HTML
-

Fundamentals

header

<body>


<p style=“font
-
family:Tahoma;color:red;font
-
size:13px;”>


<b>PRAVEEN KAVURI</b><br>

B
-
208<br>

VS HALL,IIT KHARAGPUR<br>

</p>


</body>


www.prodex.org.in

HTML
-

Fundamentals

header

<body>


<p style=“font
-
family:Tahoma;color:red;font
-
size:13px;”>


<b>PRAVEEN KAVURI</b><br>

B
-
208<br>

VS HALL,IIT KHARAGPUR<br>

</p>

<img
src=‘http://graph.facebook.com/kavuri.praveen/picture’/>


<a href=‘http://dotlabs.com/our
-
team.html’>Read about me</a>

</body>


www.prodex.org.in

HTML
-

Fundamentals

Output:

www.prodex.org.in

HTML
-

Fundamentals

A
NCHORS (Hypertext Link)


<A href=“url” attributes>Displayed text </A>


Attributes



TITLE = "text"


TARGET = “iframe_name|window_name”

www.prodex.org.in

HTML


Fundamentals

Hypertext links

Click this link

opens
mywebpage.html
in the window / frame
named “
window2


<a href=“mywebpage.html” target=“window2” >Click this link </a>

window2

www.prodex.org.in

HTML


Fundamentals

Colors

color = “red” (Browser compatibility issues)

color = “#FF0000”

values vary from 00 to FF (hexadecimal)

0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f





Red

Green

Blue

#
FF

FF

FF

www.prodex.org.in

HTML


Fundamentals

Headings


Renders text as a heading, the rendering depending on
the level of heading selected. Headings should be
automatically spaced from the body text.

<h1>Heading 1 level text</h1>

<h2>Heading 2 level text</h2>

<h3>Heading 3 level text</h3>

<h4>Heading 4 level text</h4>

<h5>Heading 5 level text</h5>

<h6>Heading 6 level text</h6>

www.prodex.org.in

HTML


Fundamentals

Lists

Unordered list


<ul>


<li>apples</li>


<li>bananas</li>


<li>grapes</li>


<li>strawberries</li>

</ul>


Ordered list


<ol type=‘i’ start=‘2’>


<li>apples</li>


<li>bananas</li>


<li>grapes</li>


<li>strawberries</li>

</ol>

www.prodex.org.in

HTML


Fundamentals

Lists

Unordered list



apples


bananas


grapes


strawberries


Ordered list


II.
apples

III.
bananas

IV.
grapes

V.
strawberries


www.prodex.org.in

HTML


Fundamentals

Tables

<TABLE>



<TR>



<TH>Student</TH>



<TH>Grade</TH>


</TR>


<TR>



<TD>Tom</TD>



<TD>B+</TD>


</TR>


<TR>



<TD>Sue</TD>



<TD>A
-
</TD>


</TR>

</TABLE>


<p >Class Grades</p>

www.prodex.org.in

HTML


Fundamentals

Tables

www.prodex.org.in

HTML


Fundamentals

Tables


BORDER=
value



ALIGN=
left
|
right|center



CELLSPACING=
value



CELLPADDING=
value



WIDTH=
value
|
percent




www.prodex.org.in

HTML


Fundamentals

Tables

<TABLE BORDER=1 WIDTH=“50%" CELLPADDING=“6” CELLSPACING=“2”
ALIGN="RIGHT">



<TR>



<TH>Student</TH>



<TH>Grade</TH>


</TR>


<TR>



<TD>Tom</TD>



<TD>B+</TD>


</TR>


<TR>



<TD>Sue</TD>



<TD>A
-
</TD>


</TR>

</TABLE>


<p style=“float:right;”>Class Grades</p>

www.prodex.org.in

HTML


Fundamentals

Tables

Student

Grade

Tom

B
-

Sue

A+

Class Grades

www.prodex.org.in

HTML


Fundamentals

Tables

rowspan and colspan





www.prodex.org.in

HTML


Fundamentals

<TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 ALIGN="center">


<TR>



<TD
colspan=2

align='center'>




<font color="red"><b>Student Grades</b></font>



</TD>


</TR>



<TR>



<TD><b>Student</b></TD>



<TD><b>Grade</b></TD>


</TR>


<TR>



<TD>Tom</TD>



<TD
rowspan=2
>A</TD>


</TR>


<TR>



<TD>Sue</TD>


</TR>

</TABLE>

www.prodex.org.in

HTML


Fundamentals

Student Grades

Student

Grade

Tom


A

Sue

www.prodex.org.in

Screen Compatibility

1280 x 1024

1024 x 768

800 x 600

640 x 480

www.prodex.org.in

HTML


Fundamentals

Floating

Frames

<IFRAME attributes ></IFRAME>

Attributes


SRC=URL


HEIGHT= pixels | percent


WIDTH= pixels | percent


MARGINHEIGHT=pixels


MARGINWIDTH=pixels


FRAMEBORDER=0|1


www.prodex.org.in

HTML


Fundamentals

Floating

Frames

<IFRAME




NAME=“
frame_name




MARGINHEIGHT=“15%”


MARGINWIDTH=“60px”



WIDTH="75%"



HEIGHT=“150”



FRAMEBORDER=
0



SRC=
http://www.mysite/mypage.htm

>

</IFRAME>

www.prodex.org.in

HTML


Fundamentals

Hypertext links

<a href=“page.html” target=“blank” >Click this link </a>


Creates new window for the page


<a href=“page.html” target=“parent” >Click this link </a>


Opens page in the parent frame/wind of this frame/window


<a href=“page.html” target=“top” >Click this link </a>


Opens page in top most frame/window



www.prodex.org.in

HTML


Fundamentals

DIV


Allows you create a position
-
able block of content.

Content

positioned

within this

block

www.prodex.org.in

HTML


Fundamentals

DIV

<div attributes> content </div>


attributes


ID=“name”


STYLE = “style parameters re: CSS”

www.prodex.org.in

HTML


Fundamentals

DIV

< DIV ID=“fred”


STYLE = “POSITION:absolute|relative
;




VISIBILITY:visible:hidden
;




Z
-
INDEX:number
;




WIDTH:width in pixels
;




HEIGHT:height in pixels
;




TOP:pixels from top of page or block
;




LEFT:pixels from left edge of page or block
;




PADDING:margin in pixels
;




other style attributes
;



>


content

</DIV>

www.prodex.org.in

HTML


Fundamentals

DIV

www.prodex.org.in

HTML


Fundamentals

DIV

<div style="position:absolute; left:
100px
; top:
100px
;
width:
100px
; height:
100px
; background
-
color:#ffffff; ">


www.prodex.org.in

CASCADING STYLE SHEETS(CSS)

CSS can be added to HTML in the following ways
:


Inline
-

using the style

attribute

in HTML
elements


Internal
-

using the <style>

element

in the <head> section


External
-

using an external CSS

file


www.prodex.org.in

CASCADING STYLE SHEETS(CSS)

Inline css

<!DOCTYPE html>

<html>


<body style=“ background
-
color: yellow; ”>

<p style=“ color: blue; ”>This is a paragraph.</p>

</body>


</html>

www.prodex.org.in

CASCADING STYLE SHEETS

<!DOCTYPE html>

<html>

<head>

<style>

body

{

background
-
color: yellow;

}

P

{

color: blue;

}

</style>

</head>

<body

<p>This is a paragraph.</p>

</body>

</html>


www.prodex.org.in

CASCADING STYLE SHEETS

body

{

background
-
color: yellow;

}

P

{

color: blue;

}


www.prodex.org.in

CASCADING STYLE SHEETS

<!DOCTYPE html>

<html>

<head>

<link
rel
="
stylesheet
" type="text/
css
"
href
="style.css
" />

</head>

<body

<p>This is a paragraph.</p>

</body>

</html>



www.prodex.org.in

CASCADING STYLE SHEETS

Output

www.prodex.org.in

CSS Box model


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


The CSS box model is
essentially a box that
wraps around HTML
elements, and it consists
of: margins, borders,
padding, and the actual
content.

www.prodex.org.in

Box model explained


Margin

-

Clears an area around the border. The margin does
not have a background color, it is completely transparent


margin:25px 50px 75px 100px;

top margin is 25px

right margin is 50px

bottom margin is 75px

left margin is 100px



Padding

-

Clears an area around the content. The padding is
affected by the background color of the box.


Syntax for padding is same as margin


www.prodex.org.in

Box model explained


Border

-

A border that goes around the padding and content.
The border is affected by the background color of the box

Syntax:

border:5px
solid red;


border
-
width


border
-
style (
required)

Solid / Dotted / Dashed / Groove / Ridge / Double / inset / Outset


border
-
color



Content

-

The content of the box, where text and images
appear



www.prodex.org.in

Conclusion


This is just a taste what basically web design means


You can always learn more using the references we provide in
the last slide.


As a great man once said


www.prodex.org.in

Resources

http://www.w3schools.com/


HTML Tutorials


Learn HTML

Learn XHTML

Learn CSS

Learn TCP/IP



Browser Scripting


Learn JavaScript

Learn DHTML

Learn VBScript

Learn HTML DOM

Learn WMLScript




Server Scripting


Learn SQL

Learn ASP

Learn ADO

Learn PHP




XML Tutorials


Learn XML

Learn XSL

Learn XSLT

Learn XSL
-
FO

Learn XPath

Learn XQuery

Learn XLink

Learn XPointer

Learn DTD

Learn Schema

Learn XML DOM

Learn XForms

Learn SOAP

Learn WSDL

Learn RDF

Learn RSS

Learn WAP






.
NET (dotnet)


.NET Microsoft

.NET ASP

.NET Mobile



Multimedia


Learn Media

Learn SMIL

Learn SVG

Learn Flash



Web Building


Web Building

Web W3C

Web Browsers

Web Quality

Web Semantic

Web Careers

Web Hosting

Web Certification


www.prodex.org.in