Introduction:

Images play a large part in making web pages attractive. They can do a great deal for a site in a single glance by attracting and directing eyes and creating interest on a page before a viewer even has a chance to read a single word. The tricky thing about images on the web is that they can’t just look pretty, they must also convey information. Remember that not all visitors to your site will be viewing it with 20/20 vision on a large, bright display. They may be using assistive technologies to help them navigate or they be using a mobile device with a very small screen. In cases such as these the implementation of the images on the page and the information included about them must be presented purposefully. It’s not enough for an image to be pretty. It must also render gracefully on a variety of devices. Enter HTML and CSS.


Objectives:

In this lesson students will learn

  • how various user agents browse the internet
  • the importance of including semantic information about images
  • how to implement images on a page according to current web standards
  • how to position images on a page using basic HTML and CSS

Reading:

The Opera Web Standards Curriculum has some fantastic articles that start from the beginning and explain basic web development topics quite succinctly. Start here. If you are considering a career in web development, I recommend reading through the entire curriculum, but for this class there are a handful that you will find immediately helpful. Consider the reading below a supplemental explanation of the first 6 readings listed above. I list them here for those learning HTML for the first time, who may benefit from a different explanation from the (recommended) book:

Supplemental reading from the HTML & CSS book, pages:

  • Structure 13-38
  • Text 41-52, 58
  • Links 75-92 (this is review, but if you don’t feel strong at writing links yet, please re-read this chapter)
  • Lists 63-72
  • Images 99-106
  • Miscellany 177-188
  • Intro to CSS 227-244
  • CSS Color 249-250
  • CSS Text 271-287
  • CSS Boxes 303-317

Activities:

For the purposes of this class, a basic web page looks like Fig. 1 (find the actual page here and use View Source to see the code):

Fig. 1: There are a few required elements that must appear in every html page

A basic html page contains required elements such as html, head, title, body, and some content (h1, in the case of the linked document above). Before we worry about the code, let’s take a look at the elements used to build this page. Consider Fig. 2 – we can draw a number of similarities between our web page and a house.

An html page shares many of the same basic characteristics as a house
Fig. 2: An html page shares many of the same basic characteristics as a house

<html></html> – All of the content in an html document appears between <html> tags. Think of this as the whole house – the boundary that separates inside space from outside space.

<head></head> – Just as every house has a roof, every good web page has a head. Within the head of an html document you find metadata. This metadata contains information that can be indexed by search engines, but will not be displayed on the web page. Javascript and CSS can also be included in the document head.

<body></body> – The body is where the visible content of the page is displayed. This is where you will find elements such as headers, paragraphs, images and more. Think of it as the primary living space of the house.

<!Doctype> – Don’t forget the Doctype. The Doctype points to the specification (or Document Type Definition) that the user agent will use to render the web page. Validators will also use the Doctype to check the page to see if there are errors. Think of the Doctype as the building code used when a house is built. I guess that would make validators like building inspectors!

The Anatomy of an HTML Tag

What an average html tag might look like
Fig. 3: What an average html tag looks like

So what are we looking at here in Fig. 3?

  • Each html element must include an opening and closing tag (although a handful of elements are self-closing)
  • Within the opening tag, attributes can be declared to which you can assign values
  • Between the opening and closing tag is where you place content, whether it be text, images, or media

When used properly, html elements help to describe the content contained within them. They allow you to describe the content on the page semantically, and are key to a well formed document. Let’s take a look at some elements:

<h1></h1> – A headline (level 1) – Headlines identify the title of a section of text within the context of a document. Note that there are six levels of headlines (<h1> thru <h6>). An <h1> element indicates the primary title on a page. Sub-content headings can be described using <h2>, <h3>, <h4>, <h5>, and <h6> progressively.

<p></p> – The paragraph element identifies paragraph content and is used each time a paragraph appears on a page.

<em></em> – Emphasis can given to the text that appears between these tags. By default the text will appear italicized.

<strong></strong> – Strong emphasis can also be indicated by placing the text meant for emphasis between these tags. By default the text will appear heavier (bold).


Practice: Use the document linked up by Fig. 1, and build a properly formed document using the tags listed above. Note that if you use the “Remix” button you can build your page right in the Thimble editor, in your browser.
[Lipsum text (filler copy) is available on this website]


Adding Images

Of course, we must talk about how to add images to pages. The <img /> element is one of those special case tags mentioned above that are self-closing tag. There are two attributes that must be included in <img /> and they are src=”foo” (the path to the image source) and alt=”foo” (alternate text). An example of code embedding an image on a web page would look something like Fig. 4.

The anatomy of the img element
Fig. 4: The anatomy of the img

View the source for a very basic web page with an image to see how it is structured.


Looking for an HTML 5 cheetsheet? This site provides a fairly comprehensive list of HTML 5 elements and also has a PDF download if you happen to prefer printing a reference as well.


In the tutorial below I use Adobe Edge Code, which is no longer supported by Adobe anymore. You can use it if you already happen to have it installed. In its place, feel free to use Notepad ++ (PC), Text Wrangler (Mac), Mozilla’s Thimble project (an online editor), or your preferred HTML editor if you have one.

CSS

Notice that we haven’t talked about adding any style to the page yet. Styling and all presentation-related adjustment is handled by CSS. HTML is about describing information, CSS is about making it look good. We aren’t going to venture too deep into CSS in this class, but we will discuss the basics of positioning so that we are able to place our images on a page where we want them to appear. Let’s start with basic CSS.

 

Next, let’s take a look at the infamous Box Model [courtesey of HicksDesign]:

The box model as applied by css to block-level html elements
The box model as applied by css to block-level html elements.

What we see represented here are CSS properties we can use to position images and block-level elements on a web page. Also depicted is the order in which each property renders with respect to the content. Using the width, height, margin, padding, and border properties we are on our way to getting our images where we need them on the page.

W3Schools has a tutorial for the Box Model as well, that explains how to use padding, border, margin, and background properties to change characteristics of the boxes that contain our content (text, images, etc…).

[CSS Cheat Sheet]

If you’re interested in learning more about using CSS for positioning and floating HTML elements this article provides good explanation positioning basics.


Practice:

Ready to see it all together? View this web page that uses the basic HTML and CSS covered above, to create an introduction to HTML. Click the “Remix” button to style it and make it look the way you want it to look. Save it to your own Thimble account so that you have a reference copy for later.


Advanced Reading

For those of you who are more advanced or curious to extend your HTML skills further I encourage you to explore the parts of the book we don’t have time to cover during the semester:

  • Further Text Markup pg. 53-56
  • Tables 127-142
  • Forms 145-174
  • Iframe 189-190
  • Meta 191-192
  • CSS3 Color: 254-256
  • CSS Advanced Text 288-292
  • CSS Advanced Boxes 318-322
  • CSS Layout 359-402
  • HTML5 Layout 429-448

Looking Forward

Complete Assignment 6.