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

Lesson 1 - Intro to HTML

Overview
Flight Path
Learning Objectives
0 results forGuest
IDSkill_name
 6 I can use basic HTML tags to change the formatting of text on my website
 5 I can use a basic editor to create a web page
 2 I can style my HTML using the style Tag
 4 I can create simple hyperlinks

🏁 Learning Objective 1 :- I can use basic HTML tags to change the formatting of text on my website


What is HTML?

HTML is the standard markup language for creating Web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML describes the structure of Web pages using markup
  • HTML elements are the building blocks of HTML pages
  • HTML elements are represented by tags
  • HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
  • Browsers do not display the HTML tags, but use them to render the content of the page

A Simple HTML Document

Example

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

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Example Explained

  • The <!DOCTYPE html> declaration defines this document to be HTML5
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the document
  • The <title> element specifies a title for the document
  • The <body> element contains the visible page content
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

Exercise - HTML Tags

Click the 'Try it yourself' button and make a web page that looks like the text below.
control

Try it Yourself »

Extension Question

Now try and make your page look like the text below using the different heading styles

control

Try it Yourself »

Update your objectives

control

🏁 Learning Objective 2 :- I can use a basic editor to create a web page


Create your first website

With what you learned so far, you are now only minutes away from making your first website.

Getting organised

control

Open your text editor

In oreder to create our web page we need to use an editor, we are going to use Notepad++.

control

Exercise - Create a web page

1. Copy the text below into notepad++

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

</body>
</html>

2. Change the Language to HTML using the dropdown menu - see example below

control

3. Now in the menu select File - Save As andsave your web page in your 'Web Design' folder as a file called index.html

control

Extension Task

Open your page in a web browser


control


See if you can work out what these additional tags are used for.
  • <hr>
  • <br>
  • <i>
  • <b>
  • <li>
  • <div>
  • <span>
Click here for help »

Update your objectives

control

🏁 Learning Objective 3 :- I can style my HTML using the style Tag


HTML <style> Tag

The <style> tag is used to define style information for an HTML document.

Inside the <style> element you specify how HTML elements should appear in a browser.

Each HTML document can contain multiple <style> tags.

Definition and Usage

The <style> tag is used to define style information for an HTML document.

Inside the <style> element you specify how HTML elements should render in a browser.

Each HTML document can contain multiple <style> tags.

Example

Use of the <style> element in an HTML document:

<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>
Try it Yourself »

Exercise - <style> Tags

Now try and add to your HTML to make the page look like the text below
control

More styles

We can also change other style elements for example:
  • font-size:36px; will increase the text to 36px
  • background-color:red; will change the backround of the styled element to red.
  • text-align:center; will align the position of the text with the center of the page.

    • Scratch Extension Question

    Now try and make the page look like the image below using the new styles

    control


    Click here to see my effort
    See if you can see what these additional tags do
  • <hr>
  • <br>
  • <i>
  • <b>
  • <li>
  • <div>
  • <span>

    • Update your objectives

    control

    🏁 Learning Objective 4 :- I can create simple hyperlinks


    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>

    Example

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

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

    The link text is the visible part (Visit our HTML tutorial).

    Clicking on the link text will send you to the specified address.

    Exercise - Adding links

    See if you can add hyperlinks to your new website page like the ones below

    My Web Links

    Visit our Html Tutorial
    Visit LearnITWithMrC
    Look At the latest News
    Go to the School Website

    Scratch Extension Activity - Target attributes

    Now try out the following to understand basic difference in few options given for target attribute
    <!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body>
  <p>Click any of the following links</p>
  <a href="/index.php" target="_blank">Opens in New</a> |
  <a href="/index.php" target="_self">Opens in Self</a> |
  <a href="/index.php" target="_parent">Opens in Parent</a> |
  <a href="/index.php" target="_top">Opens in Body</a>
</body>
</html>
    Opens in New | Opens in Self | Opens in Parent | Opens in Body

    Update your objectives

    control

    0 results forGuest
    Recent Comments

    Teacher Date: 2024-04-18


    Guest