Download presentation
Presentation is loading. Please wait.
1
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
2
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
3
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)
4
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
5
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>
6
<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>
7
<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>
8
<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>
9
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
10
Forms
11
Use 4 straight lines and divide the circle into 11 parts
13
Form with validation
14
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=" <a href=" </marquee> </body> </html>
15
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
16
iframe <html> <iframe src="sampl.html" style="border:none;" name="a"></iframe> <iframe src="pswdvalidate.html"></iframe> <p><a href=" target="a">W3Schools.com</a></p> </html> table
17
HTML 5.0 - forms Forms(14 attributes) placeholder autocomplete
required pattern list multiple novalidate formnovalidate form formaction formenctype formmethod formtarget
18
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
19
HTML <header> Output
20
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 </p> <nav> <ahref=" <aside> <p>the movie earned $80 million during its intial release </p> </aside> </article> </html>
21
=1 4_ = 100
22
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.
Similar presentations
