Unit 1: Web Fundamentals
Lesson 5: HTML and Forms
August 20, 2013
Lesson 5: HTML and Forms
2
Introduction
to HTML
Learning to
Use HTML
HTML and
Email
History and
Future of the
Web
HTML and...
Recap from last time (I)
• The World Wide Web was created by allowing webpages to link to
one another
• Tags such as <img>...
Recap from last time (II)
• It’s not hard to embed content into your own HTML page
• Websites such as YouTube will often p...
We’ve seen how to get information from a server
• Every time we visit a new website, we are asking a server to send us
the...
What about sending information to a server?
• We actually do this all the time
• Any time you log in to an account, or fil...
We communicate with servers using forms
• Forms allow users to enter data that gets sent to a server for
processing
• Form...
Forms make many things possible (I)
• Forms are often used for security
• Whenever you sign in to an account, the username...
Forms make many things possible (II)
• Forms are also used on all social websites
• All the content you see from your frie...
Forms make many things possible (III)
• Forms allow us to search for content on the internet
• A search bar is just a simp...
How is HTML used to create a form?
• We use HTML to tell the server what kind of data to expect
• In the below example, we...
Let’s see another example
12
This time, the input
type is a radio button
More options
Here’s how it looks
What happens once the form is submitted?
13
1. Let’s say you want to sign in to your Amazon account. After typing
your use...
Form submission (II)
14
2. Your login information is sent to Amazon’s server, so they can
check to make sure it’s you
Amaz...
Form submission (II)
15
3. Then the server accesses the Amazon database, which is like a
filing cabinet where Amazon store...
Form submission (II)
16
4. The database tries to find your username and password
combination to check if it’s correct
Amaz...
Form submission (II)
17
5. If the combination is correct, the server sends you the HTML files to
access your account. If n...
Summary (I)
18
• HTML is important not just for receiving information, but also for
sending data to a server
• Forms allow...
Summary (II)
19
• There are many different types of forms – these allow for many
features such as account login and search...
What to do on your own
1. Go to URL to complete the Codecademy course online
2. Do the practice set on the material learne...
Upcoming SlideShare
Loading in …5
×

Lesson 105 23 aug13-1430-ay

13,284
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
13,284
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
54
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 105 23 aug13-1430-ay

  1. 1. Unit 1: Web Fundamentals Lesson 5: HTML and Forms August 20, 2013
  2. 2. Lesson 5: HTML and Forms 2 Introduction to HTML Learning to Use HTML HTML and Email History and Future of the Web HTML and Forms Search Engine Optimization Learning to Use CSS Introduction to CSS Reusing Code 3 Ways to Use CSS Separation of Concerns Launching Your Own Website Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 8 Lesson 7 Lesson 6 Lesson 5 Lesson 9 Lesson 10 Lesson 11 Lesson 12 Build understanding Develop skills
  3. 3. Recap from last time (I) • The World Wide Web was created by allowing webpages to link to one another • Tags such as <img>, <video>, and <audio> have enabled users to view content • Embedding allows users to view content without leaving a webpage 3 A webpage A webpage embedded within a webpage
  4. 4. Recap from last time (II) • It’s not hard to embed content into your own HTML page • Websites such as YouTube will often provide code for you to copy and paste into your page • In the future, websites will be able to invent their own tags! 4 <iframe width="560" height="315" src=”http://www.youtube.com/embed/- bayV3wez50" frameborder="0" allowfullscreen></iframe> YouTube-provided HTML code
  5. 5. We’ve seen how to get information from a server • Every time we visit a new website, we are asking a server to send us the HTML files for that page 5 HAHAHA Router ISP Facebook server Amazon server Youtube server DNS
  6. 6. What about sending information to a server? • We actually do this all the time • Any time you log in to an account, or fill out a survey, or even do a Google search, you are sending information to a server 6
  7. 7. We communicate with servers using forms • Forms allow users to enter data that gets sent to a server for processing • Forms can contain: • Checkboxes • Radio buttons • File attachments 7
  8. 8. Forms make many things possible (I) • Forms are often used for security • Whenever you sign in to an account, the username and password you enter is checked • This way the website knows it’s you! 8 Amazon sign-in Gmail sign-in
  9. 9. Forms make many things possible (II) • Forms are also used on all social websites • All the content you see from your friends was entered using a form 9 Facebook post Twitter post
  10. 10. Forms make many things possible (III) • Forms allow us to search for content on the internet • A search bar is just a simple form! 10 Google search Yahoo search
  11. 11. How is HTML used to create a form? • We use HTML to tell the server what kind of data to expect • In the below example, we expect users to input text into the Amazon search bar 11 The input type is text The rest of the code lets us control other options Here’s how it looks
  12. 12. Let’s see another example 12 This time, the input type is a radio button More options Here’s how it looks
  13. 13. What happens once the form is submitted? 13 1. Let’s say you want to sign in to your Amazon account. After typing your username and password, you click to submit the form.
  14. 14. Form submission (II) 14 2. Your login information is sent to Amazon’s server, so they can check to make sure it’s you Amazon server
  15. 15. Form submission (II) 15 3. Then the server accesses the Amazon database, which is like a filing cabinet where Amazon stores user information such as login info, credit card numbers, and past purchases. Amazon server Amazon database
  16. 16. Form submission (II) 16 4. The database tries to find your username and password combination to check if it’s correct Amazon server Amazon database
  17. 17. Form submission (II) 17 5. If the combination is correct, the server sends you the HTML files to access your account. If not, you will be asked to log in again. Amazon server Amazon database
  18. 18. Summary (I) 18 • HTML is important not just for receiving information, but also for sending data to a server • Forms allow us to actively engage with the internet, both sending and receiving information as we browse websites Amazon server Amazon database
  19. 19. Summary (II) 19 • There are many different types of forms – these allow for many features such as account login and search bars • User information is stored in databases, which are similar to filing cabinets with a different file for each user Google search Gmail sign-in
  20. 20. What to do on your own 1. Go to URL to complete the Codecademy course online 2. Do the practice set on the material learned 1. Take the follow-up quiz to test your understanding 20

×