HTML

1
HTML

• Hyper
• Text
• Markup
• Language

2
What is HTML?
It is a programming language that Defines the
format of a World Wide Web (WWW) page.
It is a simple language to learn made up of
TAGS
3
Where did HTML Come From?

• Tim Berners-Lee was the original developer
• First developed as a simple hypertext language
• First developed and used 25 September 1990

4
History Continued

• Early problems of HTML, not enough tags could
  only be used for text.
• 1993 ltimggt tag allows for pictures to be placed
  on the Web, the explosion of the World Wide Web
  begins.

5
History Continued

• 1995 First official standard HTML 2.0
• Earliest HTML format
• Earliest HTML webpage

6
The Present
Currently there are many web page creator
programs. Many creators allow point and click
creation, but you are limited in what you can add
to your page. There are scripts that run on web
pages now such as JAVA Script, which allow web
pages to be more Interactive.
7
Why should I know HTML?

• You should know the Basic Skills so that you
  are able to explain how and what create the web
  page you or your students are looking at.
• Would you teach addition on a calculator before
  your students knew the process of addition? NO

8
Uses of HTML in the Classroom

• Basic survival What if you dont have an
  editor/creator program?
• Problem solving exercises Identify errors
• Constructivist Theory of education
  Students construct projects for posting to Web
• Communication with students parents through the
  use of web pages.

9
Are you Ready?

• I thought you would be. So in the spirit of
  Constructivist Educational Theory we will create
  a simple web page today using simple HTML Tags.

10
The Beginning
What program to use?
Notepad Text editor Microsoft Word Converts
text to Hypertext,
but you lose out on
learning the tags
So for our purposes today we will use Notepad or
on some computers Wordpad.
11
Our First Tags

• lthtmlgt - Declares that this will be HTML Web Page
  and can be viewed by a Web browser. (always the
  first tag and last tag lt/htmlgt)
• ltheadgt - Defines header area of the page, not
  viewed by the Web browser. (lt/headgt closing tag)
• lttitlegt - Used by Web searching programs to name
  your Web page. (lt/titlegt closing tag)
• ltbodygt - Determines content that will be viewed
  by your browser. (lt/bodygt closing tag)

12
Let us Begin Together
Now that you have your text editor program
open lets get going. First lets type our
first tag, do you remember what it
is? Second lets put our heading tag in place.
13
Third please title your document. Next, let us
get to the body/the meat of our page. Type a
simple message here. Lastly lets close every
all of our tags and save the page. Then lets
amaze one another by using our viewer to see what
it looks like.
14
The Message
The following tags can be used to emphasize your
message. Lets edit our previous document by
using some of these tags. Dont forget to close
the tags. lth1gt - Actually h1 h6 are used to
change the size of default text h1
is the largest and h6 is the smallest. (lt/h1gt is
the closing) ltbgt - B is for bold (lt/bgt is the
closing) ltIgt - I is for italicized text (lt/Igt is
the closing) ltugt - U is for underlining (lt/ugt is
the closing) Lets save again and view our page.
Amazing, your doing a great job.
15
Would you like some Color?
You can use the following tags to colorize
the background or text or links. ltbody
bgcolorffcc33 bgcolor Background text0
00000 text
Text Link0033ff link
Hyperlinks vlink6600cc
vlink Visited links Alinkffffffgt
alink Active links (lt/bodygt is the
closing) Let us go and change some colors, save
and then view. Your on fire!!!!!!
16
Special Items of Interest
Hyper linking Used to connect to other
documents or other
web pages. lta hrefhttp//www.yahoo.comgt
Yahoolt/agt lta href gt creates the active
hyperlink for the text outside of the quotation
marks (ie. Yahoo) lt/agt is the closing tag for the
link
17
Special Item of Interest II
Images - ltimg src gt This
simple tag led to the explosion of the Internet.
Let learn to use it shall we?

Find an image from the web, right click and copy
it to your My Documents folder. Remember what
you named it.
Now somewhere in our practice page lets place our
image. ltimg srcmydocuments/whatInamedit.jpggt G
o ahead take a look, Did it work, why not, lets
figure it out.
18
Conclusion
Youve learned the basics of HTML. This
knowledge will help you understand what you are
seeing on the web and what you are not seeing,
the language that lets your pages happen.