html h yper t ext m arkup l anguage. what is html? it is a programming language that defines the...

HTMLHTML

Hyper

Text

Markup

Language

What is HTML?What is HTML?

It is a programming language thatDefines the format of a World WideWeb (WWW) page.

It is a simple language to learn made up of “TAGS”

Where did HTML Come Where did HTML Come From?From?

Tim Berners-Lee was the original developer

First developed as a simple hypertext language

First developed and used 25 September 1990

History ContinuedHistory Continued

Early problems of HTML, not enough tags could only be used for text.

1993 <img> tag allows for pictures to be placed on the “Web”, the explosion of the World Wide Web begins.

History ContinuedHistory Continued

1995 First official standard HTML 2.0

Earliest HTML format

Earliest HTML webpage

The PresentThe Present

Currently there are many web page creator programs.

Many creators allow “point and click” creation, but youare 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.

Why should I know HTML?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

Uses of HTML in the Uses of HTML in the ClassroomClassroom

Basic survival – What if you don’t have an editor/creator program?

Problem solving exercises – Identify errorsConstructivist Theory of education –

Students construct projects for posting to “Web”

Communication with students & parents through the use of web pages.

Are you Ready?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”.

The BeginningThe Beginning

What program to use?Notepad – Text editorMicrosoft Word – Converts text to Hypertext, but you lose out on learning the “tags”

So for our purposes today we will use Notepador on some computers Wordpad.

Our First TagsOur First Tags<html> - Declares that this will be HTML Web

Page and can be viewed by a Web browser. (always the first tag and last tag </html>)

<head> - Defines header area of the page, not viewed by the Web browser. (</head> closing tag)

<title> - Used by Web searching programs to name your Web page. (</title> closing tag)

<body> - Determines content that will be viewed by your browser. (</body> closing tag)

Let us Begin TogetherLet us Begin TogetherNow that you have your text editor program openlet’s get going.

First let’s type our first tag,

do you remember what it is?

Second let’s put our heading tag in place.

Third please title your document.

Next, let us get to the body/the meat of our page. Type a simple message here.

Lastly – let’s close every all of our tags and save the page. Then let’s amaze one another by using our viewer to see what it looks like.

The Message The Message The following tags can be used to emphasize your message. Let’sedit our previous document by using some of these tags. Don’t forget to close the tags.

<h1> - Actually h1 – h6 are used to change the size of default text h1 is the largest and h6 is the smallest. (</h1> is the closing)

<b> - B is for bold (</b> is the closing)

<I> - I is for italicized text (</I> is the closing)

<u> - U is for underlining (</u> is the closing)

Let’s save again and view our page. Amazing, your doing a great job.

Would you like some Color?You can use the following tags to colorize thebackground or text or links.

<body bgcolor=“#ffcc33” bgcolor= Backgroundtext=“#000000” text = TextLink=“#0033ff” link = Hyperlinksvlink=“#6600cc” vlink= Visited linksAlink=“#ffffff”> alink= Active links

(</body> is the closing)Let us go and change some colors, save and then view. Your on fire!!!!!!

Special Items of InterestSpecial Items of InterestHyper linking – Used to connect to other documents or other web pages.

<a href=“http://www.yahoo.com”> Yahoo</a>

<a href=“ “ > creates the active hyperlink for the text outside of the quotation marks (ie. Yahoo)</a> is the closing tag for the link

Special Item of Interest IISpecial Item of Interest IIImages - <img src=“ “> 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 yourMy Documents folder. Remember what you named it.

Now somewhere in our practice page lets place our image.<img src=“mydocuments/whatInamedit.jpg”>

Go ahead take a look, Did it work, why not, lets figureit out.

ConclusionConclusionYou’ve learned the basics of HTML.

This knowledge will help you understand whatyou are seeing on the web and what you are not seeing, the language that lets your pages happen.