Computer Science LearnITWithMrC ⛯ Year 7 Year 8 Year 9 GCSE
Responsive image

Lesson 2 - Creating a webpage

Overview
Flight Path
Learning Objectives
0 results forGuest
IDSkill_name
 5 I can use different tags to create my page
 3 I can use HTML tags to add functionality (e.g. links, images) to my website
 7 I can create a multipage website with pages linked together

🏁 Learning Objective 5 :- I can use different tags to create my page


Create your first website

With what you have learned so far, you are now ready to start creating your first website.

Example

Firstly see if you can recreate the image above in your index page using the html code below, notice we have introduced a new style called a list.


Exercise - using new styles

Copy the text below into notepad++

<body>
<h1> Why I like to go swimming in the summer. </h1>
<p> Swimming is my most favorite activity in the summer. When the sun is shining and the air is warm, you will find me dipping into my backyard pool. It’s not an impressive pool, only three feet deep, but it’s mine.</p1>

<p> There are three reasons I like to swim:</p>

<ul>
<li>I get lots of exercise</li>
<li>I enjoy the freedom</li>
<li>I have an opportunity to be in the sun.</li>
</ul>

</body>


Extension Task

Now try style your page like you did in the previous lesson see example below

control


Now see if you can change your list style to a numbered list. hint you will need to use an ordered list <ol> in plave of an unordered list <ul>

What about the elements below have you tried them?

  1. <hr>
  2. <br>
  3. <i>
  4. <b>

Update your objectives

control

🏁 Learning Objective 6 :- I can use HTML tags to add functionality (e.g. links, images) to my website


Adding images to a web page

The Image tag - <img>

To place an image onto a page you will need to use the image tag. There are two very important things to remember about the image tag

  1. It’s an empty tag (remember, that means there’s no closing tag, only a beginning).
  2. It requires attributes to be effective.

Here is the syntax:

The image tag <img> has several attributes:

  1. src= identifies the image and tells the browser where to get the image.
  2. height = & width = tell the browser the size of the graphic (speeds up the downloading process).
  3. alt= gives alternative text for those who are not viewing their pages with images.

Let’s go through each one of the attributes in more detail.

  • src= attribute
  • To help the browser identify and find an image, you use the following command: <img src="location/filename.gif"> The location of the image and its filename goes inside the quotation marks.

  • Height & Width attribute
  • When placing your images in the webpage, the browser looks for the height and width of your images. If you do not specify the size, the browser will stretch it or reduce it to fit.

    <img src ="https://i.imgur.com/31jND1H.jpg" width ="40%" >

    Exercise - adding images

    Copy the text below into your notepad++ html document
    <img src ="https://i.imgur.com/31jND1H.jpg" width ="40%" >
    Trying adding your own images onto your page

    Update your objectives

    control

    🏁 Learning Objective 7 :- I can create a multipage website with pages linked together


    HTML Links - Hyperlinks

    HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand.

    Note: A link does not have to be text. It can be an image or any other HTML element.


    HTML Links - Syntax

    In HTML, links are defined with the <a> tag:

    <a href="url">link text</a>

    Note: The Url is the Web address of the web page you find in the address bar. e.g. "http://www.learnitwithmrc.co.uk/"

    Example

    <a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
    Try it Yourself »

    Note: The href attribute specifies the destination address (url) (https://www.w3schools.com/html/) of the link.

    The link text is the visible part. Clicking on the link text will send you to the specified address.


    Exercise - Adding pages

    Create 2 new pages for your website in notepad ++ and save them into your web design folder

    Now add in your hyperlinks

    <a href ="index.html">Home</a>
    <a href ="page2.html">Page 2</a>
    < a href ="page3.html">Page 3</a>


    Extension Activity - Add and style your hyperlinks to your new pages

    Now style them so that they look like buttons

    This goes inside your style tags:

    a {background:blue; color:white; font-size:30px; padding:10px; text-decoration: none;}


    When you have completed this start to add content to your other pages

    Update your objectives

    control


    0 results forGuest
    Recent Comments

    Teacher Date: 2024-03-29


    Guest