01 html tag mark-up2011 slideshow

7/31/2019 01 HTML Tag Mark-Up2011 SlideShow

1/19

HTML Tag Mark-Up

How Tags are used to form your

Web Page


2/19

What is HTML?

HTML stands for

HyperText Mark-upLanguage

It is the basic set ofrules that web

browsers use to

interpret and display

internet documents

Tag Mark-up Sheet
http://localhost/var/www/apps/conversion/current/tmp/scratch18912/03_Tag_Mark-up_(Student_Handout).dochttp://localhost/var/www/apps/conversion/current/tmp/scratch18912/03_Tag_Mark-up_(Student_Handout).dochttp://localhost/var/www/apps/conversion/current/tmp/scratch18912/03_Tag_Mark-up_(Student_Handout).dochttp://localhost/var/www/apps/conversion/current/tmp/scratch18912/03_Tag_Mark-up_(Student_Handout).doc


3/19

Elements

Web Pages are made up of elements or

distinct parts

The Head

Usually at the top of the page Can hold lots of non-display information like styles)

The Title

Found in the Head

appears at the top of the window, in the colored bar The Body

Where the text, pictures, tables, etc., that make up the page

are located


4/19

Whats in Your Head?

The Head is where you put information

about your page or things, like styles,

that affect your page, but shouldnt be

displayed.

can be used to entertext that will not be displayed

information tags help identify

specifics about your page that mighthelp a search engine find your site

Sample Page 1
http://localhost/var/www/apps/conversion/current/tmp/scratch18912/01ppt_Example_1_basic_page.htmlhttp://localhost/var/www/apps/conversion/current/tmp/scratch18912/01ppt_Example_1_basic_page.html


5/19

Tags

Tags mark the beginning and end of aparticular element.

They (almost) always bracket the

element

Tag Example

Here is the BODY


6/19

Elements

Elements are parts of the document that

are distinguished by tags

Mark-Up Assignment

Here is the BODY

Closed Elemets

have a beginning

and end

Everything

between them iscalled the

content of the

element


7/19

Setting up Your Sheet

(your name here)s Mark Up Assignment

< >Mark up this page with HTML < >

< >To be successful at this assignment

your name in the title element above the head. < >


8/19

The Body

This is where most of

the page is

It can include

Tables

Lists

Quotes

Pictures

Just about anything

else

See it
http://localhost/var/www/apps/conversion/current/tmp/scratch18912/01ppt_Body_Elements_Example_4.htmlhttp://localhost/var/www/apps/conversion/current/tmp/scratch18912/01ppt_Body_Elements_Example_4.html


9/19

Spaces and Returns

HTML only

recognizes ONE

space between

each word The

tag will

separate with a

space

The
tag

gives a hard

return

Roses are redViolets are blue

If I can do thisThen so can you

Roses are red Violets are blue If Ican do this Then so can you

What you type:

What you see:


10/19

Spaces and Returns

HTML only

recognizes ONE

space between

each word The

tag will

separate with a

space

The
tag

gives a hard

return

Roses are red
Violets are blue

If I can do this
Then so can your

Roses are redViolets are blue

If I can do thisThen so can you

What you type:

What you see:


11/19

Heading Sizes

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Headings are notnumbered as theygo down the page

The through tags refer to

the size of theheading

AnyHeading tagcan be usedanywhereon thepage
http://localhost/var/www/apps/conversion/current/tmp/scratch18912/01ppt_Heading_sizes_Example_3.htmlhttp://localhost/var/www/apps/conversion/current/tmp/scratch18912/01ppt_Heading_sizes_Example_3.html


12/19

Add the Heading Tags

< title >(your name here)s Mark Up Assignment

< >Mark Up this Page with Hyper Text

Mark-up Language < >

< >Other Things you May Want to Do< >

< >Todays Assignment< >


13/19

Add the Heading Tags

(your name here)s Mark Up Assignment

< h1 >Mark Up this Page with HTML < /h1 >

< h3 >Other Things you May Want to Do< /h3 >

< h3 >Todays Assignment< /h3 >


14/19

Paragraphs

Paragraphs are

separated by

space from what

comes before andafter

They are not, by

default, indented

Here is some interesting

information about this.

On the other hand, there is

this information here.

Here is some interesting

information about this.

On the other hand, there is thisinformation here.


15/19

Add Paragraph Tags

< >To be successful at this assignment you will have to be able to figureout what tags will allow you to do the things you want to do. You willneed to be able to do several things < >

< >You may also want to do some other, extra things like making lists withbullets or numbers, or you may want to embed a piece of music in yourpage. Another thing you may want to do is use an extended quote. Allof these elements can be done relatively easily with HTML< >

< >What you need to do today is label this page with the tags that wouldmake a beb page look like this. We will be discussig the different tags.If you need help, be sure that you ask an appropriate question.< >

< >This assignmebnt is worth 68 points. For < > 20 bonus Points< >you can take this document and make it into a web page usingNotepad. Save the document in your folder and check your work byopenig the file with Firefox. You will need to put your name in the titleelement above the head element.< >

/b

p

/p

p

p

p

/p

/p

/p

b


16/19

Un-Ordered List

These are Bulletedlists

The list begins with

It ends with

They dont have aparticular sequence

each thing in thelist gets list item tags

Make paragraphs Use tables that may or may not

have borders

Make links Insert pictures

Make paragraphsUse tables that may or may nothave bordersMake linksInstert pictures

What you type:

What you see:


17/19

Ordered Lists

1. stands for

Ordered List

2. Signal the end of

the list 3. Each element still

gets the &

tags.

4. The browser adds

the numbers (orletters or Roman numerals)

1. Come to class on time2. Get out your materials for class3. Be ready to participate4. Raise your hand if you have a

comment or question

See it

Come to class on time Get out your materials for

class

Be ready to participate Raise your hand if you have a

comment or question

What you type:

What you see:
http://localhost/var/www/apps/conversion/current/tmp/scratch18912/Example_5.htmlhttp://localhost/var/www/apps/conversion/current/tmp/scratch18912/Example_5.html


18/19

Other Formats

This is Bold

This is Italicized

This is Underlined

Here is a line

There will be a

space before this

This is Bold

This is Italicized

This is Underlined

Here is a line

There will be a space

before this

See it
http://localhost/var/www/apps/conversion/current/tmp/scratch18912/Formating_tricks.htmlhttp://localhost/var/www/apps/conversion/current/tmp/scratch18912/Formating_tricks.html


19/19

What you need to do:

Fill in all the tags that are indicated on the

Tag Mark-Up handout.

Go to a computer and create your own

Basic Page using the exact text

presented in the folders at the computer.

Save the Basic Page into your File Folder

Each person must create their own,

individual, Basic Page
http://localhost/var/www/apps/conversion/current/tmp/scratch18912/Tag_Mark-up_(Student_Handout).dochttp://localhost/var/www/apps/conversion/current/tmp/scratch18912/Tag_Mark-up_(Student_Handout).dochttp://localhost/var/www/apps/conversion/current/tmp/scratch18912/Tag_Mark-up_(Student_Handout).dochttp://localhost/var/www/apps/conversion/current/tmp/scratch18912/Tag_Mark-up_(Student_Handout).doc

01 html tag mark-up2011 slideshow

Documents