Before we move on and look at some styling with CSS, lets have a look at some more HTML features that you'll use all the time in web design. I'm not going to cover all of HTML because, well, we don't have time, HTML is fairly boring on its own, and it all works in a similar way. Once you know how one or two elements work, it is pretty easy to work out the others.
The new elements I'll cover in this session are:
<img>: image elements allow you to insert images into your page.<a>: anchor elements allow you to link to other pages, and other parts of the same page.- Container elements: elements such as
<div>that you generally use to contain or group several other elements, so you can style or script all of them like they are one item. - Embedding a video using an
<iframe>: Inline frames allow you to insert content into your site from other sites, for example Youtube videos.
HTML Images
Before web pages were able to have images inserted in them, the Web was just text, and you can imagine what a boring place it was back then! In around 1993, the <img> element was invented, and things got a lot prettier.
Including an image in your page
Let's fill in the src attribute of our <img> element like so:
<img src="http://people.mozilla.org/~cmills/st-chads/images/kitten.jpg"
alt="Description of the image">You should now see a picture of a cute kitten, sat on your page. You'll notice that the image element is another example of an empty element, and at the moment it only has one attribute, src (short for source). This is the only attribute you have to give your image element, and it points to the location of the image you want to insert in your page. In this particular case, it is a location on one of my sites, but this could also be an image in the same folder as the web page, either on the same site, or local computer.
Finding images to use
Lets look for an image or two to insert on your page. The best way to find images to insert, for experimentation, is to use Google image search, which is a Google site that allows you to search just for images.
- Search for something you'd like to display (a portrait picture would be best for this example — one that is taller than it is wide), and click on an image result. The image should come up big and highlighted.
- Click on the View image button; this will bring just that image up in the browser.
- Select the whole web address of the image that you should now see in the address bar of your browser and copy it (you can also do this in Firefox by Right/Ctrl + clicking and selecting Copy image location; most other browsers have a similar option.)
- Put your own image location into the code we used above, in place of my cute kitten pic web address.
Note: You'll notice that images are of different types. Some are PNGs, some are JPGs, etc. You can find a guide to the most common different types of image at Designing for the Web: Images.
Sizing
Some of you will notice that your image is massive, far too big! We can remedy this by inserting a width attribute into our code. For example:
<img src="http://people.mozilla.org/~cmills/st-chads/images/kitten.jpg" alt="Description of the image"
width="200">The above width attribute makes it 200 pixels wide, and the height has also adjusted so that the image looks the same only smaller (in technical terms, the aspect ratio has been maintained.) This also works the other way around, if you just specify a height attribute.
If you specify both width and height attributes, you can end up in a bit of a mess. For example:
<img src="http://people.mozilla.org/~cmills/st-chads/images/kitten.jpg" alt="Description of the image"
width="600" height="700">This code would cause the image to stretch out of proportion, looking a bit horrible. So the lesson here is: don't specify both, unless you are really sure what you are doing!
Note: In real web design, we would be creating our own images, sizing them how we want in a graphics editor, and not really needing to use width or height attributes. But these are still useful to know about, and this is all we've really got time for in our course.
Note: Also in real web design, you need to be careful about making sure you have permission to use the images you are inserting on your pages (who has the copyright?) But when you are just playing around and learning, it doesn't matter so much.
So, at this point insert a width attribute into your code, as explained above.
Alternative text
There is another attribute I'll share with you before we move on: alt. This allows you to provide a description of the image that will be used when the image can't be displayed, or when a visitor to your site is using a browser that doesn't display images.
To begin with, our example's alt attribute looks like this: alt="Description of the image". Let's change it to something that describes our image more accurately.
Let's look at an example to help us out:
<img src="http://people.mozilla.org/~cmills/st-chads/images/kitten.jpg"
alt="A cute ginger tabby cat with green eyes">To see alt in action, try misspelling your image's web address (the src attribute value.) You'll see the alt text displayed in the page:
Note on web accessibility
To go a bit further on the subject of alt text, let's say a bit about web accessibility. This is the practice of making websites that can be successfully used by as many users as possible. For example, computers can't be seen by blind people, who often use a program called a screen reader to read the contents of web browsers and other applications out to them. Images are not text, so can't be read out, which is one of the main reasons we add alt attributes to our images: this provides some descriptive text for the screen reader to read out. Let's watch a quick video to give you an idea of how a blind person typically uses a computer.
HTML Links
Links are probably the most important HTML elements, possibly even more important than images. They are what makes the Web A WEB. You can link to another web page, a different part of the same web page, or a different file entirely (for example a PDF, or a Word document.) The link in our template looked like this originally:
<p>My second paragraph, containing a <a href="http://www.mozilla.org/">link to Mozilla</a>.</p>So here, we are wrapping the text "link to Mozilla" in an <a></a> element, which makes that text a link.
Let's add a very simple link or two to our project page. You can wrap a link around basically any amount of content, but you should think carefully about how much content you link. You'll notice the blue colour and underline that marks the link as a link. This has been the convention since the Web first existed. After links have been visited at least once, they show up as purple instead. Using CSS (which we'll look at later on) you can change the link colours and other behaviour, but we'll leave it for now.
Note: The text inside your links should act like signposts to the pages (or resources) they link to. If you are linking to a page about cats, use "more information about cats" as the link text, not "click here" or "more information". The text should make sense on its own as well as part of the larger sentence it is in. People using screen readers will often look at all the links on a page on their own in a list, to try to find what they want.
Container elements
Next, I thought I'd say a few words about the container elements in the page template. These are the <div> ... </div> elements you can see surrounding a couple of different blocks of content. These elements are purely there to group other content — they don't really have any meaning by themselves. In this case, we are separating our content into two different groups. We will see why this is so useful when we start using CSS in the next couple of weeks.
Advanced: Embedding a video using an IFrame
IFrames can be used to embed other web content into the current page. As you can imagine, this can get very complex very quickly, but for this course we will look at one very simple specific use: embedding Youtube videos in other pages. Here's how.
- Go to a Youtube video that you want to embed.
- Below the video, click the Share button, which provides different ways of sharing the video with others.
- There should now be an Embed button below the Share button. click that as well.
- This will give you a text box containing a bit of HTML code. You need to copy it and then paste it into your page at the point where you want the video embedded. Put it under the
<img>element. - You can also click the "SHOW MORE" text at the bottom of the share box to bring up more options like choosing video sizes.
The code looks something like this:
<iframe width="560" height="315"
src="//www.youtube.com/embed/a9O0MgjoeBM"
frameborder="0" allowfullscreen></iframe>