Archive for March, 2010

Crash Course 1.5 – Assignment Review

Wednesday, March 31st, 2010

Well, after getting feedback on Part 1 of the crash course I realized a few things which sent me back to the drawing board to make some changes to my plan for the course.

First to tackle, a better break down of the assignments for those who are really in the dark on the web and HTML. So below is a new assignment if you couldn’t follow assignment 1.

Assignment 1.5:

  1. Download Source Files
  2. Open cc1-5-start.htm in a text editor and format the page as noted in the document
  3. Search the internet and find three new tags to use
  4. Check your code against cc1-5-finish.htm & Test in a browser

Assignment 1.5 Breakdown:

1) Download Source files
In the last assignment the goal was to create an HTML page named “index.htm”. You can use a editing program like Notepad or TextEdit to create a text document. And if you save the document with a “.htm” or “.html” it will be rendered as HTML in a browser.

For our purposes you can  download Download Source 1.5 Files and use cc1-5-start.htm.

2) Format the page as noted in the document
If you download the zip file you will find cc1-5-start.htm which contains the text content to be formatted. And a file cc1-5-finish.htm that contains the finished document.

You can open the HTML documents in a text editing program such as Notepad or TextEdit.

Note, the start document has pieces of text wrapped in <p> paragraph tags. Look to the cc1-5-finish.htm to see how different things are handled and be sure to understand how they work.

3) Search the internet and find three new tags to use
After reading the first post you should know what HTML tags are. Here we want to use a search engine, such as Google or Yahoo, to find new HTML tags that weren’t mentioned in the first post. For example, I did a quick search and after looking at a few sites I found the “small” tag.

<small>Small Tags makes text small</small> = Small Tags makes text small

4) Test your document by opening it in a browser
Open a browser such as Firefox or Safari and click “File > Open” or Open File (depending on the browser), find the document you want to preview in the browser and click open. This should open the document in the browser and render it as HTML.

Download Source 1.5 Files

Moving forward I aim to make the assignments more thorough with source files to follow. Feel free to provide feedback on this post and let me know if there are any things that still need addressing.


Crash Course in Web Design – Part 1 Basic HTML Tags

Monday, March 15th, 2010

Download Source Files: 1-html-basics.zip

The following YouTube video goes over some of the things mentioned in the blog below in regards to HTML tags.


Understanding the basics of HTML tags.

To get a browser to render HTML properly HTML text needs to be wrapped in HTML tags.

An an HTML document, HTML elements are tags, as well as text, which act as indicators to a web browser as to how the document is to be interpreted. An example of a tag is: <p></p>

which is a tag for a “paragraph”.

For example to make a word in HTML bold, wrap the text in a “strong” tag like below:
<strong>Text here</strong> // – - >>  Text here

For italic words we’d use “em” for embellish.
<em>Text here</em> // – - >> Text here

If you want to use multiple tags use make sure they are opened and then closed in enclosing method such as:
<tag1><tag2>My words</tag2></tag1>
<strong><em>My words</em></strong> // – - >> My words


Common HTML Tags used in web design

HTML tags commonly have and opening tag and a closing tag such as: <strong></strong>

Tags that have open and closing tags.

Bold - <strong><strong>
Italic – <em></em>
Underline – <u></u>
Paragraph – <p></p>
Text Link – <a href=”http://mysite.com”>Text Link Here</a>
Heading 1 – <h1></h1>
Heading 2 – <h2></h2>
Heading 3 – <h3></h3>

Self closing tags.

The following tags are self closing, meaning they do not have an associated closing tag. Instead they close themselves with “/>”.

Image – <img src=”http://mysite.com/images/image.jpg” />
Line Break - <br />
Horizontal Rule – <hr />

Bulleted List: Lists are an important part of web design. They are commonly used for navigation once they are stylized. Notice first the Unordered List tag “ul” is opened, then List items “li” are added.

<ul>
<li>bullet 1</li>
<li>bullet 2</li>
<li>bullet 3</li>
</ul>


Assignment 1:

  • Create a text doc and save it as index.htm
  • Code out the tags above to create a page of content
  • Search the internet and find three new tags to use
  • Test your document by opening it in a browser

Download Source Files: 1-html-basics.zip


Other HTML Resources

There are quite a few other HTML tags that can be used in web design. Just a quick search in Google and you can find quite a few resources.


Browsers for Web Design

I prefer Firefox as a browser, or Chrome, however when building for web you should test your pages in various browsers as the HTML may render differently in different browsers including Safari, Explorer. Different platforms like Mac, PC, Mobile all render things a bit differently.

I suggest try using Firefox and add the following plugins.


The Basics of an HTML page

This is a supplementary video that shows the basics of an HTML web page.

Well, that’s it for now, next post in the series will focus on file structure and linking files.

Please help me promote my beta-course by tweeting, Facebooking or sharing with friends. Thanks for your support! – kh