Brenton Strine

Brenton Strine

Your First Web Page

Slide Duration:

Table of Contents

Section 1: HTML
Your First Web Page

17m 1s

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

32m 23s

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

26m 28s

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

21m 50s

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

41m 42s

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

24m 20s

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

29m 38s

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

32m 50s

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

30m 13s

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

23m 39s

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

47m 51s

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

36m 41s

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

46m 5s

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

19m 25s

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

29m 8s

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

13m 10s

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

13m 14s

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

15m 7s

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

19m 53s

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

26m 47s

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
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
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Services

Lecture Comments (88)

0 answers

Post by DetectivePikachu_ YeetsCheese on December 8, 2020

i just love your pic of your face

1 answer

Last reply by: Vibha Pandurangi
Sat Sep 5, 2015 7:59 PM

Post by Vibha Pandurangi on September 5, 2015

hi Professor Strine, for some reason, I cant seem to see my image correctly when I insert all the specified code up to where I am. Here is my code:

<html>

<head>
<title> ProPavGaming's Webpage - Awesome Swag Sauce
</title>
</head>

<body>
<h1> This is my first webpage... So excited! </h1>

<img src= "youtube_logo">

</body>

</html>

Whenever I open the page on Microsoft Edge or on Google Chrome, it appears as a small picture icon, not the picture itself.

1 answer

Last reply by: Professor Strine
Sun Apr 26, 2015 9:18 PM

Post by ahmed manusla on April 25, 2015

hi will i be able to program something like youtube by the end of the course also what programming did youtube use to make their website

3 answers

Last reply by: Professor Strine
Thu Feb 12, 2015 8:31 PM

Post by David Llewellyn on February 11, 2015

I am having trouble getting the links to the web to work.
I am using Komodo Edit 7.1 and the HTML is as per the lecture
<li><a href="http//www.w3.org">The W3C</a>
but when i try to preview the page and click on the link, both Komodo Edit and the browsers Chrome and IE all try to look for a file on my pc file:///C:/Users/David/http//www.w3.org rather than on the web.  Any thoughts on what I'm doing wrong?

1 answer

Last reply by: Professor Strine
Wed Feb 11, 2015 2:40 PM

Post by candis bellamy on September 30, 2014

My picture won't display. I typed the code correctly and its pointing to the right file. Instead it shows the little picture icon. What could be the problem?

5 answers

Last reply by: Sophy Huang
Thu Jul 16, 2020 2:13 PM

Post by Emma Brun on September 20, 2014

i found a diffrent program that works but a had a question about how to get my carriage returns to show up in my web page. i had made a cat out of text characters and the returnd dont show up, here is a picture of my cat;
                      -                                    -
                    -  -                                  -  -
                   -    -                                -    -
                  -      -                              -      -
                 -        - _____-------------_________-        -
                -                                                -
                -                                                -
                -                                                -
                -              -                   -             -
                -           -     -             -     -          -
                -         -         -         -         -        -
               -                                                  -
              -                          -                         -
             -----                     - - -                    -----
               -                         -                         -
              - -                 -    -    -    -                - -
                 -                   -         -                 -
                  -                                             -
                   -                                           -
                    ---                                    ---
                   -   ...                              --- -
                   -      ---                        ---    -
                   -                                        -    
                  -                                          -
                 -                                            -
      -         -                                              -
     - -        -                                              -
    -   -       -                                              -
    -   -       -                                              -
    -   -       -            -                     -           -
    -   -       -            -                     -           -
    -   -       -            -                     -           -
    -   -       -            -                     -           -              

1 answer

Last reply by: Professor Strine
Wed Sep 24, 2014 4:12 PM

Post by Emma Brun on September 19, 2014

im having alot more trouble now, on the website of it, it shows the exact same thing as the HTML box thing. it says
<html>
<head><title>Hello World</title></head>
This is my first website that is made with HTML!I am having some trouble though.
</html>   just like in TextEdit.

1 answer

Last reply by: Professor Strine
Wed Sep 24, 2014 4:13 PM

Post by Emma Brun on September 19, 2014

What text editor are you using? Mine -TextEdit- dose not have the numbers.

1 answer

Last reply by: Professor Strine
Thu Sep 4, 2014 8:01 PM

Post by Joseph Nguyen on September 4, 2014

just completed your first lesson. i enjoyed it, but i found the following mistakes:

your links are dead. you forgot to include http// on the last 3 items on the list.

<li><a href="http://w3.org">The W3C</a>
<li><a href="http://alistapart.com">A List Apart</a>
<li><a href="http://w3school.com">W3Schools</a>
<li><a href="http://educator.com">Educator</a>

copywrighted is misspelled.

1 answer

Last reply by: Professor Strine
Thu Sep 4, 2014 8:07 PM

Post by DASOL KWON on March 25, 2014

Hi,
I don't know how to bring my file to the chrome, not clicking the direct file on the desktop.  I am using window 8 now.

1 answer

Last reply by: Professor Strine
Thu Sep 4, 2014 8:08 PM

Post by moha hashi on March 20, 2014

Hi I was going to do ctrl+U, then open it blank page but rejected to write any thing. it shows like:-
<html></html>
not allow it any moves.
thanx prof.

2 answers

Last reply by: moha hashi
Thu Mar 20, 2014 12:19 PM

Post by Douglas Williams on January 15, 2014

I am sorry I have trouble understanding You in this video, at about 15:50 when your talking about hiding the email. What do You say at 15:51 Java script to hide the email link, I can not understand what you say, It sounds like you say "Ovuskater?" I just can not understand what You say at that point. I can not understand the term You said, thanks -Doug

1 answer

Last reply by: Professor Strine
Wed Jan 15, 2014 8:15 PM

Post by Douglas Williams on January 15, 2014

How come when I go to add links they do not work unless I put this syntax in? for example <a href="http://www.google.com/" target="_blank">Google</a> then http://www.google.com/ opens in a new tab. Is it because the page is not uploaded onto a host server yet?

4 answers

Last reply by: Douglas Williams
Tue Jan 21, 2014 11:23 AM

Post by Douglas Williams on January 15, 2014

I am struck on adding the image :(
I have the image saved in the same file, and here is the HTML code I used.
<img src="Pic.jpeg"> the Pic is called pic everything seems to be right? I am just following along and it is not working?

1 answer

Last reply by: Professor Strine
Wed Jan 15, 2014 5:43 PM

Post by David Martinuk on January 2, 2014

Where are you going in the browser to open the web page I created. If you don't remember WHERE on your computer you created the file, well then next time write yourself a note so you don't forget!

1 answer

Last reply by: Professor Strine
Thu Sep 4, 2014 11:14 PM

Post by David Martinuk on January 2, 2014

Where are you going in the web browser to open your saved web page

1 answer

Last reply by: Professor Strine
Sun Jul 14, 2013 12:04 AM

Post by Steven Clinton on July 13, 2013

hey i started this course on a windows computer and everything went great, but now i am using a mac and am having some problems. I have done all the same steps on my mac but when i try to load my website everything is not formatted but looks excatly the same as it does in my text editor. Any suggestions? thanks

0 answers

Post by Javon Roberts on July 6, 2013

nevermind sorry I figured it out I was inputting the wrong text it didn't seem clear until you did it again. thanks

1 answer

Last reply by: Professor Strine
Wed Jan 15, 2014 5:55 PM

Post by Javon Roberts on July 6, 2013

hey can you please help me on how to make the text that I enter become a link it doesn't seem to be working for me?

1 answer

Last reply by: Professor Strine
Sun Jul 14, 2013 12:23 AM

Post by Steven Clinton on July 1, 2013

What program (notepad, textedit, etc.) do you use to get the highlighted and differently colored items?

1 answer

Last reply by: Professor Strine
Sun Jul 14, 2013 12:22 AM

Post by sushma penmetsa on May 27, 2013

Mr. Brenton,

My macbook pro wont let me save to .html. It said i can only save to .rtf. Why wont it let me save and how?

1 answer

Last reply by: Professor Strine
Wed Jan 15, 2014 5:57 PM

Post by binti farah on May 9, 2013

could you please recommend me a book which is related this topic

1 answer

Last reply by: Professor Strine
Fri May 3, 2013 1:40 PM

Post by Harry Hayes on May 3, 2013

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

2 answers

Last reply by: Professor Strine
Sun Jul 14, 2013 12:21 AM

Post by sushma penmetsa on April 22, 2013

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.

0 answers

Post by Michael Trow on February 7, 2013

only the first website on the list is loading up

0 answers

Post by Michael Trow on February 7, 2013

<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 kent chau on February 3, 2013

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 Rishabh Kasarla on January 12, 2013

Hi! this lecture was awesome, I already built a website!!

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 paul shrubb on October 18, 2012

How can i skip forward to where i left off. The progress bar wont let me

1 answer

Last reply by: Professor Strine
Sun Jul 14, 2013 12:17 AM

Post by Suresh Manchala on September 1, 2012

I have zero knowledge about coding. What is the pre-requisite to learn HTML ?

1 answer

Last reply by: Professor Strine
Sun Jul 14, 2013 12:16 AM

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 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!

3 answers

Last reply by: Professor Strine
Sun Jul 14, 2013 12:13 AM

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?

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: Professor Strine
Sun Jul 14, 2013 12:11 AM

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.

2 answers

Last reply by: Professor Strine
Sun Jul 14, 2013 12:09 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: 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.

2 answers

Last reply by: Professor Strine
Sun Jul 14, 2013 12:07 AM

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?

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.

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 0:00
  • World Wide Web 0:23
    • Introduction to HTML
    • Looking at Source Code
  • HTML5 1:58
    • HTML5 Specification
  • Creating a Web Page 4:10
    • What You Will Need to Create a Web Page
    • Example: Basic Web Page
  • Example: Creating a Web Page 5:46
    • HTML Elements
    • Adding a Title
    • Main Body
    • First Level Heading
    • Adding an Image
    • Paragraph
    • Adding a List and URLs
    • Footer
    • CSS: Styling

Transcription: Your First Web Page

Hello: Welcome to the first lesson in Educator.com's HTML course!0000

In this lesson, we are going to just get a very quick introduction to how to create your very first web page.0005

From having zero knowledge or experience, after this lesson, you should be able to have a web page0012

that is just like any other web page on the Internet, that you can view in a browser.0018

Before we start looking at that, I just want to point out a little bit about what HTML is.0026

It is basically the backbone of the Internet; every single website on the Internet uses HTML.0033

And that counts for the oldest web page that has ever been created, which is this one.0041

(it is one of the simplest, as well) to some of the newer ones, like YouTube.0048

And it is actually very easy to get into the source and look at the HTML.0053

In your browser, you can hit Option+Command+U, or Command+U, or Ctrl+U, depending on which browser you are using.0059

And it will pull up the HTML source.0066

And this is the HTML source for the first web page on the Internet.0069

And it won't make sense to you right now, if you are completely new to this; but it is actually fairly simple.0074

You can see, right away, that there is a little bit of correspondence between text here and text that shows up.0080

But there is also a lot of code there that you don't understand.0086

Now, when you get to something like YouTube, and you view the source,0090

there is going to be a lot more that you are not understanding, because there is a lot more going on.0093

For example, this is all scripting--JavaScript--and then you get down...there are a lot of divs, and a lot of things are styled with CSS.0099

And you can see: it is also much longer code.0106

But essentially, it is the same thing: it is just HTML, and it is what makes the Web work.0108

You can also, for example, look at...this is the HTML5 specification.0117

And you can see that it has styling and content mixed all together, and you can view it; and this is our normal experience with web pages.0124

But you can separate out just the content, which is what I have done here.0135

This is that same page; but this is only the content viewed, and it is just a lot of text.0139

And in essence, this is the most important part of any web page.0146

And it is what the whole Internet is about--sending content.0150

It is not just style and fluff and a lot of cool programming stuff; what we really care about is the content.0154

But when you just have this marked up like this, with no HTML, it is kind of hard to make sense of what is going on, compared to this.0160

What HTML does is tells the computer what the meanings of all these different contents are.0172

It is called semantics: semantic means meaning, and it will semantically0179

mark up the different parts of your content and tell to the computer what it is.0182

And based on that, the computer will give some default styling.0188

But the actual purpose of HTML is not the styling, but rather the semantics.0191

This is that same page content, marked up with HTML; I will show you the source, really quickly.0196

And then, you can see: there are actual HTML tags--there is a lot of it (scrolling all the way down to the bottom).0207

And when the browser encounters these semantic tags...for example, this is an h1; it now knows that this is the first-level heading, and it will make it bigger.0214

Although you can see that when there is no styling applied (this is only the HTML), it is fairly basic, and that is a way to get things started;0224

what you will learn later on is to take CSS and style it to look the way you want it to, and to control things like that.0235

And then, you will also want to learn JavaScript at some point, to pick up on some of the more advanced things that you can do.0243

What you need to create a web page is a computer and a text editor.0252

Any computer has these; this is my text editor here.0260

If you are on Windows, you can pull open Notepad; you can pull up TextEdit on a Mac.0264

This happens to be a little bit more fancy one; and all you have to do is save it as a .htm file.0270

Here is a brand-new file: say I want to write something on the Internet.0281

I click Save, and I am going to call it Hello; and the most important thing is that you give it this .html extension.0295

And of course, you need to be aware of where you are saving it.0306

And then, go over to your browser and find your file and open it.0311

And now, you have just created your first web page.0320

This is as valid of a web page as any other website on the Internet, even though all you have done, really, is some text.0324

If you hit Ctrl+U, this is the source; and this is the text that you edited here.0330

And it is the same as the source, clearly, because you haven't put any HTML in yet.0338

And that is all you really need.0344

So, if you are starting to make a website, you probably want to start with some content.0347

Here, I have prepared the content for a basic web page that I want to create.0353

And I recommend that, as you go through this course, you do the same thing:0359

you create a basic website for yourself, and as you take each lesson, you can add the different parts0362

that you are learning, and add pages and links to them, and use it as a reference for yourself for later on0369

(and also, just a way to show off what you are learning!)0376

So, this is an entire website here; and right now it is just a page, but it is going to be a website, because it includes plans for links to various places.0379

And I am going to show you how to mark this up in HTML.0391

The first thing that is important in an HTML page is the html element.0393

These little tags indicate that this is an element.0401

And then, at the end of my content, I am going to put the corresponding closing element.0406

This little slash indicates that this ends the element that began up here.0413

This is start HTML; end HTML (or stop HTML).0420

Now, the next thing I want to do is add a title here.0429

And the way to do that is: a title, you are probably familiar with, shows up up here, in the top of the page--not actually part of the main body.0434

And the way that you mark this up is using the head element, and then the title element.0445

I am going to move this little note I gave myself.0454

And that is going to mark this up as a head with a title.0463

Now, the main body all is going to occur here; and of course, I need to end it.0469

So, I am saving that; and I am going to tab over to the web page; and this is the content that I had prepared.0481

And as you can see, it is not formatted at all; it is not marked up.0489

The computer doesn't know what to do with it.0492

Now, I will refresh; and the title changes, although the rest of it still needs to be marked up.0494

This is going to be the first-level heading; save; refresh.0503

I think I hit Ctrl+A instead of Ctrl+S.0514

And things are starting to come together.0520

Now, say we want to include an image; I have this image that I have prepared of myself, and I want to include it next in this website right here.0523

The way to do that is with the image tag; and you give it a source, actually, to indicate where the image is.0532

Save, tab over, refresh; and here is my little image.0542

This next group right here--this group of text--is a paragraph.0549

And the HMTL semantic tag for marking this up is the <p> tag; it stands for paragraph.0554

And you may want to look in here and add some additional markup, like if I want to emphasize this word.0563

OK, save, and refresh; now this is marked up as a paragraph.0576

And this word has been emphasized with the <em> tag.0582

It has a lot of other tags that you can use.0584

Now, here I am going to have a couple of second-level headers; I am actually going to do all of them at once.0588

And I am actually just going to copy this and paste it; that is a bit quicker.0598

And now, I come over here to refresh and double-check again; you can see that it is marking them up a little bit larger; OK.0613

Now, this is going to be a list of links of things that I have mastered.0627

So, since I have obviously mastered how to create a web page, I am going to have it link to itself.0631

And the way to link a page to itself (which is kind of a silly thing to do) is to put this little hash code, which will just refresh the page.0639

But just for the purpose of demonstrating: this anchor tag has a hyper reference attribute;0648

and then you put the URL of the page (which, in this case, is itself); refresh; and this has become a link.0655

So now, if I hover over it, my cursor becomes a hand; and if I click, it refreshes and goes back to the same place it was.0662

And you will notice that this little hash has been added to the URL.0668

Now, this is a list of some things that I will master by the end of this course.0673

In fact, it is an unordered list (ul); and this is the first list item (li) and the second one, and so on.0680

These are all things that, if you take this course all the way through, you should master by the end: stop ul.0697

Now, you will notice: I actually didn't put the closing list item tags for all of these.0705

And that is because these are self-closing; this is something that HTML5 allows, and other versions of HTML; something like XHTML wouldn't.0711

I am going to save this and show you what a marked-up list looks like; there we go, and now it is a list.0721

And as you go through, you can take these, turn them into links, and add them to this here--things that you have mastered, as you master them.0733

And then lastly, this is going to be another unordered list.0745

Stop unordered list; and the list items...although they are actually going to be a list of links.0752

I am going to put the link here, and I am going to put the full URL.0764

We don't need little end thing anymore.0776

And I suggest that you keep track of websites that are very helpful as you go through this course (and just in general),0780

to reference them later; and you will always be able to find what you need quickly.0791

If you remember looking at something, and you can't find it as easily, it can be frustrating.0798

And notice that the editor that I have here automatically colors my text, depending on the syntax that I use.0813

As it recognizes that I have completed an attribute, it turns it blue.0827

And when I close off the elements, it changes the colors, as well.0833

Let's take a look, after I save and refresh; and here is my list of links.0839

OK, now this down here is actually a footer; it has some information about the copyright and how to contact me.0849

That is what the footer tag is for; and this is a strong emphasis, because I am trying to point out that this is something that needs to be looked at.0860

However, the emphasis doesn't change the meaning of this.0876

And that is part of the meaning of the strong tag.0881

All right, the last thing I will do is: I am going to mark up this email address with mailto,0885

which starts out the same as a normal tag (and I am going to copy this), but you begin it with mailto, and then a little colon.0900

And this is set up so that, when browsers see this, they will automatically know that it is an email address.0911

And they will think about opening an email program when you click on it, depending on how you have it set up,0918

although this is probably a bad idea to put on the general Internet, because, because it is semantically defined0924

that this is an email address, now computers know that this is an email address--which is the point of HTML--it is semantics--0932

but it can be bad for email addresses, because some computer programs are web crawlers0939

that are spam-bots, trying to collect information so that they can send out spam.0944

So, you need to use an obfuscator to make sure that this is not visible.0949

But that is more of a JavaScript sort of a functionality.0954

All right, so this is our very first website.0959

And it seems like there might be something missing; it is just basic HTML at this point.0963

You can go in later, and you can go into the CSS course if you get bored and don't feel like waiting, and learn how to use CSS right away.0969

But I have prepared a little bit of CSS--just really basic CSS; I am going to put it up in the header here.0979

This is actually head, not to be confused with the header element.0988

And this CSS will give a couple of styling rules for the body element, and some of the other things,0994

so that when I refresh, it is starting to look more like a real website.1003

This is the first website, set up like this--very nice-looking.1010

Thanks for watching Educator.com.1020

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.