The HTML images and links

It’s time to add the images and links to our page:

  • We replace the placeholder text for our logo, in the ‘logo’ div, with our image of the pokeball
  • We link each name in the list of the friends of Ash in our ‘nav’ div, to an external page
  • We replace the placeholder text in the ‘my_pic” div with the picture of Ash and Pikachu
  • Finally, in the ‘my_text’ div, we’ll create a few links from within the text blurb

The following is the resulting script; we insert the images in the webpage using the image tags in lines 17 and 43, which are high-lighted:

The following is our complete and final content-only html page:

Our web page with all the content, i.e., text, images, and links. Click on the image to go to the working page

We now have all the content of the final webpage; it is not organized correctly, though: the images are too large and in the wrong place, as it is the text, and the navigation links. Likewise, there is no color in the background. All of these are elements of style, not of content, and thus, we will address them with CSS, not with HTML.

And… Believe it or not, we are done with the content. Next week we will tackle CSS.