Your First Web Page, HTML

Loading video...

Next Lecture

Previous Lecture

Discussion
Download Lecture Slides
Table of Contents
Related Services

	2 answers Last reply by: Brenton Strine Sat Apr 23, 2011 2:28 PM Post by Vasilios Sahinidis on January 7, 2011 How do I get the numbers on the left? Thanks.
	1 answer Last reply by: joseph lucky Sat Jun 9, 2012 3:04 PM Post by Carolina DaSilva on January 10, 2011 when I save it under .html , open it, and click option/command/u I see more than just the text I have on the page. It actually has html... why is that happening?
	1 answer Last reply by: samyah refadah Sat Apr 13, 2013 8:40 PM Post by Alena Matsiukhina on February 7, 2011 When I do it in TextEdit, the tags do not highlight in blue. Why? What wrong? :( please help.
	1 answer Last reply by: Kelvin Shang Thu Apr 7, 2011 12:48 AM Post by Suzanne McCord on March 5, 2011 I don't know what you mean by "Hit option command u in your browser". Is this a website or keys on the keyboard. Please be more literal. What do you mean by "hit"?
	1 answer Last reply by: Steve Flanigan Sat Mar 5, 2011 5:05 PM Post by Suzanne McCord on March 5, 2011 My operating system is Window 7. What is my Text Editor called? I can't bring one up to even get started.
	1 answer Last reply by: Brenton Strine Fri Aug 19, 2011 6:02 PM Post by Silas Stanley on August 18, 2011 Mr.Brenton, How do I upload the picture to my website the website keeps giving me this little icon and when i right click and hit show picture it doesn't show? Please help.
	2 answers Last reply by: Vivaldo Ribeiro Sat May 26, 2012 9:38 PM Post by Khloe Zelenko on January 14, 2012 Hello. I am stuck on the photo too. I did start a file titled HTML and I saved my Notepad document and my photo in the same folder. I just get a box with a red X in it where my photo should be. The picture is saved as a jpg. Any thoughts on how to fix this problem?
	0 answers Post by isaac N harper jr on March 5, 2012 This lesson make sense after taking the HTML lessons. The lectures like this one where you explain the code with demos as you go along work best fro me.Thank you very much!
	0 answers Post by Callistus Elue on April 17, 2012 Having followed you step by step developing my web page by working within my texteditor, how do I now look it all up as my web page and thus my first website?
	0 answers Post by Suresh Manchala on September 1, 2012 I have zero knowledge about coding. What is the pre-requisite to learn HTML ?
	0 answers Post by paul shrubb on October 18, 2012 How can i skip forward to where i left off. The progress bar wont let me
	0 answers Post by Ricardo Autida on November 9, 2012 Hi I am using Macbook Pro and my browser is Safari I only used w3schools.com website to type codes not on my windows 7 because it is really small but my problem is the video keep repeating so I switch to Mozilla Firefox any help will do just answer me plesae thanks because the video keep repeating and it stop
	0 answers Post by Rishabh Kasarla on January 12 at 09:53:16 PM Hi! this lecture was awesome, I already built a website!!
	0 answers Post by kent chau on February 3 at 07:03:50 PM Hi, I am trying to read the answer for question posted by others. Y does it need me to log in again and again even I already logged in?
	0 answers Post by Michael Trow on February 7 at 06:19:06 AM <img src="me.png"> the photo is not uploading I am just getting a little white box on the website. What can I do?
	0 answers Post by Michael Trow on February 7 at 08:37:57 AM only the first website on the list is loading up
	1 answer Last reply by: Professor Strine Mon Apr 22, 2013 10:45 PM Post by sushma penmetsa on April 22 at 10:19:52 PM Mr. Brenton Strine, Is there a possible way to download the html programmer that you have, which highlights the tags and does other neat stuff. Thank You.
	1 answer Last reply by: Professor Strine Fri May 3, 2013 1:40 PM Post by Harry Hayes on May 3 at 12:47:51 PM Professor Strine, Thanks for taking the time to prepare these (very good) presentations. I too have been working on HTML on my own. Self taught HTML is not a particularly easy undertaking. Fun and exciting when I see the results on the screen, but it can be very exasperating without the proper training and direction. I have learned enough on my own to get myself into positions that I do not know how to get myself back out, so I decided to stop fighting against those elements - that I just did not know - and found Educator.com (completely by accident...but I believe that all things are meant for a reason and not by chance). I am writing this to you to thank you. If I would have had quality professors, as you are, when I was in college I would have enjoyed it much more. I am really looking forward to taking these courses and then moving on to CSS and JAVASCRIPT. I have been in the industrial engineering field most of my adult life. Beginning as a Mechanical Draftsman working with 2D Autodesk AutoCAD and most recently five years working as a Mechanical Engineer working with 3D Solid Edge and also 2D Autodesk AutoCAD for design layouts for customers. I became very interested in Web design as our IT Specialist is one of my best friends. He did not have the time to teach me so I began learning myself. Now I would like to enhance those skills and become a full time Web designer (yes, I left the engineering field and am starting a new a career)...my reason for registering with Educator.com By the way, as you will see from my registration, my first name is Harry, (after my grandfather), however, my family elected to call me "Matt" which is short for Matthew...my middle name. I wanted to clear up any confusion. Have a good weekend! Look forward to all of the courses that you teach and learning to become proficient with HTML, CSS, JAVASCRIPT and WORDPRESS. Sincerely, Matt Hayes Sincerely, Matt Hayes
	0 answers Post by binti farah on May 9 at 11:30:06 AM could you please recommend me a book which is related this topic

Your First Web Page

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

World Wide Web

HTML5

HTML5 Specification

Creating a Web Page

Example: Creating a Web Page

I. HTML
	Your First Web Page	17:01
	Web Basics and Web History	32:23
	Web Development Tools	26:28
	HTML Elements and Attributes	21:50
	Essential Tags Part 1	41:42
	Essential Tags Part 2	24:20
	Markup Language	29:38
	Page Structure and Meta-data Elements	32:50
	Text-Level Semantics	30:13
	Heading and Sectioning	23:39
	Forms	47:51
	Links	36:41
	Embedded Content	46:05
	The Canvas Element	19:25
	Content Models	29:08
	The DOM	13:10
	Favicons	13:14
	Embedding Flash and Other Objects	15:07
	Offline Cache	19:53
	Web Development Principles	26:47

Computer Science: HTML


Your First Web Page			17:01
	Intro		0:00
	World Wide Web		0:23
		Introduction to HTML	0:25
		Looking at Source Code	0:53
	HTML5		1:58
		HTML5 Specification	1:59
	Creating a Web Page		4:10
		What You Will Need to Create a Web Page	4:11
		Example: Basic Web Page	4:40
	Example: Creating a Web Page		5:46
		HTML Elements	6:33
		Adding a Title	7:08
		Main Body	7:48
		First Level Heading	8:23
		Adding an Image	8:42
		Paragraph	9:09
		Adding a List and URLs	11:13
		Footer	14:09
		CSS: Styling	16:02
Web Basics and Web History			32:23
	Intro		0:00
	The Web		0:56
		Overview of the Web	0:58
	The Web Page		2:39
		Overview of the Web Page	2:40
	Web Technologies		4:45
		Overview of Web Technologies	4:46
	The Web Today		9:22
		The Web Today	9:23
	What is HTML		11:22
		HyperText Markup Language	11:23
	The Creation of the Internet		12:40
		History of the Internet	12:41
	Developments in HTML		14:10
		The Birth of HTML	14:11
		Early Problems	15:35
	Early Browsers		16:24
		History of Early Browsers	16:25
	NCSA Mosaic		17:55
		NCSA Mosaic	17:56
	The Browser Wars Begin		19:39
		History of the Browser Wars	19:40
	Casualties of War		22:27
		Results of the Browser Wars	22:28
	HTML 4 Stabilization		25:31
		History and Overview of HTML4	25:32
	Modern Browser Developments		27:27
		Modern Browsers	27:29
	HTML5		30:57
		Overview of HTML5	30:58
Web Development Tools			26:28
	Intro		0:00
	Browsers		0:17
		Introduction to Browsers	0:18
		Example: Browsers	2:35
	Firefox Add-ons		3:14
		Firefox Browser	3:15
		Example: Firebug Add-ons	3:54
		Example: Web Developer Toolbar and ColorZilla	7:51
	Domain Names and Hosting		10:23
		Overview of Domain Names and Hosting	10:24
		Your Own Domain	11:03
	Installing a Local Web Server		12:42
		Installing a Local Web Server	12:43
		Apache Web	13:29
	WYSIWYG Editors		15:56
		Introduction to WYSIWYG Editors	15:57
	Content Management System		18:31
		How Content Management System Works	18:32
		Example: WordPress	20:00
	File Transfer Protocol		22:26
		File Transfer Protocol	22:27
HTML Elements and Attributes			21:50
	Intro		0:00
	Proper use of Elements and Attributes		0:14
		Elements and Attributes	0:16
		Example	1:06
	Normal HTML Elements		2:00
		Start Tag, Content, and End Tag	2:02
		Example: Warning!	2:34
	Void HTML Elements		3:23
		Self-Closing Tags	3:24
		List of Void Elements	4:04
		Example: Line Break	5:00
	HTML Comments		6:13
		Purpose of Comment Tags	6:14
		Example: Comment Tags	6:50
	Attributes		7:25
		Properties of Attributes	7:27
		Example: Attributes	7:39
		Example: Whitespace	10:22
	HTML Character Codes		12:05
		Character References	12:07
		Example: Registered Trademark Symbol	12:35
		Example: Using Character References	13:23
	Example: Start Tag and End Tag		15:57
	Example: Self-Closing Tag		16:37
	Example: Attributes		17:37
	Example: Proper use of Elements and Attributes		19:02
	Example: Comment		20:09
	Example: Whitespace		20:46
Essential Tags Part 1			41:42
	Intro		0:00
	Document Structure Tags		1:13
		Document Structure Tags and Example	1:14
	Layout Tags		3:24
		Layout Tags	3:26
		Example: Layout Tags	7:48
		Example: Layout Tags	11:28
		Example: Layout Tags	13:17
		Example: Layout Tags	14:22
	Text Level Tags		17:22
		Text Level Tags	17:23
		Example: Text Level Tags	17:48
	Grouping Content Tags		24:23
		Grouping Content Tags	24:24
		<p> Tag	24:45
		<hr> Tag	25:31
		<figure>, <figcaption>, and <blockquote> Tag	26:14
		<div> Tag	26:58
		Example: Grouping Content Tags	27:28
	Embedded Content Tags		33:12
		Embedded Content Tags	33:13
		Example: Embedded Content Tags	35:39
Essential Tags Part 2			24:20
	Intro		0:00
	Simple Tables		0:17
		Simple Tables	0:19
		Example: Simple Tables	2:31
	Semantic Tables		5:11
		Semantic Tables	5:14
		Example: Semantic Tables	6:24
	Simple Lists		8:14
		Simple Lists	8:18
		Unordered List	8:36
		Ordered List	8:42
		Example: Simple Lists	9:37
	Definition Lists		14:08
		Definition Lists	14:09
		Example: Definition Lists	15:21
	Forms		17:11
		Forms	17:12
		Example: Forms	17:52
Markup Language			29:38
	Intro		0:00
	HTML 1 Through 3.2		0:13
		Period of Rapid Growth of HTML	0:14
	Tag Soup		2:03
		Definition of Tag Soup	2:04
		Example: Tag Soup	3:00
		Example: Tag Soup and Valid Doctype	4:45
	HTML 4.01		5:26
		Overview of HTML 4.01	5:27
		Three Flavors of HTML 4.01: Strict, Transitional, and Frameset	6:05
	XHTML 1		7:19
		Overview of XHTML 1	7:20
		Example: XHTML 1	9:20
	XHTML1 Syntax		11:48
		Lower Case Rule	11:49
		Closed Elements Rule	12:25
		Encased in Quotes Rule	14:18
		Boolean Attributes May Not Be Minimized	14:35
		Correct Nesting is Enforced	15:29
	The Problem with XHTML		16:15
		Problem with XHTML	16:16
	XHTML 2		19:22
		Overview of XHTML 2	19:23
	HTML 5		20:43
		Overview of HTML 5	20:44
	Validating		22:44
		Validators	22:45
		Example: W3C Markup Validation Service	25:26
Page Structure and Meta-data Elements			32:50
	Intro		0:00
	The Doctype		0:12
		Doctype	0:13
		Example: Doctype	1:25
	The Root Element		1:57
		Root Element	1:58
		Example: Root Element	2:45
	The Head Element		3:38
		Head Element and Body Element	3:39
		Example: Head Element and Body Element	5:06
	The Head Element		5:42
		Head Element vs. Header Element	5:47
	The Title Element		6:51
		Title Element	6:52
		Example: Title Element	7:54
	The Base Element		9:00
		Base Element	9:03
		Example: Base Element	9:42
	The Link Element		14:07
		Link Element: rel, type, and href	14:08
		Example: Link Element	15:13
	The Meta Element		17:54
		Meta Element: charset, name, and http-equiv	17:55
		Example: Meta Element	21:00
	The Style Element		23:35
		Style Element	23:37
		Example: Style Element	24:40
Text-Level Semantics			30:13
	Intro		0:00
	Text Level Semantics		0:06
		Paragraph Level	0:07
	The <a> Element		2:23
		Definition of the <a> Element	2:25
	The <em> Element		3:25
		Definition of the <em> Element	3:26
	The <strong> Element		6:50
		The <strong> Element	6:51
	The <small> Element		8:35
		The <small> Element	8:36
		Example of <small> Element	10:19
	The <cite> Element		10:55
		The <cite> Element	10:56
		Example of <cite> Element	12:32
	The <q> Element		12:45
		The <q> Element	12:46
		Example of <q> Element	13:34
	The <abbr> Element		15:35
		The <abbr> Element	15:36
		Example of <abbr> Element	16:41
	The <dfn> Element		17:03
		The <dfn> Element	17:04
		Example of <dfn> Element	18:01
	The <time> Element		19:11
		The <time> Element and Example	19:12
	The <code> Element		21:18
		The <code> Element	21:19
		Example of <code> Element	23:00
	The <sub> and <sup> Elements		23:31
		The <sub> and <sup> Elements	23:32
		Example of <sub> and <sup> Elements	23:50
	The <i> Element		24:51
		The <i> Element and Example	24:52
	The <b> Element		27:16
		The <b> Element	27:17
		Example of <b> Element	29:07
Heading and Sectioning			23:39
	Intro		0:00
	Heading Elements		0:06
		Heading Tags	0:07
	Heading Rules		1:13
		Heading Rules and Example	1:35
	Sectioning Roots		5:39
		Sectioning Roots	5:41
	Sectioning Contents		6:25
		Sectioning Content Elements	6:27
	Section Wrapping		7:40
		Section Wrapping	7:41
		Example: Section Wrapping	10:10
	Real World Example 1		15:36
Forms			47:51
	Intro		0:00
	Form Terminology		0:23
		Form	0:24
		Control	0:43
		Control Name and Control Label	1:09
		Input Type and State	1:52
	Form Controls		2:20
		Button: Submit and Reset	2:32
		Radio	3:37
		Checkbox	4:00
		Select Menu	4:05
		Textarea	4:28
		Various Input Types	4:38
	Example: Basic Controls of Form Element		7:05
	Example: Buttons		18:20
	Example: Additional Controls		20:56
	Example: Special Input Types		27:55
	Example: Date and Time Control		33:40
	Example: Create Your Own Control		37:32
	Example: Placeholder Text		39:10
	Example: Datalist		41:43
	Example: Sizing and Input Containment		42:16
	Example: Select Modification		42:51
	Example: Required Attribute		44:41
Links			36:41
	Intro		0:00
	URIs and URLs		0:23
		Definitions of URL and URI	0:36
		Differences Between URL and URI	0:42
		Example: URI and URL	1:14
	Typical URI Construction		2:33
		Domain and Subdomain	2:34
		Protocol	4:18
		IP Address	5:05
	Typical URI Construction		5:32
		Second Level Domain	5:33
		Port	6:07
		Foldernames	6:46
	Typical URI Construction		8:06
		Filename and File Extension	8:08
	Typical URI Construction		10:38
		Name/ Value Pairs	10:40
		Internal Anchors	11:45
	Typical URI Construction		12:30
		Example: URI Construction	12:31
	Relative and Absolute URIs		14:20
		Relative and Absolute URIs	14:22
		Example: Relative and Absolute URIs	18:32
	Link States		24:15
		Link States	24:16
		Example: Link States	25:18
	Block Level Links		27:02
		Example: Block Level Links	27:03
	Bookmark Links		29:18
		Bookmark Links	29:20
		Example: Bookmark Links	30:15
	Attributes		32:06
		href and target	32:20
		rel, media, hreflang, and type	33:18
Embedded Content			46:05
	Intro		0:00
	Embedding Image		0:22
		Embedding an Image	0:25
	Image File Formats		3:38
		Image Format: Jpg	3:42
		Image Format: Png	4:13
		Image Format: Gif	4:40
		Compression	6:05
		Image Format: Precise Lines and Fewer Colors	8:38
		Animated Gif	10:49
		Alpha Transparency Png	11:09
	Embedding Audio		12:52
		Old Way of Embedding Audio	13:00
		New Way of Embedding Audio	14:54
		Example: Adding Buttons	20:04
		Message for Users	26:36
	Audio Attributes		27:46
		Control	28:29
		Autoplay	28:44
		Loop	29:36
		Preload	30:40
	Embedding Video		32:00
		Embedding Video	32:11
		Controls	34:22
		Poster Attributes	36:01
		Video Formats	37:36
		Solving Formatting Problem	39:26
The Canvas Element			19:25
	Intro		0:00
	Creating the Element		0:38
		What is the Canvas Element?	0:39
		HTML and Canvas Element	1:48
		Example: Canvas Element	3:23
	Creating the Canvas in JavaScript		5:13
		getContext() Method	5:17
		Checking Browser Support with the getContext() Method	6:00
		Example: Creating the Canvas in JavaScript	7:31
	Drawing in the Canvas		10:13
		Methods for Drawing in the Canvas	10:14
		2d Context	10:58
		Example: Creating Drawing in the Canvas	11:39
		Example: Adding an Image and Texts	15:30
		Example: Advance Canvas Element	17:31
Content Models			29:08
	Intro		0:00
	The HTML 4.01 Content Model		0:16
		Block Elements and Inline Elements	0:18
		Example: Block Elements and Inline Elements	1:18
		W3C Markup Validation Service	3:28
	The HTML5 Content Model		6:21
		Overview of HTML5 New Content Categories	6:22
	Flow Content		8:02
		Specification for Content Models	8:05
		Flow Content	9:41
		Example: Flow Content Elements	10:40
		List of Flow Content	11:35
		BlockQuote Element	11:50
	Sectioning Content		13:19
		Introduction to Sectioning Content	13:20
	Heading Content		14:06
		Heading Content and hgroup Element	14:07
	Phrasing Content		16:56
		Attributes of Phrasing Content	16:57
		Anchor Element in Phrasing Content	17:28
	Embedded Content		19:33
		Attributes of Embedded Content	19:34
		No Content	19:53
		Transparent Content	20:38
		Source Elements and Param Elements	21:15
	Interactive Content		24:16
		Interactive Content Elements	24:17
		Button Element	25:57
The DOM			13:10
	Intro		0:00
	The DOM		0:26
		Document Object Model	0:27
	The DOM Tree		0:55
		DOM Trees	0:56
		Example: DOM Tree	1:31
		Vocabulary: Tree, Node,Branch, Parent, Child	2:15
	Exploring the DOM		3:13
		Example: Built-in Browser Inspection and Firebug	3:15
		Example: Manually Exploring the DOM	6:01
		JavaScript	7:28
	DOM Navigation Techniques		7:55
		DOM Navigation Techniques	7:56
Favicons			13:14
	Intro		0:00
	Favorite Icons		0:08
		Function of Favorite Icons	0:09
	Bowser Support		1:10
		Browser Support	1:13
		Location in Browsers	1:46
	Implementation Methods		2:04
		Implementation Methods for Favorite Icons	2:05
		Favicon and Apple Mobile Devices	4:51
	Creating the Icon		6:13
		How to Create the Icon	6:14
	Favicon Resources		9:10
		Websites for Icon Creation and Conversion	9:11
		Programs for Icon Creation and Conversion	11:50
Embedding Flash and Other Objects			15:07
	Intro		0:00
	Flash and other Plug-ins		0:41
		Main Problems with Flash	0:44
		Benefits of Flash	2:02
	Embedding Flash: the Old Way		2:57
		The Old Way to Embed Flash	2:58
	Embedding Flash: the Satay Method		6:42
		Satay Method	6:43
	Embedding Flash: HTML5		9:28
		How to Embed Flash in HTML5	9:29
	Embedding Flash Directly in <video>		11:39
		Embedding Flash Directly in Video Element	11:40
	Review of Embedding		13:24
		Image Elements	13:39
		Video, Audio, and Canvas Elements	13:44
		Embed Elements	13:53
		Object Elements	14:04
Offline Cache			19:53
	Intro		0:00
	Purpose		0:47
		Purpose of Offline Cache	0:48
	The Appache		2:06
		Attributes of Appcache	2:07
	The Manifest File		3:22
		Manifest File	3:23
		Example of Manifest	3:32
		Section Headers: Cache, Fallback, and Network	4:21
	Server-Side Considerations		5:17
		text/cache-manifest MIME-type	5:18
		Other Server-Side Considerations	5:41
		ExpiresActive On and ExpiresDefault 'access'	6:07
	Example: Offline Cache 1		7:44
	Example: Overwriting Files		11:09
	Example: Wild Cards for Network		14:58
	Example: Offline Cache 2		16:06
Web Development Principles			26:47
	Intro		0:00
	Interoperability		0:36
		Interoperability of Web Development	0:37
	Interoperable Websites Should Work		3:05
		Qualities of Interoperable Websites	3:06
	Backward Compatibility		5:52
		Compatibility With Older Technology	5:53
		Example: Meta Tag	9:07
	Forward Compatibility		9:33
		Advancement in Technology	9:34
	Accessibility		10:11
		Accessibility of Content	10:12
		Semantic Code	11:43
		Example: Where Will This Link Take You?	13:56
	Graceful Degradation		14:59
		Graceful Degradation or Fault Tolerance	15:00
		Types of Degradation	16:35
	Progressive Enhancement		18:36
		Progressive Enhancement	18:37
	Future Detection and Browser Sniffing		21:05
		Future Detection Versus Browser Sniffing	21:06
		Example: Email Input Type	23:39
	Tim Berners-Lee's Quote		26:20

Related Services

Name	Description	Link
Domain Registering
Go Daddy	Godaddy is the world’s #1 domain name registrar. In addition to domain registration and hosting, Go Daddy also sells e-business related software and services.	Visit Go Daddy
Web Hosting Services
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.	Visit Blue Host
Host Gator	HostGator is a world leading provider of shared, reseller and dedicated web 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!

Your First Web Page

Share this knowledge with your friends!

Your First Web Page

Computer Science: HTML

Related Services