SlideShare ist ein Scribd-Unternehmen logo
1 von 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]

Weitere ähnliche Inhalte

Was ist angesagt? (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
 

Andere mochten auch (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
 

Ähnlich wie Lecture 2 - Comm Lab: Web @ ITP

Ähnlich wie 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
 

Kürzlich hochgeladen

Using Grammatical Signals Suitable to Patterns of Idea Development
Using Grammatical Signals Suitable to Patterns of Idea DevelopmentUsing Grammatical Signals Suitable to Patterns of Idea Development
Using Grammatical Signals Suitable to Patterns of Idea Developmentchesterberbo7
 
4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptxmary850239
 
Scientific Writing :Research Discourse
Scientific  Writing :Research  DiscourseScientific  Writing :Research  Discourse
Scientific Writing :Research DiscourseAnita GoswamiGiri
 
ClimART Action | eTwinning Project
ClimART Action    |    eTwinning ProjectClimART Action    |    eTwinning Project
ClimART Action | eTwinning Projectjordimapav
 
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptxDIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptxMichelleTuguinay1
 
ARTERIAL BLOOD GAS ANALYSIS........pptx
ARTERIAL BLOOD  GAS ANALYSIS........pptxARTERIAL BLOOD  GAS ANALYSIS........pptx
ARTERIAL BLOOD GAS ANALYSIS........pptxAneriPatwari
 
Oppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmOppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmStan Meyer
 
Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4JOYLYNSAMANIEGO
 
How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17Celine George
 
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptxmary850239
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management SystemChristalin Nelson
 
Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1GloryAnnCastre1
 
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptxDecoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptxDhatriParmar
 
How to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseHow to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseCeline George
 
Expanded definition: technical and operational
Expanded definition: technical and operationalExpanded definition: technical and operational
Expanded definition: technical and operationalssuser3e220a
 
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxBIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxSayali Powar
 
Sulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their usesSulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their usesVijayaLaxmi84
 
Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Celine George
 
ICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfVanessa Camilleri
 

Kürzlich hochgeladen (20)

Using Grammatical Signals Suitable to Patterns of Idea Development
Using Grammatical Signals Suitable to Patterns of Idea DevelopmentUsing Grammatical Signals Suitable to Patterns of Idea Development
Using Grammatical Signals Suitable to Patterns of Idea Development
 
4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx
 
Scientific Writing :Research Discourse
Scientific  Writing :Research  DiscourseScientific  Writing :Research  Discourse
Scientific Writing :Research Discourse
 
ClimART Action | eTwinning Project
ClimART Action    |    eTwinning ProjectClimART Action    |    eTwinning Project
ClimART Action | eTwinning Project
 
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptxDIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
 
ARTERIAL BLOOD GAS ANALYSIS........pptx
ARTERIAL BLOOD  GAS ANALYSIS........pptxARTERIAL BLOOD  GAS ANALYSIS........pptx
ARTERIAL BLOOD GAS ANALYSIS........pptx
 
Oppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmOppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and Film
 
Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4
 
How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17
 
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of EngineeringFaculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
 
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management System
 
Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1
 
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptxDecoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
 
How to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseHow to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 Database
 
Expanded definition: technical and operational
Expanded definition: technical and operationalExpanded definition: technical and operational
Expanded definition: technical and operational
 
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxBIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
 
Sulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their usesSulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their uses
 
Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17
 
ICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdf
 

Lecture 2 - Comm Lab: Web @ ITP