HOME • SYLLABUS/SCHEDULE • ASSIGNMENTS • COURSE RESOURCES • YOUR PAGES • YOUR FEEDBACK
BEING EDITED CURRENTLY BY DJ 4/4/09. DO NOT CHANGE any of the text now.
Sketching With HTML
What You'll Need to Get Started
OK, I'm not trying to go all O'Reilly on you (the publisher, not the newly irrelevant Fox pundit), but here are a number of principles of HTML to get you started understanding the world of code, and not being intimidated by it!:
1. HTML is hypertext markup language. It uses TAGS - - abbreviated, uniform designations within carets - - to design and format the text on a web page, to insert images and design structures (like tables), and to create links (hypertext links) to other pages.
2. Tags always come in pairs around text or additional code. First, the open tag appears, then the text the tage applies to, then the closing tag: <b>This text is bold.</b>. Closing tags have a forward slash after the caret.
3. Tags can be NESTED within eachother (<html> <head></head></html>)
4. Within a tag, additional PARAMETERS of that tag can be designated. These designations are called ATTRIBUTES. For instance in the <a> tag for hyperlinks, the two most common attributes are href and target, which define which URL the link will take us to, and in which browser window to display the new page in. Attributes are always equated to their parameters, and the parameters are always in double-quotes.
For more information, click <a href=”http://www.mydomain.com/index.html” target=”_self”> here </a>.
5. Some tags can be made to close themselves - - specifically the image tag:
<img src=”GRAPHICS/background01.jpg” width=”400” height=”240” />
6. After an html page is initialized to adhere to the basic html format, (the <html> tag), the basic structure of an HTML page is created in two parts, the <head> and the <body>.
The head contains the page’s search-engine information (<meta>), the page’s title (<title>), links to other pages with formatting information (<link>), formatting information specific to that page <style>, and additional code in auxiliary languages needed to properly display the page (<script>).
The body contains all your content (formatted text, hyperlinks, links to other media types like images, and formatting elements like tables, DIV tags, and AP DIVs.
7. Comments are lines of HTML code that are not executed - - they’re simply notes to yourself that don’t get displayed on the page. Use <!—to start a comment, and --> to close a comment. These comments are usually annotations to yourself, so you can remember in six months or a year how you built a particular page.
8. Here are many of the most common tags you’ll be using, along with some of their common attributes. I’m not including some structural tags like tables and framesets just now.
|
Tag
|
Function
|
Attributes
|
Notes
|
|
<a>
|
Hypertext link
|
href, target
|
|
|
<b>
|
Bold text
|
|
|
|
<i>
|
Italic text
|
|
|
|
<u>
|
Underline text
|
|
|
|
|
|
|
|
|
<font>
|
Font characteristics
|
family, color, size
|
(xml for Flash)
|
|
<p>
|
Paragraph Formatting
|
class
|
(css)
|
|
<h1>, <h2>, etc.
|
Heading Formatting
|
|
(css)
|
|
|
|
|
|
|
<br />
|
line break
|
|
Self-closing; (xml for Flash)
|
|
|
|
|
|
|
<blockquote>
|
Indents text
|
|
|
|
<li>
|
List
|
|
(xml for Flash – default bullet points)
|
|
|
|
|
|
|
<img>
|
Inserts image
|
src, width, height
|
Self-closing
|
|
|
|
|
|
|
<iframe>
|
i-frame
|
src, width, height, frameborder=”0”
|
Inserts an HTML page within an HTML page.
|
|
|
|
|
|
|
<div>
|
Div Tag – divides page visually into containers for content
|
id
|
(for css formatting)
|
|
|
|
|
|
|
<link>
|
Links css stylesheet to page.
|
rel=stylesheet, href, type=”text/css”
|
Belongs in the <head> after <title>.
|
9. Don’t see something here? Go to Dreamweaver Help (under the 'Help' menu in the application) or to WebMonkey.
Next, go to the Visual Design Guide for HTML, and vibe on that for a while.
Comments (0)
You don't have permission to comment on this page.