Home » Computer Science » HTML 5 » Planning A Web Site

Connecting...

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 5
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.
Since this lesson is not free, only the preview will appear on your website.

  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Services

Lecture Comments (9)

1 answer

Last reply by: Babak Nozari
Sat Jan 9, 2016 4:35 PM

Post by Babak Nozari on January 9, 2016

WHY CANT I SKIP FORWARD TO WHERE I LIKE??? I WANT TO WATCH THE SCHEMATICS SECTION

1 answer

Last reply by: Amy
Tue Jul 21, 2020 4:17 PM

Post by Babak Nozari on January 9, 2016

where is the fastforward button?

1 answer

Last reply by: Professor Jim Hague
Mon Nov 17, 2014 11:35 PM

Post by Evilene Souza on November 17, 2014

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

0 answers

Post by Rivka Stein on January 22, 2013

Thank you! Your lectures are great!

1 answer

Last reply by: Said Elmahdy
Sat Jan 19, 2013 11:49 AM

Post by Jonathan Bello on June 20, 2012

Great concepts!!

Planning A Web Site

  • Flowcharts are used to provide a top view of the navigation of the website
  • Schematics gives the idea of layout for a website
  • One can use the following tools for flowcharts and schematics:
    Word, Google Docs, or Visio
  • You can also handdraw

Planning A Web Site

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
  • Lesson Overview 0:26
  • Flowcharts 0:37
    • What is a Flowchart
    • Create with Google Docs
  • Schematics 9:00
    • What It Is
    • Pictorial Explanation: Draw Homepage of Website
    • Create with Google Docs

Related Services

Jim Hague

Jim Hague

Planning A Web Site

Slide Duration:

Table of Contents

Section 1: Introduction
Overview of HTML 5

5m 14s

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

7m 46s

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?

6m 9s

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

25m 35s

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

15m 11s

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

23m 25s

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

11m 45s

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

14m 56s

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

6m 42s

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

12m 12s

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

6m 20s

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

43m 14s

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

15m 59s

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

11m 44s

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

8m 2s

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

17m 10s

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

5m 32s

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

13m 4s

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

25m 50s

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

16m 51s

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

22m 34s

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

6m 23s

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

8m 29s

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

6m 20s

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

7m 6s

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

6m 47s

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

13m 29s

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

10m 58s

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

15m 15s

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

8m 49s

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
Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
or
Still having trouble? Contact us
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.