Creating efficient (fast to download) and complex (over 100 page)
websites using only (where possible)
free software
This course assumes no prior background in web
design with the exception of the ability to use a web browser such
as
Windows Internet Explorer or
Mozilla Firefox.
This course teaches the principles of web design by teaching how to
code raw HTML. By
learning raw HTML rather than how to use a WYSIWYG HTML 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
Microsoft Expression Web,
Microsoft
SharePoint Designer
or
Macromedia Dreamweaver.
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 1 Questions
tutorial-1.tar.gz
|
- Introduction to the Gnu Emacs Editor
- Basic HTML 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 HTML:
<, >, &, ", spaces and newlines.
- Using Emacs to navigate tags.
- Using Emacs to toggle commenting out tags.
|
Tutorial 2 Questions
tutorial-2.tar.gz
|
- Using Emacs to edit multiple files and folders.
- Hyperlinks from page 1 → page 2.
- Hyperlinks to sections in an HTML document.
- Hyperlinks to websites on the Internet.
- Image formats: BMP, GIF, JPG and PNG
- Adding images to an HTML document.
- Three possible image alignments.
- Debugging relative hyperlinks and image links with
Alt-x testlinks Enter.
- Editing images using IrfranView or MS Paint.
- Adding an image to the background of your web page.
- Uploading a website to Ripway.
|
Tutorial 3 Questions
|
- Ordered and unordered lists:
<ul>, <ol> and <li>.
- Tables:
<table>, <tr>, <th>, and <td>.
- Using percentage or pixel sizes.
- Tables inside tables.
- Debugging/indenting tables using
TAB / f5.
- Debugging HTML tags using
Alt-x weblint Enter.
|
Tutorial 4 Questions
tutorial-4.tar.gz
|
- 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 5 Questions
|
|
Tutorial 6 Questions
tutorial-6.tar.gz
|
- Smart use of m4 to eliminate most of the tiresome repetitive work that is needed to build a complex website.
|
Tutorial 7 Questions
tutorial-7.tar.gz
|
- 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 (CSS) and the
<span> tag rather than the <font> tag
- Uploading a complex website to Ripway.
|
Tutorial 8 Questions
tutorial-8.tar.gz
|
- A simple introduction to PHP.
- Multiple page websites using PHP to generate navigation buttons
- Simple customisation of PHP content.
- Smart use of PHP to eliminate most of the tiresome repetitive work that is needed to build a complex website
|
Tutorial 9 Questions
tutorial-9.tar.gz
|
- Using PHP to generate sub-menus and sub-sub-menus
- Cascading Style Sheets (CSS) and the
<span> tag rather than the <font> tag
|
Tutorial 10 Questions
|
|
Tutorial 11 Questions
|
- Design Your Own website II.
|
