Elements, Attributes and Tags, HTML 5

Loading video...

Next Lecture

Previous Lecture

Discussion
Quick Notes
Download Lecture Slides
Table of Contents
Related Services

Text Comments (1)

0 answers

Post by Jorge Guerrero on June 28, 2012

Aren't most of the img attributes best set using CSS?

Elements, Attributes and Tags

HTML consists of Tags, Elements, and Attributes
A start tag consists of an opening angle bracket (<) followed by the element name, zero or more space separated attribute/value pairs, and a closing angle bracket (>).
An element commands the browser what to express
An attribute defines the element.
Some elements had and ending, others don't.

Elements, Attributes and 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

Lesson Overview

What Are Tags?

What Are Elements

Examples of Elements

Results When You Type In Editor

What Are Attributes

Examples of Attributes

See Code in Action

I. Introduction
	Overview of HTML 5	5:14
	Types of Websites	7:46
	What is HTML?	6:09
	Creation of the Internet	25:35
	The Impact in Our Lives	15:11
	Careers in Web Development	23:25
II. Getting Started
	Tools for Use	11:45
	Planning A Web Site	14:56
	Storyboarding	6:42
	Elements, Attributes and Tags	12:12
	Starting the Project	6:20
III. HTML 5
	Header Tags	43:14
	Text Styling	15:59
	Information Tags	11:44
	Tags Used to Emphasize Words	8:02
	Tags Used to Arrange Text	17:10
	Phrase Tags	5:32
	Images	13:04
	Hyperlinking	25:50
	Tables	16:51
	Forms	22:34
	Additional Form Elements	6:23
	The Form Tag	8:29
	Form Action	6:20
	Audio	7:06
	Video	6:47
	Iframe	13:29
	Character Codes	10:58
	Simple Java Script	15:15
	Finishing Up	8:49

Computer Science: HTML 5

I. 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
II. 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
III. 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

Related Services

Name	Description	Link
Domain Name Registration
Go Daddy	Go Daddy is the world’s #1 domain name registrar. In addition to domain registration and hosting, Go Daddy also provides e-business related software and services.	Visit Go Daddy
Website Hosting
Name	Description	Link
Blue Host	Bluehost was recently awarded Best New Hosting Company and Best Customer Support by the some of the leading hosting review companies. $6.95/month hosting.	Visit Blue Host
Host Gator	HostGator is a world leading provider of shared, reseller and dedicated web hosting. Starting at $3.96/month hosting.	Visit Host Gator
Bigcommerce	Bigcommerce is an easy to use eCommerce software with over 30,000 online stores. If you are interested in building your own eCommerce website, Educator.com highly recommend giving Bigcommerce a try!	Visit Bigcommerce
Secure Online Backup
Name	Description	Link
Carbonite	Back up your work online with Carbonite! The choice is yours: $1500 hard drive recovery OR $59.00/year for unlimited backup? With nearly 200 billion files backed up and counting, Carbonite is the leading provider of online backup.	Visit Carbonite

Educator

the best free way to manage your classroom

Free Class Website!

Free Unlimited Hosting!

Free Educator.com Domain!

Elements, Attributes and Tags

Share this knowledge with your friends!

Elements, Attributes and Tags

Elements, Attributes and Tags

Computer Science: HTML 5

Related Services