|
|
Beginning HTML1) PrerequisiteIn order to fully participate in this workshop, you must be able to:
2) Workshop ObjectiveAt the end of this workshop, you will be able to:
3) Getting started with HTMLWhat is HTML? HTML = HyperText Markup Language HTML tells the browser how to structure the content of a web page, and allows people to share documents across different platforms. It works on any kind of computer with a browser, whether it be a PC, Mac, Linux, or another operating system.
HTML coding can tell your web browser what a piece of information is -- a paragraph or a primary heading, for example -- or how a piece of information should look -- bold text or a lime green background, for example. We'll use a few key terms to talk about HTML:
So, if we were to draw an analogy with the English language, we can think of a tag as a noun, and an attribute as an adjective modifying the noun. All of our pages will begin with the tag <html>, and end with the tag </html>.They will also all have a section that gives information about the document, known as meta-data, within the tags <head> and </head>. The main portion of the document, the part that your viewers will see, will be contained in the tags <body> and </body>. 4) Exercise 1 - Create a pageFollow these steps to create a Web page:
Congratulations! You have just created an HTML file. What happened to the text "My Name" that was typed between the title tags? Look in the title bar of your browser. Text between the tags displays up there, not on the page your user views in the browser window. It acts as an aid to your users if they become confused about where they are. 5) ContainersWhile we could toss all our information directly between the <body> and </body> tags, it wouldn't look very nice. Instead, we put all of our information into a series of other tags, within the body tags. Think of the body element as a huge box, which contains many other boxes. Some of those other boxes contain goodies (our text), and some of them contain other boxes. In programming terms, this is called nesting. And just like closing the lids to all those boxes, your tags will have to close in a certain order. Imagine trying to put the lid on a smaller box after you put the lid on the larger box containing it -- it doesn't work. So what are some of the containers we can put in the body of our page? Here is a coding sample of the body portion of our file after we add a couple of container tags: <body> 6) Exercise 2 - Containers
7) Formatting - TypographyPresenting text that is both legible and readible is important if you want viewers to actually read something on your web site. Bad typography will distract your viewers or completely turn them off. Good typography will grab their attention. It will also help viewers find their way around your page and prioritize your information. Two StylesThere are two major font styles: serif and sans serif. An example of serif would be Times New Roman or Garamond. An example of sans serif would be Arial or Helvetica. Serif Sans Serif Standard FontsFonts faces are selected by placing font tags around the text: <font face="Verdana">This font is Verdana</font> This font will only show up as Verdana if you have Verdana installed on your computer (which thanks to Microsoft most of you do). SizesThere are very limited font size specifications in HTML. Sizes can be expressed by an absolute number from 1 (smallest) to 7 (biggest) or by a relative number such as +1 (one size bigger than the default) or -1 (one size smaller than the default). The default setting for a paragraph on a browser is 3. To change that, use the size attribute of the font tag. <font size="2"> or <font size="-1"> which essentially do the same thing. Here are a couple of examples, the first with a serif font, and the second with sans serif: <font size="2" face="Times
New Roman,Georgia,Times">This is small -- set a font size 2.</font>
<font size="2"
face="Verdana,Arial,Helvetica">This is small -- set a font size 2</font> Sizing is not the same on Macs and PCs. Macs using Netscape 4.7 or older or pre-IE5 browers see text smaller. So do not use a text size smaller than 2 (or -1) if you like Mac people. Please note: if you want more control over your text, look at using Cascading Style Sheets to control your text. They also make changing your mind a lot easier, as there is one place to change the display, rather than all over your web site. Physical StylesBold tags, <b> </b> are placed around text for emphasis or to create headlines Italics can be specified by placing tags <i> </i> around text. Italics are common in the print world, used for titles, emphais, quotes, etc. However, italic text is hard to read on the web, particularly at smaller sizes, so use it sparingly. It is recommended to use other textual styles such as bold or a color changes instead of italics for any large amount of text. You can designate text to be underlined by using the <u> </u> tags.
While underlines are often used in the print medium, avoid underlined text
for the web! Underlines mean "hyperlink" in the web world. Logical StylesYou can designate your headings as headings using <h> tags. For example: <h3>This is a heading</h3><h4>This is a subheading</h4>Headings are a logical style, meaning that they say what the text is used for, and while they do effect text formating, this is not specifically why they are used. They provide important structural information to text readers and some search engines. As we adopt CSS and as search engines get better, heading tags will be more important helping to distinguish levels and importance of information. Therefore it is essential to use <h> tags only for headings and not for general text. 8) Formatting - ColorsOften colors do not look the same on a Mac as on a PC (Macs are lighter). Users with older computers also run into problems. There is something called a web safe pallette. The web safe pallette is 216 colors that are shared between Macs and PCs. Colors may be specified by name, which may not give the same exact shade from browser to browser, or by a code known as the hexidecimal value. The hexidecimal value begins with a # symbol, and contains three sets of two numbers or letters. Web safe colors will contain three pairs of the values FF, CC, 00, 33, 66, 99 - white for example is #FFFFFF, navy blue is #000099. We can use color in many different places to change the appearance of our site. Here are a few of the most important places we can use color:
Use the attribute "bgcolor" in the <body> tag if you would like to change the background color in your file from the default, white, to another shade. Remember that it is very difficult for users to read a lot of text which displays on a dark background. We can change the color of the type by using the "color" attribute in the <font> tag. This enables us to choose the best color to contrast with our background, and set the tone for the page. 9) Exercise 3 - FormattingLet's change the formatting of our page.
10) LinkingIn order to connect our page with other pages on the Internet, we need to create links. With links we can create a structure for our web site by determining which pages users can visit at a given point. In HTML we use the anchor tag to create links. The information about where to go is stored in the attribute "href". It can be an absolute URL (http://...), which is used to create links to other people's Web sites or it may be a relative URL (file name or directory/file name), which is used to create links within our own site. There is one other kind of link, called an e-mail link. It too uses the "href" attribute in the <a> tag, and looks like this: <a href="mailto:myaddress@gmu.edu">. 11) Exercise 4 - LinkingLet's try linking pages.
You should see blue underlined text. Click on "Gunston Hall Plantation". Does it work? If not, check your code to be sure you didn't make any typing mistakes. Check the link to your name page as well. Try adding links to your name page for your favorite web sites and an e-mail link, then test them out. 12) Getting ImagesImages are essential to web design, bringing web pages to life, providing interest and variety, allowing branding, and presenting information that cannot be easily conveyed with text. Images can come from a variety of sources: a digital camera, a scanner, a drawing from a graphics program, or one of the many free or commercial sources for images. If you find an interesting image on one of the many Web sites with free graphics, keep the extension it suggests as you save the file, otherwise you will have a problem with the image. There are workshops available to teach you about scanning, using graphics programs, and digital cameras. Visit http://ittraining.gmu.edu to find the schedule and workshop descriptions. 13) Exercise 5 - Getting an Image
14) Inserting ImagesImages are one of the few examples of "empty" elements in HTML. There won't be a set of begin and end tags with data in between. Instead, there is simply the <img> tag, with many attributes in the tag used to specify the image location, its dimensions, alternate text description for those who can't view it, where it should align, and whether it should have a border or not. Here are some of the basic attributes we need:
15) Exercise 6 - Inserting an Image
|
