SlideShare une entreprise Scribd logo
1  sur  22
[object Object],[object Object],[object Object],[object Object],Frames and forms
More than html ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Frames ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Frame basics ,[object Object],<frameset cols=&quot;33%,50%,17%&quot; rows=&quot;*,200&quot;> <frame src=&quot;frame1.html&quot;> <frame src=&quot;frame2.html&quot;> <frame src=&quot;frame3.gif&quot;> <frame name=&quot;area4&quot; src=&quot;frame4.html&quot;> <frame name=&quot;area5&quot; src=&quot;frame5.html&quot;> <frame src=&quot;frame6.html&quot;> </frameset> 1 2 3 4 5 6 200 33 17 *
Frame Targets <frameset cols=&quot;33%,50%,17%&quot; rows=&quot;*,200&quot;> ... <frame  name=&quot;area4&quot;  src=&quot;frame4.html&quot;> <frame name=&quot;area5&quot; src=&quot;frame5.html&quot;> </frameset> <P>Changing Area 4 to  <ul> <li><A href=&quot;Great.html&quot;  target=&quot;area4&quot; >Great</A>, or back to</li> <li><A href=&quot;frame4.html&quot;  target=&quot;area4&quot; >Area 4</A></li> </ul> ... </P> frameset.html frame6.html
Frame Targets ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Frame Appearance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Nested Frames ,[object Object],[object Object],[object Object],<frameset cols=&quot;33%,50%,17%&quot; rows=&quot;*,200&quot;> <frame src=''frame1.html''> <frameset cols=''*,* '' > <frame s name=&quot;area2-1&quot; src=&quot;frame2-1.html&quot;> <frame s name=&quot;area2-2&quot; src=&quot;frame2-2.html&quot;> </frameset> <frame name=&quot;area3&quot; src=&quot;frame3.html&quot;> <frame name=&quot;area4&quot; src=&quot;frame4.html&quot;> <frame name=&quot;area5&quot; src=&quot;frame5.html&quot;> <frame name=&quot;area6&quot; src=&quot;frame6.html&quot;> </frameset>
Frames - Good and Bad ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
When to use frames ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
User Input ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
User Input processing server client Get http://www.google.co.nz/search?hl=en&q=comp112&btnG=Google+Search&meta= hl=en& q=comp112& btnG=Google+Search& meta=
User Input server client Result <html> <head> <meta HTTP-EQUIV=&quot;content-type&quot; CONTENT=&quot;text/html; charset=UTF-8&quot;> <title>comp112 - Google Search</title> <style><!--
Server-Side Processing ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Client-Side processing ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Forms ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Example ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Types of input ,[object Object],< form  action=&quot;http://localhost/&quot;  method=&quot;get&quot; > <P> First name:  <input type=&quot;text&quot; name=&quot;firstname&quot;> <BR> Last name:  <input type=&quot;text&quot; name=&quot;lastname&quot;> <BR> email: < input type=&quot;text&quot; name=&quot;email&quot;> <BR> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;Male&quot;>  Male<BR> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;Female&quot;> Female </p> <p> <legend>Browsers You have used</legend><br>   <input name=&quot;check1&quot;  type=&quot;checkbox&quot;     value=&quot;Safari&quot; > Safari   <input name=&quot;check1&quot;  type=&quot;checkbox&quot;    value=&quot;Mozilla&quot; > Mozilla   <input name=&quot;check1&quot;  type=&quot;checkbox&quot;    value=&quot;IE&quot; > IE   <input name=&quot;check1&quot;  type=&quot;checkbox&quot;    value=&quot;Lynx&quot; > Lynx<br> <input type=&quot;submit&quot; value=&quot;Send&quot;> <input type=&quot;reset&quot;> </P> </form>
Types of input ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Get vs Post ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Processing ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Summary ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Contenu connexe

Tendances

Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010
Matthew Mobbs
 
Rey Bango - HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shimsRey Bango -  HTML5: polyfills and shims
Rey Bango - HTML5: polyfills and shims
StarTech Conference
 

Tendances (20)

Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010
 
Code This, Not That: 10 Do's and Don'ts For Learning HTML
Code This, Not That: 10 Do's and Don'ts For Learning HTMLCode This, Not That: 10 Do's and Don'ts For Learning HTML
Code This, Not That: 10 Do's and Don'ts For Learning HTML
 
Beginners guide-to-coding-updated
Beginners guide-to-coding-updatedBeginners guide-to-coding-updated
Beginners guide-to-coding-updated
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhi
 
Day1
Day1Day1
Day1
 
Web 2.0 = Accessibility 2.0?
Web 2.0 = Accessibility 2.0?Web 2.0 = Accessibility 2.0?
Web 2.0 = Accessibility 2.0?
 
WEB DESIGNING MODULE
WEB DESIGNING MODULEWEB DESIGNING MODULE
WEB DESIGNING MODULE
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
 
Html
HtmlHtml
Html
 
Blogging Is More Than An Online Diary
Blogging Is  More Than An  Online  DiaryBlogging Is  More Than An  Online  Diary
Blogging Is More Than An Online Diary
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohan
 
Html basics
Html basicsHtml basics
Html basics
 
HTML email best practices
HTML email best practicesHTML email best practices
HTML email best practices
 
Ruining The User Experience (The Rich Web Experience '07)
Ruining The User Experience (The Rich Web Experience '07)Ruining The User Experience (The Rich Web Experience '07)
Ruining The User Experience (The Rich Web Experience '07)
 
Introduction to Web Technology
Introduction to Web TechnologyIntroduction to Web Technology
Introduction to Web Technology
 
Ruining The User Experience (The Ajax Experience Boston 2007)
Ruining The User Experience (The Ajax Experience Boston 2007)Ruining The User Experience (The Ajax Experience Boston 2007)
Ruining The User Experience (The Ajax Experience Boston 2007)
 
Introduction to html fundamental concepts
Introduction to html fundamental conceptsIntroduction to html fundamental concepts
Introduction to html fundamental concepts
 
Intr To Html & Xhtml
Intr To Html & XhtmlIntr To Html & Xhtml
Intr To Html & Xhtml
 
Trello - University of St Andrews web team
Trello - University of St Andrews web teamTrello - University of St Andrews web team
Trello - University of St Andrews web team
 
Rey Bango - HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shimsRey Bango -  HTML5: polyfills and shims
Rey Bango - HTML5: polyfills and shims
 

En vedette (6)

Problem frames
Problem framesProblem frames
Problem frames
 
Lecture11 A Image
Lecture11 A ImageLecture11 A Image
Lecture11 A Image
 
Lecture 10 Image Format
Lecture 10  Image FormatLecture 10  Image Format
Lecture 10 Image Format
 
Lecture 11 B Security
Lecture 11 B SecurityLecture 11 B Security
Lecture 11 B Security
 
Bending
BendingBending
Bending
 
3.1 structure analysis and design note.
3.1 structure analysis and design note.3.1 structure analysis and design note.
3.1 structure analysis and design note.
 

Similaire à Lecture1 B Frames&Forms

What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from Austin
Lisa Adkins
 
Flex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 FinalFlex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 Final
ematrix
 
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITPLecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
yucefmerhi
 

Similaire à Lecture1 B Frames&Forms (20)

HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
 
KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from Austin
 
Flex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 FinalFlex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 Final
 
Intro Html
Intro HtmlIntro Html
Intro Html
 
Ajax ons2
Ajax ons2Ajax ons2
Ajax ons2
 
Quick Referance to WML
Quick Referance to WMLQuick Referance to WML
Quick Referance to WML
 
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAXJWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
 
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITPLecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
 
HTML5 with examples
HTML5 with examplesHTML5 with examples
HTML5 with examples
 
Html5
Html5Html5
Html5
 
Living in the Cloud: Hosting Data & Apps Using the Google Infrastructure
Living in the Cloud: Hosting Data & Apps Using the Google InfrastructureLiving in the Cloud: Hosting Data & Apps Using the Google Infrastructure
Living in the Cloud: Hosting Data & Apps Using the Google Infrastructure
 
Living in the Cloud: Hosting Data & Apps Using the Google Infrastructure
Living in the Cloud: Hosting Data & Apps Using the Google InfrastructureLiving in the Cloud: Hosting Data & Apps Using the Google Infrastructure
Living in the Cloud: Hosting Data & Apps Using the Google Infrastructure
 
YL Intro html
YL Intro htmlYL Intro html
YL Intro html
 
Mobile web with jQuery Mobile
Mobile web with jQuery MobileMobile web with jQuery Mobile
Mobile web with jQuery Mobile
 
Grddl In A Nutshell V1
Grddl In A Nutshell V1Grddl In A Nutshell V1
Grddl In A Nutshell V1
 
Html5
Html5Html5
Html5
 
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
 
DevDays09 Internet Explorer 8
DevDays09 Internet Explorer 8DevDays09 Internet Explorer 8
DevDays09 Internet Explorer 8
 

Plus de Sur College of Applied Sciences (6)

Lecture 8 Video
Lecture 8 VideoLecture 8 Video
Lecture 8 Video
 
Lecture 5 XML
Lecture 5  XMLLecture 5  XML
Lecture 5 XML
 
Lecture2 CSS 3
Lecture2   CSS 3Lecture2   CSS 3
Lecture2 CSS 3
 
Lecture2 CSS1
Lecture2  CSS1Lecture2  CSS1
Lecture2 CSS1
 
Navigation1 A
Navigation1 ANavigation1 A
Navigation1 A
 
Lecture 3 Javascript1
Lecture 3  Javascript1Lecture 3  Javascript1
Lecture 3 Javascript1
 

Dernier

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
AnaAcapella
 

Dernier (20)

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 

Lecture1 B Frames&Forms

  • 1.
  • 2.
  • 3.
  • 4.
  • 5. Frame Targets <frameset cols=&quot;33%,50%,17%&quot; rows=&quot;*,200&quot;> ... <frame name=&quot;area4&quot; src=&quot;frame4.html&quot;> <frame name=&quot;area5&quot; src=&quot;frame5.html&quot;> </frameset> <P>Changing Area 4 to <ul> <li><A href=&quot;Great.html&quot; target=&quot;area4&quot; >Great</A>, or back to</li> <li><A href=&quot;frame4.html&quot; target=&quot;area4&quot; >Area 4</A></li> </ul> ... </P> frameset.html frame6.html
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12. User Input processing server client Get http://www.google.co.nz/search?hl=en&q=comp112&btnG=Google+Search&meta= hl=en& q=comp112& btnG=Google+Search& meta=
  • 13. User Input server client Result <html> <head> <meta HTTP-EQUIV=&quot;content-type&quot; CONTENT=&quot;text/html; charset=UTF-8&quot;> <title>comp112 - Google Search</title> <style><!--
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.