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.
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
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
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):
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.
<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.
<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
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]
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.
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.
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]:
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.
- For the purposes of this class, a basic web page that includes css can be found here. Download the file or View Source to see the code.
- [Download the image for this file]
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…).
If you’re interested in learning more about using CSS for positioning and floating HTML elements this article provides good explanation positioning basics.
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.
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
Complete Assignment 6.