Graphic Design

Lesson 1 - Hardware, Software & Install

Laptop - Mac or other
Browser - Chrome or other
Editor - Komodo or other
Domain - Subdomains - Mail accounts - FTP password - Security
FTP Uploader - Filezilla or other
Install PHP - MySQL - Apache - MyAdmin or other
Graphic - Gimp or other -
Test it all

Lesson 2 - HTML

!doctype html head title a ... learn it all at W3C HTML/Training - MDN etc.

Lesson JS

CSS reference - MDN
A re-introduction to JavaScript (JS Tutorial) - MDN

PHP for Kids

HTML Tutorial

Chapter 1 - Introduction to HTML

What is HTML?
Webpages are files viewed by using a browser - written in HTML language - view by source - one language, different browsers, may render code differently - check site in multiple browsers - CSS used to improve visual aspects - separates content from design - HyperText Markup Language

How to Create An HTML File
Extension .html or .htm - (used in early days some file systems limited file extensions to three letters, better .html) - better use editor - default landing page index.html - open website from computer or server

HTML Document Structure
Opening and closing tags <html>text</html> - empty elements without closing tags <br> or <br /> - Basic functional webpage html head body - title - nesting <html><body></body></html> - whitespace ignored, content looks same

HTML Head Elements
title meta link script style doctype DTD (Document Type Definition) - validate webpage

HTML Comments
Use for notes or reminders, or hide elements for testing - <!-- --> - ignored by browser - can contain complete elements <p> </p> etc.

Chapter 2 - Block-Level HTML Elements

Take 100% of the available width, with line breaks before and after each element to stand out - <h1>-<h6> - <p> - can be introduced into other block-level elements, cannot be introduced into inline elements without causing a disturbance - example:

Introduce p

in h2

and p out again

h2 starts -

h3 continues -

and h2 ends

<hr width="50%" size="70" style="background-color:yellow; background-image: url(/media/images/css/bgi40.png);" /> <!-- pixels --- or style="height:70px" for HTML5 --> (horizontal rule)

<div> (division) is a container for all other HTML elements - makes CSS layouts, navigation, styling, and other presentational effects possible - more at CSS tutorial

Notes & Links

How to speed up a slow Macbook within minutes

This is written in code tags :-) < >

Top Sites - - WebGL Wikipedia - - - - - - - Take The Throne - 3D head - GPU Shader Experiments -
Professional WebGL Programming: Developing 3D Graphics for the Web - Andreas Anyuru - June 2012 - Wiley

WebGL Wikipedia - MDN - = - - -

CSS Color Picker -
HTML5 Games: Creating Fun with HTML5, CSS3, and WebGL - Jacob Seidelin - code

How to Delete Genieo

Your browser does not support the HTML5 canvas element.

Website counter