HTML Tutorials :: Review Questions I

Sorry its been so long since I promised this. Here are the review questions (including an exercise) for the first five segments of this HTML tutorial series. After this I may take a break from this series and go onto something else, so let me know what you all want me to do…

Here we go. Feel free to follow along with the questions or even try some of the exercises yourself.

1) What software do you need to create a website?

2) What file extension do webpages have?

3) Create an opening and a closing tag; create a self closing tag

4) What organization oversees web standards?

5) Give an example of a relative and an absolute link

6) Create a table with 4 rows and 2 columns

7) What are the required properties of an image tag?

Many people find actually doing something is the best way to learn it. Here’s something you can try:

“You have been asked by a friend to create a website for them. He sells class “a” widgets. He wants a website with a home page, an about page, a products page, and a contact page.”

Here are some tips to help you get started:

  • Remember the tables we talked about? Try those for the basic shell of the site, remember to use the cell height and width properties to size them properly.
  • For a header, you can just use static text. If you want to find an image, go for it. That’s not what this tutorial is about, though.
  • Try to include an image with the product. Don’t worry what it is. Google “lorem ipsum” for some free images to try.
  • For text, again, Google “lorem ipsum”. What you should find are websites that have filler text and images.
  • Don’t worry about how nice it looks – you should have seen my first website πŸ˜‰
  • Comment in this post with any questions

Well, I hope you all enjoyed part one of the “HTML Tutorials” series. Like always, post a comment with any questions.

Advertisements

10 Responses to HTML Tutorials :: Review Questions I

  1. Michael says:

    You should do CSS tutorials as well – I actually like using CSS placed DIVs better than tables…

  2. Jeff,

    How do you want us to “per-se submit” this? Via comment or email?

    Thank ya!

  3. Jeff says:

    @Michael
    I strongly agree. In fact, that is the method I always use. I would never do it any other way. The only reason I am giving this as an example is to keep it simple for beginners. Most beginner level books that I have seen begin this way, so I figured I would follow suit. Thank you for bringing this up!

    For everyone who are interested in learning CSS before I put out my CSS tutorial series, please see this site: http://www.subcide.com/tutorials/csslayout/ .

    This is an excellent tutorial for learning CSS. If I had to choose the one thing that taught/cemented CSS in my mind, it was this tutorial.

  4. Jeff says:

    Don’t worry about submitting it. Considering the amount of traffic we receive, it would take forever to do anything with it. You’ll know if you got it right πŸ™‚

    I may post some sample answers in the future.

  5. That’s what I thought. Thanks. πŸ™‚

  6. Tito says:

    What does this button do? :p
    This all goes way above my head. :p

    Tito

  7. Ray says:

    Tables are for data display, not a layout structure. πŸ˜› So I would not even recommend a beginner to do that, it’s far too restricting.

    Once you master CSS, I recommend checking out CSS frameworks such as YUI and Blueprint, which can significantly reduce workload.

  8. Jeff says:

    TouchΓ©. Thanks Ray!

  9. zachdude1094 says:

    That’s impressive, how long have you been doing web design?
    Oh and Ray, tables can be used for layout structure, in fact, the first three years of me doing web design tables were my basic layout.

  10. Ray says:

    Yes they Can be used, but I would say that they should Not be used for layouts. This is because tables do not fundamentally separate the elements of structure HTML with style CSS.

    Here’s an article I wrote a while ago concerning this issue:

    I think the main purpose of building a website is to make the content as accessible and relevant as possible.

    Rather than focusing on “designing” itself, a web design should reflect the content. To accomplish this four distinct separations help the process.

    1) Content β€” the meat, the blog post, the article, whatever you desire to present to the viewer (you must establish a goal/purpose for your website)

    2) Structure β€” How is the whole thing structured? How is it structured to lead the person to the goal? This is where we structure data.

    3) Design β€” How is the information visually presented on the browser? This area tries to maximize accessibility and please the viewer visually.

    4) System β€” How is the content dynamic? (Search, forum, comments, etc.)

    The content (1) will have two primary divisions: Dynamic or Static.
    Dynamic content changes regularly, like a blog or forum. Static content stays the same, like your About Us page or a Contact information page.

    The structure can have substructures… basically you define the levels, priorities, and rank of your information. This can come in the form of pages and subpages, or categories and subcategories. I usually use a pencil and paper to sketch out several wireframe diagrams to construct this structure.

    Under Design, we also have two distinct parts.
    a) The Layout (HTML)
    b) Styles (CSS)
    Layout gives the XHTML structure while CSS styles the parts. This allows for custom themes to be easily created.

    Usually the (4) System will become the foundation to pull all the other three essential parts together. PHP, C#, Ruby, Python are languages popularly used for this process in dynamically presenting the information.

    Furthermore, under (4) System, you can find prefab frameworks or content management systems (CMS) to work off of.
    Frameworks give you a bunch of code “blocks” that you can use to create your own web application. CMS on the other hand are more “pre-built” requiring almost no actual code knowledge.
    ASP.NET, Django (Python), Ruby on Rails (for Ruby duh), and Codeigniter (PHP) are good examples of frameworks. As for CMS, WordPress, CMSmadesimple, Drupal, and Joomla are examples of popular systems that people use.

    So in my design process I start with #1 Content. What is my goal for the website? Do I require action from the reader? What’s my purpose? Second, I work on structuring my data. I plan how I can best present the data to the viewer. Third, I create the design to help the viewer best understand and follow my structure. Finally, a dynamic system powers the whole thing and knits them together into a website.

    My $0.02.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: