Download - HTML&CSS Lesson 2.pptx
-
8/14/2019 HTML&CSS Lesson 2.pptx
1/31
-
8/14/2019 HTML&CSS Lesson 2.pptx
2/31
HTML Editor
HTML Ordered Lists:
-
8/14/2019 HTML&CSS Lesson 2.pptx
3/31
HTML Editor
HTML Ordered Lists:
Coffee
TeaMilk
Coffee
Tea
Milk
Coffee
Tea
Milk
-
8/14/2019 HTML&CSS Lesson 2.pptx
4/31
HTML Editor
HTML Unordered Lists
Note:The type attribute is deprecated in HTML 4, and is not supported
in HTML5. Use CSS instead.
-
8/14/2019 HTML&CSS Lesson 2.pptx
5/31
HTML Editor
HTML Unordered Lists
Coffee
TeaMilk
Coffee
Tea
Milk
Coffee
Tea
Milk
-
8/14/2019 HTML&CSS Lesson 2.pptx
6/31
HTML Editor
Sub-lists
Coffee
Espresso
Cappucino
Mochachino
Tea
Green Tea
Black Tea
Yellow Tea
Milk
-
8/14/2019 HTML&CSS Lesson 2.pptx
7/31
HTML
-
8/14/2019 HTML&CSS Lesson 2.pptx
8/31
HTML
Image with default alignment
(align="bottom"):
This is some text. This is some
text.
Image with align="middle":
This is some text.
This is some text.
Image with align="top":
This is some text. This
is some text.
-
8/14/2019 HTML&CSS Lesson 2.pptx
9/31
HTML Table
HTML Tables: Tables are defined with the tag.
A table is divided into rows (with the tag), and each row is divided
into data cells (with the tag). td stands for "table data," and holds
the content of a data cell. A tag can contain text, links, images,
lists, forms, other tables, etc.
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
-
8/14/2019 HTML&CSS Lesson 2.pptx
10/31
HTML Editor
HTML Table Headers: Header information in a table are defined with
the tag. All major browsers display the text in the element as
bold and centered.
Header 1
Header 2
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
-
8/14/2019 HTML&CSS Lesson 2.pptx
11/31
HTML Editor
HTML Table :
ID
Fullname
Birthday
National
100
David Lee10/05/1990
American
-
8/14/2019 HTML&CSS Lesson 2.pptx
12/31
HTML Editor
-
8/14/2019 HTML&CSS Lesson 2.pptx
13/31
HTML Editor
-
8/14/2019 HTML&CSS Lesson 2.pptx
14/31
HTML Editor
HTML Table :
ID
Fullname
Birthday
National
100
David Lee
10/05/1990
American
-
8/14/2019 HTML&CSS Lesson 2.pptx
15/31
HTML Editor
HTML Table :
colspan: Specifies the number of columns a cell should span
rowspan: Sets the number of rows a cell should span
Month
Savings
Savings for holiday!
January
$100
$50
February
$80
Sum: $180
-
8/14/2019 HTML&CSS Lesson 2.pptx
16/31
HTML Editor
HTML Forms: HTML forms are used to pass data to a server.
An HTML form can contain input elements like text fields, checkboxes,
radio-buttons, submit buttons and more. A form can also contain select
lists, textarea, fieldset, legend, and label elements.
.
input elements
.
-
8/14/2019 HTML&CSS Lesson 2.pptx
17/31
HTML Editor
Text Fields: defines a one-line input field that a
user can enter text into:
Password Field: defines a password field:
First name:
Last name:
Password:
-
8/14/2019 HTML&CSS Lesson 2.pptx
18/31
HTML
-
8/14/2019 HTML&CSS Lesson 2.pptx
19/31
HTML
-
8/14/2019 HTML&CSS Lesson 2.pptx
20/31
HTML
-
8/14/2019 HTML&CSS Lesson 2.pptx
21/31
HTML
-
8/14/2019 HTML&CSS Lesson 2.pptx
22/31
HTML Editor
Radio Buttons: defines a radio button. Radio
buttons let a user select ONLY ONE of a limited number of choices:
Checkboxes: defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limitednumber of choices.
Male
Female
I have a bike
I have a car
-
8/14/2019 HTML&CSS Lesson 2.pptx
23/31
HTML Editor
Submit Button: defines a submit button.
A submit button is used to send form data to a server. The data is sent
to the page specified in the form's action attribute. The file defined in
the action attribute usually does something with the received input:
-
8/14/2019 HTML&CSS Lesson 2.pptx
24/31
HTML
Select tag: Create a drop-down list with four options:
Volvo
Saab
Mercedes
Audi
-
8/14/2019 HTML&CSS Lesson 2.pptx
25/31
HTML Editor
-
8/14/2019 HTML&CSS Lesson 2.pptx
26/31
HTML
Volvo
Saab
Mercedes
Audi
-
8/14/2019 HTML&CSS Lesson 2.pptx
27/31
HTML Editor
Textarea tag:
Dont write your name on sand, waves will wash it way
Dont write your name in sky, wind may blow it away
Write your name in hearts of people you come in touch with. Thats where it
will stay
-
8/14/2019 HTML&CSS Lesson 2.pptx
28/31
HTML
-
8/14/2019 HTML&CSS Lesson 2.pptx
29/31
HTML
Who are you?
-
8/14/2019 HTML&CSS Lesson 2.pptx
30/31
Try It Yourself
-
8/14/2019 HTML&CSS Lesson 2.pptx
31/31
Try It Yourself
Draw a table: