Brenton Strine

Brenton Strine

HTML Elements and Attributes

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 (16)

2 answers

Last reply by:
Tue Jul 14, 2020 3:45 PM

Post by Wesley Ge on December 17, 2018

Anyone watching in 2019!??!?!

0 answers

Post by Michael Kolody on December 28, 2015

Not good teaching. Not interactive. But I am finding these videos useful anyway. Needs to be updated.

0 answers

Post by ghanam alsmeeri on March 22, 2014

i can not complete lesson after 2 min how i can solve this problem ?

0 answers

Post by joe bloggs on April 29, 2013

perfect

0 answers

Post by Professor Strine on October 21, 2012

Smultron is what I am using in the video as a Text Editor. Most newer macs will do better to try TextWrangler. For PC, download Notepad++.

2 answers

Last reply by: Ricardo Autida
Sat Nov 10, 2012 3:16 PM

Post by Yara Tercero on May 19, 2012

Hello, I was wondering the same thing as @william avendano, which text editors would you recommend for a mac user? Thanks!

0 answers

Post by william Avendano on February 17, 2012

this class is so good

1 answer

Last reply by: Andrew Wygant
Sun Jun 10, 2012 4:14 PM

Post by william Avendano on February 14, 2012

to the teacher witch text editor do you use

1 answer

Last reply by: Ricardo Autida
Sat Nov 10, 2012 3:15 PM

Post by Ryan McCanna on January 28, 2012

I am loving this website. thanks educator. im hoping to be able to get a job after watching all the computer tutorials

HTML Elements and Attributes

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
  • Proper use of Elements and Attributes 0:14
    • Elements and Attributes
    • Example
  • Normal HTML Elements 2:00
    • Start Tag, Content, and End Tag
    • Example: Warning!
  • Void HTML Elements 3:23
    • Self-Closing Tags
    • List of Void Elements
    • Example: Line Break
  • HTML Comments 6:13
    • Purpose of Comment Tags
    • Example: Comment Tags
  • Attributes 7:25
    • Properties of Attributes
    • Example: Attributes
    • Example: Whitespace
  • HTML Character Codes 12:05
    • Character References
    • Example: Registered Trademark Symbol
    • Example: Using Character References
  • 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

Transcription: HTML Elements and Attributes

Welcome back to Educator.com.0000

Today's lesson on HTML and Elements and Attributes is going to cover just some of the basic syntax for elements and attributes.0002

Let's get started: Even though a proper use of the elements and attributes isn't technically a matter of syntax,0012

I am including it here because, if you use elements the wrong way, it is still non-conforming--which means you're wrong.0022

So, it will not actually break the browser, but your code is not correct.0030

The HTML5 working group defines all elements and attributes in a specific way, so that they have certain meanings; it is called semantics.0035

And if you use an element or an attribute for any purpose other than what it is meant to be used for, then your code will be non-conforming.0044

So, you need to remember to keep semantics in mind and code correctly.0053

You have to use the HTML5 spec elements and attributes; you can't make up your own and use ones from other specifications.0060

Here is an example of two headlines: Educator.com and Learn From the Top Instructors in America.0066

And they are both directly underneath the body element.0075

Now, this is actually semantically wrong, because this second header here is not a subsection heading.0078

It is more like a subtitle than anything else.0087

But what each one of these two tags are indicating is that it is beginning a new subsection.0091

To correct this, we would need to add another tag here, called <hgroup>, and then close it out here...stop hgroup.0097

And now, it is semantically correct, and the code is conforming.0115

The syntax for normal HTML elements is fairly simple.0122

It always consists of a start tag (which is this <strong>), and then the content0126

(which is what is between the start and the end tag), and the end tag.0131

And for normal HTML elements, that is the syntax.0136

You consider all of it the element, and then there are two tags: the start tag and the end tag,0142

although most people use the word "tag" and the word "element" interchangeably.0147

Let's look at an example, really quickly, of how to code a basic element.0154

We are going to do just the same thing as before: we are using the <strong> element.0165

And you will see that the text editor I am using automatically changes the color.0176

Your text editor doesn't necessarily have to do that.0181

And if we load it up in our browser, we can see that the text shows up.0185

The elements themselves don't show up--just the content of the element.0193

So now, let's look at void HTML elements, which are like normal elements, except they don't actually have any content to them.0205

They don't require an end tag; you can also call them self-closing tags.0213

And an example--probably the one you will use the most--is the <br> tag, which inserts a line break into the text.0216

Here, we have this little <br> tag inserted right before the word line.0224

And what it is going to do is create a line break in the browser.0229

And you will notice that, over here, there is no stop br; that is just because there is no content.0234

It doesn't encapsulate a certain amount of text; it is what it is.0240

The void HTML elements you will probably use the most will be the br tag, the hr tag (which stands for horizontal rule),0243

the image tag (which is probably one of the most important, because it allows you to include images--0255

it should be obvious why the image tag doesn't encapsulate any text; it just gives you the address to an image),0260

and then the input tag (when you get into forms and just have an input tag,0268

it doesn't have any content to it besides what you put in the attributes).0271

This is an exhaustive list of all the void elements, but don't worry about memorizing it right now.0277

What will happen is: when you need to use it, you will find out what it is, maybe from references like the HTML5 specifications, etc.0282

But as you learn the tags, you will learn what these different things are.0293

But the ones that I have indicated here are probably the most important.0297

Let's look, really quickly, at what it would look like to use a self-closing tag.0300

Let's say this warning here has a little sentence following it that says something like "This text has a <br> line break."0311

Now, you will see that it is showing up next to the strong Warning, right next to it.0335

And then, it breaks over right before the word "line."0341

Now, let's say I don't want it to be on the same line like that.0346

I can come in here and add another <br> above, and refresh again, and it pops down onto its own level.0349

That is how these tags usually work.0362

HTML comments are actually not something that the user is going to see;0374

but it is something that ends up being very useful for yourself (for self-notes), or for other web developers.0379

And it is sort of like an element, except that it has this special beginning, where you have the exclamation mark and two dashes.0384

And then, everything between that and then the two dashes and the closing > will be hidden from view for the user.0392

The browser will just read this, and then it will move on until it finds this pattern of text; and it will ignore everything else that it comes across.0400

Let's look, really quickly, at our code, to see what that would look like.0411

Now, if you are following along, you should know what is going to happen when I refresh here.0425

Nothing happens, because the text is hidden.0433

HTML attributes are a way of giving additional information to an element that describes additional functionality, behavior, or just information.0448

In this example, we have a link to Educator.com.0459

So, looking at it, you can see that this is the start tag, and this is the end tag.0462

This tag is between these two carats, here and here; but it has, additionally, an attribute.0472

And the attribute consists of...well, this entire thing here is the attribute.0479

But it is broken down into a name here, and the value of the attribute, and they are linked with a little equals sign (so the name equals the value).0486

And so, in this case, href is the name of the attribute (which stands for hyper reference, which just means it is a hyperlink).0498

And then, the value is the URL that the hyperlink is going to.0506

The browser is going to take this Educator word, and it is going to make it an anchor tag; it is going to make it anchored.0510

And then, it is going to make it a hyper reference to the URL educator.com.0517

Let's see what that looks like: first, let's just have the anchor tag by itself.0525

This is a placeholder link without the attribute.0530

When you put your cursor over it, it actually doesn't look that much different; and when I click on it, nothing happens.0544

But if we were to add the attribute in here, then we will see how it really works.0551

This is just simple right now, and I am not following some of the best practices of indentation.0561

It is just to give you a quick look at how this works out.0568

I am tabbing back over to the browser; when we refresh, you can now see that it is an underlined link.0572

And if you put your cursor over it, you can see: down at the bottom, the URL shows up.0579

And if I click on it, it will take us to educator.com.0583

In attributes, we can encapsulate the value with double quotes or single quotes or no quotes.0589

It is probably best practice to just do double quotes; it makes you save some time, because there are certain circumstances0597

where it will break if you don't use quotes--for example, if there is a space in the value, or other things like that.0603

You can also use as many attributes as you need to; just put them in the start tag and following a space.0609

Whitespace is a little bit counterintuitive to what you might think of in browsers,0623

because the browser will actually take as many whitespace characters as it finds in the code,0628

that are adjacent to each other, and collapse them into one space.0635

Let me pull up an example to make this a little bit more clear.0639

And you can probably see some of this happening already.0643

I am going to insert a few line breaks here, and then I am going to type a bunch of spaces, and then a whole bunch more spaces.0647

Now, what the browser is going to do in reading this code: it is going to take all these spaces here and collapse them into one space.0659

It's going to take all of these spaces and all of these line breaks up to here and collapse them into one space.0666

Just because I hit a carriage return here, it is not actually going to put a line break in; that is what this tag does.0673

And it is not going to use these spaces to put padding out between the words, or in front of a word.0680

It should just pop up by itself.0688

I just entered the words "hello world" here, and when I hit refresh, think about where it is going to show up.0694

OK, if you thought that it was going to show up down below, that is because you are thinking in terms of the way that Microsoft Word works.0706

But the code actually gets condensed.0712

OK, let's go to the next slide.0722

The last slide for today is HTML character codes; and this is for when you have weird characters,0728

that are nonstandard, that you need to include in your web page.0736

If you just try and paste them in--say, from Microsoft Word, or from some other location, it might just show up like nonsense in your page.0743

But that is why we have these special character codes.0751

For example, the registered trademark symbol--the code for it is ampersand, reg, semicolon.0755

And the browser will read this and create a little registered trademark symbol, instead of typing out these letters.0764

If you try to just paste it in, then--especially because the Internet deals with a lot of different computers0774

of different ages, different operating systems, different character sets, and different regions across the world,0779

It is going to show up differently in different places, and it is just going to be a mess.0786

But this allows you some reliable way to make it show up the same way in every browser, in every instance.0789

Let's clear this out and start over: let's say you wanted to type the 'a' character, with a little tilde accent above it.0800

The HTML code for that would be a, tilde, semicolon.0813

So, it starts with the ampersand; it always with the ampersand, and always ends with the semicolon.0820

Now, if we look at the browser and refresh it, you will see the a with the tilde.0826

Now, there are also two other ways that you can do this.0832

For the more common ones, you have the actual name written out, but you also have character codes that are just numeric.0836

So, it just happens that the numeric code for this one is 227, and it shows up just the same.0844

The ampersand is followed by a pound sign, in this case.0855

And then, there are also hexadecimal codes; and the hexadecimal for this one is ampersand, pound,0858

and then the hexadecimals have a little 'x' in front of them, and the code is E3; always end with a semicolon.0865

And refresh, and it will show up the same.0873

Now, these are the sort of things that you don't usually memorize.0876

You just sort of look them up when you need them for special cases.0879

So, if, say, your name has an ã in it, you are probably going to memorize this.0883

A couple other important ones are: every time you have an ampersand that you want to show up in your code,0888

you need to actually escape it by giving the character code for it.0895

And so, you just write &amp;, like this.0898

And then, another one that can be useful sometimes is the nonbreaking space; nbsp is a nonbreaking space.0906

And if I tab over and refresh, it won't show up, because it is a space; there it is.0914

But what it helps you do is: if you have something like a word,0920

and then another word that you don't want to be broken onto the next line,0928

if it wraps, then this nonbreaking space will show up as a space, but it counts as a character that is part of the word.0931

So, the browser will sort of see this entire thing as one word.0941

And it will keep it from wrapping onto the next line.0945

It looks just like a normal space here.0950

Let's look at some examples now to test how well you have been paying attention.0957

This is a basic element with a start tag and an end tag.0962

One of these is correct, and all of the rest are wrong.0969

You should be able to tell right away which one is right.0971

This one doesn't have an end tag; this one is correct; so is this one.0977

This one doesn't have the beginning carat here; and then this one is just totally wrong.0986

So, hopefully you got that one right; that was an easy starter.0993

Let's look down here: now, one of these is a correct usage of self-closing tags.0997

I kind of gave it away by calling it self-closing: this is not needed, because it is already closed--it closes itself.1010

This is maybe what you might think to do, encapsulating the text with the close br, but that is not necessary; it closes itself.1017

This is the right one--now, here is something interesting.1026

This line right here--this syntax is actually also correct; it goes back to XHTML, that needs to close itself.1029

So, sometimes you will see, in code, tags that self-close, and they will have this little slash.1037

It is not necessary; it is optional; and it is a valid syntax in HTML5, but unless you are writing XHTML, you probably don't need to worry about doing that.1042

Let's look at the next example: now, this is going to test your knowledge of attributes.1057

Look at these and see which one is correct and which ones are wrong.1064

OK, there are actually several that are correct.1072

You may think that this is wrong, because it doesn't have a quote.1077

But it doesn't have a space in it--it doesn't have any weird characters--so it is actually valid to have the name and the value set up like this, without a quote.1080

You can also do it with just a single quote, or with double quotes.1091

Double quotes are not showing up here, but if you put double quotes for all these other ones, they would be valid.1095

Now, this one: we have an element with multiple attributes.1101

And even though there is a line break in here, that is still all right, because whitespace, line breaks, and spaces condense into just the same sort of thing.1109

Now, done here is where we got it wrong.1120

In this one, we have the attribute actually plugged into the closing tag, instead of the starting tag; that is incorrect.1122

And then, here we forgot to put an equal sign, which is incorrect.1130

And even if we had put quotes in here, it still would be incorrect, because you need the equal sign.1134

Here is another example for you: can you tell what is wrong with this?1143

This actually isn't a syntax error; this goes back to semantics: h2 is a heading.1149

Actually, let's copy this text and put it into our browser and see what it looks like.1155

"I can't believe how

awesome

this is!"1170

So, it looks great, right?--if that is the way you wanted it to look.1173

But it is actually wrong, because the h2 element is a heading, and you are using it here for emphasis.1178

That is syntactically incorrect, and it is a non-conforming document.1188

A better use would be something like em, and then you can use CSS to come back and give it that huge look,1193

if you wanted to; although I think that would be a silly thing to do...but it's your website.1203

OK, this is a comment, and it has a little sub-comment inside of it; and then it finishes off; and this should look like this, actually.1209

The mistake here is: the browser is going to recognize this, and then it is going to search for the closing of that.1221

And it is going to get all the way to here, and then it is going to think that the comment is done.1228

So, it is going to think this is the comment; and then this is going to actually show up on your page, if you code it this way.1233

You can't nest comments, so we need to delete that.1238

And the last example is a whitespace example.1246

The question is, "Which of these will show up differently?"1250

Most of them are going to show up exactly the same; which ones will actually show up differently?1254

Let's show you: let's highlight all of them and look.1260

Let's save it. So, here is what happened: the last two, this one and this one, both had line breaks in the middle of them.1269

All the rest showed up exactly the same, and that is because the whitespace is collapsing in all of these.1282

Even though this has a line break, this has a line break and several space characters...1288

this one has a line break much like this one, but it is actually a line break that is entered in with the code; it is not whitespace.1293

And this is the same thing, with a space character set in between.1300

That concludes the lesson on attributes and elements today; thanks for watching Educator.com!1304

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.