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 (over 500 page) 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
webdesign-tutorial-01.tar.gz
  • 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
webdesign-tutorial-02.tar.gz
  • 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
webdesign-tutorial-04.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 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
webdesign-tutorial-07.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 (C.S.S.) and the <span> tag rather than the <font> tag
  • Uploading a complex Website to 50webs.com.
Tutorial 08 Questions
webdesign-tutorial-08.tar.gz
  • 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
webdesign-tutorial-09.tar.gz
  • 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

  • Download Links for Software Used in This Course
  • How to use Emacs.
  • H.T.M.L. ASCII Codes 0 - 127.
  • Decimal/Hex Codes 0 - 255.
  • Wikipedia's lists of colours.
  • firstsiteguide.com is a link to a website provided to me by Duke Vukadinovic, email: duke <at> firstsiteguide <dot> com. Here is what he had to say about it:
    ‘‘I would like to introduce you to our educational website made for web beginners where we’ve included in-depth online guides together with downloadable PDF’s,video tutorials and a lot of other web development tools and resources in order to help newbies establish their online identity.’’
  • Elizabeth Turner elizabeth <dot> o <dot> turner <at> gmail <dot> com recommended to me the following Website: www.reviews.com/web-hosting and sent me the following email message:
    We recently spent time investigating web hosting service providers. As I'm sure you know, consumers can have a difficult time finding a web hosting service that best suits their needs due to the overwhelming number of providers and options. Our team spent weeks researching over 200 top rated web hosting service providers by analyzing their services offering and coverage options. We even submitted support tickets, started chats, and made calls to 27 hosts in hopes of finding the best customer service among our contenders. Not only did we identify the leading providers, but we also created a comprehensive guide helping people better understand the most important aspects of web hosting services.
  • Jessica Bini jessica <at> guru99 <dot> org sent me the following email:
    I just wanted to send you a quick email to let you know that we recently released an article on ASP.Net Tutorial www.guru99.com/asp-net-tutorial.html.
  • W3.ORG H.T.M.L. Validator
  • Character entity references in H.T.M.L. 4.
  • Animated GIF Archive.

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: Sun Oct 9 14:46:30 NZDT 2016
Best viewed at 800x600 or above resolution.
© Copyright 1999-2016 Davin Pearson.
Please report any broken links to