Inserting images, tables and hyperlinks

Hello students, welcome to Kwickprep. A school website needs a photo of the campus, a timetable, and links to other pages. Why does an image sometimes show only a broken icon? Today we will insert images, tables and hyperlinks, and fix that common mistake.

We insert an image with the img tag. It is an empty tag, which means it has no closing tag. The src attribute gives the image file name, here school.jpg. The alt attribute gives text shown if the image cannot load, and screen readers read it aloud for blind users. Width and height set the size in pixels.

Pause and predict. The page shows a broken image icon instead of the photo. What went wrong? Usually the src path is wrong, or the file is in a different folder. The spelling and capital letters must match exactly, because School.jpg and school.jpg are different on a web server. The file extension must match too, like .jpg or .png.

The src value is a path, which tells the browser where the file is. A relative path starts from the current page's folder. If the image is inside an images folder, write images slash photo.jpg. An absolute path is the full web address, starting with https.

Now tables, like a class timetable. The table tag starts the table. Each tr tag is one table row. Each th tag is a heading cell, shown bold and centred. Each td tag is a normal data cell.

Here is a small timetable. The border attribute draws lines around the cells. The first row uses th for the headings Day and Subject. The next rows use td for Monday with Maths, and Tuesday with Science. So the browser shows a table of three rows and two columns.

A few attributes make tables neater. Colspan joins cells across columns, and rowspan joins cells down rows. Cellpadding gives space inside each cell. Cellspacing gives space between the cells. Newer pages set these with CSS, but many textbooks still teach these attributes.

Here the first row has one cell with colspan equals two. It stretches across both columns, like a title bar saying Class 12 Timetable. The next row has two normal cells. Pause and predict. How many th cells would the first row need without colspan? Two.

A hyperlink takes the user to another page when clicked. We make it with the a tag, called the anchor tag. The href attribute holds the address to open. The words between the tags are what the user sees and clicks. Here the user clicks Results, and the page results.html opens.

There are four common kinds of links. An internal link opens another page of the same website. An external link opens another website, and target underscore blank opens it in a new tab. A mailto link opens an email app with the address filled in. A link to a hash and an id jumps to a part of the same page.

We can put an image inside an anchor tag. Then clicking the image opens the link, like a logo that takes you to the home page. Here clicking logo.png opens index.html. The alt text Home helps users who cannot see the image.

Your textbook may use a visual web page editor, which writes these tags for you. The Image button asks for the image location and alternate text. The Table button asks for the number of rows and columns. The Link button asks for the link text and address. Behind every button, the editor still writes img, table and a tags.

Let us revise what we learned today. The img tag inserts an image, using src for the file and alt for text. A broken image usually means a wrong path, spelling or extension. Tables use table, tr, th and td, with colspan and rowspan to join cells. The a tag with href makes a link, and target underscore blank opens a new tab. An image inside an a tag becomes a clickable link.