LearnITWithMrC

0 results forGuest

Overview

Learning Objectives

0 results forGuest

ID	Skill_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.

Try it Yourself »

Extension Question

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

Try it Yourself »

Update your objectives

🏁 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

Open your text editor

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

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

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

Extension Task

Open your page in a web browser

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

🏁 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

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 background of the styled element to red.

`text-align:center`; will align the position of the text with the center of the page.

Extension Question

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

Click here to see my effort >>

See if you style these tags in your page/h5>
<hr>

<br>

<i>

<b>

<li>

<div>

<span>

Update your objectives

🏁 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:

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 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

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>

Working examples: - Click below to see what happens.

Opens in New | Opens in Self | Opens in Parent | Opens in Body

Update your objectives

0 results forGuest

Web Design - Intro to HTML

Overview

Learning Objectives

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

What is HTML?

A Simple HTML Document

Example

Example Explained

Exercise - HTML Tags

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

Extension Question

Update your objectives

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

Create your first website

Getting organised

Open your text editor

Exercise - Create a web page

Extension Task

See if you can work out what these additional tags are used for.

Update your objectives

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

HTML <style> Tag

Definition and Usage

Example

Exercise - <style> Tags

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

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 background of the styled element to red. text-align:center; will align the position of the text with the center of the page.

Extension Question

See if you style these tags in your page/h5> <hr> <br> <i> <b> <li> <div> <span>

Update your objectives

🏁 Learning Objective 4 :- I can create simple hyperlinks

HTML Links - Hyperlinks

HTML Links - Syntax

Example

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

Extension Activity - Target attributes

Now try out the following to understand basic difference in few options given for target attribute

Update your objectives

Recent Comments

Teacher Date: 2021-04-21

Guest

We can also change other style elements for example:

`font-size:36px`; will increase the text to 36px

`background-color:red`; will change the background of the styled element to red.

`text-align:center`; will align the position of the text with the center of the page.

See if you style these tags in your page/h5>
<hr>

<br>

<i>

<b>

<li>

<div>

<span>

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