A basic HTML intro, from a great web design resource site, W3schools:
http://www.w3schools.com/html/html_intro.asp
HTML elements:
http://www.w3schools.com/html/html_elements.asp
A guide on how to write html using TextEdit (taken from about.com):
If you use a Macintosh, you don't need to buy or download an editor to write HTML. You have a perfectly functional editor built into your operating system -- TextEdit.
For many people this is all the HTML editor they will ever need.
There are only a few steps to creating a Web page with TextEdit:
Open TextEdit
Open a Finder window
Switch to the Applications folder
Scroll down to TextEdit and double-click on it
Change the format to plain text
TextEdit defaults to a rich text format, so you need to switch it to plain text to write HTML
Open the Format tab
Choose "Make Plain Text"
You can also hit Shift-Apple-T to switch to plain text
Start writing your HTML
Remember that you need to be more careful than in an actual HTML editor. You won't have elements like tag completion and validation.
Save your HTML to a file
This is the tricky part. TextEdit normally saves files as .txt. But since you're writing HTML, you need to save the file as .html.
Go to the File menu
Choose Save As... (or Shift-Apple-S)
Change the file extension from .txt to .html
A popup will ask you if you want to append the extension ".txt" to the end. Choose "Don't Append"
Opening an html file in TextEdit(from www.askdavetaylor.com):
Go to TextEdit --> Preferences... and choose "Open and Save". You'll see:
The key is the first option under "When opening a file": you want to check Ignore rich text commands in HTML files. Check that option, then quit TextEdit.
It turns out you can also do this by manually selecting File --> Open..., choosing the file, and also selecting the option in the Open dialog window of "Ignore rich text commands", but since i'm always double-clicking on files or otherwise launching TextEdit, it's a much easier solution to simply fix the preferences and never worry about it again.
Here is a battery of links that may be useful to you in the formatted poem, our first html-based assignment:
I want you to take a poem or song lyrics, and use text formatting to "design" the text in ways that emphasize properties of the poem/song (for instance, if there is a line that's very angry, perhaps the font is larger and red for that section). I want you to use at least six different text properties (color, font face, size, alignment, etc.) in the course of the poem/song.
Links to CSS text and font info:
http://www.w3schools.com/css/css_text.asp
http://www.w3schools.com/css/css_font.asp
The "span" tag (for modifying elements outside of "p" and "header" tags):
http://www.w3schools.com/tags/tag_span.asp
Web colors:
http://www.w3schools.com/html/html_colors.asp
Link to CSS examples:
http://www.w3schools.com/CSS/css_examples.asp
An online resource for getting the text of a poem:
http://www.bibliomania.com/
This is some basic html text styling code – utilizing inline CSS – that I thought might be helpful as a "base file" for you to build your poem out of. Hopefully it gives an idea of some basic text-styling syntax (I'll break it down in class):
EDIT: actually, dowload an html document version of this I've posted to dropbox by clicking on this link (I solved the "smart dash" issue on this one).
------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
body {color:red;}
h1 {color:yellow;}
p.ex {color:rgb(0,0,255);}
.bluebackgrounditalicboldetc
{
background-color:#6495ed;
font:italic bold 28px Georgia,serif;
}
.greenspaced
{
color:#00ff00;
letter-spacing:5px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
<p class="bluebackgrounditalicboldetc">This is a paragraph that has been styled with a class that has multiple elements controlled by it – background color, italics, bold, 28 points, in the Georgia font.</p>
<p>This is an ordinary paragraph, but I've modified this one word – <span class="greenspaced">HERE</span> – using the span tag, styled to a unique class.</p>
And </br>
lastly </br>
I'm </br>
including </br>
some </br>
line </br>
breaks </br>
with </br>
the </br>
break </br>
tag.
</body>
</html>
------------------------------------------------
