Gender Changer Academy
HTML for Beginners
Tali - Vancouver genderchanger and etc-developer
Course Herstory
Our first attempt at an on-line HTML course took place over IRC at the Athens 2003 Eclectic Tech Carnival (/etc). Loss of the local network connection made it difficult for the participants to take full part in that course. Women had to run off to the nearest internet cafe to join in, but we still managed to cover some basics. The course materials were then enhanced and improved for the Belgrade 2004 /etc where we offered the course again over IRC. Even with course material improvements and a solid internet connection teaching a workshop over IRC is challenging. The instructor remains rather disconnected from the participants. Even though it may be awkward, it is still possible to do, and the course at the 2004 /etc was okay, though still only the basics were covered due to time restraints. To make things easy for self-study, we have added exercises to the Reader and put all the course resources on-line on our web site. The course now can be followed anytime anywhere by visiting http://genderchangers.org/home/etc-belgrade/. It will eventually be moved to http://genderchangers.org/lib/index.html.
Note: Please keep in mind that this course is what we know at this time (August 2004). It is not everything. We hope you will find the information useful.
Pre-class check
Course Objectives
Course Notes
HTML
What is HTML?
HTML - Hyper Text Mark-up Language. All web pages are written in this language. We see these pages rendered through various web browsers like, Mozilla, Netscape, InternetExploder, Opera, lynx, etc. The code that makes the web page appear the way it does to you in a web browser is HTML.
HTML is a page formatting language. This is the 'mark-up' part of the name. There are various HTML commands known as tags and attributes. Web browsers interpret these commands and make the text and content appear in a particular way. For example, one can use the bold-command <b>...</b> to make a word appear in bold on a web page.
HTML is a language that allows one to refer to other documents. This is the 'hyper text' part of the name. Web pages can contain links to other places on the same page, other pages or files in the web page hierarchy and other files or documents on other web pages on other servers.
Why study HTML?
Many people use software programs to make web pages and do not ever see any HTML code. This can be very useful as not everyone wants to be looking at weird lines of code all day long, and not everyone wants to learn to write code. However, basically what these software programs do is generate HTML code for the author. And the code they generate is rather messy. It is likely that at some point in your web page building career that you may need to understand this code to make changes. When you have a program doing something for you, it does not always do exactly what you what, so you have to fix it or tweak it by hand. It would be useful to know HTML, so you can do just that - edit by hand. Another problem one can run into is that someone may give you a web page to update that was written by hand or produced by a proprietary software program that you do not have access to. Knowing HTML allows you to update web pages in these cases as well.
Some HTML editors allow you to do both, make HTML documents by hand and to generate them automatically in a WISIWIG (what you see is what you get) format. Here is a short list of HTML editors. One can find many more on the internet.
List of HTML editors
HTML files
HTML files are written in plain text. Examples of text editors are vi or vim on gnu/linux, BBEdit on macOS, NotePad on Windoze. There are many more and you can use whatever one you like. Some have options for color coding which gives you clues to where there are bugs. Word processors like AbiWord, WordPerfect and M$Word are not text editors! However, these word processors do give you the option of saving as text. This might work, but I haven;t tried it. I just stick with a plain text editor to be on the safe side.
All HTML files should end in .html. There are HTML files that end in .htm. This is the old DOS protocol when DOS only had 3 character file extensions. It is good practice to always name your files .html.
HTML files can be viewed by a browser locally on your computer. From the "File" menu choose "Open...", then find the file on your hard disk. Alternatively, you just click on the HTML file and the default browser will open it automagically. If this doesn't work, you can type the file path (ie. file:///home/tali/html_course/course_outline.html) in the browser where you would normally type a web page address. The browser will find and open the file if the path is correct.
HTML files contain text and HTML commands know as "tags". The rest of this course will be explaining some of these tags.
The main web page or home page file is usually called index.html. This file will normally reside in a directory called www,web or public_html. Depending on the structure of your web page the file called index.html will contain all the web page information or some information along with links to other documents and images.
Tags and Attributes
Tags
All commands in HTML are made up of keywords or abbreviations surrounded by angled brackets. The tag <b> will make the text that follows the tag look bold in the browser. Most tags require an end tag. The boldface end tag </b> tells the browser to stop making the text bold. End tags have the same keyword and are proceeded by a forward slash, like so </b>. The following line:
The <b>screwdriver</b> is an important tool to keep around your computer.
looks like this in the browser
The screwdriver is an important tool to keep around your computer.
There are few a tags, known as self-terminating tags that do not require end tags. These tags are the line break <br>, the horizontal rule <hr> and the image tag for images <img>. Some web page developers code the self-terminating tags in this way: <br/> , <hr/>, <img/>, so they are easy to recognize. Browsers, however, recognize both conventions.
Attributes
An HTML attribute is a command that modifies an HTML tag in some way. An HTML tag can contain multiple attributes. For example, the horizontal rule <hr/> tag can be modified for width, thickness, alignment and shading. Attributes are coded as the attribute name followed by an equal sign, then by the value, which is a character string in quotes. The code for a horizontal line with attributes looks like this:
<hr noshade size="10" width="50%" align="center"> or alternatively
<hr noshade size="10" width="50%" align="center"/>
Find several examples at http://www.genderchangers.org/home/etc-belgrade/hr.html.
For the ALIGNment attribute the default is "center". For the WIDTH attribute one can use a number for the number of pixels or use a percentage which means the line will take up a percentage of the width of the page. For the SIZE attribute, one just uses a number representing the number of pixels.
We won't be covering tables in detail in this course, but here is a simple table using the BORDER and WIDTH attributes.
<table border="5" width="30%">
<tr>
<td>data cell 1</td>
<td> data cell 2</td>
</tr>
<tr>
<td> data cell 3</td>
<td> data cell 4</td>
</tr>
</table>
When rendered in a browser, this table would have a border of 5 pixels and take up 30% of the browser window's width and be aligned to the left (that's the default for tables). The <tr> tag is for a table row and the <td> tag designates a table data cell. They, too can contain many attributes. The table above is two rows by two columns. You can see the actual table at http://genderchangers.org/home/etc-belgrade/table2-2.html.
The Nuts and Bolts - Using HTML Tags and Attributes
Essential HTML Tags
All HTML pages should contain the following pairs of tags: <html>...</html>, <head>...</head>, <title>....</title> and <body>....</body>. The HTML tag lets the browser know that this is an HTML file, the HEAD contains search information and the TITLE tag. The TITLE contains the title of the document and it appears in the top frame of the browser. The BODY tags surround the main content of the web page. When coded up the pattern goes like this:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
You will find a sample web page at http://genderchangers.org/home/etc-belgrade/newpage.html. By using the View-Page Source command in the browser tool bar you can see the difference between the HTML code and what you get in the browser window.
Exercise One:
Using a text editor copy the above tags into a text file. Give your page a title by typing a something in between the the two TITLE tags. Give your page some content by typing something between the two BODY tags, save the file as a .html file and open the file with a browser and examine your results. Keep this file for future exercises.
Your title should appear in the top frame of the browser and the 'body content' should appear as regular text in main part of the web browser. Here is the textbook example:
<html>
<head>
<title> Web Page Title - Exercise One </title>
</head>
<body>
To complete Exercise One copy and paste the tags into a text editor and add your ideas, poetry or other bits of nonsense inside the appropriate HTML tags.
</body>
</html>
See the result at http://genderchangers.org/home/etc-belgrade/page-sample.html.
Formatting Text
Paragraphs and lines
The web browser ignores line breaks and tabs, so one has to format the text using HTML tags. All your content should be surrounded by some kind of HTML tag. There are many tags that can arrange text in different ways. We will introduce three simple ones: the paragraph <p> </p>, the line break <br> and the <blockquote> </blockquote> tags. Obviously, the <p> tag delineates paragraphs of text. In general all your text should be placed within paragraphs. The <br> inserts a line break in the text. Multiple <br> line break tags will insert multiple line breaks. The <blockquote> will set text in from the rest of the text and it includes a line break. Let's make some poetry with our new tags:
<p>
Roses are red
Ivy is green
How does this look on the computer screen?<br>
<br>
Some roses are real<br>
Some violets are fake<br>
Things look different when we use the line-break.<br>
<blockquote>
Flowers can't swim, but<br>
Let's see if they float<br>
If you want your text set in, use the blockquote.<br>
</blockquote>
</p>
<p>
Let's giggle and laugh with the start of a new paragraph.
</p>
<p>
I know my poetry isn't so swell, oh well. <br>
Use the View-Page Source command to see the HTML.
</p>
The result is at
http://genderchangers.org/home/etc-belgrade/paragraphs.html
Exercise 2:
Using your text editor add some paragraphs and block quotes to your web page. Use the line break command too, when you need it. You can write your own poem or tell us something about yourself. Save the result and have a look at it. If it doesn't look like you expected, try to figure out why and make the necessary changes. To see your changes, click the Refresh or Reload button in the tool bar of your browser.
Headings
Adding headings to your HTML documents is a nice way to organize your textual content. There are 6 heading sizes and the HEADING tag is the letter 'h' followed by a number 1-6. The HEADING <h1> is the largest and <h6> is the smallest. HEADINGS require ends tag, of course. Here are the examples:
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
Following a HEADING one does not need to code the first paragraph as the HEADING tag automatically spaces the next block of text as a new paragraph. Of course, if you would like extra space between your HEADING and the first paragraph, code a paragraph or use line breaks.
Exercise 3:
Using your text editor, add a heading to the top of your web page. If you want the heading to be in the center, you can surround your heading with the CENTER tags, <center> </center>. Try different size headings.
For a table of all the heading sizes, go to:
http://www.genderchangers.org/home/etc-belgrade/headings.html.
Font Sizes
Font size numbers run in the opposite direction as the heading numbers beginning with the smallest FONT SIZE of 1. The code syntax looks like this:
<font size=1> Font size 1 </font>
and running up to a FONT SIZE of 7
<font size=7> Font size 7 </font>.
The FONT SIZE tag is quite inefficient because one has to code it everywhere (in every paragraph or table data cell). And to make it even more troublesome, if you want to change the font size, one has to change every FONT tag - that's time consuming. Generally, one just uses the default font size which is rendered as FONT SIZE 3 without any FONT tag. A more efficient way of dealing with FONT SIZE would be to use a tool called a Cascading Style Sheet or CSS. CSS is beyond the scope of this introductory course. Use the FONT SIZE tag sparingly when you need some text to be exactly that size!
You can find a table of font sizes under the headings at:
http://www.genderchangers.org/home/etc-belgrade/headings.html.
Emphasizing Text
One can use headings and font sizes to format text, but there are other tags, too, for formatting text for emphasis, size or other effects. Here are a few examples:
<b> bold text </b> bold text
<i> italic text </i> italic text
<big> bigger </big> font size bigger font size
<small> smaller </small> font size smaller font size
There are some other nifty text tags below the font size table at:
http://www.genderchangers.org/home/etc-belgrade/headings.html.
Exercise 4:
Add some emphasis to your web page by using one or more of the above tags.
Horizontal Rule
The HORIZONTAL RULE tag is a self terminating tag requiring no end tag. It can be coded either like this <hr> or like this <hr/>. This tag places a line across the browser and can be used to add a little spice to a simple web page and to make sections on the page more clear. The attributes that modify this tag are NOSHADE, WIDTH, SIZE and ALIGN. For example,
<hr width=50% size="5"/>
is rendered in a browser as a shaded line taking up fifty percent of the browser window and center aligned.
Exercise 5:
Place a <hr> tag at the top and bottom of your page or in between paragraphs of text or anywhere you like. Remember to stay within the <body> tags. Save your work and have a look at it.
There are samples at http://www.genderchangers.org/home/etc-belgrade/hr.html.
Making Lists
Lists are a very convenient way to make a web page look neat and tidy. There are unordered lists <ul></ul> and ordered lists <ol></ol> and they embed easily when you put a list inside a list. The list tags contain list item tags <li></li> which are placed in between the list tags. Here we include list-item end tags, but the list-item end tags are optional. The end tags for lists, however are obligatory.
<ol type="A"> </ol>
<ul type="disc"> </ul>
If you do not specify the list type, the browser uses its default which varies somewhat, but is usually a disc.
A good coding principle would be to indent your list tags and then further indent your list items on a new-line. Clearly indented code makes it easy to find mistakes and to make changes.
<ul>
<li> screwdrivers </li>
<li> knitting needles </li>
<li> juggling balls </li>
</ul>
The above code creates a list with bullets (the default bullet type).
To modify your list use the TYPE-attribute.
<ol type="A">
<li> screwdrivers </li>
<li> knitting needles </li>
<li> juggling balls </li>
</ol>
The above code will be rendered like so in a browser:
A. screwdrivers
B. knitting needles
C. juggling balls
You can see a Table of Lists at http://www.genderchangers.org/home/etc-belgrade/lists.html.
Exercise 6:
Open your HTML file again with your text editor and make a list. You can make a list of your favorite things or whatever you like. It's your web page. Save the changes and have a look. Try different list types if you like. Note that 'type' is an attribute. Remember if you hate typing, you can copy and paste the code from the tables and then replace the text between the tags with your own text. Save your work and have a look at it with the browser.
Adding Images
To add images we use the IMAGE tag <img> or alternatively <img/> as it is a self-terminating tag. The image itself is contained in a separate file and is usually a JPG or GIF file (image.jpg, image.gif, for example). You can load an image from a directory on your own server, usually the images directory, or an image from another web page. In the former you use the path-to-file (relative link) and in the latter you use the url-to-image (absolute link). The code syntax looks like this:
<img src="path-to-file or url-to-image" alt="description of image"/>
The following examples are two ways to get to the same image: the first one being a relative link and the second being the absolute link.
<img src="./images/n5m_mandy_tb.jpg" alt="photo of Mandy and her daughter taking part in a hardware workshop at the next5minutes in 2002"/>
<img src="http://www.genderchangers.org/home/etc- belgrade/images/n5m_mandy_tb.jpg" alt="photo of Mandy and her daughter taking part in a hardware workshop at the next5minutes in 2002"/>
The "src" bit is the SOURCE attribute. The source is where the image file actually resides. The "alt" bit is the ALTERNATE attribute. The alternate attribute provides a place where you can describe your image. This description is important to include as it will be rendered in a text only browser, or in a browser where the images are turned off or read allowed for the visually impaired who are using software for that purpose.
When using images, one should be a little careful. You want to use images that are the appropriate size for quick loading. Also, one might not want to use too many images as this will slow down your web page. One strategy is to use very small images on the main page and have the small images linked to a larger image that opens on a separate page. This way you give the reader the choice of waiting for the larger image to load. Generally, you can include 2 copies of the same image in your images directory, a thumbnail and a regular sized image. To do this one would give the two files the same name, except one would be called something like image_small.jpg or image_thumbnail.jpg.
There is a table of images at http://www.genderchangers.org/home/etc-belgrade/links.html. The first three images are all located in my images directory, so they have the relative 'path-to-file' source location. The last image is taken from the GCA Hardware Reader, so the absolute 'path-to-url' source location is used.
You can use the Image section on http://www.google.com to find URLs for images to include on your web pages if you like. Keep in mind if you use images from the web, the addresses can change breaking the link to the image. It's safer and requires less maintenance to download the image and keep a copy of it in your own directory. If you are using other people's images it is important to foot note the source.
Other attributes to use with the image tag are WIDTH and HEIGHT
Exercise 7:
For exercise 7, you need to have an image. You may have some on your computer which you can you use. You can also look for nice images on the internet and use the url-to-image as the source in your image tag. Alternatively, you can find an image on the internet and download it to your computer and then use the 'path-to-image' as the source. I have created a folder called images on the genderchangers server and you are welcome to use any of those images as well.
Good luck adding an image to your web page.
Creating Links
Links, also known as hypertext, link web pages with other web pages. Hypertext can link to other parts of the same web page or to another file in the web page hierarchy or to a different web page on a different server. To create links we use the ANCHOR tag, <a> with the href attribute. Href stands for hyper reference. For example:
<a href="http//:genderchangers.org"> The Gender Changer Academy</a>
is rendered in the browser as click-able underlined text.
The Gender Changer Academy
When you click on it, the browser will take you to Gender Changer Academy web page. You can get really creative with links by linking text in your web page to relevant places on the web for laughs, for extra information or for confusion. When linking to other pages, one needs to use the full web page address starting with the http://. This is called an absolute link.
When linking to another file (a subpage) you can use the file path. This is called a relative link. It takes a while to get the hang of the anchor tag and figuring out the relative relationships between directories. Be patient with yourself. It helps if you keep your directories somewhat organized. For example, put all your image files in an easily accessible directory and then all the links to images will have the same directory path.
We have published a table of links at http://www.genderchangers.org/home/etc-belgrade/lists.html.
Coding Tips
Use Indentation
1. Use indentation in your code to make it more readable. The browser does not care, but you will when you are trying to find a missing bracket, tag or quotation mark.
Type Tags In Pairs
2. Type your tags in pairs. If you type your tags in pairs, you will be less likely to forget an end tag.
Use Comments
3. Add comments to your html code. Sometimes you need to remind yourself why you coded something in a particular way. There is a comment command that tell the browser to ignore your comments. Comments are coded like this:
<!-- This is a comment. -->
You can also block out some troublesome code using the same convention.
<!--This table isn't working and is temporarily commented out
<table>
<tr>
<td></td>
<</tr>
</table>
-->
Create Templates
4. Create a library of blank template files. This habit will save you lots of time and frustration. For example, it is very handy to have a file with the essentials set-up (html,head,title, body). You can call this file something like newpage.html. When you need to start a new page, you copy newpage.html to another name, open new file and add your content. No need to type repetitive tags over and over again. It's really handy to have a bunch of files with blank tables ready. Tables are sometime a real hassle to get working. When you have a nice one, it's good to keep a copy of it with no data for future use.
Building a simple home page
Use the discussion, the reader notes and the resources at http://genderchangers.org/home/etc-belgrade/index.html to build your own home page.
Building a Web Page
Exercise
This section is your final exercise. Use the discussion, the reader and the on-line resources to create your own web page. When you are satisfied with your web page, follow the steps below to publish your web page at the Gender Changer Academy.
Uploading a file to http://genderchangers.org/home
This section only applies to uploading files to the genderchanger.org webpage to the home/ section (http://genderchaners.org/home/html_workshop)
This section is also a little technical. I am assuming knowledge of the linux file system and a few shell commands like cd (change directory), pwd (path finder), ls (list contents of directory) and scp (secure copy).
You need login access to the genderchangers.org to carry out these steps.
1. Before uploading your web page, name it something unique like, "yourname.html". Do not call it index.html because we already have a file called that in the directory where you are going to upload your web page.
2. I've created the "html_workshop" section on the home/ section of the GCA web site, so all the participants can upload their pages there. Once the pages are uploaded, we will have to add links to them in the index.html file that resides in the html_workshop directory. To upload your web page your current working directory on your local machine contains the file you want to copy to the genderchangers web page. You will use the scp-command:
scp <filename> yourusername@genderchangers.org:/www/home/html_workshop/
Those of you using windoze machines, you are going to have to use a program called winscp. It is easy to download, install and very easy to use. It's a GUI (a Graphical User Interface). You can drag and drop in the GUI.
3. To edit the index.html file, you need to log into the server again using the ssh-command:
ssh yourusername@genderchangers.org
You will be prompted for your password and you will end up in your home directory. You need to go to where the html_workshop web directory is located, so change directories by typing:
cd /www/home/html_workshop/
Use the ls command and you should see the following:
images index.html sample-tali.html travel_v.gif
If you don't see something like the above files, type pwd to find out where you are and then type the cd-command again:
cd /www/home/html_workshop/
4. The last step is to add a link to your web page in the index.html file in the html_workshop/ directory. Use a text editor to open the file, arrow down to where you see the link to Tali's home page, go to the next line and add a link for yourself using your filename. The link that you add should look something like this:
<a href="yourname.html"> Your home page</a>
5. Save changes, exit and using a browser go to
http://genderchangers.org/home
I think you can find your way from there by clicking. Have fun and keep your page up-to-date!
Resources
Janneke and Wybe's HTML Course - no longer on-line
Steve White's Quick Introduction to HTML - http://www.zipcon.net/~swhite/docs/computers/web/QuickHTML.html
Vancouver Community College, Intermediate HTML Web Pages - not available on-line.