HTML 5 Finishing Up
Section 3: HTML 5: Lecture 19 | 8:49 min
Lecture Description
In this lesson, our instructor Jim Hague finishes up the course by discussing registering a domain name. He explains the difference between registrar and a host, and how the domain name and host work. He also goes over FTP and shows you what it looks like.


Jim Hague
Finishing Up
Slide Duration:Table of Contents
Section 1: Introduction
Overview of HTML 5
5m 14s
- Intro0:00
- Lesson Overview0:08
- Sample of What HTML 5 Looks Like0:28
- Video Formats1:28
- Audio Files1:34
- Video and Audio Elements/ Attributes1:46
- Form Elements2:24
- Action2:34
- Example of Forms You'll Create2:45
- Java Script3:54
- Header and Body4:07
- Preview4:36
Types of Websites
7m 46s
- Intro0:00
- Lesson Overview0:25
- Types of Websites1:01
- E-Commerce1:12
- Promo1:52
- Database2:22
- Social Media3:10
- Languages of the Web3:47
- Server Side4:08
- Client Side6:06
What is HTML?
6m 9s
- Intro0:00
- Lesson Overview0:14
- What is HTML?0:34
- Markup Language0:42
- Definition1:35
- Programming Languages1:52
- Opening Tags/ Closing Tags3:10
- Examples3:23
- Tags That Don't Need Closing Tags3:56
- Source Code4:21
- Firefox4:46
- Internet Explorer5:00
- Chrome5:29
Creation of the Internet
25m 35s
- Intro0:00
- Lesson Overview0:17
- What is the Internet?0:56
- Definition1:04
- Main Frame1:29
- Who Invented the Computer?3:22
- Charles Babbage3:44
- Created Idea & Plans4:49
- The Difference Engine5:16
- Evolution of Computers5:30
- Server Room5:46
- Evolution of Computers6:49
- Apple Founders6:59
- Personal Computer7:12
- Evolution of Computers7:48
- Commodore (Apple)7:58
- 1990's PC8:11
- 2000's Computer Became More of Entertainment System8:35
- 1990's Laptop9:00
- Thinner Version of Laptop9:10
- iPhone/ Tablets9:34
- Creation of the Internet10:19
- Purpose of the Internet10:38
- Explain Diagram11:34
- Creation of the Internet12:19
- Ray Tomlinson13:15
- TELENET13:57
- Created for Concept of Logging In14:16
- U.S. Military's Interest14:35
- FTP15:11
- 1980's Telnet to TCP/IP15:40
- How TCP was Better15:58
- 1980's Newsgroups16:23
- Newsgroups Allows Collaboration Between Students & Professors16:35
- 1990's Search Engines17:15
- Gopher Address17:32
- 1900's Spidering18:12
- Definition18:25
- 1990's Search Engines19:27
- Mark Andreseen19:47
- Netscape20:30
- 2000's Social Media21:14
- 1990's AOL Chat Room21:34
- Myspace22:36
- Facebook23:50
The Impact in Our Lives
15m 11s
- Intro0:00
- Lesson Overview0:30
- 1990's Community0:59
- AOL Chat Rooms1:09
- 56.6K Modem1:49
- Internet's All About Community2:36
- 1990's Community3:54
- View Pictures of All Sorts of People4:08
- Pioneering Concept5:19
- .com Bubble Burst5:50
- What Are They6:04
- How Long They Lasted6:14
- What Caused the .com Bubble Burst6:30
- Brick & Mortar7:30
- Today8:23
- Things We Do With the Internet8:39
- Shop8:40
- Watch Movies9:00
- Online Dating9:27
- Social Media9:49
- Telephone10:01
- Learn10:16
- Tomorrow: Following10:36
- Hand Held Devices Will Become the Norm10:52
- Tomorrow: Bigger11:46
- Bigger Devices (Monitor)11:56
- Tomorrow: Apps12:40
- Every Company Will have an iPhone App12:51
- Tomorrow: Privacy Challenged13:38
- Tomorrow: Servers in the Home13:58
Careers in Web Development
23m 25s
- Intro0:00
- Lesson Overview0:49
- Front-End Developer1:08
- HTML1:24
- Javascript3:04
- CSS3:59
- Flash5:10
- Images Software6:58
- Importance of Front-End Developer8:15
- Set the Tone for the Project9:09
- Your Work is What People Will See9:30
- Your Work Sells10:17
- Control Navigation11:58
- Work With Them12:37
- Back-End Developer13:19
- Scenario of What It Does13:31
- Ensures Front-End Developer Connects With Server14:10
- Purpose of Back-End Developer15:27
- Reversing Scenario15:47
- Purpose of Back-End Developer17:19
- Back-End Developer17:27
- PHP17:52
- Javascript18:11
- ASP18:31
- Database18:54
- Functionalities19:51
- Work With Front-End Developer20:08
- Finding Work20:21
- Websites You Can Search At20:58
- Portfolio21:34
- Self-Employed22:02
Section 2: Getting Started
Tools for Use
11m 45s
- Intro0:00
- Lesson Overview0:34
- HTML Editors1:41
- Notepad2:16
- Edit Pad2:55
- NetBeans3:29
- Text Wrangler3:45
- Google Search3:57
- BBEdit4:42
- BBEdit's Website4:45
- Simultron5:09
- Simultron Example5:33
- Image Manipulation6:11
- Both Have Dream Weaver6:31
- What Is Dream Weaver7:03
- Kompozer8:15
- Kompozer Website8:32
- Coda9:04
- Paint & Paintbrush9:55
- FTP: File Transfer Protocol10:26
- Most Popular FTP10:47
- Firefox FTP11:03
Planning A Web Site
14m 56s
- Intro0:00
- Lesson Overview0:26
- Flowcharts0:37
- What is a Flowchart0:44
- Create with Google Docs2:42
- Schematics9:00
- What It Is9:08
- Pictorial Explanation: Draw Homepage of Website9:25
- Create with Google Docs10:49
Storyboarding
6m 42s
- Intro0:00
- Lesson Overview0:18
- Concepts0:32
- Schematics From Previous Lesson - Google Docs2:32
- Storyboarding4:11
- Image Manipulation4:13
- Photoshop4:23
- Important to See Website/ Coding First5:00
- Final Result of Schematics5:43
- Compare Schematics & Final Result6:06
Elements, Attributes and Tags
12m 12s
- Intro0:00
- Lesson Overview0:07
- What Are Tags?0:21
- Tags Are Mark-Up Language0:54
- Start Tag with No Attributes1:05
- What Are Elements1:46
- Point of Focus1:55
- Example2:01
- Purpose2:25
- Examples of Elements3:23
- Results When You Type In Editor5:11
- What Are Attributes5:53
- Definition6:05
- Examples6:41
- Examples of Attributes7:12
- Image7:22
- What Does the Browser Need to Know About the Image7:50
- See Code in Action11:05
Starting the Project
6m 20s
- Intro0:00
- Lesson Overview0:29
- Our Target Project1:09
- Navigation1:23
- Populated with Content1:37
- Save All Files2:03
- Sample Page to Create2:37
- What the Code Produces2:58
- How to Make Code Show up3:51
- Our Target Project4:01
- Less Than & Greater Than Code4:23
- Break to Next Line Code4:41
- Bullet Points Code4:51
- Text Code5:31
- See in Browser5:54
Section 3: HTML 5
Header Tags
43m 14s
- Intro0:00
- Lesson Overview0:02
- Header Section1:51
- Difference Between Header and Body Section2:15
- What the Header is Used For2:47
- Header Section Elements3:11
- Head Section3:24
- Mandatory Elements3:40
- <!DOCTYPE html>4:51
- Purpose5:04
- Show in Code Form6:33
- Show in Browser7:20
- Page You Will Be Creating9:02
- HTML Tag9:45
- Purpose10:49
- Files of HTML11:23
- Show in Browser12:26
- Show in Code Form13:17
- HEAD Tag16:44
- What It Is17:13
- Show in Browser19:05
- Show in Code Form19:34
- TITLE Tag22:02
- What it Consists of22:21
- Important for Search Engine Optimization22:35
- What Title Tag Looks Like23:24
- Show in Browser23:55
- Show in Code Form24:41
- What Are Elements?25:48
- Optional Elements26:09
- APP CACHE26:30
- Purpose26:37
- Cache27:51
- Show in Code Form28:30
- BASE28:59
- Why You Should Use It30:49
- Show in Code Form31:12
- Script32:40
- Show in Code Form34:10
- LINK34:44
- Purpose34:52
- Show in Code Form36:09
- META36:24
- About Information36:49
- Attributes of META Elements37:42
- Name & Keywords42:08
- Show in Code Form42:43
Text Styling
15m 59s
- Intro0:00
- Lesson Overview0:18
- Body Section1:34
- Font Tag1:53
- Color Attribute2:02
- Hexadecimal System2:26
- Figuring Out Hexadecimal3:39
- RGB Value4:22
- Google Hexadecimal Converter7:50
- Face Attribute9:22
- Common Fonts Used9:36
- How to Write It10:37
- Code Example10:56
- Size Attribute12:16
- Font Size12:27
- Lesson to Download13:28
- Examples of Different Font Attributes14:35
Information Tags
11m 44s
- Intro0:00
- Lesson Overview0:17
- <ABBR>1:10
- Stands for Abbreviation1:30
- Title2:16
- <ABBR> Example2:33
- Purpose of Coding3:25
- <ADDRESS>3:46
- Represents4:02
- <ADDRESS> Example4:45
- <ARTICLE>5:45
- Address Tag in Article Tag5:59
- <ARTICLE> Example6:59
- <ASIDE>7:25
- <ASIDE> Example7:48
- <CITE>8:25
- Represents8:30
- <CITE> Example8:56
- Practice: Download Info.htm9:59
- End Result11:22
Tags Used to Emphasize Words
8m 2s
- Intro0:00
- Lesson Overview0:17
- <DEL>1:22
- What It Does1:26
- Two Attributes1:45
- Example2:07
- <INS>2:52
- Two Attributes3:09
- Example3:15
- Header Tags <H1> to <H6>3:31
- Importance3:49
- How It's Displayed on Screen4:01
- <PRE>5:28
- Example5:52
- <EM>6:35
- Example: em.html7:12
Tags Used to Arrange Text
17m 10s
- Intro0:00
- Lesson Overview0:14
- <DL>1:12
- What It Stands For1:26
- <DT> & <DD>1:39
- Example1:57
- <P>3:04
- Example: Paragraph3:13
- <BLOCKQUOTE>3:48
- Example4:03
- <CAPTION>4:59
- Example5:32
- Tags for Rows5:56
- Information Inside Table is Represented By…6:15
- Caption Tag6:39
- <DIV>7:07
- Example7:31
- Used For8:03
- <FOOTER>8:18
- Example9:12
- Creating List with LI Tag (UL/OL)9:29
- Unordered List10:02
- Attributes10:10
- Example 110:51
- Ordered List & Numbers11:16
- Example 212:34
- Example 313:04
- Example Unordered List13:44
- <Hgroup>13:57
- Header Tags14:25
- Example15:06
- Practice: Download arrangetext.html15:59
Phrase Tags
5m 32s
- Intro0:00
- Lesson Overview0:25
- <Phrase Tags>1:31
- End Result1:56
- Strong Text2:16
- Definition Term2:50
- Computer Code3:05
- Sample Output from Computer Program3:32
- Keyboard Input4:12
- Variable4:30
- Download in Text Editor: phrasetag.html5:02
Images
13m 4s
- Intro0:00
- Lesson Overview0:07
- Knowing and Preparing Your Images1:03
- Photoshop1:41
- Other Things You Can Use for Image Manipulation2:08
- The Images Folder2:55
- Every Type of Element Belongs In Its Own Directory3:16
- Types of Images4:18
- Other Types of Images4:30
- PNG4:50
- Transparent Background in Photoshop6:05
- The Pulpit Rock: Image & Caption6:38
- <FIGURE>7:12
- Figure7:22
- Figcaption7:27
- Code for The Pulpit Rock7:34
- See the <figcaption>8:30
- Arrangements8:45
- Two Important Attributes9:06
- Sample Code9:47
- Types of Images10:30
- Where Text Appears10:38
- Image.html11:39
Hyperlinking
25m 50s
- Intro0:00
- Lesson Overview0:24
- Types of Links1:14
- Link Elements1:46
- Most Important Element: <A>1:55
- Attributes2:06
- Target2:43
- HREF3:33
- Target4:13
- Four Simple Attributes of Target4:30
- See Blank4:45
- Self5:36
- Parent6:02
- Top6:34
- REL/ REV6:57
- Relevance7:22
- Document with Rev/Rel Attributes7:49
- REL8:32
- REV8:41
- Name9:09
- Hyperlink9:57
- Example10:25
- Important: Use # Sign11:05
- Create Hyperlink11:51
- Click Here to Return to Top of Page12:31
- Images13:17
- Alternate Text13:25
- Area14:07
- Html Example14:33
- Refers to Images15:42
- How to Write Code from Example16:24
- Rectangle: Coordinates18:49
- Image Map19:37
- Circle21:56
- Polygon23:12
- HW23:56
- Area Website to Visit25:07
- Browser: Upload Image25:28
Tables
16m 51s
- Intro0:00
- Lesson Overview0:15
- Anatomy of a Table2:04
- Purpose of a Table2:14
- Elements/ Attributes3:01
- Cell4:06
- Alignment4:52
- Obsolete in HTML 5.05:09
- Anatomy of a Table5:42
- Opening & Ending Tags5:58
- Other Attributes6:12
- Border6:26
- Align6:37
- Cell Spacing7:28
- Cell Spacing vs Cell Padding8:13
- Rows9:01
- Anatomy of a Table9:54
- HTML 4.010:25
- CSS as defined by HTML 510:52
- Comparing HTML 4.0 & 5.012:35
- Website for CSS Padding Help14:43
- Tables Coding15:40
Forms
22m 34s
- Intro0:00
- Lesson Overview0:20
- Purpose of a Form0:39
- Form Elements (Objects)1:56
- Form Tag2:19
- Input Type2:51
- Type Attributes3:42
- Attributes Give Further Instructions3:56
- Download form1.html4:56
- Show in Browser5:14
- Text Field6:17
- Text Area7:26
- Radio Buttons8:15
- List Menu8:44
- File9:44
- Hidden10:46
- Password11:31
- Label12:00
- Button: HTML or Image12:48
- Download form2.html13:17
- Text Field13:52
- Name14:02
- Autofocus14:44
- Autocomplete15:21
- Disabled15:52
- Maxlength16:21
- Min Value16:53
- Multiple17:25
- Placeholder17:57
- Read Only18:29
- Required18:59
- Accept19:30
- Text Area Attributes19:52
- Wrap20:21
- Autofocus Disabled Maxlength20:34
Additional Form Elements
6m 23s
- Intro0:00
- Lesson Overview0:20
- Text Field Attributes: Download form3.html0:58
- Color1:35
- Range2:33
- Search3:02
- Select/ Optgroup/ Option3:39
- Select Tag3:52
- Optgroup Tag4:02
- Benefits of Select and Optgroup Option4:25
- Left Side: Simple List5:17
- Right Side: Optgroup Label5:35
The Form Tag
8m 29s
- Intro0:00
- Lesson Overview0:09
- Illustration of Form Tag0:55
- Form2:18
- Form Element2:35
- Form in Action2:45
- Backend Program3:08
- Form Elements3:37
- Open form4.htm: Text Field Attributes3:53
- Action4:17
- Enctype4:34
- Method5:01
- Novalidate6:17
- Target6:46
- Practice: Code to Work On7:16
Form Action
6m 20s
- Intro0:00
- Lesson Overview0:10
- Form1:41
- What Happens When You Hit the Submit Buttion2:06
- Path of Action3:11
- Browser Demo3:42
- Contact.php4:47
Audio
7m 6s
- Intro0:00
- Lesson Overview0:18
- Audio Formats1:11
- Four Main Formats1:17
- Audio Elements/ Attributes2:47
- Autoplay3:09
- Controls3:29
- Loop3:53
- Src4:41
- Audio Elements/ Attributes Live Demo4:57
- Audio.html5:09
- View Source6:20
Video
6m 47s
- Intro0:00
- Lesson Overview0:41
- Video Formats1:23
- List of Formats1:26
- MP41:37
- Quick Time1:58
- AVI and OGG2:07
- Video Elements/ Attributes3:02
- Autoplay3:19
- Controls3:34
- Source3:47
- More Attributes4:08
- Download Video.html5:31
- Code5:40
Iframe
13m 29s
- Intro0:00
- Lesson Overview0:23
- Purpose of an Iframe0:39
- Download Frame.html0:57
- Iframe Elements/ Attributes2:13
- Typical Attributes2:30
- Scrolling3:23
- Allowtransparency3:43
- Example Code4:02
- Auto4:51
- Open Frame.html in Browser5:57
- Open Text Editor7:22
- Frame2.html8:11
- Code8:25
- Source Code Change Scrolling8:59
- Source Code Name11:01
- Preparing HyperLinks12:05
- Target = Name of Frame12:38
- Code13:02
Character Codes
10m 58s
- Intro0:00
- Lesson Overview0:27
- Types of Codes1:33
- Common Symbols1:45
- Uncommon Symbols1:57
- ASCII Code Example3:19
- Copyright Info3:23
- Copyright Symbols4:00
- Minimum Digits5:46
- Website: ASCII Control Character7:00
- Website: Extended ASCII Codes9:50
Simple Java Script
15m 15s
- Intro0:00
- Lesson Overview0:21
- Placement of JS File2:35
- JS File Location2:39
- What is a JS File3:13
- javascript.js File3:35
- Script and Source Attribute4:18
- Analyzing Code4:59
- Javascript File5:15
- Common Code5:49
- Frame.html8:34
- Javascript Samples9:35
- References11:38
- Copy the Code11:58
- Website: Dynamic Drive12:42
Finishing Up
8m 49s
- Intro0:00
- Lesson Overview0:26
- Registering a Domain Name1:04
- Difference Between Registrar and a Host1:30
- Domain Name is Like Your Phone Number2:04
- Phone is Like Host2:32
- Keep Domain Name, Change Host3:34
- FTP4:49
- Uploading / Downloading5:04
- Software5:54
- Need This From Webhost6:30
- What a FTP File Looks Like7:26
- How it Looks After You Press Connect8:11
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 5
For more information, please see full course syllabus of HTML 5
Next Lecture
Previous Lecture
0 answers
Post by nguyen yen on July 26, 2012
The instuctor is funny and makes CS less dry for beginners like me. Hope to see Jim for further lesson!
0 answers
Post by Jorge Guerrero on June 30, 2012
Thank you for a great course!