Content

You cannot learn programming by only looking at examples. Please refer to the recommended text book (Murach's HTML5 and CSS3) for detailed explanations.


Setting up programming environment

html, css etc file / title Txt file / link Description Video
0. preparation
Preparation   - Show File Extensions in Windows 8/8.1 video 00_001
    - install notepad++ video 00_002
    - Create Screen Captures, Save As PDF Files video 00_003


Chapter 2, code, test and validate

html, css etc file / title Txt file / link Description Video
1. html structure; 2. comments, meta, html validation; 3. css selector, css validation
ex001_basic.htm
 txt file - html 5 structure, notepad++, W3C Markup Validator video html_ex001_basic
ex002_basic.htm   - html 5 structure, comments, lang, meta

- validate your html file using the W3C Validator
ex003_selector.htm
and
ex003_selector.css		   - css: selector, property, value
- refer to the css example above: css rule sets can be selected by type (tag type), id #, class .
- validate your html file using the W3C Validator
- validate your css file using the W3C CSS Validation Service		 video html_ex003_selector
Note:
- In HTML, the span and div elements are used where parts of a document cannot be semantically described by other HTML elements. Used for grouping.
Note:
- id: unique - one element can only have one id; each page can have only one element with that id
- class: not unique - can have same class in multiple elements; can use multiple classes on the same element
Important:
- you can only use id only once, you can use classes over and over again (if you are not sure, use class)

 

Chapter 3, how to use html to structure a web page

html, css etc file / title Txt file / link Description Video
4. favicon;
ex004_basic.htm
   - favicon, meta, h, p etc  
- Create a image 32x32 pixels (Fireworks or Expression Design), save it as png format (example file in .fw.png format), use http://iconverticons.com/ to convert it to ico format.
Note: For favicon, according to W3C: The format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO.
Note: png works fine for all new browsers, I am not sure why people like ico, anyway, I am too busy to find out.
Note: When a website is local (using the file:// protocol), the favicon doesn't show up in Chrome or Safari, but it works in Firefox. However, when the exact same site is actually hosted, the favicon works fine in all of the browsers. I don't know why (too busy to find out,), so... learn how to HOST your site on a web server.
project step 01
index.htm   you may need this image  

 

Chapter 4, how to use css to format the elements of a web page

html, css etc file / title Txt file / link Description Video
5-14. css format, font etc
Download normalize.css. Create a subfolder "styles", and save normalize.css in "styles" folder.  
ex005_format.htm   - css format  
ex006_selector.htm   - select css elements, all, type, id, class  
ex007_relational.htm   - select css elements by relationships, parent, child, sibling and descendent  
ex008_other_selector.htm   - class within element, multiple selectors, attribute selectors  
ex009_pesudo.htm   - :link; :visited; :active; :hover; :focus; :first-child; :last-child; :only-child; :first-letter; :last-letter;  
ex010_font.htm   - font family  
ex011_font.htm   - all about font  
ex012_alignment   - alignment and indent  
ex013_decorate.htm   - underline, overline, shadow for text  
ex014_float_image.htm   - flow image to left  
project step 02
index.htm
and
main.css
  - basic layout  

 

Chapter 5, how to use the css box model for spacing, borders, and backgrounds

html, css etc file / title Txt file / link Description Video
W3 box model image and reference link css 2.1. CSS3 is not yet a W3C standard, but the major browsers support many of the new properties.
ex015_box_model.htm   - every element (block or inline) on a page is a rectangular box  
ex016_corners_shadow.htm   - rounded corners and shadows and borders  
ex017_gradients.htm   - p185 of textbook shows properties for setting the background color and image in a table (html color names)  
project step 03
index.htm, and main.css   - box model, background  

 

Chapter 6, How to use CSS for page layout

html, css etc file / title Txt file / link Description Video
ex018_column_fixed.htm   - use floating to create a 2-column, fixed-width page layout  
ex019_column_liquid.htm   - use floating to create a 2-column, liquid page layout, use % instead of pixel  
ex020_column_fixed.htm   - use floating to create a 2-column, half fixed, half liquid page layout, use % and pixel, not a good idea  
ex021_3_column_fixed.htm   - use floating to create a 3-column, fixed-width page layout  
ex022_text_columns.htm   - 3 columns, fixed-width, text  
ex023_absolute_fixed.htm   - absolute and fixed positioning  
ex024_toc.htm   - table of content  
project step 04
index.htm, and main.css   - box model, float right  
project step 04 - OLD
index_old.htm, and main_old.css   - box model, float right  


Chapter 7, How to work with links and lists

html, css etc file / title Txt file / link Description Video
ex025_list.htm   - different type of lists, open new window, you may need this star image  
ex026_list_links.htm   - how to use list as links, and different type of links  
ex27a_dropdown.htm   - create a a dropdown menu using css using Adobe Dreamweaver CS6, this youtube video shows how to do that  
ex28_navigation.htm   - different ul li link patterns for navigation, all 1-tier navigation menus  
ex29_navigation_2-tier.htm

ex29_navigation_2-tier.css

   - 2-tier navigation menu  
ex30_navigation_3-tier.htm

ex30_navigation_3-tier.css

   - 3-tier navigation meanu, add content to 2-tier navigation menu  
project step 05
index.htm, main.css and member.css   - navigation bar, link to another page  
project step 05 - OLD
index_old.htm, main_old.css and member_old.css   - navigation bar, link to another page  


Chapter 8, How to use responsive web design

html, css etc file / title Txt file / link Description Video

     
project step 06
index.htm, main.css and member.css   - fluid design
- index.htm is the same as last step's index.htm		  
project step 07
index.htm, main.css and member.css  

- fluid design with media query
- use SlickNav plugin
- download its zip file from http://slicknav.com/

- copy dist/slicknav.css to "styles" sub-folder
- copy dist/jquery.slicknav.min.js to "js" sub-folder (create js sub-folder first)
- include a script element for jQuery core library (don't need to download)

- add another nav tag to index.htm
- update member.css (mostly at the end)

  

 

OLD Slice Example

html, css etc file / title Txt file / link Description Video
slice example ... image resource   HTML 4.01 Transitional
Fireworks: Export Slices
uncheck > selected slices only
Options > Export as "Dreamweaver HTML"
Options > Space width: 1 pixel transparent spacer; content: spacer image		  
   

HTML 5
Fireworks: Export Slices
uncheck > selected slices only
Options > Export as "Dreamweaver HTML"
Options > Space width: single table, no spacers; content: none
Change to html 5 in Dreamweaver: modify > page properties > Title/Encoding
Use html and css to (change the code) code it box by box

/* So the HTML5 structural tags work in IE */
article, aside, figure, footer, header, nav, section {
display: block;
}

* {
margin: 0;
padding: 0;
}

body {
width: 980px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}

a img {border: none; } 		 
Other Examples
image resource		      
eg500_equal_column.htm   - use css display:table property to display 3 columns of equal length (actually 5 columns). For relative columns, use % instead of px.  
eg501_fix_within.htm   use :before to display something on top of something  
 

OLD Free Web Hosting

  • Biz.nf for *.co.nf (PHP, MySQL, WordPress, Joomla, Free .co.nf domain, No ads, 250MB web space, 5GB data transfer, FTP)
    • register a free *.co.nf domain name and choose free hosting plan, need a valid e-mail address
    • login to control panel (link given in confirmation e-mail), activate account using confirmation e-mail
    • Domain Manager >> Create a free subdomain *.co.nf (up to 3 free subdomains)
    • find out ftp server information (FTP Manager >> FTP Accounts >> + >> FTP Information)
    • DO NOT disable this... File Manager (light) >> disable directory protection (so that you can upload directory)... directory will be created for you when you create subdomain
    • Download / install ftp software like WinSCP (FTP, hostname, username, password)
    • upload your files using WinSCP to /*.co.nf directory
    • test your website using a web browser http://*.co.nf/
    • Usage Report = check your usage
    • Traffic Statistics = check traffic, so that you don't exceed available (free) disk space and (free) bandwidth
  • byethost.com - (1GB web space, 50GB transfer, PHP, MySQL, FTP)

OLD examples

html, css etc file / title Txt file / link Description Video
below are from the W3C.org website and other tutorial sites.
HTML Fundamentals
- HTML 5 is NOT case sensitive, but XHTML is case sensitive (lowercase tags). So use lowercase tags and attributes for HTML (easy future conversion to XHTML).
- Choose an editor that allows you to save a page in the UTF-8 encoding
eg001.htm   - My First Web Page. eg001a.htm (changing stuff) eg001b.htm  
eg002.htm   - UTF-8, save as in notepad, or Encoding in notepad++  
eg003.htm   - document metadata  
eg004.htm   - body, heading, paragraph, horizontal rule, unordered list, ordered list, bold, pre  
eg005.htm   - Hyper Links  
eg006.htm   - Images  
eg007.htm   - Video  
eg008.htm   - Tables  
eg009.htm   - Forms  
eg010.htm   - Sections  
eg011.htm   - em, i, strong, b, address, audio, special character  
CSS Fundamentals
eg101a.htm   (link to eg101a.css) linking style sheet - Adding style to HTML file eg001.htm  
eg101b.htm   internal style sheet - Adding style to HTML file eg001.htm  
eg101c.htm   inline style sheet - Adding style to HTML file eg001.htm  
eg102.htm   (link to eg102.css) - selectors / grouping  
eg103.htm   (link to eg103.css) - css text and font  
eg104.htm   (link to eg104.css) - use eg010.htm as a example to showcase a combination of css features  
eg105.htm   (link to eg105.css) - use part of eg004.htm, list, link  
eg106.htm   (link to eg106.css) - boxes  
eg017.htm   (link to eg107.css) - a html5 & css example