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  


Web design course tutorial 1 : GNU Emacs and basic H.T.M.L.

§ 1.1 Introduction to GNU Emacs

The GNU Emacs text editor was written by Richard Stallman from 1984 to the present day. Its main feature that differentiates it from all of the other text editors in existence is that it is highly customisable, making it the most powerful editor in existence. I have been using Emacs for over 19 years and over the time that I have been using it I have customised it extensively for optimal editing convenience. The version of Emacs that you will use in this Web design course is a version that has been customised by me for excellent H.T.M.L. editing and debugging. See the following link for a summary of the commands that are available within Emacs.

This course will teach you how to create and edit Web pages. Web pages are written in the H.T.M.L. language, where H.T.M.L. stands for HyperText Markup Language. Web pages are named using the suffix .html (or sometimes .htm on Windows machines) to distinguish them from other types of files. Examples of other types of files that you will encounter in this course are text files which are conventionally named with the suffix .txt and image files which are conventionally named with the suffixes: .bmp (for BMP files), .gif (for GIF files), .jpg (for JPG files), and .png (for PNG files). The total number of possible file types is huge but you only need a small number of file types to create Web pages. Here is a diagram showing how Emacs, Web pages, Web hosts and Web browsers relate to one another:

H.T.M.L.

§ 1.2 Headings, bold, italics and paragraphs


<h1>1 The GNU Emacs Text Editor</h1>

<h2>1.1 About Emacs</h2>

The GNU Emacs text editor was written by Richard
Stallman in 1984.  Blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah <b>here is some bold text</b> blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah.

<p>

This is the second paragraph.  Blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah <i>here is some italic text</i> blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah.






1 The GNU Emacs Text Editor

1.1 About Emacs

The GNU Emacs text editor was written by Richard Stallman in 1984. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah here is some bold text blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

This is the second paragraph. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah here is some italic text blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

The code in Emacs. The code in a Web browser.

In the above, note the use of:

In the H.T.M.L. language, any expression of the form <xxx> or </xxx> (where xxx is anything but the < and > characters) is called an H.T.M.L. Tag or tag for short.

§ 1.3 Line breaking tags: <p> versus <br>


In H.T.M.L. br tags are used to break lines:

<p>

Davin Pearson<br>
P.O. Box 12-274<br>
Beckenham<br>
Christchurch 8242<br>
New Zealand<br>

<p>

While p tags are used to break paragraphs:

<p>

Here is the result of several br tags in a row:

<br>
<br>
<br>
<br>
<br>

Here is the result of several p tags in a row.  Note
that the result of several p tags in a row is the same
as if you had written one p tag.

<p>
<p>
<p>
<p>
<p>

New Paragraph.

<p>

In H.T.M.L. br tags are used to break lines:

Davin Pearson
P.O. Box 12-274
Beckenham
Christchurch 8242
New Zealand

While p tags are used to break paragraphs:

Here is the result of several br tags in a row:




Here is the result of several p tags in a row. Note that the result of several p tags in a row is the same as if you had written one p tag.

New Paragraph.

The code in Emacs. The code in a Web browser.

§ 1.4 Font tags: <font size=... color=... face=...>


<font color=red>Here is some text using a red
font</font>

<p>

<font color=green>Here is some text using a green
font</font>

<p>

<font color=blue>Here is some text using a green
font</font>

<p>

<font color="#ff00ff">Here is some text using a
hexadecimal RGB triplet</font>

<p>

<font size=7 color="#ff8888">Here is some large pink
text</font>

<p>

<font face="Comic Sans MS" color="#008800">Here is some
green Comic Sans MS font text</font>

<p>

Here is some text using a red font

Here is some text using a green font

Here is some text using a green font

Here is some text using a hexadecimal RGB triplet

Here is some large pink text

Here is some green Comic Sans MS font text

The code in Emacs. The code in a Web browser.

You can mix and match size=... with color=... and face=... to get many strange and wonderful fonts. See the following Website for the colours that you can use in font tags: Note that expressions of the from xxx=yyy inside tags are called attributes. Therefore size=..., color=... and face=... are all attributes. One disadvantage of the <font> tags is that you cannot use it to set background colours. See Section § 7.10.1 or Section § 9.4.1 for how to do this. Hexadecimal RGB colour triplets are harder to use at first, but once you get used to them you will wonder how you ever got by without them. Hexadecimal RGB colour triplets allow you to specify 256 different levels of red, green and blue. See the following link for a table of how hexadecimal numbers translate into decimal numbers and vice-versa. For example, from the table the decimal RGB triplet (255,255,0) (maximum red and green, minimum blue) translates to the hexadecimal RGB triplet (FF,FF,00), which is written inside that <font> tag as color="#FFFF00". I have also written some hexadecimal to decimal and decimal to hexadecimal converters. For example execute the following command in Emacs: Alt-x hex2dec Enter to convert from a hexadecimal RGB colour triplet to a decimal RGB colour triplet. Execute the following command in Emacs: Alt-x dec2hex Enter to convert from a decimal RGB colour triplet to a hexadecimal RGB colour triplet.

§ 1.5 Optional tags: <html>, <head>, <title> and <body>

Once you know how to change the colour of text it is natural to ask: How do we change the colour of the screen background? To do this you need to add the following tags to your H.T.M.L. document:


<html>
<head>
 <title>This is the title</title>
</head>
<body bgcolor="#008800" text="#ffffff">

Here is the main text of this document.  blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah

</body>
</html>


Here is the main text of this document. blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah











The code in Emacs. The code in a Web browser.

In the above bgcolor="#008800" sets the screen background colour to medium green (#008800) and text="#ffffff" sets the screen foreground colour to white (#ffffff). Note that with the above H.T.M.L. code the title of your Web page, in this case This is the title appears in the title bar of the Web browser.

§ 1.6 Alignment tags: <center> and <div>


<div align=left>
 Davin Pearson<br>
 P.O. Box 12-274<br>
 Beckenham<br>
 Christchurch 8242<br>
 New Zealand<br>
</div>

<center>
 Davin Pearson<br>
 P.O. Box 12-274<br>
 Beckenham<br>
 Christchurch 8242<br>
 New Zealand<br>
</center>

<div align=right>
 Davin Pearson<br>
 P.O. Box 12-274<br>
 Beckenham<br>
 Christchurch 8242<br>
 New Zealand<br>
</div>


Davin Pearson
P.O. Box 12-274
Beckenham
Christchurch 8242
New Zealand
Davin Pearson
P.O. Box 12-274
Beckenham
Christchurch 8242
New Zealand
Davin Pearson
P.O. Box 12-274
Beckenham
Christchurch 8242
New Zealand

The code in Emacs. The code in a Web browser.

Note that <center>  . . .  </center> is equivalent to <div align=center>  . . .  </div>.

§ 1.7 Miscellaneous tags <hr>, <sup> and <sub>


Here is a horizontal rule:

<hr>

Here is some <sup>superscript</sup> text.

<p>

Here is some <sub>subscript</sub> text.


Here is a horizontal rule:


Here is some superscript text.

Here is some subscript text.

The code in Emacs. The code in a Web browser.

§ 1.8 Problematic characters for H.T.M.L.

The less than character (<) and greater than character (>) are needed by H.T.M.L. for tags. If you want one of these characters to appear in your H.T.M.L. document you will need to use the following H.T.M.L. codes: &lt; for < and &gt; for >. The & character is problematic for similar reasons. To get an & character you will need to use the code &amp;. Double quotes (") are also problematic because they can make Emacs confused. To get a double quote character you need to write &quot;.

Spaces are problematic in H.T.M.L., for example the H.T.M.L. code "abc   def" shows up as "abc def" in a Web browser because multiple spaces are converted to a single space. To force multiple spaces to appear in a Web browser, you need to use the H.T.M.L. code &nbsp;, which stands for Non-Breaking Space. For example the H.T.M.L. code "abc &nbsp;&nbsp;&nbsp; def" shows up as "abc   def" in a Web browser.

Newlines are also problematic in H.T.M.L., because they do not show up in a Web browser. To force a newline character you need to use the <br> tag (as mentioned in Section § 1.3), or the <pre> and </pre> tags. All text between these two tags will show up in a fixed-width font, including all of the spaces and newlines that appear between these two tags.

§ 1.9 Navigating tags

Emacs has support for navigating tags. If you put the cursor on an opening tag <, pressing Ctrl-right or Alt-right or Shift-right will take you to the matching closing tags >. Similarly putting the cursor one character after a closing tag > and pressing Ctrl-left or Alt-left or Shift-left will take you to the matching opening tag. These keys are useful for debugging missing opening and closing tags.

§ 1.10 Commenting or uncommenting tags

Emacs also has support for commenting and uncommenting tags. Pressing Alt-; when the cursor is over the start of a tag such as <h1> will replace the tag with <!--h1-->. Pressing Alt-; when the cursor is over the start of a tag such as <!--h1--> will replace the tag with <h1>. Tags that begin with <!-- and end with --> are ignored by Web browsers, although they are visible when you choose the View Source (Internet Explorer) or View Page Source (Mozilla Firefox) menu button. See later in Section § 6.1 for how to write comments that do no show up at all.

§ 1.11 Questions


Question 1.1: Unzip the archive file webdesign-tutorial-01.tar.gz using Winzip or the tar command for the purposes of completing this tutorial.


Question 1.2: Open the file tutorial-1/ctrl-y-ctrl-k.html in Emacs. Using the Ctrl-k and Ctrl-y keys, reorder the paragraphs so that they are in alphabetical order.


Question 1.3: Open the file tutorial-1/searching.html in Emacs and perform the following operations:

  1. Move the cursor to the top of the file if it isn't already.
  2. Use the C-s key to find the first occurrence of the word "hello"
  3. Using the backspace and/or delete key, replace this with "supercalifraglistic expialadocious!". If you know how to use Windows Copy (Ctrl-c) and Windows Paste (Ctrl-v) then this will make your life easier.
  4. Press Alt-q to reformat the paragraph.
  5. By pressing the Ctrl-End, Alt-End or Shift-End keys, move the cursor to the end of the document.
  6. Use the C-r key to find the last occurence of the word "hello".
  7. Without using the Windows Paste button, replace this word with "supercalifraglistic expialadocious!". Because these word already exists in the document, you can get Emacs to find and insert that word by typing the first few letters of each word and then pressing Alt-/ until you get the word that you want. The key sequence Alt-/ invokes the Emacs command dabbrev-expand which is a particularly cool feature of Emacs that can save you a lot of typing. Note that Alt-/ can only find words that already exist in either the current file or any other file is currently in Emacs's memory.

  8. Press Alt-q to reformat the paragraph.


Question 1.4: Open the file tutorial-1/alt-shift-5.html in Emacs and perform the following actions:

  1. Open the file in Emacs and look at it. Then open the file in a Web browser. Notice that the paragraph formatting is lost in the Web browser.
  2. Add <p>  . . .  </p> tags to the file so that the paragraphs show up as separate paragraphs in a Web browser.
  3. Go to the top of the document and replace every occurrence of the word "apple" with "spider". You should use the following key sequence: Alt-% also known as Alt-Shift-5.
  4. Using the same steps as the last bullet item replace every occurrence of the word "banana" with "tree" and every occurrence of the word "carrot" with "umbrella".


Question 1.5: Open the file tutorial-1/sections.html in Emacs. Replace the title with a centralised <h1>  . . .  </h1> pair of tags. Replace sections of the form x with the <h2>  . . .  </h2> pair of tags. Replace sections of the form x.y with the <h3>  . . .  </h3> pair of tags. Replace sections of the form x.y.z with the <h4>  . . .  </h4> pair of tags. Use the Alt-c key which capitalises the current word to reformat the headings from all uppercase to mixed case. Also use the Alt-q key which reformats the paragraphs. Finally change the text of the paragraphs to all lower case using the key sequence Alt-l.


Question 1.6: Debug the H.T.M.L. file tutorial-1/debug.html by opening it in a Web browser. Note that some of the paragraphs are missing opening and closing <p> tags. To get underlined text to show up in a Web browser, you will need to use the <u>  . . .  </u> pair of tags.


Question 1.7: Open the file tutorial-1/brs.html into a Web browser and notice that depending on the size of the browser window, the paragraphs are only half as wide as they should be. To fix this you will need to remove some of the <br> tags and replace the rest of the <br> tags with <p> tags. Start this by opening the file tutorial-1/brs.html in Emacs and then make the desired changes.


Question 1.8: Write <font> and <center> tags to display the following text:

Hello

You will need to choose the Helvetica face and large size text. You will also need to use the colour names: red, orange, yellow, green, cyan and blue.


Question 1.9: Write <font> and <center> tags to display the following text:

abc

Note that you will need to use the size=, face= and color= attributes to the <font> tag.


Question 1.10: Write <font>, <i>, <center> and <br> tags to show the following text:

Comic Sans MS


Question 1.11: Given the decimal RGB triplet (200,100,100) what is the resulting hexadecimal RGB triplet? Refer to the Decimal / Hexadecimal Codes 0 - 255 page for how to do this, or alternatively use the Emacs command Alt-x dec2hex Enter.


Question 1.12: Given the hexadecimal RGB triplet #ffaa88 what is the resulting decimal RGB triplet? You can use the link in the previous question or the Emacs command Alt-x hex2dec.


Question 1.13: Create a new Web page called sentence.html containing the following sentence:



The quick brown fox jumps over the lazy dog.

Make it so that the sentence appears in bold + italics + underlined, i.e. bold and italics and underlined. Also make it so that the same sentence appears in the title of the document.


Question 1.14:  † Tricky What is the hexadecimal RGB triplet of the colour name "goldenrod"? Roughly speaking, you will need to follow the following steps: Firstly, create a Web page with the bgcolor= attribute of the <body> tag set to goldenrod. Secondly, open the page in a Web browser and take a screenshot of the screen. Thirdly, use the program MS Paint to find the decimal RGB triplet of the colour goldenrod and finally use the Emacs command Alt-x dec2hex Enter to find the hexadecimal RGB triplet.


Question 1.15: Open the file tutorial-1/divs.html in Emacs. Then make the following changes:

  1. Add attributes to the <body> tag so that the background is grey and the text is white.
  2. Change the title to include your name.
  3. Change it so that the first paragraph appears with left alignment using the align=left attribute to the <div> tag.
  4. Change it so that the second paragraph appears with center alignment using the <center> tags.
  5. Change it so that the third paragraph appears with right alignment using the align=right attribute to the <div> tag.
  6. Add an <hr> tag the end of the document.
  7. Underneath the <hr> tag add a line which says &copy; Copyright 2007 Your Name and use a <div> tag so that the text shows up as right alignment.


Question 1.16: Use the <sup>  . . .  </sup> tags to generate Einstein's Famous equation E=mc^2. Note that the letters E, m and c should all be in italics.


Question 1.17: Use the <sup>  . . .  </sup> tags and the &pi; tag to generate the formula for the area of a circle: apr2.


Question 1.18: Use the <sub>  . . .  </sub> tags to generate the formula for water: H20


Question 1.19: Using the H.T.M.L. quote characters &lt;, &gt; and &amp;, rewrite the following equation so that it can be viewed in a Web browser:

Problematic Characters


Question 1.20: By clicking on the following link generate H.T.M.L. code to generate the following symbols:

  1. Pound sign (U.K. currency)
  2. Copyright sign
  3. Yen sign (Japanese currency)
  4. Greek capital letter delta
  5. Rightwards arrow
  6. Degrees symbol (e.g. 98 degrees as a symbol)


Question 1.21: Open the file tutorial-1/err.html in Emacs. Use the tag navigation keys Ctrl-Left / Alt-Left / Shift-Left and Ctrl-Right / Alt-Right / Shift-Right to find one of the errors. Use your knowledge of the <font> tag to find the other error. Then open this file in a Web browser to verify that the code is correct.


Question 1.22: Using the Alt-; key uncomment the bold tags and comment out the italics tags in the following text:

<!--b-->bold<!--/b--> <i>italics</i>
<!--b-->bold<!--/b--> <i>italics</i>
<!--b-->bold<!--/b--> <i>italics</i>
<!--b-->bold<!--/b--> <i>italics</i>
<!--b-->bold<!--/b--> <i>italics</i>
<!--b-->bold<!--/b--> <i>italics</i>
<!--b-->bold<!--/b--> <i>italics</i>
<!--b-->bold<!--/b--> <i>italics</i>


You can view the answers to this tutorial. A password is required.

Back to Web Design Course
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