Slides badge

Your profile webpage

Learning Intentions

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

  • Learn how to add content 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

Last lesson you created a webpage. Using the webpage template you created in the last lesson, make a copy and adapt it to contain information about the school (you can choose what information you want on 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>

How we created our webpages

  • In the last lesson we used the very popular software called Visual Studio Code to create our webpage.

  • We looked at using the <p> tag to create a paragraph of text.

HTML tags

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

  • There are many tags in HTML. 

Image copyright jamiebalfour.scot

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>

Activity

  1. Look up definitions for the following tags and put them into your worksheet
Blockquote
Bold
Italic
Footer

Activity

Use the file profile.html to build your profile. You need to do the following on this page:

  1. Change the title of the page to your name
  2. Add one <h1> tag at the top, also with your name
  3. Add a paragraph (or two) just introducing yourself and what this website is.
  4. For example, Hello there my name is Mr Balfour. This webpage is my personal profile that I am building using HTML. 
  5. Add an <h2> tag with the content 'My favourites'
  6. Add an <h3> that says 'Hobbies' and then an unordered list with up to 10 hobbies
  7. Find a quote online and using the tag you found earlier add the quote to the page.
Presentation Overview
Close
JB
Your Profile Webpage
© 2020 - 2024 J Balfour
11:20 | 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