| SoloWoodworker |
Page last updated ©2023 Charles Plesums Austin Texas USA | |||
We receive a small commission if you click on the ads (selected by Google), or if you link to a product recommended by us.
| Home | Why | Business | Woodworking | About us | Contact us |
This is the introduction to the HTML language that is behind most web pages. What is HTML? Hypertext Markup Language is really two things, and is what made the internet the powerful tool it is today.
A markup language defines what a component of a document really is. Is this part the title? Is it a paragraph in the body of a document? ... an item in a list? ... a table? ... a picture? Knowing the structure of a document allows it to be formatted for the particular use - for example a web browser (such as Internet Explorer, Mozilla Firefox, Apple Safari, Google Bing) may format the page one way for display on a computer screen, a different way for a smart phone, and still a different way for printing (e.g. some printers cannot handle a page with a black background). Special browser setups may "read" the page to a blind person or use special large fonts for someone with poor eyesight. A markup language allows you to tell the browser what it is working with, and allows it to do the formatting based on actual use - the facilities available and the end-user requirements.
Hypertext deals with linking from one page to another. In the early days of the Internet, I put some of my technical papers on the web. Instead of mailing Xerox copies of the papers to each professor or graduate student who inquired about my work, I simply sent them the address (link) where they could find it on the Internet. In those ancient days one page didn't routinely link to another. But with the addition of hypertext, one page could link to another. I could put up a web page that said "I wrote three papers, A discusses ..., B discusses ..., and C .... Pick the one you want, and click here to see each document." And Google could say "I found 10 (or 10,000) papers on that subject, click here to see Charlie's paper A, Joe's paper D, Mary's paper M, Charlie's paper B, etc. Many people say that it is the ability for everyone to link to everyone else is what made the internet strong. That same tool gave Google and others the ability to help everyone find what they are looking for, and link to it.
HTML is a simple text file. Put it on your computer, double click on the file, and your browser will look at the file and display the information in the file. (Later we will copy this file to a web server, but for now, we will work with it on your computer.) This web page will show you how to create a single simple web page, using HTML. You can use any simple text editor (such as Windows Notepad). I use an editor called "CoffeeCup" to help me create my HTML files - it uses colors and other tricks to help me enter and structure the HTML text, and to test my progress. They have a free version that has practically all the features I use in the version I purchased many years ago. (One feature they exclude from the free version is their "visual editor" but it created enough problems that I avoid it anyway.) So whether you use Notepad or CoffeeCup or something else, lets get started.
Start by creating an empty text file named "MyTest.html" . It can be anywhere on your computer, such as on your desktop. If you are using "notepad" on windows, right click on your desktop, select "New" and choose "Text Document." Rename the file "MyTest.html" or whatever file name you want to play with. If you are using CoffeeCup it will try to help you, but to keep us together, delete everything it suggests as a starting web page. The ".html" suffix will tell your computer that the web browser is in charge when you want to "use" the file. You will have to manually go back to the text editor to change it, so leave "notepad" open if that is what you are using. The portion of the name you choose "before" the .html can be anything, but eventually it will make a difference whether it is upper or lower case, and spaces will become a pain, so keep the file names simple.
Enter the following text in the MyTest.html document: <html>Hello World </html>
If you are using Notepad, save the file, then double click on the file (on your desktop or wherever)and your browser will take over and display it. If you are using coffee cup, click the "Preview" tab at the top. You have just created your first web page. If you want to make it easier for you to read (but the browser doesn't care) you might put the <html> on one line, the Hello World on a separate line, and the </html> on a third line.
Most HTML "tags" are enclosed in < and > characters. The <html> tag says everything that follows is (duh) HTML, until you get to the end of the HTML, indicated by the same tag with a "slash" in front of it... </html> . HTML tags are normally used in pairs - start something and then end it. (The tags can be all upper case or all lower case, but the rules suggest not mixed case. Newer versions of HTML will expect all lower case tags. You should use the same case to end the tag as you used to start it.)
If we wanted to make the word "Hello" bold, we could use the bold tag (the letter b) in our text. <b>Hello</b> World. And if we wanted to underline the whole thing we could use the underline tag (the letter u). <u><b>Hello</b> World</u>. Since the bold tag is "inside" the underline tag, bold should start after the underline starts, and end before the underline ends. Try it. And if you are using an HTML editor like CoffeeCup, you can highlight the part you wanted to be bold or underlined, and click on the bold or underline editing symbol at the top, and it will place both the starting and ending tags around the highlighted area.
The trivial web page we have just created works in most browsers, most of the time, but we have left out a few components that, by the rules, are "required."
Every HTML document has two parts... a head and a body. The head is the first part that includes information about the page that isn't routinely displayed, technically known as the meta data - the data about your data - which can be very important. The body is the second part of the HTML document - the part that is normally displayed by the browser.
The head tag starts and end with a <head> and </head>. We could leave the head section empty, but in the future a title will be required, so lets put that in now. The bar at the top of the browser window has a title - often the name of the browser and/or the name of the file being displayed. You can change what is shown in the browser's title bar with the "Title" tag in the Head section. So just after the <html> and <head> tags, enter a Title such as
<title>My very first web page</title>
and don't forget to end the head section with </head>
There are lots of other things that we can put in the head section to describe this page, but we will cover them later.
After the head section comes the body section, begun and ended with <body> and </body> tags. If you just have some plain text in the body, the browser will display it, like we have done already, but in practice, we should identify each paragraph. If we said "Hello Europe" "Hello Asia" "Hello World" we probably would want those to be separate paragraphs, not just run together on a single line.
The HTML tag for a paragraph is the letter p. And the end of the paragraph should be marked by the tag </p> . Therefore, in your test page, enter the body tags and the three lines, each as a separate paragraph. The file should now look like this
<html>
<head>
<title>My very first web page</title>
</head>
<body>
<p>Hello Europe</p>
<p>Hello Asia</p>
<p><u><b>Hello</b> World</u></p>
</body>
</html>
Just looking at this, it appears complex. But think of the small steps that we took to create this web page. It really is quite simple. We will add other things to this page, that could make it seem even more scary, but don't panic. After building web pages part-time for over 20 years, I still don't remember all the commands, so don't worry if you haven't memorized every detail yet. When I do remember that I did something that I liked on another web page, I go to that page, copy the part I liked, put it in the new web page, and fix it up for the current purpose.
This is the world wide web, which means our page may be seen in different countries with browsers that normally support different languages. We need to say what language we are using (English), which also tells whether the text flows from left to right or right to left. HTML is also an evolving technology - the specifications from 30 years ago have been enhanced significantly to today. Therefore ahead of the <html> tag we should include a statement like this (there are alternatives, but this works with the HTML tags I am demonstrating, and is used on my web sites).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Generally this is saying that the document type is the public (final approved) HTML standard from the World Wide Web Consortium (W3C) that has a Document Type Description called HTML version 4.0, but for transition, it may still use commands from earlier versions, and the resulting page is in English.
As you can see, you have a complete working web page, and there is almost nothing in the <head> section. If you are just making a web site with pictures for Grandma, fine, but if you want Google (and others) to find you, and advertise your page, don't miss this opportunity.
A meta tag appears in the Head section of an HTML document. It has two parts, a NAME and CONTENT, but everything is in the tag - it doesn't surround something and doesn't have a separate ending tag. The newer versions of HTML put a slash at the end of the opening tag if it doesn't have a separate closing tag (which I will do here) so you don't feel slash deprived - and to remind you that you shouldn't look for a separate ending tag. There is no problem if you leave that final slash out... that was how it worked in earlier versions, and we said this document was Transitional. The meta tags can be in any order in the head section.
The first meta tag we would suggest is the Description. When Google or other search engine finds your page and wants to suggest it to someone, it needs a short paragraph to describe the page. If you haven't suggested anything, it may choose an arbitrary part of the page - perhaps something you consider less relevant. Or you can suggest the description you would like to use. On this web page I have a meta tag that says
<META name="description" content="A tutorial on building your first web page using very simple HTML tags." / >
This is not a place to put a copy of your entire web page, but a brief description that will attract people, who have done a search, to click on the link to your page. One recommendation is that this description never exceed 50 words.
Another meta tag we suggest is keywords. These are words people might search in looking for your web page. It is critical that they match the contents of the site - in years past people would put keywords in this tag that were likely to be attractive to users, even if they had nothing to do with this page - a trick that Google quickly recognized and defeated. Some say there was so much abuse that Google doesn't even look at the Keywords tag any more, but whether they are used by Google or not, there are other search engines, and if you are honest, it can't hurt. If there are common misspellings or synonyms for some of the keywords, include all forms as separate key words. Include singular and plural if appropriate. If you use a phrase, include different sequences of words that might be used. On this web page I have a meta tag that includes a set of keywords, separated by a comma and space. Some keywords can even be multiple words.
<META name="keywords" content="introduction, intro, beginner, HTML, simple web page, tutorial" />
Your web pages are discovered, analyzed, and indexed by a program known as a "Robot" or "Web Crawler" or (as a type of web crawler) "Spider". Normally I would hope that a robot would index a web page, and follow any links in the web page, and index them. I would include a tag <META name="ROBOTS" content="INDEX, FOLLOW" />
Occasionally I decide a web page is obsolete, and has been replaced by one or more new and better pages. The old page is left on the web site, in case somebody saved the address or a shortcut to it, but I change the page to include links to the new pages. I don't want the robot to index the obsolete page, but if it finds it, I would like it to follow the links on the obsolete page to the new page(s). I would include a tag <META name="ROBOTS" content="NOINDEX, FOLLOW" />
If I have a page that is "public", perhaps "About Us", and there is a secret way that grandma can get to another page with pictures of the kids, I might not want Google to publish the page about the kids... in this case I don't want Google to follow the link set up for Grandma. I could include a tag <META name="ROBOTS" content="INDEX, NOFOLLOW" />
If you have a web page you want robots to ignore, you could specify
<META name="ROBOTS" content="NOINDEX, NOFOLLOW" /> or you could specify the equivalent
<META name="ROBOTS" content="NONE" />
By default your web page will be white with black text, and pictures will be whatever colors are in the picture. Although it is so easy to change, it is tempting to play with color, but remember that this makes your web page hard to see on some computers, and perhaps hard to print. Change colors with care!
Colors may be specified with a name (of the 147 names defined by the standard, 17 are supported by all browsers and are listed below) or with a numeric code that defines the exact color. Unfortunately that numeric code is often in hexadecimal... numbers where each digit is 0, 1, 2, ... 8, 9, a, b, c, d, e, f. Yes, the letter F is used to represent the single digit with a value of 15. So if you are counting, the number after 09 is 0a, the number after 0f is 10, but that has the value 16. And the maximum value you can have in a two digit hexadecimal number is "ff" which has the value 255. The A-F can be either upper or lower case.
Any color has three components (any color on a TV or monitor can be made up from three different color light components), Red, Green, and Blue. These are presented as a 2 hexadecimal digit number for the amount of red, followed by two hexadecimal digits for the amount of green, and finally two hex digits for the amount of blue. Black has no light (no red, no green, no blue), so the numeric value for black is 0,0,0, or in the codes used in HTML, the value for black is "#000000" (the pound sign indicates that what follows is a hexadecimal number). White is the max value of all components, so the value for white is "#FFFFFF". Red is the maximum value of the red component, with no green or blue, so the value for red is "#FF0000". The value for blue is "#0000FF". Navy is a pure blue color, but with less light, so the definition for navy has a value of blue half as bright, 128, which in hexadecimal is 80, thus the code for navy is "#000080".
17 Pre-defined Colors in HTML Black = "#000000" Green = "#008000" Silver = "#C0C0C0" Lime = "#00FF00" Gray = "#808080" Olive = "#808000" Gray may also be spelled Grey White = "#FFFFFF" Yellow = "#FFFF00" Maroon = "#800000" Navy = "#000080" Red = "#FF0000" Blue = "#0000FF" Purple = "#800080" Teal = "#008080" Fuchsia = "#FF00FF" Aqua = "#00FFFF"
If you are curious, the background color of the heading and footing on this page is "#EEE9A4". In a graphics program, I selected a color, then determined that the color had values of Red=238 (EE), Green=233 (E9), and Blue=164 (A4). The text color is "#94761b".
The proper way to set colors and fonts is in a style sheet, which we haven't covered yet, but the old way (which still works if you specify Transitional at the beginning) is in the body tag. If you would like the entire body to have a yellow background, you can change the body tag to include an attribute "bgcolor" for background color, set equal to a name or numeric value. Likewise you can set the standard font color with the "text" attribute, perhaps choosing blue. The body tag now appears as
<body bgcolor="yellow" text="blue"> or the equivalent
<body bgcolor="#FFFF00" text="#0000FF">
If you wanted to play with a lighter yellow, you could increase the light - the only color available to make the yellow lighter is blue, so try adding 80 or BO blue to the yellow, giving
<body bgcolor="#FFFFB0" text="#0000FF">
Traditionally links in a web page are shown in blue. Links that have already been visited (vlink) are traditionally shown in red. Therefore you could, for now, add the link=color and vlink=color attributes, like this.
<body bgcolor="white" text="black" link="blue" vlink="red" >
On a typical computer you have a wide choice of fonts. So does your user. But you don't know if the user has the same fonts as you do - the same font as you are specifying in your web page. Therefore it is risky to specify an special font unless it is a very common font that practically everyone has. HTML gives you the opportunity to specify several fonts of choice - if the first in your list is available on the user's computer, it is used, else try the second, or third, going down the list. On this web page, I prefer a font without serifs. In fact my first choice is verdana, second choice arial, and if neither is available, I will take any "sans-serif" font. Using future technology, I will specify the fonts in a style sheet, along with other body attributes, but for now I can specify fonts in the body or other tags. Using the old technology my body tag now looks like
<body bgcolor="white" text="black" link="blue" vlink="red" style="font-family: verdana, arial, sans-serif" >
If the font name has a space, it must be in quotes. If it is already in double quotes, as it is here, the name must be in single quotes. It is wise to end the list with a generic-family (in case your preferred fonts are not available). The generic families of fonts are: "serif", "sans-serif", "cursive", "fantasy", or "monospace".
Each text element - headings, paragraphs, lists, etc. has a default font size. For starters, it is often sufficient to say that I would like a font one or two sizes larger than usual, or one or two sizes smaller than usual. Use font tags surrounding the part whose size you want to change. For example, to decrease the size of part of a sentence in a paragraph, use tags like this:
<p>This text is regular size <font size="-1">but this is one size smaller</font></p>
to get this: This text is regular size but this is one size smaller
The temptation will be great to try to refine the format of your web page, as you might with a word processing document. Remember that your customers/users may have a different browser, different display, and may have special requirement such a large fonts or mobile devices. Therefore you pages will generally be better if you give up and let the browser do it's thing. In fact, HTML calls one or many spaces, or a carriage return or line feed in the text, a "white space." White spaces are "rendered" (displayed) as a single space. So you can put 10 spaces in your text, and it will come out one space. You can skip extra lines and it will come out as one space. If you really need a new line, normally you would start a new paragraph, but you can also include a tag to break to a new line, <br /> . The good news is that if you just specify headings and paragraphs, and let the browser do the formatting, the text will always fit perfectly on the user's screen.
HTML includes a set of headings from the largest, H1, to the smallest H6. In my web sites, the main title of the web page is normally H1. Major sections are identified with H2 (or sometimes the subtitle to my web page is H2). (I use style sheets, which we haven't discussed yet, to automatically center H1 and H2, but I will show you how to center them individually.) I use H3 for the main sections of a page - perhaps you could call them topics or chapters. Then I use H4 for sub topics. The heading for this web page is defined as
<h1 align="center">Intro to building a single web page<br />
<font size="-1">Using Hypertext Markup Language - HTML</font></h1>
Pictures are great. I am learning to include lots of pictures. It makes people spend time reading your page, even if I didn't initially think pictures were necessary. But part of the trick is to get the picture down to a reasonable size. You can incorporate that wonderful picture from your fancy 10 megapixel digital camera, but that huge picture will have to be sent to your customer's computer (painfully slow) and their computer will have to reduce it to, perhaps, 400 x 600 pixels (240,000 pixels) that will be displayed on their screen, and discard the other 97%. Find a way to reduce the size of the pictures before you consider putting them on your web page. (I make the feature pictures of my furniture a maximum of 600 pixels in the larger direction, and many pictures are as small as 100 pixels in the larger direction.)
For practice, put a picture of yourself, in JPEG format (.jpg suffix on the file name) in the same directory as the web page you have been trying (on your desktop?). Use a nice small picture, about 100 pixels high. Now we will create the "img" tag to display that image, like the picture I have displayed at the beginning of this paragraph. There are quite a few attributes that you must or may provide.
The first is the location (source) of the image. If it is in the current directory, you just specify the file name src="yourpicture.jpg". The picture could be in a different directory (folder) but we will discuss that later.
The next attribute is the size of the picture. If you specify the current size, the browser may be able to display your page more quickly. If you specify a smaller (or larger) size, the browser will adjust the size of the picture before displaying it. If you know what size it will be displayed, be sure to make the picture that size on your computer, not on the user's computer. Specify the width and height in pixels - for the picture here it is width="79" height="102".
HTML rules say you must specify alternate text, in case the picture cannot be displayed. This is the text that will appear in the picture box if you mess up. It is also the text that will be read to a blind person looking at you page - be nice! This would be something like alt="A picture of the author of this page." but if you don't want to do this much, you must at least have alt=""
If you would like a border around your picture, specify the width of the border as, for example, border="2". If you don't want a border, specify border="0".
The picture here is part of the paragraph that starts "For practice..." and appears just inside the first paragraph tag. We would like the picture at the left, with the text continuing to the right of it. Therefore we need the attribute align="left". The text will be very close to the picture, so I like to also add some horizontal space on either side of the picture, in this case 15 pixels, specified as hspace="15".
The overall tag for the image here is
<p><img src="yourpicture.jpg" width="79" height="102" alt="A picture of the author of this page" align="left" hspace="15" border="0" />For practice, put.....
Try making a simple web page, such as described here. Try adding picture, changing colors, adding headings. When you feel comfortable with these basic commands used within a web page, move on to the next part, on making a multipage web site.
This site (layout and contents) is ©2008-2023 by Charles A. Plesums. The material is free for personal use. Questions? contact us. |