| ONLINE
MEDIA INSTRUCTORS Lovely & Gracious Mrs. Dodge E-MAIL OFFICE LOCATION OFFICE HOURS: CAROL OFFICE HOURS :: NANCIE OFFICE PHONE :: CAROL HOME PHONE :: NANCIE |
HTML: Just the basics
Examples of résumés from other students (IMPORTANT! USE THESE FOR IDEAS, BUT DO NOT COPY THE CODE BECAUSE IT MAY CONTAIN ERRORS!) To see the HTML code, go to View>Source IN THE BROWSER. Homework (due Tuesday, January 31)
1. Learning HTML will help you understand how the web works. 2. You could use a web authoring tool, but that would be like knowing how to use a calculator without understanding how to add and subtract 3. Even the best web authoring tools make mistakes; understanding HTML allows you to fix documents if something is wrong and to use web authoring tools more effectively 4. You can copy codes you like—but not the content itself—without attribution. 5. You’ll really, really appreciate Dreamweaver and other web editors!
HTML tutorials
Graded homework: résumé 1. HTML codes are enclosed in angle brackets <> called tags. • Almost all codes need a pair of tags—one to open and one to close the command. Tags to start a command go before the text or image; tags to end a command go after the text or image. • Opening tags are codes inside brackets, like this: <html>. • Closing tags have a slash before the code, like this: </html>. 2. Type codes carefully. Do not leave spaces in your codes EXCEPT in specific cases. 3. Tag names must be in lowercase letters. 4. Elements must be properly nested
(<b><i> Nancie </i> </b>). Important!
If you modify your page contents with more than one tag, be sure to close
them in the reverse order that you opened them. Huh? Let’s say you
want to italicize a word in a headline: 5. Close all tags (always). 6. Pay attention to angle brackets (<>), straight quotation marks (" "), semicolons (;) and equal signs (=). They’re part of the code too. Generally, you should enclose values in straight quotes, such as <font face="arial">. 7. Although spaces or extra lines aren’t recognized by HTML browsers, it’s easier for you to check your coding errors if you put codes on separate lines. 8. Save your document after every few lines so you don’t have to retype codes if your computer has a problem. Keyboard shortcut: command (apple) + s; Windows users: control + s. 9. When you save your document for the first time, name it with an .html extension such as carol.html. Use lowercase. Do not use spaces. 10. A basic HTML page begins with <html> and ends with </html>. In between, the file has two main sections: header and body. • header contains info about a page that won’t
appear on the page itself, such as the title
Open BBEdit Lite or TextEdit (Mac) or Notepad
(PC). Do not use Wordpad on a PC. Type the codes and brackets as they appear here and follow the instructions, but don’t type the explanations that appear within parentheses. Remember to save your document repeatedly. <html> (All HTML documents start with this code.) <head> (This identifies the file but isn’t visible when viewed on the web.) <title>Your Name Practice (The title appears in the browser bar but not on the web page itself. After the bracket, leaving no space, write a short title, such as Your Name Practice.) </title> (This is the end tag for the title; note the slash for ending codes.) </head> (This is the end tag for the head.) <body> (This tag starts the information that’ll actually show up when you view your document in a browser. It’s the beginning of the document that viewers see.) <h1>Your Name Resume (Headline that shows up when you view your document in a browser. This is the largest headline size. Headlines range from sizes 1 to 6, with <h1> the largest and <h6> the smallest.) </h1> (End headline tag. If you don’t close the tag like this, your whole page will be in headline-size type.) <p> (This is a paragraph code. You need this code every time you start a new paragraph.) I love online journalism. </p> (Close paragraph tag.) </body> (This code ends the body of your document. Note the slash.) </html> (End tag for the document. Save your document.) Your coded page should look like this:
Viewing your document in the browser There are several ways you can view your document in the browser. 1. Open Netscape or Internet Explorer or
Safari. OR 1. Close your document. OR 1. Drag the icon from the top of your BBEdit document onto the dock. IMPORTANT! Once you open the browser, you do NOT need to keep dragging the icon onto the dock. Just save the document, then refresh the browser. IMPORTANT! Keep the browser file open while you make changes in your document. You’ll be clicking back and forth from your browser to your document as you create it. Go back to the document. Add a new paragraph before the end body tag: Save again. View the changes by Always save after every change, or the changes won’t show up when you click back to your browser. If you don’t click Reload or Refresh or the 3/4 circle with the arrowhead, you’ll get the old version.
HTML has four kinds of lists 1. <ul> </ul> Unordered
lists use bullets.
Let’s add each kind of list to your résumé. We’ll start with an unordered list, characterized by bullets. The <ul> code means unordered list. The <li> code means a list item. After the last paragraph you wrote but before the ending </body> tag, write a size 3 heading and some list items. Don’t type the explanations that appear in parentheses. <h3>Experience </h3> (This ends the headline code.) <ul> (This starts the unordered list.) <li>Campus newspaper
reporter, 2002</li> </ul> (This ends the unordered list.) Save the document. Go to your open browser, then refresh and view your document in the browser.
Now, create a numbered list right after the previous items using the code <ol> for ordered list and a smaller headline <h2> so you can see what a size 2 head looks like. <h2>Preferred Media Jobs </h2> <ol> </ol> Go to your open browser, then refresh and view your document in the browser.
Now, create a descriptive list, which is very useful in a résumé. Use a size <h4> headline this time. The code for a descriptive /definition list is <dl>. The <dt> code stands for descriptive term, and <dd> means definition or description of the term. <h4>Job Duties </h4> <dl> </dl>
Nested lists <ul> (This code begins the nested list.) <li>University Activities (This is the first list item with a bullet.) <ul>
(Starts a secondary list.) <li>Community College (This is the second list item with a bullet.) <ul>
(Secondary list code.)
Headlines come in sizes 1 (the largest) to 6 (the smallest). Try different sizes to see which one you want for your subheads. <h1> largest headline, usually reserved for your title <h3> medium-size headline, good for subheads
To find a bunch of hex colors, go to http://webmonkey.wired.com/webmonkey/reference/color_codes/ <body bgcolor="blue"> (Sets the background color, using names or hex values. Try typing in red, yellow, lime, cyan and blue, as well as 33DB99 for sea green.) <font color="red"> (Sets the font color, using name or hex values. Try fuschia, white, magenta and aqua, as well as FF9999 for light coral and FFCC00 for gold. <link="yellow"> (Sets the link color, using name or hex values.) The only named colors that work on all browsers are aqua, black, blue, cyan, fuschia, lime, red, magenta, white and yellow. Try this right below your <body> tag: <body bgcolor="33DB99">
These are popular serif fonts: Georgia, New York and Times New Roman. These are popular sans serif fonts: Verdana, Geneva and Arial. IMPORTANT! If the person viewing your page doesn’t have the typeface installed that you chose, then all your fancy text turns to their ugly default! Cross-platform fonts installed on almost all Macs and PCs that you can be fairly certain will display on both platforms include Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Trebuchet, Verdana and Webdings. IMPORTANT! It’s a good idea to include alternative fonts in case someone’s computer doesn’t have your first choice. Here’s how you do it: <font face="verdana, geneva, arial, sans serif"> or <font face="georgia, times, times new roman, serif"> The most common are boldface and italics. Do not use an underline for emphasis because that usually indicates a link. <b>bold</b> (Don’t forget the ending code, or the rest of your document will be bold.) (You could use <strong>bold</strong> instead, but <b></b> involves less typing.) <i>italics</i> (You need an ending code here too.) <br>line break (Use this code after a line if you want the equivalent of a carriage return without a new paragraph, which always adds a line space. This will give you single spacing. You don’t need an ending code.) <p>paragraph</p> (This tag will insert a line space between paragraphs. If you just want to add an extra line anywhere, use the <p> tag.) <p align="center"> (Aligns a paragraph to the left, right, or center.) <font size="3"> (Sets size of font from 1 to 7; 1 is tiny, while 7 is big.) <font face="verdana, geneva, arial, sans serif"> (Sets the font.) <font color="blue"> (Sets the font color, using name or hex values. Try fuschia, white, aqua and magenta, as well as FF9999 for light coral and FFCC00 for gold. It’s better to use hex numbers.) Try this! <p><font face="verdana, geneva, arial, sans serif" size=3><b>If the user’s browser doesn’t have the first font, it looks for the second. </b></font>
Horizontal rule (horizontal line) <hr> (A horizontal rule creates a line across your page, like a break between your name and the body of your document. No ending tag is needed.)
<hr width="50%"> OR <hr width="100">
<hr=noshade> (Turns off the 3-D shading so you don’t have the embossed effect)
These must start with an ampersand and end with a semicolon. They do not go inside brackets. • (• bullet; NO BRACKETS) (Two of these will give you a two-space indent; NO BRACKETS) " left quote code is 𔄢 Now you’re ready to add links to your résumé.
Before you begin, check the URLs for some favorite sites. There are two
basic types of links: external and targeted internal links. All links are created with anchor tags <a href="URL">. Think of it as an abbreviation: The letter a equals anchor, href stands for hyperlink reference and the URL in quotes is the proper name of a URL. Put text after the end bracket to describe the link. This is the clickable text that characterizes hyperlinks, which are usually underlined and in a different color to distinguish them from other text. (Their appearance can be set in browser preferences.) External links <a href="http: / /www.asu.edu">Arizona State University</a> Save your changes. Open the document in your browser, and clink on the link. It should connect you to ASU or the URL you selected. Don’t forget the ending anchor tag </a>.
Targeted internal
links First, find the heading or words you want to link to within your document. In this case, let’s link to the top of your document. Make sure you type lower or upper case letters exactly as they appear in the word you want to link to. Put an end anchor tag </a> after the existing words. After <body>, type this code: At the bottom of your document, before
the end body tag </body>, write the code below, followed by the
words Back to top for your clickable link. Add an end
anchor tag </a>. Note the spaces between a and href within
this code. Do NOT forget to put the number side before "#top"
in the code!
E-mail links Do not put any spaces between the mailto: and your e-mail address in quotes.
Viewing codes in
documents Go to the View menu in Netscape, IE, or Safari. Click on Page Source in Netscape or Source in IE or View Source in Safari. The source codes will open so you can view them. You can do this with your own web documents too so you can check your coding.
Images in web documents can only be displayed in two forms: Both formats compress images for the Web, meaning they reduce the amount of bytes or Web space that pictures and images require. Without compression, images would consume more computer memory and take longer to load. Many icons, graphics and photos are available free on the Internet. Important! Always check the copyright requirements before you use images on your Web pages. You may want to link to the ASU home page and select an image for your résumé. Here’s how to get an image from a website. Macintosh Windows Give your image a short name ending with .gif or .jpg. The image should be saved automatically in .gif or .jpg form, but make sure it also is labeled with one of those tags. Save it to your desktop or folder in your computer. Image tags If the image is saved on your desktop or in the
same folder as your HTML document, use this code for a .gif or
.jpg: If the image is saved in another folder in your
computer, use this code with the name of the folder, followed
by a slash, then the name of the image: If you’re linking to an image on another site,
use this code:
Aligning images Don’t spend much time on alignment now because it’s much easier to use Dreamweaver.
Summary: The least you need to know HyperText Markup Language (HTML) consists of plain text and tags that mark the structure of a hypertext document. Some HTML elements have both a start and end tag, such as <title> and </title>. Other elements use only a single tag, such as <p> (paragraph). Here are the basic elements you need to know: Bold <b>text goes here</b> Italic <i>text goes here</i> Center <center>text goes here</center> Link to external page <a href="URL goes here"></a> Link to e-mail <a href="mailto:person's e-mail address goes here"></a> Horizontal rule <hr> Line break <br> Paragraph break (2 line breaks) <p> Unordered (bulleted) list Ordered (numbered) List <ol> Descriptive list <dl>
Graded homework: Résumé (due Tuesday, January 31) IMPORTANT! If you have problems with HTML, please come to my office (Stauffer A-214) Tuesday between 10 and 11:30 a.m. or between 12:30 and 2:30 p.m. Or go to our classroom (Stauffer A-114) between 11:40 a.m. and 12:30 p.m. Tuesday. Mission First steps 2. If you don’t want to do a lot of typing, copy and paste your revised résumé in BBEdit Lite or TextEdit (Mac) or Notepad (PC). Do not use Wordpad on a PC. Be sure to save it as .html, not a .rtf or .txt. 3. Add the HTML code. Refer to the sections above. Things to include • Use two fonts—but no more than two fonts! It’s easier to read sans serif fonts such as Arial and Verdana on a computer screen: <font face="verdana, geneva, arial, sans serif">. On the printed page, serif fonts like Times and Times New Roman are more legible. Consider using a sans serif font for most of your résumé, then pick a serif font to use for contrast, perhaps for your name, contact info and headings (EDUCATION, WORK EXPERIENCE, etc.). For the serif face, try: <font face="georgia, times new roman, times, serif"> • Add a pleasant (not garish) background color. No pink or red, please. Use a hex code. • Insert at least two external links that add relevant information. Put the links in the body of your résumé, not in a list at the end. Under EDUCATION, for example, turn the words Walter Cronkite School of Journalism and Mass Communication into a link. • Change the color of your links so they look good on the background color of your page. • Create a link to your e-mail address. • Put line spaces between sections. To skip a line between sections, such as between EDUCATION and EXPERIENCE, use <p>. If you don’t want a whole line of space between items, use <br>. • Use at least one horizontal rule. • Add a "Back to top" targeted internal link at the bottom of your résumé that jumps the user to the top of the page when it’s clicked. • Experiment with different type sizes, fonts, boldface, ALL CAPS and bullets. To make a bullet, use this code: • (Do NOT put brackets around the code. You don’t need an open tag or a close tag.) • You may include a bulleted list if you like. • Extra credit: Add a photo or graphic. If you choose to do this, make sure the photo or graphic is a .jpg, .jpeg, or .gif. Important! Put it in the same folder or directory as your resume, and bring everything to class. • Extra credit: Use Large Capital Letter for the first letter of your first name, middle initial (if you use one) and last name. Hint: Make the size of the capital letter larger than the text. If you have trouble with this, please send me or Nancie an e-mail message. Important! • Incorporate what we’ve discussed about résumés. What to turn in next Tuesday • Print out and bring in a hard copy of the HTML code and the web page itself (preferably in color). Tips Use an unordered list to indent items under EXPERIENCE, EDUCATION and other categories. Or make indents using this code: If you want to indent five spaces, for example, type in this code: (Do NOT put brackets around it. You don’t need an open tag or a close tag. Once you find the amount of indentation you like, copy the code and paste it in front of every line you want to indent.) Or simplify your life and line everything in your entire résumé on the left side (flush left), like this: WORK
EXPERIENCE Producer, National Geographic Traveler Online (1996-1997) ACCOMPLISHMENTS
You can e-mail me (cschwalbe@asu.edu) or the Lovely and Gracious (nancied1@earthlink.net). I’ll be in my office (A-214) Tuesday from 10 to 11:30 a.m. and from 1:30 to 2:30 p.m. Don’t hesitate to stop by if you need help or want a second opinion. Nancie will be in our classroom (Stauffer A-114) between 11:40 a.m. and 12:30 p.m. Tuesday. Nancie is also available by phone (480-998-1398) or e-mail (nancied1@earthlink.net). We’re here to help you succeed, so please don’t hesitate to call or send an e-mail. |
September October November December SYLLABUS THE BASICS SKILLS RESOURCES
|
| Copyright © 2006 Carol
B. Schwalbe |
||