Scribd
Upload
2 views24 pages

Part1 Slideshow

This document provides a lesson on creating web pages using HTML, including instructions for setting up folders, writing HTML code, and using various tags for formatting. It covers the basics of the World Wide Web, HTML structure, and practical activities for students to create their own web pages. The document emphasizes the importance of saving files correctly and using hyperlinks.

Uploaded by

Olushola BABS-AJAYI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views24 pages

Part1 Slideshow

This document provides a lesson on creating web pages using HTML, including instructions for setting up folders, writing HTML code, and using various tags for formatting. It covers the basics of the World Wide Web, HTML structure, and practical activities for students to create their own web pages. The document emphasizes the importance of saving files correctly and using hyperlinks.

Uploaded by

Olushola BABS-AJAYI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

Uni 8.

Wet Desig
1
b n
Key Word
Vocabulary
During this lesson you will hear the following
key
Makewords.
sure you listen t the as you b
carefully
asked questions at end o lesson may e
the .
We Sit
Lin Brea
b e
e k We Pag
WW b e
W HTM
L Headin
Tag Italic g
s
Bol Notepa
d d

Underlin
e Hyperlink UR
s L
EOS
Lets create our
folders!
• We need to create folders we will sav the wor
where we do in this unit. e k

1. Create a folder called


2. Year 8
3. Open the
Create Year 8 folder
a folder ICT
4. called
5. Open
Creat the ICT folder
anothe folde calle Web
e r r d Design

To create a new folder: All work for this


• Click in a BLANK SPACE unit should be
saved
the Webin folde
• Click New  Folder
Design r

EOS
The World Wide Web
(WWW)
• Huge collection of Web Sites that we can access using the
Internet.

• These Web Sites contain Web Pages mad up of


which are all sorts of information e
including:
– Text
– Images
– Multimedia (Sound, Video
etc).
• We can access Web Sites by typing in a URL
(Web Address) into the bar at the top of the
screen.
• We can also access Web Sites using Hyperlinks
which allow
us to jump from one Web Site to another and within
EOS
Web
l,i,
tie
Google · Mozilla
~dit lijew !,O Iools ~ ~.
~ookmarl<s
yl · c)
Firefox · f! Q @ [tl http://www.~.co.ul<J J
i Personalis Home I
ed
URL (Web Address)
Sign in

Advanced
Se:11oh
I Google Search JI I'm Feeling PfififiOCiS
Lanauaae T
Search:
Lucky 0 the web
I O pages from oois
the UK

Advertising - Business Solutions - About Google - Go to


Programmes Google.com
©2006
Google

Hyperlink
s

EOS
HTML
• HTML stands for “Hypertext Markup
Language”.
• It is a form of Programming Language specificall
which is y
used for creating Web Pages.
• HTML is written in the form of Tags tell the We
which ho to displa the information
Browser b
s w y .
Web Browsers are just the
programs that we use to
access the Internet such as
Internet Explorer, Chrome
and Firefox

EOS
[,!, Google • Moztllo GJ@!J
file t;dit 'LJew
Firefox
§o §ookmarks Iools ~ f3,
yl • • fl] 0 @ ~ http://www.~.co.ul<J

c
~ Personalised Home I Sign
in

~~~~~~~~~~~~~~~~~~~
--~
fl! view-source: - Source of: http://www.google. Fil'efox
file ~dl
eo.uk/ l[iew t!elp
- Mozilla
<htm.l.><head><rneta http-equiv="content-type"
8"><titl.e>Google</titl.e><styl.e><!-•
body,td,a,p,.h{font-family:arial,sans-serif}
_ content="text/html; charset=UTF-

.h{font-size:20px}
.q{color:#OOc}
--></styl.e>
<script>
<'--
function sf(){docurnent.f.q.focus();}
windov.rwt function(el,oi,cad,ct,cd,sg_url,sg){var e window.encodeURIComponent?
encodeURIComponent escape;vi
II-->
</script>
</head><body bgcol.or=#ffffff text=#OOOOOO l.ink=#OOOOcc vlink=#551a8b alink=#ffOOOO
onload=sf() topmargin=3 marginJu function qs(el) {if (window.RegExp ,&
window.encodeURIComponent) {var ue=el.href;var qe=encodeURIComponent(docurnen1
II-->
<T
L: Hypertext
H</script><tal>le
&nbsp; &nbsp; &nbsJ
Markup
border=O cellspacing=O cellpadding=4><tr><td nonrap><font size=-l><b>lJeb</b>&nbsp;

T M Language
I I

Right Click Page, then View Source, to see the HTML


code.
EOS
Ways to create web
pages
• There are a few different ways to create Web
Pages:
1. Text Editors (Notepad for example)
2. Word Processing Packages (Microsoft Word for
3. Example)
Graphic Softwar Packag (Front Pag or Dreamweave
al e e e r)

EOS
Activit
y!
• Create a Web Page using HTML.
• Use NOTEPAD to do this.
• Add some content with formatting.
• Give it a title and use headings.
• Add working hyperlinks.
• Save file with correct extension.

EOS
Where do we
start?
• Open Notepad:
Windows Button  All Programs  Accessories 
Notepad
• Open your Web Design
folder
KEEP BOTH OF THESE
OPEN!

Now Lets Make Our First Web


Page!
Type the text you can see in the blue box on the
next slide
into NOTEPAD (COPY THE TEXT EXACTLY!)
EOS
Basic
Page
<html>
<body>
Search Engines
</body>
</html>

This will display the words “Search on the


Engines” web
EOS
page.
How to save your web
page
• In order to turn your Text file into a HTML file MUS
you T
follow these instructions EXACTLY
• In Notepad:
File  Save
As
Nam you We Pag a Searc Engines.ht
e r b e s h m

Save the file in your Web Design


Folder.

EOS
How to open and view
your web pages
• Browse to your Web Design
folder.
• Look for your Search Engines.htm The file shoul loo
file. d k
like this:

• Double your Web Page to


Click open.
• Keep Web Page open for next
task.

EOS
Using
Tags
• Tags are used to tell Web Browser to display text
how and
images
• Tags are indicated by using <
and >
• Tags almost always work in – Star Tag an En Tag
pairs t d d
Start tag example =
<H1>
En ta exampl =</
d g e H1>

Tags indicate to the Browser how to


display the text sitting between the
start and end Tags
EOS
Adding a Heading to
your
• Open your page
Search Engines.htm in Notepad.
(Right Click Search Engines file  Open With 
Notepad).
• This will open up your HTML Text
File.
• Enter the text you can see in the blue box on the next
slide.
• DO NOT enter the same text just add yo
again
can ---which new. (Ne Item are anything
see Coloure Red u
is w s d )
• Save your
file.

EOS
Heading
Tag
<html>
<body>
<H1>Search Engines</H1>
</body>
</html>

The <h1> tag sets text as a heading 1.


in style
Valid tags are <h1>; <h2>; <h3>; <h4>;
<h5>; <h6>.
EOS
What effect does changing the number
How to view changes you
make
• Yo can view changes you make to the file in 2 ways
u HTML :
1. Browse to the file and re-
open it Refresh button in
2. Click Browse
the the r

• Both of methods will load your Web


these up updated Page.

EOS
Line Break
Tag
<html>
<body>
<h1>Search engines</h1>
Yahoo<br>
Line Break Tags
Excite<br>
Google<br>
<br> creates a line
</body> break
<p> and </p> can be
used to
</html> begin and end a
EOS
paragraph
More Useful
Tags
• Tag to make text Font
Bold:
<B> Hello </B>
• Tag make text Italic:
to Font
<I Hello </I>
• Tag> make text Underline
to <U Font
Hell </ :
> o U>
Task!

Bold, Italic and Underline search engine names on


your web page – (One of each)
EOS
Hyperlink
Tags
<html>
<body>
<h1>Search engines</h1>
<B><a href="http://www.yahoo.co.uk"> Yahoo</a></B><br>
<I>Excite</I><br>
<U>Google</U><br> The URL of a hyperlink must be
</body> enclosed in quotation marks “”
</html> (Shift + 2)

Task!
Add the hyperlinks for Excite and Google.
EOS
Remember how to save
andyour viewnotepad HTML web
page
• File  Save
As.
• File name should be Search
Engines.htm.
• Save file in Web Design
folder.
• Open the web file which look
should like:

• Refresh button can be used to view any you


changes make
to the web page.
EOS
Search Engines HTML
Example
• At stage, your
this Search
Engin HTML
loo web
like page
this:
e k
shoul
d

• The HTML
code this:
should look
like

EOS
What have you
learned?
• The following questions are designed to test your
HTML
• knowledge so far.
The answer
correc plac to
oneach questionfoun
the crosswor should be written
on the nex slide
into
t thee d d t .

EOS
1

3 4

10

You might also like