workshop on web development by praveen kavuri, d rajeev reddy

Workshop on Web DevelopmentByPraveen Kavuri, D Rajeev Reddy

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

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

Clients & ServersClients (Browser)

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

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

Internet Service Providers Connect Clients to the Internet

• Phone Company• AOL• Earthlink• Verizone• NetZero

• Basic internet connection

• Dialup/DSL/Cable/Sat

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

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

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

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

Work flow of server scripting language

Markup Languages - HTML

•Hyper Text Markup Language

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

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

HTML – FundamentalsDocument Structure

Header

< / HTML>

< HTML >

HTML – FundamentalsBasic Structure

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

</head><body>

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

</body></html>

HTML - Fundamentals

header<body>

Hello world

</body>

HTML - Fundamentalsheader<body>

Praveen KavuriB-208VS HALL,IIT KHARAGPUR

</body>

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

</body>

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>

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

HTML - FundamentalsOutput:

HTML - Fundamentals

ANCHORS (Hypertext Link)

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

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

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

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

#FF FF FF

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>

HTML – FundamentalsLists

Unordered list

<ul><li>apples</li><li>bananas</li><li>grapes</li><li>strawberries</li>

Ordered list

<ol type=‘i’ start=‘2’><li>apples</li><li>bananas</li><li>grapes</li><li>strawberries</li>

HTML – FundamentalsLists

Unordered list

• apples• bananas• grapes• strawberries

Ordered list

II. applesIII. bananasIV. grapesV. strawberries

HTML – FundamentalsTables

<TABLE><TR><TH>Student</TH><TH>Grade</TH>

</TR><TR>

</TR><TR>

</TR></TABLE> <p >Class Grades</p>

• BORDER=value

• ALIGN=left|right|center

• CELLSPACING=value

• CELLPADDING=value

• WIDTH=value|percent ww

<TR><TH>Student</TH><TH>Grade</TH>

</TR><TR>

</TR><TR>

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

Student Grade

Tom B-

Sue A+

Class Grades

rowspan and colspan

HTML – Fundamentals<TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 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>

</TR><TR>

</TABLE>

HTML – Fundamentals

Student Grades

Student Grade

Screen Compatibility1280 x 1024

1024 x 768

800 x 600

640 x 480

HTML – FundamentalsFloating Frames

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

HTML – FundamentalsFloating Frames

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

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

</IFRAME> ww

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

HTML – FundamentalsDIV

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

Content

positioned

within this

<div attributes> content </div>

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

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

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

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>

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>

CASCADING STYLE SHEETS

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

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>

CASCADING STYLE SHEETS

Output

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

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

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

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

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

workshop on web development by praveen kavuri, d rajeev reddy

web hosting services

web components clients

web sites

web development

web content

web creation

html fundamentals html

internet routers

Documents

business praveen

rajeev gandhi

praveen granorolo

praveen ntpc

rajeev yadav.pptx

praveen thesis

praveen cv

praveen yadav.docx

jaya rajeev

rajeev slides

praveen thakur kpmg

praveen durai

111 praveen

praveen chhikara - wordpress.com · praveen chhikara....

praveen chhikara - wordpress.com · 2019-03-23 · praveen...

praveen presentation

iia praveen

rajeev chandrasekhar

rajeev chadrashekar

praveen chhikara · praveen chhikara. praveen chhikara....