UNIT II WEB PAGE BASICS & HTML Web 1.0 (Lecture) Content for users to access it brochure web One way traffic WEB 2.0 (Conversion) Users can organize, share & update Two way traffic , Social media (MySpace, Second life) You tube – site provides the platform Key technology to create web 2.0 application RIA (Rich Internet Application) – Desktop application(word processor) Tools in building RIA Abode flex Dojo Silver light
RIA Social Networking Sites First Gen web appltn GUI + Application logic (Web server) Second Gen web appltn GUI & Application Logic has been separated in Web server RIA GUI(browser) + Application logic (server – more CPU cycles) Developed – HTML 5 + Java Script + CSS 3 RSS feeds
COLLABORATION TOOLS 2/more work together to achieve a common goal Non-technological Flipchart post-it notes White board (Interactive White Board) Online collaboration tool Online calendars (Google calendar)
Website vs Webserver Internet vs Intranet Web page – simple document displayed by browser Web site – collection of web pages Web server – host the web site according to the user request Search engine – web site which loads the web page from other web sites Internet – wide network of computers Intranet – specific group of people
HTML BASICS <html> <head> <title> Test page </title> <body> <h1> Internet Programming </h1> <p> This is a sample web page in testing HTML commands </p> </body> </html>
<span> Applying styles to inline elements Small chunk of HTML inside a line Example <p>The <span style="color:green">span tag</span> and the <span style="color:purple">div tag</span> are *OK* man </p>
<div> Large sections The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS. Example: <html> <body> <p>This is some text.</p> <div style="color:#0000FF"> <h3>This is a heading in a div element</h3> <p>This is some text in a div element.</p> </div> </body> </html>
<table> <html> <body> <table bgcolor="gold" border="1" align="center" cellpadding="10px" cellspacing="10px" frame="void"> <tr> <th>Course</th> <th>Faculty</th> </tr> <td> IP </td> <td> Prof.M.Shobana </td> <td> PCD </td> <td> Prof.I.Kala </td> </table> </body> </html>
LIST UNORDERED LIST ORDERED LIST <html> <body> <ul type="square"> (disc/circle) <li>PCD</li> <li>UI</li> <li>AI</li> </ul> </body> </html> ORDERED LIST
Forms
Use 4 straight lines and divide the circle into 11 parts
Form with validation
Frames Marquee <html> <body> <marquee width=100 height=100 bgcolor="yellow" direction="up" behavior="slide" scrolldelay="100" hspace=50 vspace=50 loop="3"> <a href="www.google.com">Google</a><br> <a href="www.snsct.org">SNSCT</a> </marquee> </body> </html>
HTML 5.0 (list,table,image,forms,frames) ADDED ELEMENTS Header & Footer nav Section & Article Main & aside Canvas Menu & figure Audio & video Time REMOVED ELEMENTS B Font Frame Center Big Frameset & frame
iframe <html> <iframe src="sampl.html" style="border:none;" name="a"></iframe> <iframe src="pswdvalidate.html"></iframe> <p><a href="http://www.w3schools.com" target="a">W3Schools.com</a></p> </html> table
HTML 5.0 - forms Forms(14 attributes) placeholder autocomplete required pattern list multiple novalidate formnovalidate form formaction formenctype formmethod formtarget
HTML 5.0 - <header> & <footer> <html> <head> <title>sample</title></head> <body> <header> <h1>HTML5 Document Structure Example</h1> <hr> <p>This page should be tried in safari, chrome or Mozila.</p> </header> <P> HELLO</P> <footer> <p>Created by Tutorials Point</p> </footer> </body> </html> Semantic Elements <header> <footer> <article> <section> container for introductory content. Sections heading
HTML 5.0 - <header> Output
HTML 5.0 figure Section (chapter) Article ( forum post/magazine) Main (content) Aside (side bar) –quotes Ex: the sites which I refer <html> <article> <p>Disney<em>the little mermaid</em> was first released - 1989</p> <nav> <ahref="www.google.com">Disney</a> <aside> <p>the movie earned $80 million during its intial release </p> </aside> </article> </html>
101-102=1 4_8 1234567 = 100
It takes 1629 digits to number the pages of a book It takes 1629 digits to number the pages of a book. How many pages are there in the book.