This page contains the bare minimum you will need to manipulate simple HTML in your blog posts. It will help you do very basic formatting, embed scripts and videos from other sites in your blog post, and it contains very simple instructions for posting your own web page to the campus Web server.

However, this is not a class about HTML. If you want to learn more about HTML see the links at the bottom of this page.

Principles of Syntax
    See http://www.w3schools.com/html/html_intro.asp  for more details

Angle brackets go around all tags. Ex. <element>

Tags can have attributes.  The contents of an attribute use quotation marks around all values. Ex. <element attribute="value">

Bold

If you want to make a word bold, you would type a start tag and an end tag for bold <strong>, </strong>, and then type the word(s) that you want to be bold in between those tags. Ex. <strong> word </strong> = word

Italicized

If you want to make a word italicized, you would type a start tag and an end tag for italics <em>, </em>, and then type the word(s) that you want to be italicized in between those tags. Ex. <em> word </em> = word

Line Break

If you want to ensure text is on separate lines, you would type <br> before or after each line you want broken up. Ex. <br> word. Ex. word <br>.  The <br> tag does not need to be closed.

Unordered List

An unordered list means that each list item contains a bullet before it. The code below tells the computer to begin an unordered list, listing items great, super, and interesting, on separate lines with bullets for each one.

Ex. 

   <ul> 

     <li>great</li> 

     <li>super</li>

     <li>interesting</li>

   </ul>

Looks like:

• great
• super
• interesting

Ordered List

An ordered list means that each list item contains a number before it. The code below tells the computer to begin an ordered list, listing items great, super, and interesting, on separate lines with numbers for each one.

Ex. 

   <ol> 

      <li> great </li>

      <li> super </li>

      <li> interesting </li> 

    </ol>

Looks like:

1. great
2. super
3. interesting

Linking

To link to another website (for instance, the class website), you would first have an "anchor" and make a "hypertext reference" to tell the computer the hyperlink you want to go to. The webpage you want to link to should be pasted in between both sets of quotation marks. If you want the link to have a name (for instance, 'Course Website'), then type the name after the brackets. Make sure to close the "anchor." The code below tells the computer to link to the class website when clicking on the text "Course Website" on the webpage.

Ex. <a href="http://280.niftyc.org/"> Course Website </a>

Looks like:

Course Website

Inserting a link to a video (not youtube or site offering embed code)

Inserting a link to a video is a lot like inserting an image from the web. Note this is not how to post a video if it is from youtube.

Linking Ex. <a href="http://www.metacafe.com/watch/2660459/orca_seal_hunting/">Orca video</a>

Own file Ex. <embed src="illinois.wmv">Illinois</embed>

Inserting a video (from youtube or site offering embed code)

To insert a video from youtube, copy the url listed under "Embed" in the gray box to the right of the video. Once you have that, you can paste the link into your site. Youtube (or the other site) already has the code written for you.

How to embed a video into one of your blog posts

1. First find the video you want to embed in your post. Try looking at YouTube.com.

2. Once you find the video, look on the right side of the screen in the gray box that says "About this video". You may have to scroll down. Look for the word "Embed". Below this, you'll see a whole bunch of HTML. Copy this text.

3.Find the place where you want to embed your video. Then just paste the HTML that you copied from the YouTube video. Preview your post to make sure you can see the video.

Publishing your website through Netfiles

You can host the site you created through Netfiles. You will first need to finish putting your content into HTML 1.0, and then you can simply upload the file to Netfiles. Here are the detailed instructions.

1. You need to add html, head, title, and body tags to your .html notepad file.

Ex. <html><head> <title>MY TITLE</title> </head><body> CONTENT </body></html>

Where it says "MY TITLE" put the title of your page.

Where it says "CONTENT" put the tags and content you created earlier.

2. Put paragraph tags <p>, </p> around any text.

3. Visit http://netfiles.uiuc.edu and log in.
4. Open your www folder
5. Upload (globe icon) your .html notepad file
6. Right-click item and select "Open in browser." The URL appearing in the top is available to the public.

To learn more about HTML, visit the website: http://www.w3schools.com/html

To find code to embed, try google gadgets to your webpage, visit the website: http://www.google.com/ig/directory?synd=open

The campus offers a number of one-day and four-day workshops on Web development. (Note that there is an additional technology fee for these classes and they do not provide course credit toward graduation.) See: FAST3 Workshops.

See also the HTML 4.01 Specification. (What we are doing in this cheat sheet is closest to HTML 4.01.)