minicourses html basics - stwing.upenn.eduarmand/download/html-101.pdf · 14.3kb the gif format is...

33
HTML Basics October 1, 2005 Armand O'Donnell Electrical Engineering '07 < ! - - S T W i n g - - > Minicourses

Upload: ngotram

Post on 07-Mar-2018

215 views

Category:

Documents


0 download

TRANSCRIPT

HTML BasicsOctober 1, 2005

Armand O'DonnellElectrical Engineering '07

< ! - - S T W i n g - - >Minicourses

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 EditingThere 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 TagsOpening 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:&lt; <!-- less than -->&gt; <!--greater than-->

HTML TagsOpening 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 SectionThe 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 TagThe 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.

<bodybgcolor=“white”text=”brown”link=”blue”vlink=”purple”alink=”violet”background=”image.gif” >All of these optional attributes are inside the body tag.

Colors in HTMLHTML 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 TagHere'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 FormattingThis 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 likeHTMLwill 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 BreaksThe 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 disliketyping these silly examples. It's like making smalltalk into a text box.

ParagraphsIf 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, UnderlineThese 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&gt;0Prints:The sum of all a

n=xn/n!

Is equal to ex 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 ListsWant 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 &lt; and &gt; but there are many more! For an ampersand, use &amp;. Greek letters and international symbols are also thrown into the mix. Here's a small sample:&amp; &sigma; &eta; &mu; &pi; &Pi;

&Sigma; &Gamma; &yen; &euro;& σ η μ π Π Σ Γ ¥ €

There are so many that you could never memorize them! A quick internet search will bring up a complete table.

The ImageWhat'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:

<imgsrc=”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.

GIF7.25KB

JPEG14.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.

GIF61KB

JPEG48KB

The JPEG, though more colorful and crisp, takes up 25% less space than its GIF counterpart.

Freeware PlugSo, 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 RuleAnother 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!

TablesThere 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 AttributesSo you see, tables have many attributes. Here are the most commonly modified attributes:alignSet this to left, right, or center.width, heightIf you don't specify, the browser will size the table for you depending on the table's content. Percentages also work.bgcolorSets the background color of the table.cellpadding, cellspacingAmount of free space between table elements. Experiment with these for best results.borderA border around your table of specified width. This should be set to “0” if you don't want a border.

Inside the tableEach element of the table is contained in the<td> ... </td> tag.The <td> tag can also have the following attributes:

bgcolor, width, heightKeep 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.

HyperlinksLast 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.

AnchorsIf 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.