Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Day1 Day1 Presentation Transcript

  • Web-Tech Workshop (Beginner)
  • Day 1
  • Content: • • • • • • • • Why this Workshop ? Basic Terminologies Web Technologies HTML 4.0 HTML 5.0 CSS 2.0 CSS 3.0 Live Examples
  • Why this workshop? • Web Technology is a predominant field of Information Technology/Computer Science and has an ever growing scope. • Internet is becoming more and more common and people like to spend time on the internet. • Very interesting field. • No costs involved in experimentation process like robotics. • Lots of IDE’s(Integrated Development Environments) available to help. Example: Microsoft Web Expression, Adobe Dreamweaver, Microsoft Visual Studio, Netbeans, Eclipse, Adobe Photoshop etc. • Why Adobe Photoshop?? • What Web sites can do at present?? • They can supply enormous amount of information, used for advertising, promoting events, online reservations, e-commerce, managing colleges, online banking, etc. • What can be a possible future of websites? • May be sites working as smooth as windows applications.
  • Terminology Web: The World Wide Web, abbreviated as WWW and commonly known as the Web, is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them via hyperlinks. Internet: The Internet is a global system of interconnected computer networks that was enabled by the standard Internet Protocol Suite (TCP/IP) to eventually serve billions of users worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies.
  • Terminology cont… Technology: Technology is the usage and knowledge of tools, techniques, crafts, systems or methods of organization in order to solve a problem or serve some purpose. Client/Browser Server URL Types of web pages: Static page Active Page Dynamic Page
  • What is web designing Web Designing is an art. First thing you need is imagination, then comes the use of technologies. First of all decide the layout of your web page. Then you have all the technologies available to make it visible on a web page.
  • Special tip for those who do not have command over programming Try to understand code and modify it according to your requirements. Your goal is to achieve a functionality not to make each and every thing on your own. Note: You need to use your brain more than your hands in this field because writing code which you already have and understand very well is a waste of time.
  • Client Server Architecture (static page) Client(Browser) Server Http request(abc.html) Http response(abc.html) Browser can interpret HTML only. Fetches the static page on disk
  • Client Server Architecture (dynamic page) Client(Browser) Server 1.Http request(abc.aspx) 6.Http response(Generated HTML) Browser can interpret HTML only (No dynamic code is sent to the client) 4.May refer to external sources such as web services or databases according to script. 5.HTML is generated 2.Locates the page on disk 3.Executes the scripts on runtime engine.
  • Web Technologies HTML CSS JavaScript(Requires programming knowledge) XML Flash XML Flash Ajax Server side scripting JSP  PHP
  • What is HTML? This is the very basic technology without which websites cannot be created. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages. Browser understands HTML only.
  • HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets(like <html>), within the web page content. HTML tags normally come in pairs like <h1> and </h1>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). Doctype declaration is not necessary in an html document but it tells the browser to follow HTML version specified.
  •  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:  Most popular web browsers      Mozilla Firefox Google Chrome Opera Apple Safari Internet Explorer (worst support for the best technologies)
  • Structure of HTML Document •The text between <html> and </html> describes the web page •The text between <head> and </head> is not displayed on the webpage. •The text between <body> and </body> is the visible page content •The text between <h1> and </h1> is displayed as a heading •The text between <p> and </p> is displayed as a paragraph <html> <head> <title>My Webpage</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  • HTML headings <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>
  • Paragraphs <html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>
  • Anchor <html> <body> <a href=""> This is a link</a> </body> </html> On clicking this link you can navigate to a new page or even set any software or image on download. It all depends on the href attribute. You can even place an image within the anchor tag to make link on the image.
  • Images <html> <body> <img src="w3schools.jpg" width="104" height="142" /> </body> </html>
  • Comments <html> <body> <!— I do not want to show this text on my webpage!> <img src="w3schools.jpg" width="104" height="142" /> </body> </html>
  • Tags and attributes Think of tag as an object and attribute as one of its property it becomes really easy to understand. As an example consider a computer and a car. Car will have attributes such as colour, horse power , mileage etc. Whereas a computer will have attributes like colour, Hard Disk size, ram size etc. We can see that some attributes are unique to an object and some are not. Now just map this concept to what we have just studied. Consider two tags we have just studied <a> and <img>. <a> has attributes such as href ,id,name etc. <img> has atributes such as src,id,name,height,width etc.
  • Tables <html> <body> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> </tr> </table></body> </html>
  • Lists An ordered list: 1.The first list item 2.The second list item 3.The third list item An unordered list: •List item •List item •List item
  • Ordered List <html> <body> <h4>An Ordered List:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
  • Un-ordered List <html> <body> <h4>An Un-ordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
  • HTML Forms HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. <html> <body> <form action=""> <input type="radio" name=“gender" value="male" /> Male<br /> <input type="radio" name=“gender" value="female" /> Female </form> <p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p> </body> </html>
  • CheckBox <html> <body> <form action=""> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form> </body> </html>
  • Drop Down List <html> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
  • Button <html> <body> <form action=""> <input type="button" value="Hello world!"> </form> </body> </html>
  • Marquee tag <html> <body> <marquee direction="left" onmouseover="stop()" onmouseout="start()">This is moving text</marquee> <marquee direction="right">This is moving text</marquee> <marquee direction="up">This is moving text</marquee> <marquee direction="down">This is moving text</marquee> </body> </html>
  • Frameset <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html>
  • IFrame <html> <body> <iframe src="demo_iframe.htm" width="200" height="200"></iframe> <p>Some older browsers don't support iframes.</p> <p>If they don't, the iframe will not be visible.</p> </body> </html>
  • Divison Demonstration using tables, forms and input buttons Hosting on free domain 
  • New features of HTML 5.0
  • Video support statistics Format Ogg MPEG 4 WebM IE No No No Firefox 3.5+ No No Opera 10.5+ No 10.6+ Chrome 5.0+ 5.0+ 6.0+ Safari No 3.0+ No
  • <!DOCTYPE HTML> <html> <body> <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video> </body> </html>
  • Attribute Value audio muted autoplay autoplay controls controls height loop pixels loop poster url preload preload src width url pixels Description Defining the default state of the audio. Currently, only "muted" is allowed If present, then the video will start playing as soon as it is ready If present, controls will be displayed, such as a play button Sets the height of the video player If present, the video will start over again, every time it is finished Specifies the URL of an image representing the video If present, the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present The URL of the video to play Sets the width of the video player
  • Audio Formats Format Ogg Vorbis MP3 Wav IE 8 No No No Firefox 3.5 Yes No Yes Opera 10.5 Yes No Yes Chrome 3.0 Yes Yes No Safari 3.0 No Yes Yes
  • <!DOCTYPE HTML> <html> <body> <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> </body> </html>
  • Attribute Value autoplay autoplay controls controls loop loop preload preload src url Description Specifies that the audio will start playing as soon as it is ready. Specifies that controls will be displayed, such as a play button. Specifies that the audio will start playing again (looping) when it reaches the end Specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present. Specifies the URL of the audio to play
  • Canvas(Gradient Example) <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#020000"); grd.addColorStop(1,"#AAFF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); </script> </body> </html>
  • Canvas(Background image) <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="img_flwr.png" cxt.drawImage(img,0,0); </script> </body> </html>
  • Web Storage <!DOCTYPE HTML> <html> <body> <script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits: " + localStorage.pagecount + " time(s)."); </script> <p>Refresh the page to see the counter increase.</p> <p>Close the browser window, and try again, and the counter will continue.</p> </body> </html>
  • Session Storage <!DOCTYPE HTML> <html> <body> <script type="text/javascript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits " + sessionStorage.pagecount + " time(s) this session."); </script> <p>Refresh the page to see the counter increase.</p> <p>Close the browser window, and try again, and the counter has been reset.</p> </body> </html>
  • New input types Input type email url number range Date pickers search color IE No No No No No No No Firefox No No No No No No No Opera 9.0 9.0 9.0 9.0 9.0 11.0 11.0 Chrome No No 7.0 4.0 No No No Safari No No No 4.0 No No No
  • Date Picker <!DOCTYPE HTML> <html> <body> <form action="demo_form.asp" method="get"> Date: <input type="date" name="user_date" /> <input type="submit" /> </form> </body> </html>
  • Keygen(Secure Data Sending) <!DOCTYPE HTML> <html> <body> <form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> </body> </html>
  • Autocomplete <!DOCTYPE HTML> <html> <body> <form action="demo_form.asp" method="get" autocomplete="on"> First name:<input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br /> <input type="submit" /> </form> <p>Fill in and submit the form, then reload the page to see how autocomplete works.</p> <p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field.</p> </body> </html>
  • Required field <!DOCTYPE HTML> <html> <body> <form action="demo_form.asp" method="get"> Name: <input type="text" name="usr_name" required="required" /> <input type="submit" /> </form> </body> </html>
  • Spelling Check and editing <!DOCTYPE HTML> <html> <body> <p contenteditable="true" spellcheck="true">This is a praggagraph. It is editable. Try to change this text.</p> </body> </html>
  • Embed flash into your webpage <!DOCTYPE HTML> <html> <body> <embed src="helloworld.swf" height="500px" width="500px" /> </body> </html>
  • Meter <!DOCTYPE HTML> <html> <body> <meter value="2" min="0" max="10">2 out of 10</meter><br /> <meter value="0.6">60%</meter> </body> </html>
  • Hidden attribute <!DOCTYPE HTML> <html> <body> <h1>Hidden attribute example</h1> <p hidden="hidden">This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
  • css
  • What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added to HTML 4.0 to solve a problem  External Style Sheets can save a lot of work  External Style Sheets are stored in CSS files
  • CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.
  • Three Ways to Insert CSS There are three ways of inserting a style sheet:  External style sheet  Internal style sheet  Inline style External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
  • Three Ways to Insert CSS An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below: hr {color:sienna;} p {margin-left:20px;} body {backgroundimage:url("images/back40.gif");}
  • Three Ways to Insert CSS Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this: <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {backgroundimage:url("images/back40.gif");} </style> </head>
  • Three Ways to Insert CSS Inline Styles An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph. <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
  • All CSS Background Properties Property background background-attachment background-color background-image background-position background-repeat Description Values Sets all the background properties in one declaration CSS background-color background-image background-repeat backgroundattachment background-position inherit Sets whether a background image is fixed or scrolls scroll with the rest of the page fixed inherit Sets the background color of an element color-rgb color-hex color-name transparent inherit Sets the background image for an element url(URL) none inherit Sets the starting position of a background image left top left center left bottom right top right center right bottom center top center center inherit 1 Sets if/how a background image will be repeated 1 repeat repeat-x repeat-y no-repeat inherit 1 1 1 1
  • Grouping Selectors In style sheets there are often elements with the same style. h1 { color:green; } h2 { color:green; } p { color:green; } To minimize the code, you can group selectors. Separate each selector with a comma. In the example below we have grouped the selectors from the code above: Example h1,h2,p {color:green;}
  • Navigation Bars A navigation bar needs standard HTML as a base. In our examples we will build the navigation bar from a standard HTML list. A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense: Example <ul> <li><a <li><a <li><a <li><a </ul> href="default.asp">Home</a></li> href="news.asp">News</a></li> href="contact.asp">Contact</a></li> href="about.asp">About</a></li>
  • CSS 3.0 New Features
  •  Rotate division or other elements by degrees  Shadow effect  Border Image  Text shadow  Word Wrapping  No more restrictions on font
  •  Animations  Multiple Columns  Transition effect on div