workshop on web development by praveen kavuri, d rajeev reddy
TRANSCRIPT
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
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
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
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
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
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
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
HTML - Fundamentalsheader<body>
<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
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><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
HTML – FundamentalsTables
ww
w.p
rod
ex.o
rg.i
n
HTML – FundamentalsTables
• BORDER=value
• ALIGN=left|right|center
• CELLSPACING=value
• CELLPADDING=value
• WIDTH=value|percent ww
w.p
rod
ex.o
rg.i
n
HTML – FundamentalsTables
<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
HTML – FundamentalsTables
Student Grade
Tom B-
Sue A+
Class Grades
ww
w.p
rod
ex.o
rg.i
n
HTML – FundamentalsTables
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
HTML – FundamentalsDIV
<div attributes> content </div>
attributes• ID=“name”• STYLE = “style parameters re: CSS”
ww
w.p
rod
ex.o
rg.i
n
HTML – FundamentalsDIV
< 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
HTML – FundamentalsDIV
ww
w.p
rod
ex.o
rg.i
n
HTML – FundamentalsDIV
<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