Brenton Strine

Brenton Strine

Essential Tags Part 2

Slide Duration:

Table of Contents

Section 1: HTML
Your First Web Page

17m 1s

Intro
0:00
World Wide Web
0:23
Introduction to HTML
0:25
Looking at Source Code
0:53
HTML5
1:58
HTML5 Specification
1:59
Creating a Web Page
4:10
What You Will Need to Create a Web Page
4:11
Example: Basic Web Page
4:40
Example: Creating a Web Page
5:46
HTML Elements
6:33
Adding a Title
7:08
Main Body
7:48
First Level Heading
8:23
Adding an Image
8:42
Paragraph
9:09
Adding a List and URLs
11:13
Footer
14:09
CSS: Styling
16:02
Web Basics and Web History

32m 23s

Intro
0:00
The Web
0:56
Overview of the Web
0:58
The Web Page
2:39
Overview of the Web Page
2:40
Web Technologies
4:45
Overview of Web Technologies
4:46
The Web Today
9:22
The Web Today
9:23
What is HTML
11:22
HyperText Markup Language
11:23
The Creation of the Internet
12:40
History of the Internet
12:41
Developments in HTML
14:10
The Birth of HTML
14:11
Early Problems
15:35
Early Browsers
16:24
History of Early Browsers
16:25
NCSA Mosaic
17:55
NCSA Mosaic
17:56
The Browser Wars Begin
19:39
History of the Browser Wars
19:40
Casualties of War
22:27
Results of the Browser Wars
22:28
HTML 4 Stabilization
25:31
History and Overview of HTML4
25:32
Modern Browser Developments
27:27
Modern Browsers
27:29
HTML5
30:57
Overview of HTML5
30:58
Web Development Tools

26m 28s

Intro
0:00
Browsers
0:17
Introduction to Browsers
0:18
Example: Browsers
2:35
Firefox Add-ons
3:14
Firefox Browser
3:15
Example: Firebug Add-ons
3:54
Example: Web Developer Toolbar and ColorZilla
7:51
Domain Names and Hosting
10:23
Overview of Domain Names and Hosting
10:24
Your Own Domain
11:03
Installing a Local Web Server
12:42
Installing a Local Web Server
12:43
Apache Web
13:29
WYSIWYG Editors
15:56
Introduction to WYSIWYG Editors
15:57
Content Management System
18:31
How Content Management System Works
18:32
Example: WordPress
20:00
File Transfer Protocol
22:26
File Transfer Protocol
22:27
HTML Elements and Attributes

21m 50s

Intro
0:00
Proper use of Elements and Attributes
0:14
Elements and Attributes
0:16
Example
1:06
Normal HTML Elements
2:00
Start Tag, Content, and End Tag
2:02
Example: Warning!
2:34
Void HTML Elements
3:23
Self-Closing Tags
3:24
List of Void Elements
4:04
Example: Line Break
5:00
HTML Comments
6:13
Purpose of Comment Tags
6:14
Example: Comment Tags
6:50
Attributes
7:25
Properties of Attributes
7:27
Example: Attributes
7:39
Example: Whitespace
10:22
HTML Character Codes
12:05
Character References
12:07
Example: Registered Trademark Symbol
12:35
Example: Using Character References
13:23
Example: Start Tag and End Tag
15:57
Example: Self-Closing Tag
16:37
Example: Attributes
17:37
Example: Proper use of Elements and Attributes
19:02
Example: Comment
20:09
Example: Whitespace
20:46
Essential Tags Part 1

41m 42s

Intro
0:00
Document Structure Tags
1:13
Document Structure Tags and Example
1:14
Layout Tags
3:24
Layout Tags
3:26
Example: Layout Tags
7:48
Example: Layout Tags
11:28
Example: Layout Tags
13:17
Example: Layout Tags
14:22
Text Level Tags
17:22
Text Level Tags
17:23
Example: Text Level Tags
17:48
Grouping Content Tags
24:23
Grouping Content Tags
24:24
<p> Tag
24:45
<hr> Tag
25:31
<figure>, <figcaption>, and <blockquote> Tag
26:14
<div> Tag
26:58
Example: Grouping Content Tags
27:28
Embedded Content Tags
33:12
Embedded Content Tags
33:13
Example: Embedded Content Tags
35:39
Essential Tags Part 2

24m 20s

Intro
0:00
Simple Tables
0:17
Simple Tables
0:19
Example: Simple Tables
2:31
Semantic Tables
5:11
Semantic Tables
5:14
Example: Semantic Tables
6:24
Simple Lists
8:14
Simple Lists
8:18
Unordered List
8:36
Ordered List
8:42
Example: Simple Lists
9:37
Definition Lists
14:08
Definition Lists
14:09
Example: Definition Lists
15:21
Forms
17:11
Forms
17:12
Example: Forms
17:52
Markup Language

29m 38s

Intro
0:00
HTML 1 Through 3.2
0:13
Period of Rapid Growth of HTML
0:14
Tag Soup
2:03
Definition of Tag Soup
2:04
Example: Tag Soup
3:00
Example: Tag Soup and Valid Doctype
4:45
HTML 4.01
5:26
Overview of HTML 4.01
5:27
Three Flavors of HTML 4.01: Strict, Transitional, and Frameset
6:05
XHTML 1
7:19
Overview of XHTML 1
7:20
Example: XHTML 1
9:20
XHTML1 Syntax
11:48
Lower Case Rule
11:49
Closed Elements Rule
12:25
Encased in Quotes Rule
14:18
Boolean Attributes May Not Be Minimized
14:35
Correct Nesting is Enforced
15:29
The Problem with XHTML
16:15
Problem with XHTML
16:16
XHTML 2
19:22
Overview of XHTML 2
19:23
HTML 5
20:43
Overview of HTML 5
20:44
Validating
22:44
Validators
22:45
Example: W3C Markup Validation Service
25:26
Page Structure and Meta-data Elements

32m 50s

Intro
0:00
The Doctype
0:12
Doctype
0:13
Example: Doctype
1:25
The Root Element
1:57
Root Element
1:58
Example: Root Element
2:45
The Head Element
3:38
Head Element and Body Element
3:39
Example: Head Element and Body Element
5:06
The Head Element
5:42
Head Element vs. Header Element
5:47
The Title Element
6:51
Title Element
6:52
Example: Title Element
7:54
The Base Element
9:00
Base Element
9:03
Example: Base Element
9:42
The Link Element
14:07
Link Element: rel, type, and href
14:08
Example: Link Element
15:13
The Meta Element
17:54
Meta Element: charset, name, and http-equiv
17:55
Example: Meta Element
21:00
The Style Element
23:35
Style Element
23:37
Example: Style Element
24:40
Text-Level Semantics

30m 13s

Intro
0:00
Text Level Semantics
0:06
Paragraph Level
0:07
The <a> Element
2:23
Definition of the <a> Element
2:25
The <em> Element
3:25
Definition of the <em> Element
3:26
The <strong> Element
6:50
The <strong> Element
6:51
The <small> Element
8:35
The <small> Element
8:36
Example of <small> Element
10:19
The <cite> Element
10:55
The <cite> Element
10:56
Example of <cite> Element
12:32
The <q> Element
12:45
The <q> Element
12:46
Example of <q> Element
13:34
The <abbr> Element
15:35
The <abbr> Element
15:36
Example of <abbr> Element
16:41
The <dfn> Element
17:03
The <dfn> Element
17:04
Example of <dfn> Element
18:01
The <time> Element
19:11
The <time> Element and Example
19:12
The <code> Element
21:18
The <code> Element
21:19
Example of <code> Element
23:00
The <sub> and <sup> Elements
23:31
The <sub> and <sup> Elements
23:32
Example of <sub> and <sup> Elements
23:50
The <i> Element
24:51
The <i> Element and Example
24:52
The <b> Element
27:16
The <b> Element
27:17
Example of <b> Element
29:07
Heading and Sectioning

23m 39s

Intro
0:00
Heading Elements
0:06
Heading Tags
0:07
Heading Rules
1:13
Heading Rules and Example
1:35
Sectioning Roots
5:39
Sectioning Roots
5:41
Sectioning Contents
6:25
Sectioning Content Elements
6:27
Section Wrapping
7:40
Section Wrapping
7:41
Example: Section Wrapping
10:10
Real World Example 1
15:36
Forms

47m 51s

Intro
0:00
Form Terminology
0:23
Form
0:24
Control
0:43
Control Name and Control Label
1:09
Input Type and State
1:52
Form Controls
2:20
Button: Submit and Reset
2:32
Radio
3:37
Checkbox
4:00
Select Menu
4:05
Textarea
4:28
Various Input Types
4:38
Example: Basic Controls of Form Element
7:05
Example: Buttons
18:20
Example: Additional Controls
20:56
Example: Special Input Types
27:55
Example: Date and Time Control
33:40
Example: Create Your Own Control
37:32
Example: Placeholder Text
39:10
Example: Datalist
41:43
Example: Sizing and Input Containment
42:16
Example: Select Modification
42:51
Example: Required Attribute
44:41
Links

36m 41s

Intro
0:00
URIs and URLs
0:23
Definitions of URL and URI
0:36
Differences Between URL and URI
0:42
Example: URI and URL
1:14
Typical URI Construction
2:33
Domain and Subdomain
2:34
Protocol
4:18
IP Address
5:05
Typical URI Construction
5:32
Second Level Domain
5:33
Port
6:07
Foldernames
6:46
Typical URI Construction
8:06
Filename and File Extension
8:08
Typical URI Construction
10:38
Name/ Value Pairs
10:40
Internal Anchors
11:45
Typical URI Construction
12:30
Example: URI Construction
12:31
Relative and Absolute URIs
14:20
Relative and Absolute URIs
14:22
Example: Relative and Absolute URIs
18:32
Link States
24:15
Link States
24:16
Example: Link States
25:18
Block Level Links
27:02
Example: Block Level Links
27:03
Bookmark Links
29:18
Bookmark Links
29:20
Example: Bookmark Links
30:15
Attributes
32:06
href and target
32:20
rel, media, hreflang, and type
33:18
Embedded Content

46m 5s

Intro
0:00
Embedding Image
0:22
Embedding an Image
0:25
Image File Formats
3:38
Image Format: Jpg
3:42
Image Format: Png
4:13
Image Format: Gif
4:40
Compression
6:05
Image Format: Precise Lines and Fewer Colors
8:38
Animated Gif
10:49
Alpha Transparency Png
11:09
Embedding Audio
12:52
Old Way of Embedding Audio
13:00
New Way of Embedding Audio
14:54
Example: Adding Buttons
20:04
Message for Users
26:36
Audio Attributes
27:46
Control
28:29
Autoplay
28:44
Loop
29:36
Preload
30:40
Embedding Video
32:00
Embedding Video
32:11
Controls
34:22
Poster Attributes
36:01
Video Formats
37:36
Solving Formatting Problem
39:26
The Canvas Element

19m 25s

Intro
0:00
Creating the Element
0:38
What is the Canvas Element?
0:39
HTML and Canvas Element
1:48
Example: Canvas Element
3:23
Creating the Canvas in JavaScript
5:13
getContext() Method
5:17
Checking Browser Support with the getContext() Method
6:00
Example: Creating the Canvas in JavaScript
7:31
Drawing in the Canvas
10:13
Methods for Drawing in the Canvas
10:14
2d Context
10:58
Example: Creating Drawing in the Canvas
11:39
Example: Adding an Image and Texts
15:30
Example: Advance Canvas Element
17:31
Content Models

29m 8s

Intro
0:00
The HTML 4.01 Content Model
0:16
Block Elements and Inline Elements
0:18
Example: Block Elements and Inline Elements
1:18
W3C Markup Validation Service
3:28
The HTML5 Content Model
6:21
Overview of HTML5 New Content Categories
6:22
Flow Content
8:02
Specification for Content Models
8:05
Flow Content
9:41
Example: Flow Content Elements
10:40
List of Flow Content
11:35
BlockQuote Element
11:50
Sectioning Content
13:19
Introduction to Sectioning Content
13:20
Heading Content
14:06
Heading Content and hgroup Element
14:07
Phrasing Content
16:56
Attributes of Phrasing Content
16:57
Anchor Element in Phrasing Content
17:28
Embedded Content
19:33
Attributes of Embedded Content
19:34
No Content
19:53
Transparent Content
20:38
Source Elements and Param Elements
21:15
Interactive Content
24:16
Interactive Content Elements
24:17
Button Element
25:57
The DOM

13m 10s

Intro
0:00
The DOM
0:26
Document Object Model
0:27
The DOM Tree
0:55
DOM Trees
0:56
Example: DOM Tree
1:31
Vocabulary: Tree, Node,Branch, Parent, Child
2:15
Exploring the DOM
3:13
Example: Built-in Browser Inspection and Firebug
3:15
Example: Manually Exploring the DOM
6:01
JavaScript
7:28
DOM Navigation Techniques
7:55
DOM Navigation Techniques
7:56
Favicons

13m 14s

Intro
0:00
Favorite Icons
0:08
Function of Favorite Icons
0:09
Bowser Support
1:10
Browser Support
1:13
Location in Browsers
1:46
Implementation Methods
2:04
Implementation Methods for Favorite Icons
2:05
Favicon and Apple Mobile Devices
4:51
Creating the Icon
6:13
How to Create the Icon
6:14
Favicon Resources
9:10
Websites for Icon Creation and Conversion
9:11
Programs for Icon Creation and Conversion
11:50
Embedding Flash and Other Objects

15m 7s

Intro
0:00
Flash and other Plug-ins
0:41
Main Problems with Flash
0:44
Benefits of Flash
2:02
Embedding Flash: the Old Way
2:57
The Old Way to Embed Flash
2:58
Embedding Flash: the Satay Method
6:42
Satay Method
6:43
Embedding Flash: HTML5
9:28
How to Embed Flash in HTML5
9:29
Embedding Flash Directly in <video>
11:39
Embedding Flash Directly in Video Element
11:40
Review of Embedding
13:24
Image Elements
13:39
Video, Audio, and Canvas Elements
13:44
Embed Elements
13:53
Object Elements
14:04
Offline Cache

19m 53s

Intro
0:00
Purpose
0:47
Purpose of Offline Cache
0:48
The Appache
2:06
Attributes of Appcache
2:07
The Manifest File
3:22
Manifest File
3:23
Example of Manifest
3:32
Section Headers: Cache, Fallback, and Network
4:21
Server-Side Considerations
5:17
text/cache-manifest MIME-type
5:18
Other Server-Side Considerations
5:41
ExpiresActive On and ExpiresDefault 'access'
6:07
Example: Offline Cache 1
7:44
Example: Overwriting Files
11:09
Example: Wild Cards for Network
14:58
Example: Offline Cache 2
16:06
Web Development Principles

26m 47s

Intro
0:00
Interoperability
0:36
Interoperability of Web Development
0:37
Interoperable Websites Should Work
3:05
Qualities of Interoperable Websites
3:06
Backward Compatibility
5:52
Compatibility With Older Technology
5:53
Example: Meta Tag
9:07
Forward Compatibility
9:33
Advancement in Technology
9:34
Accessibility
10:11
Accessibility of Content
10:12
Semantic Code
11:43
Example: Where Will This Link Take You?
13:56
Graceful Degradation
14:59
Graceful Degradation or Fault Tolerance
15:00
Types of Degradation
16:35
Progressive Enhancement
18:36
Progressive Enhancement
18:37
Future Detection and Browser Sniffing
21:05
Future Detection Versus Browser Sniffing
21:06
Example: Email Input Type
23:39
Tim Berners-Lee's Quote
26:20
Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of HTML
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.
Since this lesson is not free, only the preview will appear on your website.
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Services

Lecture Comments (9)

1 answer

Last reply by: Professor Strine
Wed Jan 15, 2014 5:47 PM

Post by Theresa Sharp on September 10, 2013

My tables are always at the bottom of my page and I can't get them to go up higher. How do i fix that?

1 answer

Last reply by: Professor Strine
Wed Jan 15, 2014 5:48 PM

Post by Theresa Sharp on September 10, 2013

My tables don't have outlines. How do I fix that?

1 answer

Last reply by: Professor Strine
Wed Jan 15, 2014 5:56 PM

Post by Martin Fenwick on May 16, 2013

With the definition list it appears you have a syntax error on your presentation. The </dt> on line 3 should be </dd>.

0 answers

Post by Tomas Johnsen on March 21, 2012

Regarding form tags: You used some "id=" elements and some "name=" elements; are they interchangable, or do the respective tags require one or the other?

0 answers

Post by Barbara Shaw on January 22, 2012

How do you structure an ordered list both numerically and alpha, i.e.,
1. Weather
a. Cloudy
b. Sunny

0 answers

Post by Herve Gnidehoue on December 30, 2011

HTML5 seems to be very interesting. I think it's the way to go now. Thanks

Essential Tags Part 2

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Simple Tables 0:17
    • Simple Tables
    • Example: Simple Tables
  • Semantic Tables 5:11
    • Semantic Tables
    • Example: Semantic Tables
  • Simple Lists 8:14
    • Simple Lists
    • Unordered List
    • Ordered List
    • Example: Simple Lists
  • Definition Lists 14:08
    • Definition Lists
    • Example: Definition Lists
  • Forms 17:11
    • Forms
    • Example: Forms

Transcription: Essential Tags Part 2

Welcome back to Educator.com.0000

This lesson is going to look at a couple more of the most important tags, in just an introductory way.0002

We are going to get into more depth with tables, lists, and forms.0010

This is the basic structure for a basic table.0019

This code here would have worked all the way back, as far as HTML3.0025

And it is not very semantic, in terms of being descriptive of what this content is, but it does have semantic meaning already built in.0032

Well, first of all, you should see hints, in the name of the element (the table element): tables are for tabular data.0045

Think in terms of charts, or like a multiplication table.0055

There is a really bad habit that Web developers have been having, of using tables to structure the layout of a document,0059

which is not tabular data; so it is non-semantic, and it has caused some problems.0066

So, don't do that; use tables for tabular data when you have charts.0072

The way that you write a table is: you start, always, with this table element.0077

And then, you have one or more table rows, and then each row has cells in it, which you mark with a table data element.0083

This table right here in code would look like this.0093

You can see: Content1, in this cell, is showing up right here in this cell here.0097

And this entire table row corresponds to this entire row here.0105

A row is horizontal, and a column is vertical.0112

Content3 and Content4 are down here, clearly.0116

The meaning of this is limited, in that it doesn't explain what the relationship between these are,0124

except that they are in rows and columns, and that they are in a table (so it is tabular data),0133

and that they are in individual cells, and the data of the cell is within these elements.0138

If we want to do slightly more semantic tables, we can get more advanced.0146

Before we go to that slide, let's look, really quickly, at the code I have prepared.0152

This is a simple table, and I will just show you, so that you can tell where and how to add in it.0156

Say we want to add an additional row; I'll copy that and then paste it, and we could add them in here.0165

And then refresh, and we have added a row quite simply.0178

Now, the way to add a column is: you can't just copy something and paste it--you have to add a new table cell to each row,0185

because each one of these rows is only two columns wide right now, so to add the third column, we have to add the cell to each row.0195

We would add it right here, for example; let's call this one New; and then here.0205

And then, actually, let's save and show what happens when you don't add the column to the last row.0223

There is no column cell there, so there is no cell, even though the row and the column make it so that there is a little space there.0231

Let's add it in; so, we have three new cells in the new column.0246

You probably saw right here that I have a multiplication table right here, as well.0262

This is the basic outline, where you have the numbers on the side, and then on the side here.0266

And then, as they correspond, you can get the value (3 times 1 is 3).0274

And this is hinting toward the more semantic use, where I need to indicate that this level here and this level here0280

(although I can't select vertically)--this column here are headers to the table.0289

This is the code for that; and I have given that a caption, and this thead tag.0299

That takes us into the realm of slightly more semantic tables.0309

The semantic table is the same, except you add some more information.0315

You can start by adding a caption, right after the first table element.0321

And then, probably the most important thing is the thead element, which everything contained in here will be marked as: a head element, or head data.0326

So, head1 and head2 show up in bold, although they can be styled differently.0338

The importance is not the way it looks, but the fact that this is the part of the table that will define everything else in that row or column.0343

And then, th (instead of td) stands for table header; but it is basically the same as a td cell, except it has the semantic meaning that it is the head.0354

This is fairly simple; we just have two columns and two rows, and they vertically correspond down; so, Content2 is corresponding to head2.0366

And then, the caption describes the entire table.0379

It can get more complicated in that example I showed you, where we not only want the head level here--this first row--0386

to be a header, but we want the first cell in each row to also be a header.0395

We have this thead wrapping the table row, indicating that the entire row is a header.0401

And then, each of the cells has the th (table header instead of table data tag).0407

But when it gets to the tbody, which is the main content, we still need to indicate that the first item in each row is a header.0414

We can use this th element, and that tells us that each one of these is the heading in the table.0426

And if we want to get even more semantic, we can look at the caption.0441

I didn't save it correctly.0458

It shows up right down here; and the caption will describe everything in the entire table.0463

So, the caption actually applies to the whole table.0469

And there are some more complicated rules, but we won't go into it right now.0472

But for a semantic table, the basics are caption, table head, and a table body; and then making use of the table header (versus table data) cells.0477

Lists are very useful for automatically having the browser put bullets or numbering of lists that you have.0498

There are two different types that are most commonly used: ordered lists and unordered lists.0509

And they are just what they sound like: unordered lists would have no ordering, so they are just bullet points, usually.0514

And then, ordered lists--you think most commonly of things that are in a specific numbering, like 1 through 8 or something.0523

But it is defined just as any list where the ordering matters.0532

You could even have an ordered list for something as simple as...say you have a list of states that you have been to;0537

but you indicate, in the paragraph before the list, that the first item in the list is the state that you were born in.0545

That suddenly gives what would otherwise be a random and unordered list an ordering that is important,0554

because the first one needs to be the one that you were born in.0560

So, you would use the ordered list tags for that, even though it doesn't really matter beyond the first one.0563

And you can still style it so that it looks like bullet points, instead of numbering.0571

Let's look, really quickly, at what this looks like so far.0577

Here is the List Examples code; I'll pull it up in the browser.0582

Here is an ordered list, and you can see that I didn't put in any numbering (besides this content: item1, item2, item3).0592

But the browser has automatically numbered them for me.0600

And there are ways to set this to start at any number that you want, or you don't even have to have numbers--you could have bullets.0603

And an unordered list, similarly, adds bullets for you automatically.0611

The syntax is that you always have the <ol> to begin with, and that goes around all of your list items.0618

And then, you have to end the tag; so, the content of the list is all of the list items.0627

And then, each list item is usually put on its own line; and you put the content between the beginning and ending tag of the element.0632

And because the computer knows that the previous list item ended when the next one begins, the ending tags are not technically required.0641

So, if I refresh this, it won't break anything--nothing changed at all.0653

Even though I removed all of the ending list item tags, it is just that logically, as you go through it, this is the first list item;0657

and then, as soon as it reaches the next one, it knows that it has reached the next item.0667

So, it doesn't need to be explicitly told that the list item ends.0670

I usually put them in, just for the sake of consistency.0674

And I am always worried that there is going to be a bug or a syntax error that I let in.0679

And then, the closing tags will help your computer figure out what the correct semantic meaning should be.0685

In case there is a bug or a syntax error, I can recover gracefully.0694

And you can add as many items as you want, really.0700

And it goes all the way up to 9, because there are 9 items.0708

Now, you can nest lists: say you have three lists here--one of states, and then one of cities that are inside New York, and then another list of cities.0713

And you want these cities (which are cities that are inside New York City) to be seen as being underneath New York City.0729

And you want these cities, which are in New York (the state) to be seen as underneath New York, the state.0739

Right now, these three lists are all unordered lists, because their ordering doesn't matter.0743

The first one and the second one and the third one down here...they are just in a row.0751

But what you can do is take out and put it inside the list item for New York.0759

And I am putting it right here, inside of this closing tag (not on the outside, because that would put it in nowhere land).0767

Let's put it on the inside and save; refresh.0774

Now, the browser will automatically pick a styling that makes sense of this.0786

You have these nested underneath, and they are clearly cities in New York.0794

And you can nest as many times as you want, actually, as long as you are not causing syntax error.0800

This is another unordered list, and we are going to put it underneath New York City right here.0804

And this is tabbing it incorrectly for me, because it is a bit confused; but it should look like this.0818

When I save it, now Bronx and Manhattan correctly show up as inside New York City.0827

Definition lists are very similar to normal lists, except that they have a different semantic meaning.0850

They will define terms and then give the definition.0858

And you may not run into this a lot, but if you ever do have a list of definitions, this would be the correct syntax to use.0862

You wouldn't use the normal list elements, because we have these special elements specifically for definition lists.0870

So, this is pretty much the same: instead of ul or ol (for unordered list or ordered lists), you have definition list.0880

And then, instead of just having list items (there is only one type of list item in unordered and ordered lists),0889

you have two types of list items: dt and dd (Definition Term and Definition Description).0895

And you need to always have one of each, and then you can have as many definition descriptions as you want.0902

So, this would be like, for example, in a dictionary: you have multiple definitions for the same term.0909

And then, you can have as many of these terms in a list as you want.0914

In fact, let's create one right now: dl for Definition List; let's say HTML--we are going to define this term.0922

And then, the description of it is....0953

Let's go to refresh; and it has marked it up in such a way that the description is indented from the term.0972

And it is clear that there is some sort of interesting relationship here.0985

Other browsers may do it differently; other user agents may do it differently.0990

And just for the fun of it, let's add another term, just so that you can see what it looks like with multiple terms.0995

There we go.1026

Forms are essential for any time that you are going to be getting feedback from the user.1033

And they are pretty simple; there are just a few basic types of forms that you use all the time.1040

And they are all specified, actually, by an attribute in the input element,1046

except for the text area--and there is another one called the select element, with options.1053

But we will cover that in the advanced forms lesson.1056

For now, we will just look at these: you have where the form element begins, and then you put all of your inputs inside of it.1062

And the types that you will see most often are text, radio, checkbox, and submit.1071

You are probably familiar with them already; they look like this.1079

This is a text box; this is a radio button; and a check box.1082

The difference between these is that the radio buttons--only one will be selected, whereas in the check boxes, you can select multiples or none, usually.1088

Text area is the larger one, and Chrome actually lets you size this; and you can usually use CSS to resize it, as well.1096

And then, the submit button looks like this.1105

You can also use the button element, which is an input element and needs a value.1116

If you ever need a button, that is the element for that.1141

Now, this is the way that, in HTML4.01, most forms will show up.1147

But HTML5 has introduced a lot of new functionality that can take it to the next level.1153

You can use either for beginning; you might want to just stick with these simple ones and not worry too much about getting into the more advanced HTML5 syntax.1160

But if you wanted to, you can go into HTML5 code and do some more advanced things.1170

Here, we have labels for each of these inputs that are specified in the code with the label tag.1177

And the label tag has this attribute for, which indicates which input it is going to.1188

The browser styled them right next to each other like this; you will see, I didn't have to insert these line breaks manually, like this.1195

It just sort of did it automatically (put them, labeled, right next to each other); and then, I put the line break at the end to bring it over--1203

whereas, up here, if I put name like this, and then a space, it is going to not look as nice.1211

The formatting doesn't quite fit the same way.1222

But the main advantage is that, when you get into more complicated forms, or if you have a screen reader,1227

the label is associated in a way that is clear to the computer.1235

So, this name 1 that this label is for corresponds to the ID of the input that is right here.1242

This is just a simple text input, except that I made it required.1249

And this is the shorthand notation for it: required="required".1254

So, if I try and submit this without typing anything into this required name field, it just blinks and then highlights this field, because I didn't fill it in.1263

I'll click it again; it is indicating that I need to fill this in.1275

Now, you can also use the new email tag, which is actually an attribute.1280

You can give it a type attribute of email, and it will know that it is an email address.1288

And it will require whatever you have put in here to conform to some email syntax.1296

And also, you have given it this attribute placeholder, which fills in the input with a little example text that is grey.1303

And then, when I click on it, it disappears.1314

So, it just gives you a hint at what should go in there, and you can specify whatever you want.1316

The range is a new tag that lets you specify a range with this dial.1325

And this is still experimental at this point; we may have other ways that it is displayed.1333

For example, if you were to open this in Firefox right now, you wouldn't see this range dial.1342

You would actually see a text box like this, but it would still be expecting a range of data, rather than just regular text.1347

And then, lastly, this is the date input, and it is going to expect something in date format.1359

So, if I type something that is not date format, and then hit Submit, first of all it is going to complain that I haven't filled out the name;1369

once I fill out the name and hit Submit, it is going to complain that I don't have something in date format in the string here.1380

In this element, I just put "string!" which is not the right type of input.1388

In the future, we may even have HTML as part of the browser, where you click on a little date functional thing here1396

that will pull up an actual calendar, and you can select the date you want.1405

And that will be all controlled with various attributes in the form.1410

This is the basic overview of forms; there is obviously a lot more that you can look into,1424

especially when you are looking at other types of inputs.1432

HTML5 is working really hard to get a lot of those covered and have a natural way of doing it1437

that doesn't require a lot of styling and work--that just kind of happens automatically.1442

But if you wanted to stick with the simple forms, you can use those, as well.1448

And that should be the last slide, so thanks for watching Educator.com!1457

Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
OR

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.