Home » Computer Science » HTML 5

No. of
Lectures

Duration
(hrs:min)

6:49

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

4.6

74 ratings • 14 reviews

Level Beginner
30 Lessons (6hr : 49min)
1,125 already enrolled!
4.6 74 Ratings & 14 Reviews
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
Course Details

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%

By SIMON XENITELLIS•December 22, 2014

What features in EditPad attracted you ?
Is there a difference with NotePad++ ?
Thank you !

By Evilene Souza•November 17, 2014

UAUUU the class is amazing i am loving Educator.com!!!!! high quality

By James Connolly•April 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 bloggs•April 30, 2013

sorry jim, i spoke too soon. keep up the good work

By Rivka Stein•January 22, 2013

Thank you! Your lectures are great!