尊敬的 微信汇率:1円 ≈ 0.046166 元 支付宝汇率:1円 ≈ 0.046257元 [退出登录]
SlideShare a Scribd company logo
Communications Lab :: Web Lecture 2: HTML and Forms
Don't Forget! ,[object Object]
HTML Pages ,[object Object],[object Object]
Today's Class ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Forms They are used everywhere. Login, email, search bar - these are just a few examples.
Forms - more examples
Forms ,[object Object],[object Object],[object Object],[object Object],[object Object]
Forms
Forms - Input type text ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Forms - Labels ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Forms - Input type radio ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Forms - Input type checkbox ,[object Object],[object Object],[object Object],[object Object],[object Object]
Forms - Input submit button ,[object Object],[object Object],[object Object]
Forms - All together ,[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]
Forms
Forms: Demo! Let's make some rectangles.
Why doesn't it do anything? We need the server side!
Client and Server ,[object Object],[object Object],[object Object]
Why do we need the server? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Method: GET and POST ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
DIV and Span ,[object Object],[object Object],[object Object],[object Object]
DIV and Span ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS ,[object Object],[object Object],[object Object]
CSS ,[object Object],[object Object]
CSS is on the Client
How do I add CSS? ,[object Object],[object Object],[object Object],[object Object],[object Object]
Inline CSS ,[object Object],[object Object]
Embedded CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
External CSS ,[object Object],[object Object],[object Object],[object Object]
CSS Selectors, Properties and Values ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Selectors  ,[object Object],[object Object],[object Object],[object Object]
HTML Tag Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Class and ID Attributes ,[object Object],[object Object],[object Object],[object Object]
IDs and Classes in CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Position Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Position Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Position Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Grouping Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Pseudo-classes ,[object Object],[object Object],[object Object],[object Object]
Properties ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Properties and Their Values ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Font Color ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Fonts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Font Shorthand ,[object Object],[object Object],[object Object]
Lengths, Units and Percentages ,[object Object],[object Object],[object Object],[object Object],[object Object]
Background  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Dimensions ,[object Object],[object Object],[object Object],[object Object]
Border ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Trying out colors and styles ,[object Object],[object Object],[object Object]
How Does the Style  Cascade ? ,[object Object],[object Object],[object Object],[object Object]
How Does the Style  Cascade ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Inheritance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Box Model ,[object Object],[object Object],[object Object]
Box Model ,[object Object],[object Object],[object Object],[object Object]
Margin and Padding ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Display ,[object Object],[object Object],[object Object],[object Object]
Position ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Alignment ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Floating ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Assignment for Next Week ,[object Object],[object Object],[object Object]
Next Week... ,[object Object],[object Object],[object Object]

More Related Content

What's hot

Html
HtmlHtml
Html basic
Html basicHtml basic
Html basic
Nital Shingala
 
Html tag
Html tagHtml tag
Html tag
NIRMAL FELIX
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
mlackner
 
The Basics of (X)HTML Tags
The Basics of (X)HTML TagsThe Basics of (X)HTML Tags
The Basics of (X)HTML Tags
LearningNerd
 
Html ppt
Html pptHtml ppt
Html ppt
Sanmuga Nathan
 
Quick Referance to WML
Quick Referance to WMLQuick Referance to WML
Quick Referance to WML
Nitin Saswade
 
Html Ppt
Html PptHtml Ppt
Html Ppt
Hema Prasanth
 
Html
HtmlHtml
LAMP_TRAINING_SESSION_3
LAMP_TRAINING_SESSION_3LAMP_TRAINING_SESSION_3
LAMP_TRAINING_SESSION_3
umapst
 
Html
HtmlHtml
Html intro
Html introHtml intro
Html intro
kalaivani.g
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
vikasgaur31
 
New HTML5/CSS3 techniques
New HTML5/CSS3 techniquesNew HTML5/CSS3 techniques
New HTML5/CSS3 techniques
mbeatrizoliveira
 

What's hot (15)

Html
HtmlHtml
Html
 
Html basic
Html basicHtml basic
Html basic
 
Html tag
Html tagHtml tag
Html tag
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
 
The Basics of (X)HTML Tags
The Basics of (X)HTML TagsThe Basics of (X)HTML Tags
The Basics of (X)HTML Tags
 
Html ppt
Html pptHtml ppt
Html ppt
 
Quick Referance to WML
Quick Referance to WMLQuick Referance to WML
Quick Referance to WML
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Html
HtmlHtml
Html
 
LAMP_TRAINING_SESSION_3
LAMP_TRAINING_SESSION_3LAMP_TRAINING_SESSION_3
LAMP_TRAINING_SESSION_3
 
Html
HtmlHtml
Html
 
Html intro
Html introHtml intro
Html intro
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
New HTML5/CSS3 techniques
New HTML5/CSS3 techniquesNew HTML5/CSS3 techniques
New HTML5/CSS3 techniques
 

Viewers also liked

Danish Media Trends
Danish Media TrendsDanish Media Trends
Toppmmistakes
ToppmmistakesToppmmistakes
Toppmmistakes
sinteractives
 
Guerilla Design
Guerilla DesignGuerilla Design
Guerilla Design
Joyce Chou
 
Discussion session
Discussion sessionDiscussion session
Discussion session
Miikii Group
 
Com300 Ecommerce
Com300 EcommerceCom300 Ecommerce
Com300 Ecommerce
Rachel Peter
 
ITGS
ITGSITGS
Synetrix Real World Experience
Synetrix Real World ExperienceSynetrix Real World Experience
Synetrix Real World Experience
Nick Harewood
 
Jquery 3
Jquery 3Jquery 3

Viewers also liked (8)

Danish Media Trends
Danish Media TrendsDanish Media Trends
Danish Media Trends
 
Toppmmistakes
ToppmmistakesToppmmistakes
Toppmmistakes
 
Guerilla Design
Guerilla DesignGuerilla Design
Guerilla Design
 
Discussion session
Discussion sessionDiscussion session
Discussion session
 
Com300 Ecommerce
Com300 EcommerceCom300 Ecommerce
Com300 Ecommerce
 
ITGS
ITGSITGS
ITGS
 
Synetrix Real World Experience
Synetrix Real World ExperienceSynetrix Real World Experience
Synetrix Real World Experience
 
Jquery 3
Jquery 3Jquery 3
Jquery 3
 

Similar to Lecture 2 - Comm Lab: Web @ ITP

Php Form
Php FormPhp Form
Php Form
lotlot
 
Html
HtmlHtml
Html
HtmlHtml
KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7
phuphax
 
Html intro
Html introHtml intro
Html intro
kalaivani.g
 
Intro Html
Intro HtmlIntro Html
Intro Html
Chidanand Byahatti
 
Understandable Content and Controls
Understandable Content and ControlsUnderstandable Content and Controls
Understandable Content and Controls
Greg SHIN
 
AK html
AK  htmlAK  html
AK html
gauravashq
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
mohamed ashraf
 
YL Intro html
YL Intro htmlYL Intro html
YL Intro html
dilom1986
 
Ajax ons2
Ajax ons2Ajax ons2
Ajax ons2
Chad Davis
 
Html
HtmlHtml
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
Doncho Minkov
 
Web Designing
Web DesigningWeb Designing
Lecture3
Lecture3Lecture3
Lecture1 B Frames&Forms
Lecture1 B  Frames&FormsLecture1 B  Frames&Forms
Lecture1 B Frames&Forms
Sur College of Applied Sciences
 
3 xml namespaces and xml schema
3   xml namespaces and xml schema3   xml namespaces and xml schema
3 xml namespaces and xml schema
gauravashq
 
We9 Struts 2.0
We9 Struts 2.0We9 Struts 2.0
We9 Struts 2.0
wangjiaz
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
vikram singh
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
Hinopak Motors Limited
 

Similar to Lecture 2 - Comm Lab: Web @ ITP (20)

Php Form
Php FormPhp Form
Php Form
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7
 
Html intro
Html introHtml intro
Html intro
 
Intro Html
Intro HtmlIntro Html
Intro Html
 
Understandable Content and Controls
Understandable Content and ControlsUnderstandable Content and Controls
Understandable Content and Controls
 
AK html
AK  htmlAK  html
AK html
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
YL Intro html
YL Intro htmlYL Intro html
YL Intro html
 
Ajax ons2
Ajax ons2Ajax ons2
Ajax ons2
 
Html
HtmlHtml
Html
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
Web Designing
Web DesigningWeb Designing
Web Designing
 
Lecture3
Lecture3Lecture3
Lecture3
 
Lecture1 B Frames&Forms
Lecture1 B  Frames&FormsLecture1 B  Frames&Forms
Lecture1 B Frames&Forms
 
3 xml namespaces and xml schema
3   xml namespaces and xml schema3   xml namespaces and xml schema
3 xml namespaces and xml schema
 
We9 Struts 2.0
We9 Struts 2.0We9 Struts 2.0
We9 Struts 2.0
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
 

Recently uploaded

IoT (Internet of Things) introduction Notes.pdf
IoT (Internet of Things) introduction Notes.pdfIoT (Internet of Things) introduction Notes.pdf
IoT (Internet of Things) introduction Notes.pdf
roshanranjit222
 
Creativity for Innovation and Speechmaking
Creativity for Innovation and SpeechmakingCreativity for Innovation and Speechmaking
Creativity for Innovation and Speechmaking
MattVassar1
 
The basics of sentences session 8pptx.pptx
The basics of sentences session 8pptx.pptxThe basics of sentences session 8pptx.pptx
The basics of sentences session 8pptx.pptx
heathfieldcps1
 
The Science of Learning: implications for modern teaching
The Science of Learning: implications for modern teachingThe Science of Learning: implications for modern teaching
The Science of Learning: implications for modern teaching
Derek Wenmoth
 
Science-9-Lesson-1-The Bohr Model-NLC.pptx pptx
Science-9-Lesson-1-The Bohr Model-NLC.pptx pptxScience-9-Lesson-1-The Bohr Model-NLC.pptx pptx
Science-9-Lesson-1-The Bohr Model-NLC.pptx pptx
Catherine Dela Cruz
 
Accounting for Restricted Grants When and How To Record Properly
Accounting for Restricted Grants  When and How To Record ProperlyAccounting for Restricted Grants  When and How To Record Properly
Accounting for Restricted Grants When and How To Record Properly
TechSoup
 
Creating Images and Videos through AI.pptx
Creating Images and Videos through AI.pptxCreating Images and Videos through AI.pptx
Creating Images and Videos through AI.pptx
Forum of Blended Learning
 
Keynote given on June 24 for MASSP at Grand Traverse City
Keynote given on June 24 for MASSP at Grand Traverse CityKeynote given on June 24 for MASSP at Grand Traverse City
Keynote given on June 24 for MASSP at Grand Traverse City
PJ Caposey
 
Get Success with the Latest UiPath UIPATH-ADPV1 Exam Dumps (V11.02) 2024
Get Success with the Latest UiPath UIPATH-ADPV1 Exam Dumps (V11.02) 2024Get Success with the Latest UiPath UIPATH-ADPV1 Exam Dumps (V11.02) 2024
Get Success with the Latest UiPath UIPATH-ADPV1 Exam Dumps (V11.02) 2024
yarusun
 
78 Microsoft-Publisher - Sirin Sultana Bora.pptx
78 Microsoft-Publisher - Sirin Sultana Bora.pptx78 Microsoft-Publisher - Sirin Sultana Bora.pptx
78 Microsoft-Publisher - Sirin Sultana Bora.pptx
Kalna College
 
Interprofessional Education Platform Introduction.pdf
Interprofessional Education Platform Introduction.pdfInterprofessional Education Platform Introduction.pdf
Interprofessional Education Platform Introduction.pdf
Ben Aldrich
 
8+8+8 Rule Of Time Management For Better Productivity
8+8+8 Rule Of Time Management For Better Productivity8+8+8 Rule Of Time Management For Better Productivity
8+8+8 Rule Of Time Management For Better Productivity
RuchiRathor2
 
Information and Communication Technology in Education
Information and Communication Technology in EducationInformation and Communication Technology in Education
Information and Communication Technology in Education
MJDuyan
 
220711130097 Tulip Samanta Concept of Information and Communication Technology
220711130097 Tulip Samanta Concept of Information and Communication Technology220711130097 Tulip Samanta Concept of Information and Communication Technology
220711130097 Tulip Samanta Concept of Information and Communication Technology
Kalna College
 
(T.L.E.) Agriculture: "Ornamental Plants"
(T.L.E.) Agriculture: "Ornamental Plants"(T.L.E.) Agriculture: "Ornamental Plants"
(T.L.E.) Agriculture: "Ornamental Plants"
MJDuyan
 
BỘ BÀI TẬP TEST THEO UNIT - FORM 2025 - TIẾNG ANH 12 GLOBAL SUCCESS - KÌ 1 (B...
BỘ BÀI TẬP TEST THEO UNIT - FORM 2025 - TIẾNG ANH 12 GLOBAL SUCCESS - KÌ 1 (B...BỘ BÀI TẬP TEST THEO UNIT - FORM 2025 - TIẾNG ANH 12 GLOBAL SUCCESS - KÌ 1 (B...
BỘ BÀI TẬP TEST THEO UNIT - FORM 2025 - TIẾNG ANH 12 GLOBAL SUCCESS - KÌ 1 (B...
Nguyen Thanh Tu Collection
 
managing Behaviour in early childhood education.pptx
managing Behaviour in early childhood education.pptxmanaging Behaviour in early childhood education.pptx
managing Behaviour in early childhood education.pptx
nabaegha
 
220711130083 SUBHASHREE RAKSHIT Internet resources for social science
220711130083 SUBHASHREE RAKSHIT  Internet resources for social science220711130083 SUBHASHREE RAKSHIT  Internet resources for social science
220711130083 SUBHASHREE RAKSHIT Internet resources for social science
Kalna College
 
How to Download & Install Module From the Odoo App Store in Odoo 17
How to Download & Install Module From the Odoo App Store in Odoo 17How to Download & Install Module From the Odoo App Store in Odoo 17
How to Download & Install Module From the Odoo App Store in Odoo 17
Celine George
 
pol sci Election and Representation Class 11 Notes.pdf
pol sci Election and Representation Class 11 Notes.pdfpol sci Election and Representation Class 11 Notes.pdf
pol sci Election and Representation Class 11 Notes.pdf
BiplabHalder13
 

Recently uploaded (20)

IoT (Internet of Things) introduction Notes.pdf
IoT (Internet of Things) introduction Notes.pdfIoT (Internet of Things) introduction Notes.pdf
IoT (Internet of Things) introduction Notes.pdf
 
Creativity for Innovation and Speechmaking
Creativity for Innovation and SpeechmakingCreativity for Innovation and Speechmaking
Creativity for Innovation and Speechmaking
 
The basics of sentences session 8pptx.pptx
The basics of sentences session 8pptx.pptxThe basics of sentences session 8pptx.pptx
The basics of sentences session 8pptx.pptx
 
The Science of Learning: implications for modern teaching
The Science of Learning: implications for modern teachingThe Science of Learning: implications for modern teaching
The Science of Learning: implications for modern teaching
 
Science-9-Lesson-1-The Bohr Model-NLC.pptx pptx
Science-9-Lesson-1-The Bohr Model-NLC.pptx pptxScience-9-Lesson-1-The Bohr Model-NLC.pptx pptx
Science-9-Lesson-1-The Bohr Model-NLC.pptx pptx
 
Accounting for Restricted Grants When and How To Record Properly
Accounting for Restricted Grants  When and How To Record ProperlyAccounting for Restricted Grants  When and How To Record Properly
Accounting for Restricted Grants When and How To Record Properly
 
Creating Images and Videos through AI.pptx
Creating Images and Videos through AI.pptxCreating Images and Videos through AI.pptx
Creating Images and Videos through AI.pptx
 
Keynote given on June 24 for MASSP at Grand Traverse City
Keynote given on June 24 for MASSP at Grand Traverse CityKeynote given on June 24 for MASSP at Grand Traverse City
Keynote given on June 24 for MASSP at Grand Traverse City
 
Get Success with the Latest UiPath UIPATH-ADPV1 Exam Dumps (V11.02) 2024
Get Success with the Latest UiPath UIPATH-ADPV1 Exam Dumps (V11.02) 2024Get Success with the Latest UiPath UIPATH-ADPV1 Exam Dumps (V11.02) 2024
Get Success with the Latest UiPath UIPATH-ADPV1 Exam Dumps (V11.02) 2024
 
78 Microsoft-Publisher - Sirin Sultana Bora.pptx
78 Microsoft-Publisher - Sirin Sultana Bora.pptx78 Microsoft-Publisher - Sirin Sultana Bora.pptx
78 Microsoft-Publisher - Sirin Sultana Bora.pptx
 
Interprofessional Education Platform Introduction.pdf
Interprofessional Education Platform Introduction.pdfInterprofessional Education Platform Introduction.pdf
Interprofessional Education Platform Introduction.pdf
 
8+8+8 Rule Of Time Management For Better Productivity
8+8+8 Rule Of Time Management For Better Productivity8+8+8 Rule Of Time Management For Better Productivity
8+8+8 Rule Of Time Management For Better Productivity
 
Information and Communication Technology in Education
Information and Communication Technology in EducationInformation and Communication Technology in Education
Information and Communication Technology in Education
 
220711130097 Tulip Samanta Concept of Information and Communication Technology
220711130097 Tulip Samanta Concept of Information and Communication Technology220711130097 Tulip Samanta Concept of Information and Communication Technology
220711130097 Tulip Samanta Concept of Information and Communication Technology
 
(T.L.E.) Agriculture: "Ornamental Plants"
(T.L.E.) Agriculture: "Ornamental Plants"(T.L.E.) Agriculture: "Ornamental Plants"
(T.L.E.) Agriculture: "Ornamental Plants"
 
BỘ BÀI TẬP TEST THEO UNIT - FORM 2025 - TIẾNG ANH 12 GLOBAL SUCCESS - KÌ 1 (B...
BỘ BÀI TẬP TEST THEO UNIT - FORM 2025 - TIẾNG ANH 12 GLOBAL SUCCESS - KÌ 1 (B...BỘ BÀI TẬP TEST THEO UNIT - FORM 2025 - TIẾNG ANH 12 GLOBAL SUCCESS - KÌ 1 (B...
BỘ BÀI TẬP TEST THEO UNIT - FORM 2025 - TIẾNG ANH 12 GLOBAL SUCCESS - KÌ 1 (B...
 
managing Behaviour in early childhood education.pptx
managing Behaviour in early childhood education.pptxmanaging Behaviour in early childhood education.pptx
managing Behaviour in early childhood education.pptx
 
220711130083 SUBHASHREE RAKSHIT Internet resources for social science
220711130083 SUBHASHREE RAKSHIT  Internet resources for social science220711130083 SUBHASHREE RAKSHIT  Internet resources for social science
220711130083 SUBHASHREE RAKSHIT Internet resources for social science
 
How to Download & Install Module From the Odoo App Store in Odoo 17
How to Download & Install Module From the Odoo App Store in Odoo 17How to Download & Install Module From the Odoo App Store in Odoo 17
How to Download & Install Module From the Odoo App Store in Odoo 17
 
pol sci Election and Representation Class 11 Notes.pdf
pol sci Election and Representation Class 11 Notes.pdfpol sci Election and Representation Class 11 Notes.pdf
pol sci Election and Representation Class 11 Notes.pdf
 

Lecture 2 - Comm Lab: Web @ ITP

  翻译: