Slides badge

Images and links

Learning Intentions

  • Learn how to use several HTML tags to create a webpage

  • Learn how to add images and links to a webpage

Success Criteria

  • I will be able to modify an HTML webpage
  • I will be able to save and preview a webpage

Starter

Create a HTML page with the basic structure of a webpage in it.

The basic structure of a webpage

  • On the right hand side here we have the basis of a webpage. 

  • This structure is used on every webpage.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

HTML tags

  • HTML is made up of tags. The following image is the structure of a tag.

  • There are many tags in HTML. 

Your profile websites

  • In this lesson you are going to create a page about yourself. 
  • You'll be using HTML to do this.
  • If you feel you are struggling you can try the drag and drop editor at clickit.education. 

Headings in HTML

  • Heading in HTML are basically paragraphs with bigger text to look like headings.
<h1>This is the biggest heading</h1>
<h6>This is the smallest heading</h6>

Paragraphs in HTML

  • A paragraph is a chunk of text. If you put several paragraphs on a page you'll notice there is spacing between them.
<p>
  This is a paragraph
</p>

Breaks in HTML

  • A break is a new line in text. It's different from a paragraph because it doesn't create a space between the two lines.
Hello<br>World

Lists in HTML

  • We can make lists of items using ordered (numbered) or unordered (bulleted) lists:
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

Types of file paths

  • An absolute path specifies a file or directory's location from where the webpage is stored
  • A relative path specifies its location relative to the current working directory.
  • We are going to be focusing on storing images and using them locally.

Images in HTML

  • In this lesson the most important skills that you will obtain are adding in images and links. Both of these require us to understand how a file path works.
  • If we are saving images that we want to link to, make sure you save them in the same folder as you are saving your code (by doing this you can access them using a relative path).
<img src="image1.jpg">

Links in HTML

  • Links are also very important in HTML. 
  • To create a link, you use the <a> tag.
  • We need to specify where we want the link to go and the text to display on the screen.
<a href="https://www.coolwebsite.com/">Go to my cool website</a>

Linking two pages together

  • We can link to pages together using the <a> tag as well. 
  • Assume we have two pages, page1.html and page2.html
  • To create a link from page1.html to page2.html we just need to make that our href attribute:
<a href="page2.html">Go to page 2</a>
<a href="page1.html">Go to page 1</a>

Activity

Using the basic structure you created earlier:

  1. Add 5 images to your webpage. If you have any on Google Drive, you can add those in.
  2. Add another page to your website (hint: copy your template.html page and modify it)
  3. Add a link between each of the pages
Presentation Overview
Close
JB
Images and Links
© 2020 - 2024 J Balfour
09:09 | 29-04-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Random Selector
Timer
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    DragonDocs Management
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      Dark Mode
      Bold Text
      ×
      All slideshow files