Lecture Notes

Section 1: Introduction

Web Development Masterclass - Introduction
Course Learning Objectives
Locating Assessments and Course Files

Section 2: How the Internet Works

The Internet Overview
The HTTP Protocol
The HTTPS Protocol
The SMTP Protocol and Local Mail Delivery
Outbound Mail Delivery
Network Basics - LAN and WAN
Network Ports and Firewalls

Section 3: The Web Development Process

Web Development Process Overview

Section 4: Planning a Website

Web Application Planning Overview

Section 5: Web Hosting and System Requirements

Web Hosting Packages Overview
Shared Hosting
Dedicated Hosting
VPS Hosting
Cloud Hosting and Case Study

Section 6: Domain Names

Introduction to Domain Names
Domain Name Registrars
Domain Registration
Registration and Privacy Protection
Control Panel Sign-In
Auto-Renewal and Domain Lock
Domain Forwarding
Nameservers
Update Registration Information

Section 7: Testing Environment

Introduction to Testing Servers
Installing WampServer - WAMP
Installing MampServer - MAMP
WampServer Menu
Localhost File Test

Section 8: Production Environment

Overview
Cloud Hosting Registration
Creating a Virtual Server
Linode Settings and Configuration
Deploying an Image - Ubuntu 14.04 LTS
Linode Dashboard
Remote Access
Download PuTTY and PuTTYgen - Windows
Launch Terminal - MAC
Intro to Command Console
Connecting with PuTTY - Windows
Connecting with Terminal - MAC
Maintenance Commands
File and Directory Commands
Installing LAMP Stack
Server Host Name and Date
Creating a User - Ubuntu
Ubuntu SSH Authentication - Windows
Ubuntu SSH Authentication - MAC
Web Root Permissions
Remote Dekstop Connection
Installing Tight VNC Viewer - Windows
Installing RealVNC Viewer - MAC
Ubuntu Desktop Basics
Disable Root and Password Access
Re-sizing a Linode Server
Creating Backups on Linode
Changing Root Password through Linode
Linode DNS Manager
Amending GoDaddy Name Servers

Section 9: FTP Setup

FTP Client Installation
FileZilla Overview
FileZilla Uploading
FileZilla Interface Basics

Section 10: HTML Development

Introduction to HTML
Basic Structure of a Web Page
HTML Head Tags
HTML Body Tag
HTML Paragraph Spacing
HTML Line Breaks
HTML Non-Breaking Space
HTML Header Tags
HTML Text Formatting and Decoration
HTML Inline Text Formatting
HTML Unordered Lists
HTML Ordered Lists
HTML Image Insertion
HTML Embedding Videos
HTML Absolute vs. Relative File Referencing
HTML Link Creation
HTML Anchor Tags
HTML Tables
HTML Nested Tables
HTML Merging Cells
HTML Text Wrapping
HTML Table Background Image
HTML Table Cell Alignment
HTML - Introduction to Forms
HTML Form Tags and Attributes
HTML Forms - Post vs. Get
HTML Forms - Input Text Fields
HTML Forms - Select Menus
HTML Forms - Check Boxes and Radio Buttons
HTML Forms - Text Areas and Buttons
HTML Iframes
HTML Project - Introduction
HTML Project - Header
HTML Project - Callout
HTML Project - Image Insertion
HTML Project - Text Insertion
HTML Project - Links and Form
HTML Project - Tabular Data
HTML Project - Footer

Section 11: CSS Development

Introduction to CSS
Parts of a CSS Rule
Types of CSS Rules
CSS - Color Names and Codes
CSS Classes and Spans
CSS Divisions - DIVs
CSS IDs
CSS Margins
CSS Padding
CSS Text Properties
CSS Font Properties
CSS Borders
CSS Backgrounds
CSS Transparency
CSS Text on Top of Images
CSS Width and Height Properties
CSS Display Properties
CSS Static Positioning
CSS Relative Positioning
CSS Absolute Positioning
CSS Fixed Positioning
CSS Float Property
CSS Clear Property
CSS Z-Index
CSS Styling Links
CSS Tables
CSS Project - Introduction
CSS Project - CSS Rules
CSS Project - Navigation Rules
CSS Project - Responsive CSS
CSS Project - Page Elements

Section 12: Document Object Model (DOM)

DOM Introduction
DOM Manipulation

Section 13: JavaScript Development

JavaScript - Introduction
JavaScript Placement
External JavaScript
JavaScript Output
JavaScript InnerHTML
JavaScript Commenting
JavaScript Constants
JavaScript Variables Introduction
JavaScript Assignment Operator
JavaScript Arithmetic Operations
JavaScript Arithmetic Operations Continued
JavaScript Operator Precedence
JavaScript Data Types
JavaScript Objects
JavaScript Object Output
JavaScript Strings
JavaScript String Length
JavaScript Special Characters
JavaScript Random Numbers
JavaScript Min and Max Function
JavaScript Math Round Function
JavaScript Arrays
JavaScript Array Attributes
JavaScript Arrays - Pop - Push - Shift - Unshift
JavaScript Changing and Deleting Elements
JavaScript Splicing an Array
JavaScript Sorting an Array
JavaScript Joining Arrays
JavaScript Conditional Statements
JavaScript Comparisons
JavaScript Booleans
JavaScript For Loops
JavaScript For-In Loop
JavaScript While Loops
JavaScript Do-While Loop
JavaScript Break and Continue
JavaScript Functions
JavaScript Events
JavaScript Project 1 - BG Color Changer
JavaScript Project 2 - Photo Gallery
JavaScript Project 2 - Completion

Section 14: jQuery Library

Introduction to jQuery
Embedding jQuery
jQuery Syntax and Selector Intro
jQuery ID Selector
jQuery Class Selector
jQuery Other Selectors
External jQuery File
jQuery Events Intro
jQuery Events - mouseenter and mouseleave
jQuery Events - mousedown and mouseup
jQuery Multiple Event Handlers
jQuery Hiding-Showing
jQuery Toggle
jQuery Fade In-Out
jQuery Fade Toggle
jQuery Fade To
jQuery Slide Down
jQuery Slide Up
jQuery Slide Toggle
jQuery Animate
jQuery Animate - Multiple Params
jQuery Animate - Relative Values
jQuery Animate - Queue Functionality
jQuery Stop Method
jQuery Callback Functions
jQuery Chaining
jQuery Draggables
jQuery Accordian Menu
jQuery Get Content - text and html
jQuery Get Content - Val
jQuery Get Content - attr
jQuery Set Content - text - html - val
jQuery Set Attributes - attr
jQuery Append and Preprend
jQuery - After and Before
jQuery Remove and Empty
jQuery Filter Remove
jQuery Add Class
jQuery Remove Class
jQuery Toggle Class

Section 15: Bootstrap Framework

Introduction to Bootstrap
Embedding Bootstrap
Bootstrap - Basic Page Structure
Bootstrap Grid System
Bootstrap Three Column Layouts
Bootstrap Typography
Bootstrap Tables
Bootstrap Styling Images
Bootstrap Jumbotron
Bootstrap Wells
Bootstrap Alerts
Bootstrap Buttons
Bootstrap Button Groups
Bootstrap Justified Button Groups
Bootstrap Glyphicons
Bootstrap Badges and Labels
Bootstrap Progress Bars
Bootstrap Pagination
Bootstrap Pager Pagination
Bootstrap List Groups
Bootstrap Panels
Bootstrap Dropdown Menus
Bootstrap Collapsibles
Bootstrap Collapse Panel
Bootstrap Collapse List Group
Bootstrap Accordian
Bootstrap Tab Menus
Bootstrap Pill Menus
Bootstrap Dynamic Tabs and Pills
Bootstrap Navigation Bar
Bootstrap Collapsible Navigation Bar
Bootstrap Forms - Vertical and Inline
Bootstrap Inputs
Bootstrap Form Control States
Bootstrap Input Sizing
Bootstrap Carousel
Bootstrap Modal
Bootstrap Tooltip
Bootstrap Popover
Bootstrap Scrollspy
Bootstrap Project - Themes Intro
Bootstrap Project - File Overview
Bootstrap Project - Script Overview
Bootstrap Project - Script Overview Continued

Section 16: PHP Development

PHP Introduction
PHP Preparation
PHP File Test
PHP Syntax
PHP Variables
PHP Variable Scope
PHP Global Keyword
PHP Static Keyword
PHP Echo vs Print
PHP Data Types
PHP Objects
PHP Strings
PHP Constants
PHP Operators
PHP Conditional Statements
PHP ElseIf Statement
PHP Switch Statement
PHP While Loops
PHP For Loops
PHP Functions
PHP Functions Continued
PHP Arrays
PHP Multidimensional Arrays
PHP Sorting Arrays
PHP Superglobal Variables
PHP Forms Introduction
PHP POST vs GET Basics
PHP Form Output and Validation
PHP Form Required Fields
PHP Validation Continued

Section 17: MySQL Database Integration

Introduction to MySQL Databases
Introduction PhpMyAdmin
PhpMyAdmin Interface Overview
MySQL Security and Root Superuser
MySQL Creating a Database and Table
MySQL Creating a New User
MySQL Database and Table Specific Privileges
MySQL Modifying and Deleting a Table
MySQL Modifying and Deleting a Database
Introduction to SQL
SQL Statements in PhpMyAdmin
Connect to MySQL Database using PHP
MySQL Database - Import Data
SQL Select
SQL Distinct Keyword
SQL Where Clause
SQL And Operator
SQL Or Operator
SQL Order By
MySQL Insert Into
MySQL Get Last ID
MySQL Insert Multiple Records
MySQL Prepared Statements
MySQL Delete Records
PHP Header Function
PHP Isset
MySQL Update Records

Section 18: XML l AJAX

Introduction to XML
XML Basics
XML Schema
XML Parsing
XML Parsing Continued
Introduction to AJAX
AJAX - Search Suggest Tutorial
AJAX - Database Select Menu Tutorial

Section 19: Development Project

Development Overview
Project Setup
Index Page Overview
Home Page Mods
About Page Mods
Blog Page Mods
MySQL Database Creation
Creating a Registration Form
Registration Status using JavaScript and AJAX
PHP Validation - Encryption - Session
Login Authentication - Part 1
Login Authentication - Part 2
Login Authentication - Part 3
Login Authentication - Part 4
Logout - Terminate Session
Contact Page - Google Maps API
Contact Form - AJAX Integration
PHPMailer Installation
PHP Form Validation and Email Transmission
Production Server Migration

Section 20: Google Apps for Work

Google Apps for Work - Introduction
Google Apps for Work - Registration
Google Apps for Work - Admin Console
×
More

Lecture Notes

Course: Web Development Masterclass View Course Outline


Created by:

YouAccel

Lectures:

350

Duration:

19h 25m 44s

Skill Level:

All Levels

Language:

English

Students Enrolled:

143,763

Rating:

(1,659)

Certification Type:

Completion Certificate

Lecture: HTML Head Tags

The next tag in our web page structure is the open <head> tag. Similar to the <html> tag the <head> tag must also have a corresponding closing tag </head>. Note that anything contained within the open <head> and closing </head> tag will not be displayed visually within the content area of your browser.

For a better understanding of the content area. Let's preview this html page in our web browser to see what it looks like.

Go to Run > Launch in Google Chrome.

Here we can see what this html page will look like in our web browser. The content area is defined as this region of the browser window.

The head tag contains important instructions for your browser. First it identifies the title of the page. For this reason, the open <title> and closing </title> tags must be contained with the <head></head> tags. The actual title of the page should be contained within the <title></title> tag.

The next set of tags contained in our <head></head> tags is the <meta> tags. Meta tags communicate with both the web browser and search engines to provide valuable information about your page.

Let's start with the first Meta tag:

<meta name="description" content="Page Description Here">

This meta tag is primarily intended for search engines. It is the snippet of information below the link of a search result. The meta description describes the contents of the page to the searcher. The goal of a meta description is to persuade the searcher to click through to your website. If a meta description is not provided, the search engine will automatically generate one based on the content of your page.

The next meta tag indicates the character set of the page.
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />

In this tag, the character set used is uft-8. The explanation as to why the uft-8 character set is used among other alternatives is fairly technical. To keep things less confusing, we have included some links for further reading on character sets.

Next we have the viewport meta tag. This is an important tag to include. Keep in mind that most users now will not only view your web page through a computer screen, but also through a wide range of mobile devices. The viewport defines the user's visible area of a web page. The viewport varies depending on the device, and will be smaller on a mobile phone than on a computer screen.

A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Now that we have gone through some of the commonly used meta tags, let's go onto the next tag in our <head></head> tags, which is the <style></style> tags. The code that is included within the <style></style> tags are referred to as Style Rules, and they define what is known as the pages Cascading Style Sheet, or "CSS".

The style sheet can be used to define the formatting of just about any element within your html document. They can be used to format anything from fonts, line spacing, and font-color, to table borders, image opacity, and hyperlink effects.

This course actually has an entire section devoted to Cascading Style sheets because of their importance and frequency of usage. For this reason, all you have to know right now, is that the style sheet is located in the <head></head> tags. The style tag on this demonstrate page, has one rule:

Body {
color:red;
}

This means that all the text located in the body of this html document will be displayed in red. We will explore this in more detail later on.

The next block of code we see is a JavaScript function.

<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>

Remember that Java script allows us to create interactive effects within web browsers.

The <head> tag contains the JavaScript functions that will be called upon, in the body of our html document. We have included a basic JavaScript function that will be used to convert a user's text input, from lower case to capital letters.

We will see the JavaScript function in action when we move onto the body section of this html document.

Please note this course has an entire section devoted to JavaScript coding, so for now we have only included a very basic example for demonstration purposes.

That wraps up the <head></head> tag, so we can now move on to the <body></body> tag.