Web Construction

1 JOHN EPPS

Overview
2

The class will be focused on HTML5 and includes a

brief introduction to XHTML and previous versions of HTML The objective of the class is to have each student plan, design, develop, and publish their own web site Because of the range of students taking the class we cover the fundamentals of coding using HTML and g g CSS but students with experience are encouraged to incorporate more advanced features into their projects

Text and Reference

3

The book is primarily a reference tool and therefore

we will only cover the initial chapters in each part to get the fundamentals. The final chapters are listings of language elements for reference. To be specific we will cover Chapters 1, 2, and 4 in class. Chapters 3, 5, and 6 are references. We will also use several web reference, example, and , p , practice sites including:

Htmlref.com W3Schools and CSS Zengarden

Editors
4

For this class we will be coding our pages using

HTML and CSS created by the student. You are free to use any editor that allows you to code your tags and commands directly into the editor WYSIWYG editors that allow you to code in HTML can be used but we are asking you to use the HTML features only for your final project You can use the WYSIWYG features and/or templates to see how you might code your pages but the final outcome should be coded in HTML directly

Editors
5

Plain Text Notepad Integrated HTML/WYSIYG Dreamweaver XARA Kompozer Komodo Edit WebMatrix Hybrid Browser/Editors Amaya Sea Monkey

Validation
6

Validators check your code for compliance with W3C

standards. Each project should be thoroughly checked p j g y prior to publishing your web site

HTML Validator - http://validator.w3.org/ CSS Validator - http://jigsaw.w3.org/css-validator/ Link Checker - http://validator.w3.org/checklink Mobile OK - http://validator.w3.org/mobile/

It is also critical to t t your web pages on a variety of i l iti l t test b i t f

browsers and platforms. At a minimum you should check your pages on IE, Firefox, Opera, Safari, and Chrome, as well as on a mobile platforms including various cell phones and tablets

Web Pages
7

Pages are the basic documents of the World Wide

Web They are written in HTML (HyperText Markup Language).

An HTML page contains HTML tags, which are embedded commands that supply information about the page's structure, appearance, and contents.

P Page Templates T l You can quickly create pages with a variety of layouts and functions

Page Design - Consistent Look

8

Themes Colors G Graphics hi Styles Common Content Areas page banner navigation bar copyright notice

Frames And Frames

Pages

A frames page is a special kind of HTML page that divides the browser window into different areas called frames, each of which can display a p g different page. Frames have caused difficulty with printing and using CSS and are being discontinued.

Cascading Style Sheets

9

They give you more control over the appearance and

presentation of your pages. Using cascading style sheets, you can extend the ability to precisely specify the location and appearance of elements on a page and create special effects.

Cascade to closest to element

Demonstration Site CSS Zen Garden

http://www.csszengarden.com/

Organizing Information
10

Tables A table is made up of rows and columns of cells in which y p you can insert text and graphics When you lay out text and graphics on a page, you can use a table to arrange them however you can achieve many of the same effects and maintain greater flexibility by using CSS You can use either absolute dimensions (more control) or relative dimensions (more flexibility) to lay out your table Lists Bulleted list, for presenting a list of unordered items Numbered list, for presenting a list of sequential items Definition list, for presenting a list of terms and definitions Menu list, for presenting an unordered list of short entries

Animation
11

Graphics
Animated GIFs and

Dynamic HTML Effects Page Transitions Banner Ads Hover Buttons Marquee Sound Effects

Videos Picture Formats

JPEG GIF PNG TIFF BMP

Forms
12

Controls
Java Applet Plug-In ActiveX Control

A form is a collection of

fields that you use for gathering information h i i f i from people visiting your Web site

Scripting
13

Client Side

Server Side

JavaScript Add functionality, Validate forms, Detect browsers, And much more

PHP Powerful tool for making dynamic and interactive Web pages Apache M SQL MySQL Ajax Example

Example

Web Hosting
14

Paid services:
Require ability to write

Free services:
Often require building

HTML or create pages using external web editor More storage Usually comes with choice of ways to upload pages Often provide service to purchase domain name Usually support scripting and databases

pages using a proprietary online site builder Limited storage Limited customization May restrict domain name without purchase h h May include ads on web pages Templates and controls

Web Hosting Sites

15

Free http://www 000webhost com/ http://www.000webhost.com/ http://www.webs.com/ Low Cost http://www.ipage.com/ http://www.fatcow.com/ p // / http://www.powweb.com/