GNU   davin.50webs.com/webdesign
a GNU world order – your home of everything that is free

Main Menu Research Projects Photo Album Curriculum Vitae The Greatest Artists
Email Address Computer Games Web Design Java Training Wheels The Fly (A Story)
Political Activism Bob Dylan Quotes+ My Life Story Smoking Cessation Other Links
Tutorial 1 Tutorial 2 Tutorial 3 Tutorial 4 Tutorial 5
Tutorial 6 Tutorial 7 Tutorial 8 Tutorial 9 Tutorial 10
Tutorial 11 Dec/Hex Codes H.T.M.L. ASCII Codes Using Emacs Download Links


Course in Web design Free Stuff

Bringing university level teaching to high school students

Google Chrome, Mozilla Firefox, Internet Explorer

Creating efficient (fast to download) and complex (m5_webpage_count) Websites like this one (davin.50webs.com) using only (where possible) Free, Libre and Open Source Software. This course assumes no prior background in Web design with the exception of the ability to use a Web browser such as Google Chrome, Mozilla Firefox or Internet Explorer.


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 will also teach the m4 macro language and the P.H.P. scripting language for creating navigation menus and other smart features. The m4 language is a useful tool for Website design and is what I use to generate my Website. See the following link for more information about how I do this. On the other hand, the P.H.P. language is an industry-standard open-source alternative to Microsoft's A.S.P. dot NET.


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.

1. Course material

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
  • Advanced m4
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
  • Design Your Own Website.
Tutorial 11 Questions
  • Design Your Own Website II.

2. Answers to questions

These tutorials have answers but a password is required to access them. Click on this paragraph to enter your password.

3. Useful links


Back to Main Menu
This page has the following hit count:
| Main Menu | Research Projects | Photo Album | Curriculum Vitae | The Greatest Artists |
| Email Address | Computer Games | Web Design | Java Training Wheels | The Fly (A Story) |
| Political Activism | Bob Dylan Quotes+ | My Life Story | Smoking Cessation | Other Links |
| Tutorial 1 | Tutorial 2 | Tutorial 3 | Tutorial 4 | Tutorial 5 |
| Tutorial 6 | Tutorial 7 | Tutorial 8 | Tutorial 9 | Tutorial 10 |
| Tutorial 11 | Dec/Hex Codes | H.T.M.L. ASCII Codes | Using Emacs | Download Links
Last modified: Sat Jun 13 14:39:42 NZST 2020
Best viewed at 1024x768 or above resolution.
© Copyright 1999-2020 Davin Pearson.
Please report any broken links to