Using Html

Using HtmlUsing HtmlBasics, Text and Links

ObjectivesObjectives

Develop a web page using HTML codes according to specifications and verify that it works prior to submitting– Create different types of links

Interpret the meaning of html tags and attributes

Identify common html tags, the proper syntax, and their purpose – Recognize and create special characters– Explain the difference between tags and

attributes

HTMLHTML

Not a programming language Hypertext Markup Language – text

based formatting system for the web XHTML – latest version of HTML Platform independent

HTMLHTML

Use a plain text editor to type your HTML text:

Save your HTML page To see your page

Get readyGet ready

www.birdnest.org

HTML TagsHTML Tags

Start with a “<“ and end with “>” Usually in pairs. To view HTML tags: right click and

“View Source”

http://www.northwest.com/

File StructureFile Structure tags: identify

your file as an HTML file.– They begin and end every HTML

document tags: indicate

information about the document tags: appear

on browser title bar - surround text

HTML TagsHTML Tags

Properly nest HTML tags

XHTMLXHTML

To make your HTML document compatible with XHTML – Use the traditional version of <!

DCOCTYPE> – Extend the <html> tag

Copy the <!DOCTYPE> and <html> found at the bottom of page 17 into the top of your web page

Sample 3Sample 3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Traditional//EN" "DTD/xhtml-trasitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang=en" lang="en">

<head><Title>Your Title appears here</title></head><body>What happens to

extra lines?</body></html>

TipsTips Extra spaces

– Use the Under_score or

– Capital letters to separate words: UnderScore Use spaces in the document <html xmlns="http://www.w3.org/1999/xhtml"

xml:lang=en" lang="en">

Is interpreted the same as one line<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=en"

lang="en">

The Initial HTML File in The Initial HTML File in Internet ExplorerInternet Explorer

the title you entered between the <title> tags

address box indicates the name and location of the HTML file

page content will appear here

You should occasionally view the formatted page with different Web browsers to check compatibility, verify that there are no syntax errors, or other problems.

HTML SyntaxHTML Syntax

Tags: control the appearance of the document content– the name of the HTML tag– attributes are– document content

Try this and see what happensTry this and see what happens<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang=“en" lang="en">

<head><Title>Look at this text</title></head><body>This shows what happens using the <big>big tag.</big>This shows bold text versus strong text

 plus use of the line breakNext lets look at the italics tag the emphasis tag the

<tt>teletype tag</tt> and finally the small tag </body></html>

Special CharactersSpecial Characters

Start with and end with

What do these represent?What do these represent?

& < > © &plusmin; Table 3.1 page 27 in your book has a

list

Math and Science TagsMath and Science Tags

 , superscript , subscript

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""DTD/xhtml1 -transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><title> Using more tags </title></head>

<body><big>Sometimes special symbols are needed. For example: © to remind you not to make illegal copies or perhaps to make a footnote 1 so you won't be accused of plagiarism. </big></body></html>

Try this and see if your page looks like the next slide

Meta tagsMeta tags

Information not defined by other tags and attributes

Special instructions for Web server

<head><title> Meta Tags </title><meta name ="keywords" contents=" CSCI 101, Introduction to Computers, General Education Courses"/><meta name ="description" contents="a sample file with meta tags"/><meta name ="author" contents="Dr. Chlotia Garrison"/><meta http-equiv="refresh" content="5; url=http://www.headhunter.net" /></head>

<body>

The page should change in a few seconds

</body></html>

Sample with meta tags highlighted

Hypertext LinksHypertext Links

How do we create links like the ones in the assignment?

<head><title> Linking Examples </title></head>

<body><big><a name="top" id="top"></a>Of course you can link to other web pages <a href="http://www.w3.org/">The W3C site</a> that develops protocols.

You can also link to send e-mail to the instructor: <a

href="mailto:[email protected]"> Click here</a>This image was inserted just for effect. We will learn how to do this later.

<img src="smileyface.jpg"/><h1>Also you can link to other places within the same

page.</h1>Use this link to go to the top of the page. <a href="#top">Click here</a>

</big></body></html>

Linking to Other FilesLinking to Other Files

<a href=“FileOnSameComputer.htm”> click here</a> to open the page

<a href=“dir/Filename.htm”> click here</a> to open a file in a different directory from your web page

Anchor Tags <a>Anchor Tags <a>The <a> with the “name” attribute

creates an anchor – Marks text or image so you can link to

it – The id attribute is used with name

Anchored text is the destination of a link; it is not the text you click on

How an Anchor WorksHow an Anchor Works

anchor

hypertext links

When the user clicks one of the hypertext links, the link will go directly to that section (anchor, which is the destination of the link) within the web page.

Displaying Linked Documents Displaying Linked Documents in a New Windowin a New Window

A Web page is displayed in the main browser window by default.

To open in a new browser window, use the

<a href=“url

>Hypertext</a>

Exercise 1:What will this display?Exercise 1:What will this display?<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""DTD/xhtml1 -transitional.dtd">


<head><title> Exercise 1 </title></head>

<body><h1>Can you determine how this will look?</h1> You should be able to follow the clicks <a

href="http://msn.com">Microsoft's home page</a>Have you had enough of this today: H2O

?</body></html>

Exercise 2: How would you write this using HTMLExercise 2: How would you write this using HTML??

Test 1 CommentsTest 1 Comments Objectives:

7.2 Recognize and identify components of the motherboard and their purpose

7.9 Identify the first computer programmer, first person to build a computer

7.10 Recall the history of the computers: before 1950, Internet, personal computers

9.1 Identify and apply the computer’s method of data representation

9.2 Add binary numbers9.3 Distinguish between encoding schemes and

numbering systems and their purpose9.4 Determine the alphanumeric equivalent of an

ASCII expression

Using Html

Documents

Transcript of Using Html