SlideShare uma empresa Scribd logo
1 de 61
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]

Mais conteúdo relacionado

Mais procurados (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
 

Destaque (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
 

Semelhante a Lecture 2 - Comm Lab: Web @ ITP

Semelhante a 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
 

Último

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.pdfAdmir Softic
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
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 PractiseAnaAcapella
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxEsquimalt MFRC
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxDr. Sarita Anand
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024Elizabeth Walsh
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17Celine George
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfSherif Taha
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.christianmathematics
 
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...pradhanghanshyam7136
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Jisc
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfNirmal Dwivedi
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin ClassesCeline George
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - Englishneillewis46
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxcallscotland1987
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17Celine George
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxRamakrishna Reddy Bijjam
 
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...Association for Project Management
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 

Último (20)

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
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
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
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
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...
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptx
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
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...
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 

Lecture 2 - Comm Lab: Web @ ITP