Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
46 views

Lesson1 BasicHTMLs

The document provides an overview of lessons on HTML, CSS, and JavaScript for creating a personal web page. It includes starter exercises on matching HTML tags to their functions and identifying correct HTML code. Students learn about setting up web pages in Dreamweaver and coding basic HTML elements like headings, paragraphs, bold and italics text. The homework assigns planning a website design and summarizing a video on fonts, color, and backgrounds in HTML.

Uploaded by

nanda
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
46 views

Lesson1 BasicHTMLs

The document provides an overview of lessons on HTML, CSS, and JavaScript for creating a personal web page. It includes starter exercises on matching HTML tags to their functions and identifying correct HTML code. Students learn about setting up web pages in Dreamweaver and coding basic HTML elements like headings, paragraphs, bold and italics text. The homework assigns planning a website design and summarizing a video on fonts, color, and backgrounds in HTML.

Uploaded by

nanda
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Unit 4 – All About Me

HTML – CSS – JavaScript


Lesson 1 - HTML
Unit Overview
• Lesson 1 - HTML Basics and set up in Ms Dreamweaver
• Lesson 2 – Adding tables and Images
• Lesson 3 - Intro to CSS and development
• Lesson 4 – Intro to Java Script and create mini Quiz
• Lesson 5 – Completion of Web Page
• Lesson 6 – Assessment: MS Forms and Peer Assessment
Starter: Match the HTML tags [number] with the
description [letter] of what they do
1. <u> </u> a. Makes the text BOLD

2. <head></head> b. Underlines the text

3. <body></body> c. Encloses the head of the HTML document

4. <p></p> d. Creates a link to another webpage

5. <h1></h1> e. Makes the text italic

6. <a href=”http://www.google.com”></a> f. Encloses the body of the HTML document

7. <b></b> g. Formats the text to heading 1

8. <i></i> h. Creates a new paragraph of text


How did you do?
<u> </u> Underlines the text
<head></head> Encloses the head of the HTML document
<body></body> Encloses the body of the HTML document
<p></p> Creates a new paragraph of text
<h1></h1> Formats the text to heading 1
<a href=”http://www.google.com”></a> Creates a link to another webpage
<b></b> Makes the text BOLD
<i></i> Makes the text italic
Learning Objectives
• To understand what HTML is and what it is used for

• To understand the difference between html and CSS

• To be able to type basic HTML tags using MS Dreamweaver


to create a page that can be viewed in a browser
World Wide Web (WWW)
• The World Wide Web is a huge collection of websites that we can
access using the Internet

• Each website contains web pages which are navigated to via


hyperlinks

• Web pages contain different types of information including images,


text and multimedia
Where are all the websites stored?
• Websites are stored on web servers all over the world
• There is no central storage of websites
What happens when I view a web page?

Your Computer Your ISP Website Host /


Internet Server
Quick Research Task [5mins]

Use the internet to find out what the following stands for:

 HTML
 CSS

Task- Write one sentence to explain the difference between the two
in your yellow book.
HTML & CSS

HTML (Hypertext Markup Language)


HTML is the language for describing web pages.

CSS (Cascading Style Sheets)


A style sheet is a file that describes how a HTML file should look.

The difference: HTML describes a webpage but CSS describes how it will look.
What is HTML?
• HTML is a language for describing web pages.

• A markup language is a set of markup tags

• The tags describe document content

• HTML documents contain HTML tags and plain text

• HTML documents are also called web pages


HTML Code
Hello World
The first program that anyone should write in any language is the "Hello
World" program

HTML is just a text file read by web browsers therefore can be written in the software, we
are going to use a new application called Dreamweaver
Lets get started..
• Firstly, create a folder in your Year 8 Computer Science folder,
called:

• Unit 4: All about me

• Inside that folder create two folder


• One called “WebPage”
• Second called “Resources”
Set up Dreamweaver
• Firstly we need to set up in Dreamweaver and create our folders

• Follow the ‘How to set up in Dreamweaver’ resource to get started


Hello World
1. Type out the code below into the Html page

2. Click on the Save file in the correct folder (look up the


folder you created in your documents)

3. To view your page in browser, click on  the little arrow on the world icon
and preview in IExplore
Viewing in the Browsers
<head> contains
info about your
HTML file e.g.
title

<body> is where
you put the
content e.g. text,
images etc.
1. Heading <hx> </hx>
• Now you can put on heading size tags. 
• These come with numbers with 1 being the largest and 6 being the
smallest:
• <h1>  </h1>
• Put on <h> start and end tags from <h1> to <h6> as shown here

Go on, your turn – try the same title in 6 different headings


2. Bold, Italics,
underlined
• Lets try putting some formatting on the heading.
• Go back to your code page and find the text you
wrote ‘Hello World’ – Make the following
changes as in the image:

1. Lets try making it bold.  Bold tags are <b> and </b>
Put in these tags and save your code version.

2. Go on, your turn – try the above and do


the same with
<i> = italics an
<u> = underlines
3. Paragraph
• You need more than just a heading on your page.  You will want some paragraphs of text. 
• A <p> or paragraph tag will tell the web browser that you want to start a new paragraph.  Unlike a word
processing document, pressing the ‘enter’ key will have no effect.  You could press it hundreds of times and
you still wouldn’t get a new paragraph.

Go on, your turn – try the paragraph


4. Font Sizes
• You know how to make headings bigger or smaller by using <h> tags.
• You can also make text larger or smaller in the main part of your web page by using a <font size>
tag.
• Type in the following text
• Now type in the <font size=”7”> tag and put an end of font tag </font>
• Remember to use speech marks as shown.
Go on, your turn – try the font sizes
Student Task: Lets try this..
Code the following paragraph
(note: The title should be a “Heading 2” and you must code the formatting techniques used i.e bold,
italics etc)

About me
Welcome to the first webpage that I have coded in HTML. I am “x” years old and I live in the X.

I hope that you come back soon and visit the page to see what else I have learned to do in HTML.
Congratulations, you have created your first
web page
1. Double click on your Index file

In your books write the following:

3 things I have learnt today are:

1 thing I would like to learn about HTML is:


Homework
• Homework Website Planning and Design
• Complete your design, think about the colours you will
use, no more than 3 main colours

• Watch and summarise the video below, Fonts,


Colour & Background:
• https://www.youtube.com/watch?v=eUsuuxo3nYo
Learning Outcomes
• You should be able to explain what HTML is and what it is used for

• You should be able to explain the difference between HTML and CSS.

• You should be able to set up MS Dreamweaver to start creating web


pages with guidance.

You might also like