Home » Computer Science » HTML 5 » Header Tags

Connecting...

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 5
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

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Services

Lecture Comments (24)

2 answers

Last reply by: David Llewellyn
Fri Feb 27, 2015 12:28 PM

Post by David Llewellyn on February 26, 2015

The slides of the web pages shown in this lecture show the title in some cursive script but the code you've asked us to write just gives a bigger version of the default script. I presume that we need to go into java script to do this.

1 answer

Last reply by: Professor Jim Hague
Tue Jun 18, 2013 5:32 PM

Post by Harry Hayes on June 18, 2013

The video stops at 42 seconds and does not proceed further. I have rebooted my system and watched the video that follows without any problems. I really need this video to move further. Thanks.

0 answers

Post by samyah refadah on May 14, 2013

Got it Thanks

1 answer

Last reply by: Professor Jim Hague
Fri May 17, 2013 11:59 PM

Post by samyah refadah on May 14, 2013

How can I download code files. i can't see any link to zip file

2 answers

Last reply by: Professor Jim Hague
Mon May 6, 2013 6:35 PM

Post by Julie Roeder-Marsh on May 3, 2013

can someone be SPECIFIC about how to get to the downloadable files. every lesson had a link that looks the same. all come up at html_5_hague. I see nothing that refers to lesson 12 or 13 as were referred to in those lessons. I see refs to go to one of the last lessons of Section II. Some specific would be great. I have already wasted a bunch of time trying to figure this out. HELP PLEASE!

1 answer

Last reply by: Professor Jim Hague
Thu Mar 28, 2013 12:39 PM

Post by Adil Alkarkhi on March 28, 2013

Can I use <> instead &lt; &gt;?

1 answer

Last reply by: Professor Hague
Mon Nov 5, 2012 2:46 AM

Post by hannah rafiq on November 3, 2012

my Q about base when i copy the code and past it into texteditor and save it i didnot see any thing

4 answers

Last reply by: Professor Jim Hague
Sun May 10, 2015 12:13 AM

Post by Austin Rother on October 30, 2012

why do you use the &lt part for this:
&lt;Head&gt

Why not use <Head> ?

1 answer

Last reply by: Professor Hague
Fri Sep 7, 2012 12:53 AM

Post by Hernan Arboleda Hernan Arboleda on July 17, 2012

I download files and, file link.html and links.htm are the same ??? please place the file link.html for Lecture Description as in 36:16 minutes on video.

Please.

0 answers

Post by Jorge Guerrero on June 28, 2012

You need to get the files from one of the last lessons of Section II. The links in these later lessons are disabled or not working for some reason.

0 answers

Post by Jorge Guerrero on June 28, 2012

There's no problem in only coding one greater/less than sign, as the purpose is to have the browser NOT read the tag, but show it as content. You can also write macros using text editors, such as Notepad++ so you can code with confidence then run the macro on the document once you're finished saving you a great deal of time.

Header Tags

  • All HTML coding isseparated into two sections: Head and Body
  • Head Section Elements include:!DOCTYPE html, HTML, Head, Title, App Cache, Base, Script, Link, Meta,Style
  • The <!DOCTYPE> instructs the web browser about what version of HTML the page is written in.
  • The HTML tag tells the browser about the document presented.
  • Header Tag: Important for includes, scripts, meta information for SEO
  • TITLE Tag isImportant for Search Engine Optimization
  • Base tag specifies a target URL to refer content (images)
  • Meta tags Provides information about a web page

Header Tags

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
  • Lesson Overview 0:02
  • Header Section 1:51
    • Difference Between Header and Body Section
    • What the Header is Used For
  • Header Section Elements 3:11
    • Head Section
    • Mandatory Elements
  • <!DOCTYPE html> 4:51
    • Purpose
    • Show in Code Form
    • Show in Browser
    • Page You Will Be Creating
  • HTML Tag 9:45
    • Purpose
    • Files of HTML
    • Show in Browser
    • Show in Code Form
  • HEAD Tag 16:44
    • What It Is
    • Show in Browser
    • Show in Code Form
  • TITLE Tag 22:02
    • What it Consists of
    • Important for Search Engine Optimization
    • What Title Tag Looks Like
    • Show in Browser
    • Show in Code Form
  • What Are Elements? 25:48
    • Optional Elements
  • APP CACHE 26:30
    • Purpose
    • Cache
    • Show in Code Form
  • BASE 28:59
    • Why You Should Use It
    • Show in Code Form
  • Script 32:40
    • Show in Code Form
  • LINK 34:44
    • Purpose
    • Show in Code Form
  • META 36:24
    • About Information
    • Attributes of META Elements
    • Name & Keywords
    • Show in Code Form

Related Services

Jim Hague

Jim Hague

Header Tags

Slide Duration:

Table of Contents

Section 1: Introduction
Overview of HTML 5

5m 14s

Intro
0:00
Lesson Overview
0:08
Sample of What HTML 5 Looks Like
0:28
Video Formats
1:28
Audio Files
1:34
Video and Audio Elements/ Attributes
1:46
Form Elements
2:24
Action
2:34
Example of Forms You'll Create
2:45
Java Script
3:54
Header and Body
4:07
Preview
4:36
Types of Websites

7m 46s

Intro
0:00
Lesson Overview
0:25
Types of Websites
1:01
E-Commerce
1:12
Promo
1:52
Database
2:22
Social Media
3:10
Languages of the Web
3:47
Server Side
4:08
Client Side
6:06
What is HTML?

6m 9s

Intro
0:00
Lesson Overview
0:14
What is HTML?
0:34
Markup Language
0:42
Definition
1:35
Programming Languages
1:52
Opening Tags/ Closing Tags
3:10
Examples
3:23
Tags That Don't Need Closing Tags
3:56
Source Code
4:21
Firefox
4:46
Internet Explorer
5:00
Chrome
5:29
Creation of the Internet

25m 35s

Intro
0:00
Lesson Overview
0:17
What is the Internet?
0:56
Definition
1:04
Main Frame
1:29
Who Invented the Computer?
3:22
Charles Babbage
3:44
Created Idea & Plans
4:49
The Difference Engine
5:16
Evolution of Computers
5:30
Server Room
5:46
Evolution of Computers
6:49
Apple Founders
6:59
Personal Computer
7:12
Evolution of Computers
7:48
Commodore (Apple)
7:58
1990's PC
8:11
2000's Computer Became More of Entertainment System
8:35
1990's Laptop
9:00
Thinner Version of Laptop
9:10
iPhone/ Tablets
9:34
Creation of the Internet
10:19
Purpose of the Internet
10:38
Explain Diagram
11:34
Creation of the Internet
12:19
Ray Tomlinson
13:15
TELENET
13:57
Created for Concept of Logging In
14:16
U.S. Military's Interest
14:35
FTP
15:11
1980's Telnet to TCP/IP
15:40
How TCP was Better
15:58
1980's Newsgroups
16:23
Newsgroups Allows Collaboration Between Students & Professors
16:35
1990's Search Engines
17:15
Gopher Address
17:32
1900's Spidering
18:12
Definition
18:25
1990's Search Engines
19:27
Mark Andreseen
19:47
Netscape
20:30
2000's Social Media
21:14
1990's AOL Chat Room
21:34
Myspace
22:36
Facebook
23:50
The Impact in Our Lives

15m 11s

Intro
0:00
Lesson Overview
0:30
1990's Community
0:59
AOL Chat Rooms
1:09
56.6K Modem
1:49
Internet's All About Community
2:36
1990's Community
3:54
View Pictures of All Sorts of People
4:08
Pioneering Concept
5:19
.com Bubble Burst
5:50
What Are They
6:04
How Long They Lasted
6:14
What Caused the .com Bubble Burst
6:30
Brick & Mortar
7:30
Today
8:23
Things We Do With the Internet
8:39
Shop
8:40
Watch Movies
9:00
Online Dating
9:27
Social Media
9:49
Telephone
10:01
Learn
10:16
Tomorrow: Following
10:36
Hand Held Devices Will Become the Norm
10:52
Tomorrow: Bigger
11:46
Bigger Devices (Monitor)
11:56
Tomorrow: Apps
12:40
Every Company Will have an iPhone App
12:51
Tomorrow: Privacy Challenged
13:38
Tomorrow: Servers in the Home
13:58
Careers in Web Development

23m 25s

Intro
0:00
Lesson Overview
0:49
Front-End Developer
1:08
HTML
1:24
Javascript
3:04
CSS
3:59
Flash
5:10
Images Software
6:58
Importance of Front-End Developer
8:15
Set the Tone for the Project
9:09
Your Work is What People Will See
9:30
Your Work Sells
10:17
Control Navigation
11:58
Work With Them
12:37
Back-End Developer
13:19
Scenario of What It Does
13:31
Ensures Front-End Developer Connects With Server
14:10
Purpose of Back-End Developer
15:27
Reversing Scenario
15:47
Purpose of Back-End Developer
17:19
Back-End Developer
17:27
PHP
17:52
Javascript
18:11
ASP
18:31
Database
18:54
Functionalities
19:51
Work With Front-End Developer
20:08
Finding Work
20:21
Websites You Can Search At
20:58
Portfolio
21:34
Self-Employed
22:02
Section 2: Getting Started
Tools for Use

11m 45s

Intro
0:00
Lesson Overview
0:34
HTML Editors
1:41
Notepad
2:16
Edit Pad
2:55
NetBeans
3:29
Text Wrangler
3:45
Google Search
3:57
BBEdit
4:42
BBEdit's Website
4:45
Simultron
5:09
Simultron Example
5:33
Image Manipulation
6:11
Both Have Dream Weaver
6:31
What Is Dream Weaver
7:03
Kompozer
8:15
Kompozer Website
8:32
Coda
9:04
Paint & Paintbrush
9:55
FTP: File Transfer Protocol
10:26
Most Popular FTP
10:47
Firefox FTP
11:03
Planning A Web Site

14m 56s

Intro
0:00
Lesson Overview
0:26
Flowcharts
0:37
What is a Flowchart
0:44
Create with Google Docs
2:42
Schematics
9:00
What It Is
9:08
Pictorial Explanation: Draw Homepage of Website
9:25
Create with Google Docs
10:49
Storyboarding

6m 42s

Intro
0:00
Lesson Overview
0:18
Concepts
0:32
Schematics From Previous Lesson - Google Docs
2:32
Storyboarding
4:11
Image Manipulation
4:13
Photoshop
4:23
Important to See Website/ Coding First
5:00
Final Result of Schematics
5:43
Compare Schematics & Final Result
6:06
Elements, Attributes and Tags

12m 12s

Intro
0:00
Lesson Overview
0:07
What Are Tags?
0:21
Tags Are Mark-Up Language
0:54
Start Tag with No Attributes
1:05
What Are Elements
1:46
Point of Focus
1:55
Example
2:01
Purpose
2:25
Examples of Elements
3:23
Results When You Type In Editor
5:11
What Are Attributes
5:53
Definition
6:05
Examples
6:41
Examples of Attributes
7:12
Image
7:22
What Does the Browser Need to Know About the Image
7:50
See Code in Action
11:05
Starting the Project

6m 20s

Intro
0:00
Lesson Overview
0:29
Our Target Project
1:09
Navigation
1:23
Populated with Content
1:37
Save All Files
2:03
Sample Page to Create
2:37
What the Code Produces
2:58
How to Make Code Show up
3:51
Our Target Project
4:01
Less Than & Greater Than Code
4:23
Break to Next Line Code
4:41
Bullet Points Code
4:51
Text Code
5:31
See in Browser
5:54
Section 3: HTML 5
Header Tags

43m 14s

Intro
0:00
Lesson Overview
0:02
Header Section
1:51
Difference Between Header and Body Section
2:15
What the Header is Used For
2:47
Header Section Elements
3:11
Head Section
3:24
Mandatory Elements
3:40
<!DOCTYPE html>
4:51
Purpose
5:04
Show in Code Form
6:33
Show in Browser
7:20
Page You Will Be Creating
9:02
HTML Tag
9:45
Purpose
10:49
Files of HTML
11:23
Show in Browser
12:26
Show in Code Form
13:17
HEAD Tag
16:44
What It Is
17:13
Show in Browser
19:05
Show in Code Form
19:34
TITLE Tag
22:02
What it Consists of
22:21
Important for Search Engine Optimization
22:35
What Title Tag Looks Like
23:24
Show in Browser
23:55
Show in Code Form
24:41
What Are Elements?
25:48
Optional Elements
26:09
APP CACHE
26:30
Purpose
26:37
Cache
27:51
Show in Code Form
28:30
BASE
28:59
Why You Should Use It
30:49
Show in Code Form
31:12
Script
32:40
Show in Code Form
34:10
LINK
34:44
Purpose
34:52
Show in Code Form
36:09
META
36:24
About Information
36:49
Attributes of META Elements
37:42
Name & Keywords
42:08
Show in Code Form
42:43
Text Styling

15m 59s

Intro
0:00
Lesson Overview
0:18
Body Section
1:34
Font Tag
1:53
Color Attribute
2:02
Hexadecimal System
2:26
Figuring Out Hexadecimal
3:39
RGB Value
4:22
Google Hexadecimal Converter
7:50
Face Attribute
9:22
Common Fonts Used
9:36
How to Write It
10:37
Code Example
10:56
Size Attribute
12:16
Font Size
12:27
Lesson to Download
13:28
Examples of Different Font Attributes
14:35
Information Tags

11m 44s

Intro
0:00
Lesson Overview
0:17
<ABBR>
1:10
Stands for Abbreviation
1:30
Title
2:16
<ABBR> Example
2:33
Purpose of Coding
3:25
<ADDRESS>
3:46
Represents
4:02
<ADDRESS> Example
4:45
<ARTICLE>
5:45
Address Tag in Article Tag
5:59
<ARTICLE> Example
6:59
<ASIDE>
7:25
<ASIDE> Example
7:48
<CITE>
8:25
Represents
8:30
<CITE> Example
8:56
Practice: Download Info.htm
9:59
End Result
11:22
Tags Used to Emphasize Words

8m 2s

Intro
0:00
Lesson Overview
0:17
<DEL>
1:22
What It Does
1:26
Two Attributes
1:45
Example
2:07
<INS>
2:52
Two Attributes
3:09
Example
3:15
Header Tags <H1> to <H6>
3:31
Importance
3:49
How It's Displayed on Screen
4:01
<PRE>
5:28
Example
5:52
<EM>
6:35
Example: em.html
7:12
Tags Used to Arrange Text

17m 10s

Intro
0:00
Lesson Overview
0:14
<DL>
1:12
What It Stands For
1:26
<DT> & <DD>
1:39
Example
1:57
<P>
3:04
Example: Paragraph
3:13
<BLOCKQUOTE>
3:48
Example
4:03
<CAPTION>
4:59
Example
5:32
Tags for Rows
5:56
Information Inside Table is Represented By…
6:15
Caption Tag
6:39
<DIV>
7:07
Example
7:31
Used For
8:03
<FOOTER>
8:18
Example
9:12
Creating List with LI Tag (UL/OL)
9:29
Unordered List
10:02
Attributes
10:10
Example 1
10:51
Ordered List & Numbers
11:16
Example 2
12:34
Example 3
13:04
Example Unordered List
13:44
<Hgroup>
13:57
Header Tags
14:25
Example
15:06
Practice: Download arrangetext.html
15:59
Phrase Tags

5m 32s

Intro
0:00
Lesson Overview
0:25
<Phrase Tags>
1:31
End Result
1:56
Strong Text
2:16
Definition Term
2:50
Computer Code
3:05
Sample Output from Computer Program
3:32
Keyboard Input
4:12
Variable
4:30
Download in Text Editor: phrasetag.html
5:02
Images

13m 4s

Intro
0:00
Lesson Overview
0:07
Knowing and Preparing Your Images
1:03
Photoshop
1:41
Other Things You Can Use for Image Manipulation
2:08
The Images Folder
2:55
Every Type of Element Belongs In Its Own Directory
3:16
Types of Images
4:18
Other Types of Images
4:30
PNG
4:50
Transparent Background in Photoshop
6:05
The Pulpit Rock: Image & Caption
6:38
<FIGURE>
7:12
Figure
7:22
Figcaption
7:27
Code for The Pulpit Rock
7:34
See the <figcaption>
8:30
Arrangements
8:45
Two Important Attributes
9:06
Sample Code
9:47
Types of Images
10:30
Where Text Appears
10:38
Image.html
11:39
Hyperlinking

25m 50s

Intro
0:00
Lesson Overview
0:24
Types of Links
1:14
Link Elements
1:46
Most Important Element: <A>
1:55
Attributes
2:06
Target
2:43
HREF
3:33
Target
4:13
Four Simple Attributes of Target
4:30
See Blank
4:45
Self
5:36
Parent
6:02
Top
6:34
REL/ REV
6:57
Relevance
7:22
Document with Rev/Rel Attributes
7:49
REL
8:32
REV
8:41
Name
9:09
Hyperlink
9:57
Example
10:25
Important: Use # Sign
11:05
Create Hyperlink
11:51
Click Here to Return to Top of Page
12:31
Images
13:17
Alternate Text
13:25
Area
14:07
Html Example
14:33
Refers to Images
15:42
How to Write Code from Example
16:24
Rectangle: Coordinates
18:49
Image Map
19:37
Circle
21:56
Polygon
23:12
HW
23:56
Area Website to Visit
25:07
Browser: Upload Image
25:28
Tables

16m 51s

Intro
0:00
Lesson Overview
0:15
Anatomy of a Table
2:04
Purpose of a Table
2:14
Elements/ Attributes
3:01
Cell
4:06
Alignment
4:52
Obsolete in HTML 5.0
5:09
Anatomy of a Table
5:42
Opening & Ending Tags
5:58
Other Attributes
6:12
Border
6:26
Align
6:37
Cell Spacing
7:28
Cell Spacing vs Cell Padding
8:13
Rows
9:01
Anatomy of a Table
9:54
HTML 4.0
10:25
CSS as defined by HTML 5
10:52
Comparing HTML 4.0 & 5.0
12:35
Website for CSS Padding Help
14:43
Tables Coding
15:40
Forms

22m 34s

Intro
0:00
Lesson Overview
0:20
Purpose of a Form
0:39
Form Elements (Objects)
1:56
Form Tag
2:19
Input Type
2:51
Type Attributes
3:42
Attributes Give Further Instructions
3:56
Download form1.html
4:56
Show in Browser
5:14
Text Field
6:17
Text Area
7:26
Radio Buttons
8:15
List Menu
8:44
File
9:44
Hidden
10:46
Password
11:31
Label
12:00
Button: HTML or Image
12:48
Download form2.html
13:17
Text Field
13:52
Name
14:02
Autofocus
14:44
Autocomplete
15:21
Disabled
15:52
Maxlength
16:21
Min Value
16:53
Multiple
17:25
Placeholder
17:57
Read Only
18:29
Required
18:59
Accept
19:30
Text Area Attributes
19:52
Wrap
20:21
Autofocus Disabled Maxlength
20:34
Additional Form Elements

6m 23s

Intro
0:00
Lesson Overview
0:20
Text Field Attributes: Download form3.html
0:58
Color
1:35
Range
2:33
Search
3:02
Select/ Optgroup/ Option
3:39
Select Tag
3:52
Optgroup Tag
4:02
Benefits of Select and Optgroup Option
4:25
Left Side: Simple List
5:17
Right Side: Optgroup Label
5:35
The Form Tag

8m 29s

Intro
0:00
Lesson Overview
0:09
Illustration of Form Tag
0:55
Form
2:18
Form Element
2:35
Form in Action
2:45
Backend Program
3:08
Form Elements
3:37
Open form4.htm: Text Field Attributes
3:53
Action
4:17
Enctype
4:34
Method
5:01
Novalidate
6:17
Target
6:46
Practice: Code to Work On
7:16
Form Action

6m 20s

Intro
0:00
Lesson Overview
0:10
Form
1:41
What Happens When You Hit the Submit Buttion
2:06
Path of Action
3:11
Browser Demo
3:42
Contact.php
4:47
Audio

7m 6s

Intro
0:00
Lesson Overview
0:18
Audio Formats
1:11
Four Main Formats
1:17
Audio Elements/ Attributes
2:47
Autoplay
3:09
Controls
3:29
Loop
3:53
Src
4:41
Audio Elements/ Attributes Live Demo
4:57
Audio.html
5:09
View Source
6:20
Video

6m 47s

Intro
0:00
Lesson Overview
0:41
Video Formats
1:23
List of Formats
1:26
MP4
1:37
Quick Time
1:58
AVI and OGG
2:07
Video Elements/ Attributes
3:02
Autoplay
3:19
Controls
3:34
Source
3:47
More Attributes
4:08
Download Video.html
5:31
Code
5:40
Iframe

13m 29s

Intro
0:00
Lesson Overview
0:23
Purpose of an Iframe
0:39
Download Frame.html
0:57
Iframe Elements/ Attributes
2:13
Typical Attributes
2:30
Scrolling
3:23
Allowtransparency
3:43
Example Code
4:02
Auto
4:51
Open Frame.html in Browser
5:57
Open Text Editor
7:22
Frame2.html
8:11
Code
8:25
Source Code Change Scrolling
8:59
Source Code Name
11:01
Preparing HyperLinks
12:05
Target = Name of Frame
12:38
Code
13:02
Character Codes

10m 58s

Intro
0:00
Lesson Overview
0:27
Types of Codes
1:33
Common Symbols
1:45
Uncommon Symbols
1:57
ASCII Code Example
3:19
Copyright Info
3:23
Copyright Symbols
4:00
Minimum Digits
5:46
Website: ASCII Control Character
7:00
Website: Extended ASCII Codes
9:50
Simple Java Script

15m 15s

Intro
0:00
Lesson Overview
0:21
Placement of JS File
2:35
JS File Location
2:39
What is a JS File
3:13
javascript.js File
3:35
Script and Source Attribute
4:18
Analyzing Code
4:59
Javascript File
5:15
Common Code
5:49
Frame.html
8:34
Javascript Samples
9:35
References
11:38
Copy the Code
11:58
Website: Dynamic Drive
12:42
Finishing Up

8m 49s

Intro
0:00
Lesson Overview
0:26
Registering a Domain Name
1:04
Difference Between Registrar and a Host
1:30
Domain Name is Like Your Phone Number
2:04
Phone is Like Host
2:32
Keep Domain Name, Change Host
3:34
FTP
4:49
Uploading / Downloading
5:04
Software
5:54
Need This From Webhost
6:30
What a FTP File Looks Like
7:26
How it Looks After You Press Connect
8:11
Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
or
Still having trouble? Contact us
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.