This course teaches the principles of Web design by teaching how to
code raw H.T.M.L..
By learning raw H.T.M.L. rather than how to use
a WYSIWYG
H.T.M.L. editor, they will gain an understanding of the fundamental
principles of Web design that they will be able to later apply to
industry standard applications such as
Adobe Dreamweaver
or
Microsoft Frontpage.
The course is aimed at students of all levels of expertise. While
the m4 language will probably be best understood be strong
students of mathematics, weaker mathematics students will be able to
use enough of the m4 language to gain a strong understanding of
how to build Websites.
Tutorial 01 Questions
|
- Introduction to the GNU Emacs Editor
- Basic H.T.M.L. including:
- headings <h1> . . . <h6>, bold <b>, italics <i> and paragraphs <p>.
- Line breaking tags <p> versus <br>.
- Font tags: <font size=... color=... face=...>.
- Optional tags: <html>, <head>, <title> and <body>.
- Alignment tags: <center> and <div>.
- Miscellaneous tags: <hr>, <sup> and <sub>.
- Problematic characters for H.T.M.L.: <, >, &, ", spaces and newlines.
- Using Emacs to navigate tags.
- Using Emacs to toggle commenting out tags.
|
Tutorial 02 Questions
|
- Using Emacs to edit multiple files and folders.
- Hyperlinks from page 1 → page 2.
- Hyperlinks to sections in an H.T.M.L. document.
- Hyperlinks to Websites on the Internet.
- Image formats: BMP, GIF, JPG and PNG
- Adding images to an H.T.M.L. document.
- Hyperlinks directly to images
- Three possible image alignments.
- Debugging relative hyperlinks and image links with Alt-x testlinks Enter.
- Editing images using IrfranView and MS Paint.
- Adding an image to the background of your Web page.
- Uploading a Website to 50webs.com
|
Tutorial 03 Questions
|
- Ordered and unordered lists: <ul>, <ol> and <li>.
- Tables: <table>, <tr>, <th>, and <td>.
- Using percentage or pixel sizes.
- Tables inside tables (nested tables).
- Debugging/indenting tables using TAB or F5 or
Control-Alt-\.
- Debugging H.T.M.L. tags using Alt-x weblint Enter.
|
Tutorial 04 Questions
|
- A simple introduction to m4.
- Multiple page Websites using m4 to generate navigation buttons.
- Using make m4 to build Web pages.
- Using make copy to build images.
- Using make tar to backup a Website.
- Simple customisation of m4 content.
- Problematic characters for m4: (, ), [ and ] and ,.
|
Tutorial 05 Questions
|
|
Tutorial 06 Questions
|
- Smart use of m4 to eliminate most of the tiresome repetitive work that is needed to build a complex Website.
|
Tutorial 07 Questions
|
- Websites with sub-menus and sub-sub-menus to manage complexity
- Use of the m4_home macro to refer to the home folder of a Website.
- Cascading Style Sheets (C.S.S.) and the <span> tag rather than the <font> tag
- Uploading a complex Website to 50webs.com.
|
Tutorial 08 Questions
|
- A simple introduction to P.H.P..
- Multiple page Websites using P.H.P. to generate navigation buttons
- Simple customisation of P.H.P. content.
- Smart use of P.H.P. to eliminate most of the tiresome repetitive work that is needed to build a complex Website
|
Tutorial 09 Questions
|
- Using P.H.P. to generate sub-menus and sub-sub-menus
- Cascading Style Sheets (C.S.S.) and the <span> tag rather than the <font> tag
|
Tutorial 10 Questions
|
|
Tutorial 11 Questions
|
- Design Your Own Website II.
|