Fundamentals of HTML
Download
Report
Transcript Fundamentals of HTML
15.1 Fundamentals of
HTML
DeKalb County School System
Fundamentals of HTML
Today you will learn how to…
• Identify the basic
structure tags
• Identify elements
of a Web page
• Start Notepad and
describe the
Notepad window
• Enable word wrap
in Notepad
• Enter the HTML
tags
• Save an HTML file
• Activate Notepad
• Use a browser to
view a Web page
What is HTML & Tags?
• HTML is the language that allows text and
graphics to be displayed as Web pages.
• HTML uses a series of Special Codes
called Tags.
• Tags tell a browser application such as
Internet Explorer how to display the web
page & its items in a browser window.
HTML Tags?
• Tags must be surrounded by angle brackets
along with some word.
– < > or the less and greater than signs.
• Tags aren’t case sensitive, so typing a tag
either <TITLE>, <title>
and <TiTLE> will all do the same.
• Tags mostly come in a set or a pair .
– Some are single, not a set.
Appearance of a Set or Pair
of Tags
<tag> some text </tag>
Opening
Tag
Closing
Tag
Open or Start Tag
• tells the browser to turn on a
function.
• will appear like this <tag name>
End or Close Tag
• tells the browser to turn off a function.
– looks like the start but, has a slash /
– appears like this </tag name >
Every Web Page
has Three Sections:
• the <HTML> section is always 1st.
• the <HEAD> section is always 2nd.
• the <BODY> section will be last.
HTML Section
<html> </html>
–tells the browser you’re
creating a web page.
–marks the beginning and
ending of a web page.
Head Section
<head> </head>
–Indicates the start and end of
a section of the document
used for the title and other
header information
Title Section
<title>
</title>
• Displays information on the browser’s blue title
bar.
• Used so search engines can search the pages’
content and keywords.
• Used to bookmarks.
• Should be placed between the <head> </head>
tags.
Body Section
<body> </body>
• Contains the majority of the document
and the tags used to create your web
page.
• Comes after the <head> </head> tags.
Basic Structure
<html>
<head>
<title> Web Page’s Title </title>
</head>
<body>
Everything, All Info & Pictures
</body>
</html>
HTML Editor
• Allows you to create a HTML document
and see how the codes work.
• Some are free, shareware or
commercial products.
• We will use NOTEPAD.
How to Get Started
StartProgramsAccessoriesNotepad
• If the Notepad window is not maximized,
Maximize it.
• Click Format on the menu bar.
• If Word Wrap is not checked, click Word
Wrap
Time to Practice
Type the following code in
Notepad …
<html>
<head>
<title> {Insert your name}’s First
Site</title>
</head>
<body> This is my very first “WEB
PAGE”!!!
</body>
</html>
How to
Save & View
a Web Page
Saving a Web Page
• FileSave AsSave In (click on the
downward arrow to change the location to
where you will save your file)
• Always Save every web page with the
.html extension on the filename.
– Doing this will change your notepad into a web
page
• When SAVED correctly, you should SEE
the Internet Explorer Icon, “the big blue
E”
and not the NOTEPAD Icon.
Don’t forget .html
Viewing a Web Page
• Locate and Open the area where you’ve
saved your web page.
• Make sure the file name was saved with
the .html extension.
• Click on the E Icon next to the web
page’s file name.
• This will cause your web page to appear
in a simulation of the Explorer browser.
• Make sure the Notepad window is still open
as well as your browser.
• Now you will learn to Multitask by Switching
between both windows will be necessary to
make changes to the HTML file and seeing
the actual changes on the browser.
Let’s Practice
Saving and Viewing
With the your notepad file still open click:
• FileSave AsSave In (change your location)
File Name type: My1stWebPage.html SAVE
• Minimize your Notepad Screen, go to My
Computer & locate where your saved your file.
• You should see the Explorer “E” above your file’s
name. Now, double click on it.
• Did your file change into a Web Page?
– If not, resave your notepad file with .html,
close all screen and open your file again
CONGRATULATIONS
Are you ready now to
learn some more?