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:

147,836

Rating:

(1,660)

Certification Type:

Completion Certificate

Lecture: HTML Tables

In this lecture we are going to be creating tables using HTML. When it comes to building web pages, it's very important to have a solid understanding of table structures. Tables allow us to organize data and content in an organized way. Table data is structured in the form of rows and columns. The intersection of a row with a column forms a table cell. The individual cells contain the actual data.

This example illustrates the structure of a basic table used to record the findings of a survey that asked respondents to list their favorite Sport.

Sport Response
Basketball 25
Baseball 28
Hockey 26
Soccer 22
Tennis 24
Football 30
Other 15

Here we have a table with two columns and nine Rows, which gives us 18 individual cells.

Let's start off by creating this table in a standard HTML 5 Document.

Open your text editor, and let's setup the basic HTML page structure.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table Tutorial</title>
</head>
<body>
</body>
</html>

By now this should all look familiar, and as you guessed, the code block for our table will be inserted in between the <body></body> tags.

Next, we will insert our open and close table tags. <table></table>

The table tag also has several attributes.

<table width="100%" border="1" bordercolor=”blue” cellspacing="2" cellpadding="2">

First we can specify the width of the table. For now, we will put the width as 100%. We will come back to the width attribute once we have our table created, because there are different ways the width can be stated.

Next we can set a border for our table. Let's set the border to 1 pixel. You can increase this value for a thicker border, or put 0 for no border.

We can aslo put a bordercolor attribute. We will set it to blue.

Next, we can specify the cellspacing and cellpadding attributes.

This illustration provides a visual example of what each of these mean:

  • The cell padding will define the amount of space around the cell contents.
  • The cell spacing on the other hand, will determine the amount of space between each cell in your table.

Once we have defined these attributes we can start adding rows and columns. Each row is defined by the <tr><tr> tags and the columns are defined by the <td></td> tags.

The columns must be situated within the <tr></tr> tags.

After we have finished adding each row and column, we can close the table </table>.

<table width="100%" border="1" bordercolor=”blue” cellspacing="2" cellpadding= "2">

<tr>
<td>Sport</td>
<td>Response</td>
</tr>
<tr>
<td>Basketball</td>
<td>25</td>
</tr>
<tr>
<td>Baseball</td>
<td>28</td>
</tr>
<tr>
<td>Hockey</td>
<td>26</td>
</tr>
<tr>
<td>Soccer</td>
<td>22</td>
</tr>
<tr>
<td>Tennis</td>
<td>24</td>
</tr>
<tr>
<td>Football</td>
<td>30</td>
</tr>
<tr>
<td>Other</td>
<td>15</td>
</tr>
</table>

With the table created, let's save the file and preview it in our web browser, to see the final result.

One thing you may have noticed, is the table is the full width of the browsers content area. This is because we specified a table width of 100%.

You will notice that as we change the size of the browser window, the table contacts and expands but always maintains 100% of the browser window.

Let's see what happens if we change the width to 50%. As you would expect, the table is now 50% of the browsers content area.

But what if we wanted the table to be a fixed width, so that it does not expand and contract with the browser window.

For that we will need to change the width, from a percentage to a fixed value (in pixels). Lets change the width from 100%, to 500 pixels.

Now let's save our changes, and preview the page in our browser. With the fixed table width, the table no longer expands and contracts with the browser. It stays the same size.