15.1 Fundamentals of HTML

1
15.1 Fundamentals of HTML

• DeKalb County School System

2
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

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

4
HTML Tags?

• Tags must be surrounded by angle brackets along
  with some word.
• lt gt or the less and greater than signs.
• Tags arent case sensitive, so typing a tag
  either ltTITLEgt, lttitlegt
  
  
  
  
  
  
  
  and ltTiTLEgt
  will all do the same.
• Tags mostly come in a set or a pair .
• Some are single, not a set.

5
Appearance of a Set or Pair of Tags
lttaggt some text lt/taggt
Closing Tag
Opening Tag
6

• Open or Start Tag
• tells the browser to turn on a function.
• will appear like this lttag namegt
• End or Close Tag
• tells the browser to turn off a function.
• looks like the start but, has a slash /
• appears like this lt/tag name gt

7
Every Web Page has Three Sections

• the ltHTMLgt section is always 1st.
• the ltHEADgt section is always 2nd.
• the ltBODYgt section will be last.

8
HTML Section

• lthtmlgt lt/htmlgt
• tells the browser youre creating a web page.
• marks the beginning and ending of a web page.

9
Head Section

• ltheadgt lt/headgt
• Indicates the start and end of a section of the
  document used for the title and other header
  information

10
Title Section

• lttitlegt lt/titlegt
• Displays information on the browsers blue title
  bar.
• Used so search engines can search the pages
  content and keywords.
• Used to bookmarks.
• Should be placed between the ltheadgt lt/headgt tags.

11
Body Section

• ltbodygt lt/bodygt
• Contains the majority of the document and the
  tags used to create your web page.
• Comes after the ltheadgt lt/headgt tags.

12
Basic Structure
lthtmlgt ltheadgt lttitlegt Web Pages Title
lt/titlegt lt/headgt ltbodygt Everything, All Info
Pictures lt/bodygt lt/htmlgt
13
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.

14
How to Get Started

• Start?Programs?Accessories?Notepad
• If the Notepad window is not maximized, Maximize
  it.
• Click Format on the menu bar.
• If Word Wrap is not checked, click Word Wrap

15
Time to Practice
16
Type the following code in Notepad

• lthtmlgt
• ltheadgt
• lttitlegt Insert your names First Sitelt/titlegt
• lt/headgt
• ltbodygt This is my very first WEB PAGE!!!
• lt/bodygt
• lt/htmlgt

17
How to Save View a Web Page
18
Saving a Web Page

• File?Save As?Save 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.

19
Dont forget .html
20
Viewing a Web Page

• Locate and Open the area where youve saved your
  web page.
• Make sure the file name was saved with the .html
  extension.
• Click on the E Icon next to the web pages file
  name.
• This will cause your web page to appear in a
  simulation of the Explorer browser.

21
(No Transcript)
22

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

23
Lets Practice Saving and Viewing
24

• With the your notepad file still open click
• File?Save As?Save 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 files
  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

25
CONGRATULATIONSAre you ready now to learn some
more?