<! - - S T W i n g - - > Minicourses HTML Basics October 1, 2005 Armand O'Donnell Electrical Engineering '07
Why HTML? It's easy to learn. It's written in simple text. No special software needed. It's pretty intuitive. You have no choice. Actually, you do, but not much. Most Web languages are still embedded in HTML (like Java Applets) or write HTML themselves (like PHP or Perl)!
Text Editing There are basically two ways to edit HTML: Locally, on your computer Use a simple text editor like Notepad or Emacs for light stuff. Files are stored on your machine for easy access/backup Upload the files via FTP or in Terminal (rz, etc.) On the server via SSH Operate directly on the files on the server. Instant gratification! No need to sync/upload files. Can't edit your media if away from internet access. Should still backup files. Still need to upload images and other media. Your HTML documents should end in.htm or.html
Basic Structure of an HTML document <HTML> <head>... </head> <body>... Web Page content goes here... </body> </HTML>
HTML Tags Opening and Closing In HTML, all formatting and important features are inside of tags. Tags begin with < (less than), and > (greater than). Comments appear between <!-- and -->: <!-- Your comments here... --> The browser will ignore whatever is located inside. But what if I want to display 15<x<25? To display the < and > characters, use: < <!-- less than --> > <!--greater than-->
HTML Tags Opening and Closing Many events need an opening and closing tag. The closing tag begins with a forward slash. For example, we saw the <HTML> and </HTML> tags, which specify the bounds of our document. The header, which contains important document information, is enclosed within the <head> and </head> tags. The body is between <body> and </body>, and so on. Now let's take a look at the header...
HEAD Section The HEAD section contains some useful information about your page. The most important part is the title. <title>your Web Page's Name </title> There are also META tags, which contain more specific info about the document, e.g. <META name="description" content="this page is about..."> <META name="keywords" content="stwing projects..."> META tag specifics are beyond the scope of this tutorial.
BODY Tag The BODY tag lists some important document attributes, such as background/text/link color, image, and more. We will concentrate on the color arguments. E.g. <body bgcolor= white text= brown link= blue vlink= purple alink= violet background= image.gif > All of these optional attributes are inside the body tag.
Colors in HTML HTML recognizes colors typed in English as well as HEX. Hexadecimal coloring system: RR GG BB. Each primary color (red, green, blue) can have a value from 00-FF. This is more efficient than writing each one 0-255. This syntax becomes more intuitive with practice. It s also preferred to writing out the colors in English because different browsers might render the same color differently! Examples:
Color in the BODY Tag Here's what we get when we set the attributes! <body bgcolor="ffffff" text="000000"> <body bgcolor="000000" text="ffffff"> <body bgcolor="008888" text="ff8888"> <body bgcolor="000044" text="88ff88">
Text Formatting This is the crux of HTML, where we have the ability to arrange, format, and display text in a variety of ways. Rule of thumb: All text not inside tags will appear in the browser. So if you want to write out pages of text in an HTML document, just cut and paste or type it in and you're set! Then add appropriate formatting. Common Mistake: A common newline (i.e. hitting return or enter ) in an HTML document will not appear as a newline. In English, this means that typing: I like HTML will appear as I like HTML. Be careful!
Pre-formatted text Actually, that's not always true. If you include your text inside a pair of <pre>... </pre> tags, it will appear in exactly the same form as it is typed, including spaces and line breaks. You can still enter HTML tags inside <pre> </pre> tags. This feature is mainly used to represent program code or already neatly organized text inside of an HTML document. It isn't very useful for normal text formatting, though.
Line Breaks The most basic HTML formatting tag is <br>. This, simply put, ends the line and begins writing on the next. Newer standards suggest the use of <br />, but most common webpages (google.com, sourceforge.net, altavista.com, etc.) still use <br>. The markup: I greatly dislike<br>typing these silly examples.it's like making small<br>talk into a text box. Produces: I greatly dislike typing these silly examples. It's like making small talk into a text box.
Paragraphs If you are writing text in paragraph form, you may find it useful to enclose each separate paragraph within <p>... </p> tags. This way, your text will be neatly grouped into paragraphs separated by a blank line. You can also add align= left, right, or center to align the paragraph text in the browser's window. So all the text enclosed in the following set of tags: <p align= right >... </p> Will appear together and aligned to the right.
Bold, Italics, Underline These three are pretty straightforward. <b>... </b> Sets bold text inside the tags. <i>... </i> Sets italic text inside the tags. <u>... </u> Underlines the enclosed text. <u>using <b>html</b>tags</u> is <i>so</i> easy,<br>even <b>wharton students</b> <u>can</u> master it! Prints: Using HTML tags is so easy, even Wharton students can master it!
Subscript and Superscript Here are two HTML tags that are frequently overlooked: <sup>... </sup> Superscript. <sub>... </sub> Subscript. Enough said. Try this markup snippet: The sum of all a<sub>n</sub> = x<sup>n</sup>/n!<br>is equal to e<sup>x</sup> for all integer n, n=0, n>0 Prints: The sum of all a n =x n /n! Is equal to e x for all integer n, n=0, n>0
The Font Tag If you have a block of text and you want to change its color or size, use the font tag. It works like this: <font color= 008000 size= 3 >... </font> This particular example makes the text inside the tags green and of an average size. The size attribute is a bit confusing, so experiment with it to get the effect you want. Generally, 3 is the default for normal text.
Headings: <h1>... </h1>, and <center>... </center> Text within the heading tags will appear much larger and automatically bold. <h1>...</h1> is reserved for major headings, <h2>...</h2> for sub-headings, down to <h6>...</h6>. If you want some text centered, use the <center>... </center> tags. This is also useful if you aren't using <p>...</p> tags and want to center large amounts of text. If you place <center>... </center> tags at the extremes of your document, all the text and objects (tables, images, stuff we'll cover later) in the body will be centered!
Organized Lists Want an organized, bulleted list? It's this easy: <ul>list: <li>item 1</li> <li>item 2</li> <li>and so on...</li> </ul> Gives us: List: Item 1 Item 2 And so on...
Greek Letters and Characters The escape sequence &... ; can contain lots of fancy things. We've already seen < and > but there are many more! For an ampersand, use &. Greek letters and international symbols are also thrown into the mix. Here's a small sample: & σ η μ π Π Σ Γ & σ η μ π Π Σ Γ There are so many that you could never memorize them! A quick internet search will bring up a complete table.
The Image What's a web page without images? The web began in text-only mode, so naturally images aren't necessary for practically displaying information. Still, we all want to present graphics to our viewer. So we have the img tag: <img src= imagefile.jpg height= 800 width= 550 > The height and width attributes are optional. They help the browser lay out the page before loading the images, as well as letting you custom size pictures yourself. Be careful not to size pictures disproportionately!
JPEG vs. GIF: The Debate Continues There really is no debate. The two most popular image formats are each useful for different types of images. GIF 7.25KB JPEG 14.3KB The GIF format is clearly superior for graphs and other generated graphics with few colors.
JPEG vs. GIF: The Debate Continues Now compare with JPEG. JPEG is better for displaying photographs or low-contrast images. GIF 61KB JPEG 48KB The JPEG, though more colorful and crisp, takes up 25% less space than its GIF counterpart.
Freeware Plug So, what image program do I recommend? Well, it depends what you want to do. Photoshop and the GIMP are wonderful for modifying or picking apart and doctoring an individual image. What if you just want to resize, remove red eye, adjust contrast/brightness/color balance or add text? Glad you asked. Well, my personal favorite is... XnView. It's free, it's very fast, and it's supported on practically every OS. Most importantly, XnView has a batch convert option so you can specify virtually any image operation and have XnView perform it on a list of files. Perfect for making dozens or hundreds of thumbnails. www.xnview.com
Horizontal Rule Another handy and simple way to spruce up your document is the horizontal rule. It's one small tag of markup that makes a significant aesthetic difference. <hr align= center width= 50% color= FF0000 size= 5 > Creates a horizontal bar between two bodies of text with a width roughly half that of the browser's window. You can also set align to left or right if you prefer. Width can be in percent of the browser window (horizontal, of course) or a width in pixels. Size is bar height in pixels. Combine multiple rules for some creative effects!
Tables There will come a time when you will want more control over the layout of your document. Tables are frequently the solution to most common layout problems when used correctly. Write Text Inside of Table Elements Organize Data Neatly and Professionally Photos and Links are also Fair game <table align= center width= 600 height= 400 bgcolor= 303030 cellpadding= 4 cellspacing= 2 >
Table Attributes So you see, tables have many attributes. Here are the most commonly modified attributes: align Set this to left, right, or center. width, height If you don't specify, the browser will size the table for you depending on the table's content. Percentages also work. bgcolor Sets the background color of the table. cellpadding, cellspacing Amount of free space between table elements. Experiment with these for best results. border A border around your table of specified width. This should be set to 0 if you don't want a border.
Inside the table Each element of the table is contained in the <td>... </td> tag. The <td> tag can also have the following attributes: bgcolor, width, height Keep adding <td> tags to fill out a horizontal row. Then, when you want to start the next row, insert a <tr> tag. The contents of your next <td> </td> tags will appear in the first column of the second row. When you're done, don't forget to end the table with a closing tag, </table>
Table Example <table width= 400 cellspacing= 5 bgcolor= 88FF88 cellpadding= 5 > <td bgcolor= FF8888 >1, 1</td> <td bgcolor= DD8888 >1, 2</td> <td bgcolor= BB8888 >1, 3</td> <tr> <td bgcolor= 8888BB >2, 1</td> <td bgcolor= 8888DD >2, 2</td> <td bgcolor= 8888FF >2, 3</td> </table>
Result Analysis: All three columns are evenly spaced across the 400 pixels of width that we gave the table. The browser automatically chose an appropriate height for all of the elements to fit comfortably. Had one element contained more text or a larger object, it would have taken precedence over the others and grown, making the others smaller. There are 5 pixels separating each cell, and 5 pixels of padding between the cell wall and beginning of text. The color for each <td> element was specified.
Hyperlinks Last but not least, we offer you the most important tag in HTML: the anchor tag. This tag serves two main purposes: first, to provide a link to another web page or part of a web page, and second, to identify a section of a page. Syntax: <a href= www.stwing.org >... </a> The text in between the <a> </a> tags will act as the familiar click here link that will send your browser to another location. This can be another HTML document, a media file, or even another web page.
Anchors If we want a link to point to a specific part of a page (for instance, if we have a large HTML document with multiple parts, we use the name attribute: <a name= table_contents >... </a> There doesn't need to be much, if anything, within the <a> </a> tags this time. Another hyperlink on the same page will access this section with an anchor whose href= #table_contents. Another file can also link directly to this part of the document by setting href= doc.htm#table_contents.
Closing Remarks Thanks for coming to HTML-101 or reading this tutorial. I hope you found it helpful. Don't worry if you think you won't remember all these tags and attribute codes; the slides to this STWing Minicourse will always be available in the downloads section of my website: www.stwing.org/~armand/download.htm. There's plenty more HTML to be learned. As for further reference, I recommend www.htmlgoodies.com.