Home » Computer Science » HTML 5
No. of
Lectures
Duration
(hrs:min)
30
6:49

Computer Science: HTML 5 Prof. Jim Hague, M.S.

4.6
74 ratings • 14 reviews
  • Level Beginner
  • 30 Lessons (6hr : 49min)
  • 1,125 already enrolled!
  • Audio: English

Jim Hague combines 15+ years of developing media products and teaching web design classes to bring Educator's capstone HTML 5 course to life. Jim has a M.S. in Biogenetics but has spent his career working on 300+ websites using HTML and other powerful languages and software. Jim has grown along with the web and is able to teach HTML to brand new web developers or dive into the important changes in HTML 5 for experienced programmers. Downloadable code with each lesson also allows learners to program along with Jim as he builds a sample website utilizing the newest features learned. The course covers everything from New Features to Planning, Tags, Videos, Hyperlinking, and Forms.

Table of Contents

Section 1: Introduction

  Overview of HTML 5 5:14
   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 7:46
   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? 6:09
   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 25:35
   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 15:11
   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 23:25
   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 11:45
   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 14:56
   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 6:42
   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 12:12
   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 6:20
   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 43:14
   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 15:59
   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 11:44
   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 8:02
   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 17:10
   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 5:32
   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 13:04
   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 25:50
   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 16:51
   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 22:34
   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 6:23
   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 8:29
   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 6:20
   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 7:06
   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 6:47
   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 13:29
   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 10:58
   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 15:15
   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 8:49
   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 

Duration: 6 hours, 49 minutes

Number of Lessons: 30

Student Feedback

4.6

14 Reviews

64%
29%
7%
0%
0%
By SIMON XENITELLISDecember 22, 2014
What features in EditPad  attracted you ?
Is there a difference with NotePad++ ?
Thank you !
By Evilene SouzaNovember 17, 2014
UAUUU the class is amazing i am loving Educator.com!!!!! high quality
By James ConnollyApril 15, 2014
I like the Scream composition you choose by Edward Munch. There is so much emotion in it. It is almost as if you can hear the guy about to scream. I honestly forgot who the artist was, and, for that reason, I am glad you incorporated into the lesson.  
Thank you
By joe bloggsApril 30, 2013
sorry jim, i spoke too soon. keep up the good work
By Rivka SteinJanuary 22, 2013
Thank you! Your lectures are great!
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.