Workshop on Web Development By Praveen Kavuri, D Rajeev Reddy.

Workshop on Web DevelopmentByPraveen 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. w

ww

.pro

dex

.org

.in

Web Components• Clients and Servers• Internet Service Providers• Web Site Hosting Services• Domains Names, URL’s and Ips

ww

w.p

rod

ex.o

rg.i

n

Clients & ServersClients (Browser)

• Google Chrome• Internet Explorer• Mozilla Firefox• Opera• Safari

Servers• Apache• Microsoft• Netscape• zeus• AOLserver• AV• JavaWebServer• Oracle

ww

w.p

rod

ex.o

rg.i

n


ww

w.p

rod

ex.o

rg.i

n

Internet Service Providers Connect Clients to the Internet

• Phone Company• AOL• Earthlink• Verizone• NetZero

• Basic internet connection

• Dialup/DSL/Cable/Sat

ww

w.p

rod

ex.o

rg.i

n


ww

w.p

rod

ex.o

rg.i

n

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

ww

w.p

rod

ex.

org

.in


ww

w.p

rod

ex.o

rg.i

n

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

ww

w.p

rod

ex.o

rg.i

n

Creating a Web Site

1. Choose a domain name2. Register with a Registrar3. Choose a hosting service4. Create web content5. Store (publish) onto hosting server (FTP)6. Submit new site to search engines

ww

w.p

rod

ex.o

rg.i

n

Creating your Web SiteTechnologies & 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..

ww

w.p

rod

ex.o

rg.i

n

Work flow of server scripting language

ww

w.p

rod

ex.o

rg.i

n

Markup Languages - HTML

•Hyper Text Markup Language

ww

w.p

rod

ex.o

rg.i

n

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

ww

w.p

rod

ex.o

rg.i

n

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 -- >

ww

w.p

rod

ex.o

rg.i

n

HTML – FundamentalsDocument Structure

Header

Body

< / HTML>

< HTML >

ww

w.p

rod

ex.o

rg.i

n

HTML – FundamentalsBasic Structure

<html><head>

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

</head><body>

<! - - your web page content and markup - ->

</body></html>

ww

w.p

rod

ex.o

rg.i

n

HTML - Fundamentals

header<body>

Hello world

</body>

ww

w.p

rod

ex.o

rg.i

n

HTML - Fundamentalsheader<body>

Praveen KavuriB-208VS HALL,IIT KHARAGPUR

</body>

ww

w.p

rod

ex.o

rg.i

n


<b>PRAVEEN KAVURI</b><br>B-208<br>VS HALL,IIT KHARAGPUR<br>

</body>

ww

w.p

rod

ex.o

rg.i

n

HTML - Fundamentalsheader

<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>

ww

w.p

rod

ex.o

rg.i

n


<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>

ww

w.p

rod

ex.o

rg.i

n

HTML - FundamentalsOutput:

ww

w.p

rod

ex.o

rg.i

n

HTML - Fundamentals

ANCHORS (Hypertext Link)

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

Attributes • TITLE = "text" • TARGET = “iframe_name|window_name”

ww

w.p

rod

ex.o

rg.i

n

HTML – FundamentalsHypertext links

Click this link

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

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

window2

ww

w.p

rod

ex.o

rg.i

n

HTML – FundamentalsColors

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

ww

w.p

rod

ex.o

rg.i

n

HTML – FundamentalsHeadings

• 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>

ww

w.p

rod

ex.o

rg.i

n

HTML – FundamentalsLists

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>

ww

w.p

rod

ex.o

rg.i

n

HTML – FundamentalsLists

Unordered list

• apples• bananas• grapes• strawberries

Ordered list

II. applesIII. bananasIV. grapesV. strawberries

ww

w.p

rod

ex.o

rg.i

n

HTML – FundamentalsTables

<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>

ww

w.p

rod

ex.o

rg.i

n


ww

w.p

rod

ex.o

rg.i

n


• BORDER=value

• ALIGN=left|right|center

• CELLSPACING=value

• CELLPADDING=value

• WIDTH=value|percent ww

w.p

rod

ex.o

rg.i

n


<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>

ww

w.p

rod

ex.o

rg.i

n


Student Grade

Tom B-

Sue A+

Class Grades

ww

w.p

rod

ex.o

rg.i

n


rowspan and colspan

ww

w.p

rod

ex.o

rg.i

n

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>

ww

w.p

rod

ex.o

rg.i

n

HTML – Fundamentals

Student Grades

Student Grade

TomA

Sue

ww

w.p

rod

ex.o

rg.i

n

Screen Compatibility1280 x 1024

1024 x 768

800 x 600

640 x 480

ww

w.p

rod

ex.o

rg.i

n

HTML – FundamentalsFloating Frames

<IFRAME attributes ></IFRAME>

Attributes• SRC=URL• HEIGHT= pixels | percent• WIDTH= pixels | percent• MARGINHEIGHT=pixels• MARGINWIDTH=pixels• FRAMEBORDER=0|1 w

ww

.pro

dex

.org

.in

HTML – FundamentalsFloating Frames

<IFRAME NAME=“frame_name”MARGINHEIGHT=“15%”

MARGINWIDTH=“60px”WIDTH="75%" HEIGHT=“150” FRAMEBORDER=0SRC=http://www.mysite/mypage.htm >

</IFRAME> ww

w.p

rod

ex.o

rg.i

n

HTML – FundamentalsHypertext 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

ww

w.p

rod

ex.o

rg.i

n

HTML – FundamentalsDIV

• Allows you create a position-able block of content.

Content

positioned

within this

block

ww

w.p

rod

ex.o

rg.i

n


<div attributes> content </div>

attributes• ID=“name”• STYLE = “style parameters re: CSS”

ww

w.p

rod

ex.o

rg.i

n


< 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>

ww

w.p

rod

ex.o

rg.i

n


ww

w.p

rod

ex.o

rg.i

n


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

ww

w.p

rod

ex.o

rg.i

n

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

ww

w.p

rod

ex.o

rg.i

n

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>

ww

w.p

rod

ex.o

rg.i

n

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>

ww

w.p

rod

ex.o

rg.i

n

CASCADING STYLE SHEETS

body{background-color: yellow;}P{color: blue;}

ww

w.p

rod

ex.o

rg.i

n

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>

ww

w.p

rod

ex.o

rg.i

n

CASCADING STYLE SHEETS

Output

ww

w.p

rod

ex.o

rg.i

n

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. w

ww

.pro

dex

.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 25pxright margin is 50pxbottom margin is 75pxleft 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

ww

w.p

rod

ex.o

rg.i

n

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

ww

w.p

rod

ex.o

rg.i

n

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

ww

w.p

rod

ex.o

rg.i

n

Resourceshttp://www.w3schools.com/

• HTML Tutorials Learn HTMLLearn XHTMLLearn CSSLearn TCP/IP

• Browser Scripting Learn JavaScriptLearn DHTMLLearn VBScriptLearn HTML DOMLearn WMLScript

• Server Scripting Learn SQLLearn ASPLearn ADOLearn PHP

• XML Tutorials Learn XMLLearn XSLLearn XSLTLearn XSL-FOLearn XPathLearn XQueryLearn XLinkLearn XPointerLearn DTDLearn SchemaLearn XML DOMLearn XFormsLearn SOAPLearn WSDLLearn RDFLearn RSSLearn WAP

.NET (dotnet) .NET Microsoft.NET ASP.NET Mobile

Multimedia Learn MediaLearn SMILLearn SVGLearn Flash

Web Building Web BuildingWeb W3CWeb BrowsersWeb QualityWeb SemanticWeb CareersWeb HostingWeb Certification

ww

w.p

rod

ex.o

rg.i

n

Workshop on Web Development By Praveen Kavuri, D Rajeev Reddy.

Documents

web hosting services

web components clients

web sites

web development

web content

web creation

html fundamentals html

internet routers