Interactive Notes
Uploaded by
Poki ChulInteractive Notes
Uploaded by
Poki ChulStudent name: ………………………………………….
Class: C7-1
WEB DESIGN AND HTML
The World Wide Web (WWW)
• Huge collection of ………………………………………… that we can access using the Internet.
• These Web Sites contain ………………………………… which are made up of all sorts of information
including:
– Text
– Images
– ………………………………… (Sound, Video etc).
• We can access Web Sites by typing in a ……………… (Web Address) into the bar at the top of the
screen.
• We can also access Web Sites using …………………………..……… which allow us to jump from one
Web Site to another and within Web Pages contained within the Sites.
HTML
• HTML stands for “…………………………………………………………………………..……………….”.
• It is a form of Programming Language which is specifically
used for creating Web Pages.
• HTML is written in the form of ………..………..… which tell the Web Browsers how to display the
information.
Web Browsers are just the programs that we use
to access the Internet such as ………………….……,
……………………………… and ………………………………
The Guide to HTML
Part 1
Objective:
1. Opening Notepad 6. Adding a heading
2. Making a basic HTML page 7. How to view changes
3. How to save a HTML Page 8. Line Break tag
4. How to open and view your page 9. More useful HTML tags
5. Using HTML tags 10. Adding hyperlinks
Activity!
• 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.
Where do we start?
• Open Notepad:
Magnifying glass icon Type “Notepad” Notepad
• Open your Web Design folder
KEEP BOTH OF THESE OPEN!
Basic Page
<html>
<body>
Search Engines
</body>
</html>
This will display the words “Search Engines” on the web page.
HOW TO SAVE YOUR WEB PAGE
In order to turn your Text file into a HTML file you MUST follow these instructions EXACTLY
• In Notepad :
File ……………
Name your Web Page as Search Engines.htm
Save the file in your Web Design Folder.
HOW TO OPEN AND VIEW YOUR WEB PAGES
• Browse to your Web Design folder.
• Look for your Search Engines.htm file. The file should look like this:
• Double Click your Web Page to open.
• Keep Web Page open for next task.
USING TAGS
• Tags are used to tell Web Browser how to display ………………….….. and ………………………
• Tags are indicated by using ……………………… and …………………………….
• Tags almost always work in ……………………..……… – Start Tag and End Tag
Start tag example = <H1>
End tag example = </H1>
Tags indicate to the Browser how to display the text
sitting between the start and end Tags
ADDING A HEADING TO YOUR PAGE
• Open your 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 bellow.
• DO NOT enter the same text again --- just add anything you can see which is new. (New Items
are Coloured Red)
• Save your file.
Heading Tag
<html>
<body>
<H1>Search Engines</H1>
</body>
The <h1> tag sets text as a heading in style 1.
Valid tags are <h1>; <h2>; <h3>; <h4>; <h5>; <h6>.
What effect does changing the number have?
HOW TO VIEW CHANGES YOU MAKE
• You can view changes you make to the HTML file in 2 ways:
1. Browse to the Search Engines file and double click it
2. Click the ………….……..……… button in the Browser
• Both of these methods will load up your updated Web Page.
Line Break Tag
<html>
<body>
<h1>Search engines</h1>
Yahoo<br>
Line Break Tag
Excite<br>
Google<br>
…………………… creates a line break
</body> <p> and </p> can be used to begin
</html> and end a ………………….………
More Useful Tags
• Tag to make text Font ………………… :
<B> Hello </B>
• Tag to make text Font ………………… :
<I> Hello </I>
• Tag to make text Font ………………… :
<U> Hello </U>
Hyperlink Tags
<html>
<body>
<h1>Search engines</h1>
<B><a href="http://www.bing.com"> Bing </a> </B><br>
The URL of a hyperlink must be enclosed in …………………………
Task!
Add the hyperlinks for OneSearch and Google.
Remember how to save and view your notepad HTML web page
• File Save As.
• File name should be Search Engines.htm.
• Save file in Web Design folder.
• Open the web file which should look like:
• Refresh button can be used to view any changes you make to the web page.
Search Engines HTML Example
• At this stage, your Search Engine HTML web page should look like this:
• The HTML code should look like this:
What have you learned?
• The following questions are designed to test your HTML knowledge so far.
• The answer to each question should be written into the correct place on the crossword found on
the next page.
HTML CROSS WORD
1
3 4
10
Across
2 <BR> tag will cause a _______ in line
4 Tags almost always work in ______
6 The basic langauge to create a web page
7 <H1> </H1> tags can be used to create a large ______________
8 Main text and pictures are inserted into the ______ section
9 Used to tell the internet how to display text and pictures
10 <a href=> </a> tags are used to create _______________
Down
1 HTML is the laguage used to create one of these
3 <I> </I> tags will create an ______ font type
4 <P> </P> tags will create a _________________
5 Program which can be used to create a HTML file
8 <B> </B> tags will make text ______
