Download ppt - 1 HTML Basic HTML. 2 Outline Goal Objectives Introduction Design of Web pages Markup language Develop Web pages Document structure HTML tags Document

1

HTMLHTML

Basic HTML

2

OutlineOutline

Goal Objectives Introduction Design of Web pages Markup language Develop Web pages Document structure HTML tags Document and tags Text and tags

Links/anchors and tags Base tag Meta data and tags Special characters Building Web pages Hierarchy of Web pages Tutorials FAQs Summary Exercises/Homework

3

GoalGoal

This chapter covers the basics of the markup

language. It also covers the tags of HTML

4.0 that apply to text, links, meta data, and

special characters.

4

ObjectivesObjectives

Introduction Design of Web pages Markup language HTML tags Hyperlinks Special characters HTML tags for document, text, links, meta data,

and special characters

5

IntroductionIntroduction

Web pages are written using HTML Two key concepts of HTML are hypertext (links

Web pages together) and markup (embeds special tags in Web pages to structure and format them)

A Web page, regardless of how complex it looks, can have a maximum of eleven elements. They are text, hyperlinks, color, lists, images, image maps, sound, video, forms, frames, and tables

HTML supports all the MIME extensions

6

Design of Web pagesDesign of Web pages

A Web page is content and design. The design should enhance content presentation

Page design is related to the goal of the page whether it is to sell a product or convey information

When designing a Web page, Web authors should take advantage of HTML power such as links, colors, etc.

7

Markup languageMarkup language

HTML Markup language uses tags HTML tags convert Web page design into an actual

Web page that can be viewed in a browser HTML tags surround page content to format it Browsers render HTML tags and display their results The generic format of an HTML tag is

<tag_name> content goes here </tag_name> Many HTML tags have attributes to provide finer

control of the tag formatting results

8

Developing HTML documentsDeveloping HTML documents

Bottom-up approach: write HTML code in a text editor, and then view the Web page in a browser

Steps: Open a text editor Enter text and tags Save file as xxx.html Open the file in a

browser to view the Web page

Repeat above steps if you need to debug the page

Top-down approach: build the Web page elements using an HTML editor, and then view the HTML code later

Steps: Open an HTML editor Add HTML elements using

the editor’s GUI Save the automatically

generated HTML code in a file as xxx.html

Exit the editor and view the page

9

HTML document structureHTML document structure

Three parts make a well-structured HTML document: header, body, and footer

The header includes the <HTML>, <HEAD> and <TITLE> tags

The body includes the <BODY> tagThe footer includes the <ADDRESS> tagHTML tags do not have to appear in caps

10

HTML tags and categoriesHTML tags and categories

HTML tags may have a matching start and end tags; e.g. <H1>…</H1>. Other tags may not close; e.g. <HR>

HTML tags may be nested according to this rule: first open, last closed; or last open, first closed; e.g. <H1> …</H1>

The broad categories of HTML tags are structure, text, hyperlinks, lists, colors, images, image maps, sound, video, forms, frames, and tables

11

Document structure tagsDocument structure tags

The basic structure of an HTML file is:<HTML>

<HEAD><TITLE> Title goes here </TITLE></HEAD><BODY>

Body and content go here</BODY><ADDRESS>

footer goes here</ADDRESS></BODY>

</HTML> (Cont’d)

12

Document structure tagsDocument structure tags Example 7.1 Document

structure tags<HTML><HEAD><TITLE>My Web page Template</TITLE></HEAD><BODY>Page contents go here<ADDRESS>Copyright © 2000 Abe Zeid please e-mail me at [email protected] Revised - January 2000 </ADDRESS></BODY></HTML>

13

Text and tagsText and tags

Text, in general, consists of headings, paragraphs, and words. HTML has tags to format each

Heading tags are <H1> - <H6>, with <H1> providing the largest size text, and <H6> providing the smallest size. All <H> tags have the ALIGN attribute

The tag is the only tag for paragraphs. It has the ALIGN attribute

The tags for words are , , , , , <CENTER>, <HR>, <BLOCKQUOTE>, <BIG>, <CITE>, <CODE>, , <KBD>, , and 

The has the attributes COLOR and SIZE The <HR> has the attributes ALIGN, COLOR, NOSHADE, SIZE,

and WIDTH (Cont’d)

14

Text and tagsText and tags Example 7.2 Heading tags<HTML><HEAD><TITLE>Heading tags Web page</TITLE></HEAD><BODY><H1>This text is size H1</H1> <H2 ALIGN = "center">This text is centered and size H2</H2> <H3 ALIGN = "right">This text is right justified and size H3</H3> <H4>This text is size H4</H4> <H5>This text is size H5</H5> <H6>This text is size H6</H6></BODY></HTML> (Cont’d)

15

Text and tagsText and tags Example 7.3 The tag<HTML><HEAD><TITLE>Paragraph tag Web page</TITLE></HEAD><BODY>This page illustrates how to use the paragraph tag to create paragraphs.

When surfers browse the Web, they are accessing and reading home Web pages and pages that are linked to them. These pages are written using a scripting language called HTML (HyperText Mark up Language). We here begin covering HTML and page layout, organization and design.

The markup language is a method to embed special tags that describe the structure as well as the formatting of a document. The markup language allows the non-sequential way of reading HTML documents. The simplicity and power of HTML let anyone create Web documents. Making Web documents is easy and straight forward. The markup nature of HTML is what is behind the incredible breadth and reach of the Web

</BODY></HTML> (Cont’d)

16

Text and tagsText and tags Example 7.4 Word tags<HTML><HEAD><TITLE>Formatting tags Web page</TITLE></HEAD><BODY>This text uses the Bold tag <BIG>This text uses the BIG tag</BIG> <BLOCKQUOTE>This text uses the BLOCKQUOT tag</BLOCKQUOTE> <CENTER>This text uses the CENTER tag</CENTER> <CITE>This text uses the CITE tag</CITE> <CODE>This text uses the CODE tag</CODE> This text uses the EM tag This text uses the FONT tag <HR SIZE= 5 WIDTH=50% ALIGN="center" NOSHADE>This text uses the Italic tag <KBD>This text uses the KBD tag</KBD> This text uses the SMALL tag <STRIKE>This text uses the STRIKE tag</STRIKE> This text uses the STRONG tag This text uses the Underline tag </BODY></HTML>

17

Links and tagsLinks and tags The <A> tag creates hyperlinks between documents, figure

7.5, (known as interdocument links) and anchors within documents (known as intradocument links)

The attributes of the <A> tag are HREF, TITLE, NAME, CHARSET, TYPE, HREFLANG, and REL

(Cont’d)

18

Links and tagsLinks and tags Example 7.5 The <A> tag <HTML><HEAD><TITLE>Hyperlink tag Web page</TITLE></HEAD><BODY><H2>This Web page uses the <A> tag with some of its attributes</H2><A HREF="http://www.neu.edu">This link uses a Web server</A> <A HREF=mailto:[email protected]>This link uses the mailto: protocol</A> <A HREF="ftp://ftp.netscape.com">This link uses the ftp: protocol</A> <A HREF="telnet://elvis.coe.neu.edu">This link uses the telnet: protocol</A> <A HREF="http://www.neu.edu" TITLE="Northeastern Univ. Web site">This link

has a title to illustrate using the TITLE attribute</A> <A HREF="http://www.w3.org" CHARSET="ISO-8859-1">This link uses the

CHARSET attribute</A> <A HREF="example6.4.html">This link uses the relative path of a local

file</A> <A HREF="file://c:/windows/desktop/example6.4.html">This link uses the absolute

path of a local file</A> </BODY></HTML> (figure 7.7)

(Cont’d)

19

Figure 7.7 Uses of the <A> tag

20

AnchorsAnchors

Anchors are links created within the same Web page

Anchors are used to create a table of contents for a Web page, or to specify a given location in a Web page

Anchors are created via using the <A> tag and its HREF and NAME attributes

Some URLs use anchors in this names

(Cont’d)

21

AnchorsAnchors Example 7.6 Anchors (shortened) (figure 7.8)<HTML><HEAD><TITLE>Anchors Web page</TITLE></HEAD><BODY><! Define a destination tag><A NAME="Contents">Table of contents</A> <! Define source tags><A HREF="#Section1">Document structure tags</A> <A HREF="#Section2">Text and text tags</A> <A HREF="#Section3">Links and link tags</A> <A HREF="#Section4">Developing HTML documents</A> <! Define destination tag for Section1 source tag><A NAME="Section1">Document structure tags A well-structured HTML document ... <! Define a source tag for the first destination tag on the top><A HREF="#Contents">Return to table of contents</A><! Define destination tag for Section2 source tag><A NAME="Section2”>Text and text tags One of the main elements of a Web ... … </BODY></HTML> (cont’d)

22Figure 7.8 Anchors

23

<BASE> tag<BASE> tag

The <BASE> tag allows Web authors to specify a reference URL (path) from which all relative URLs are measured from

The <BASE> tag must be used in the <HEAD> section Example:<HTML><HEAD><TITLE>The BASE tag Web page</TITLE><! Specify the folder (path) where the HTML files of the <A> tags shown

below reside><BASE HREF = “file://c:/windows/desktop/”></HEAD><BODY><A HREF = “myFileOne.html”>Check our first product</A><A HREF = “myFileTwo.html”>Check our second product</A><A HREF = “myFileThree.html”>Check our thirdproduct</A></BODY></HTML>

24

Meta data and tagsMeta data and tags Meta data refers to data that is not part of the content of an

HTML document Meta data describes Web pages to search engines. Search engines use meta data to index and rank page hits in a

given search The <META> tag declares meta data. It must be used in the

<HEAD> section. Example:<META NAME = “description” CONTENT = “Everything you

would want to know about using HTML”><META NAME = “keywords” CONTENT = “HTML 4.0, tags,

attributes, editors”>

25

Special charactersSpecial characters

Special characters include the Latin characters and and Greek symbols

These characters are represented by certain HTML numeric code. The code begins with &#, followed by a number, and ends with ;

There are three character sets: ISO 8859-1 (Latin-1) (figure 7.9), Greek letters (figure 7.10), and internationalization characters (figure 7.11)

(Cont’d)

26Figure 7.9 ISO Latin-1 set Figure 7.10 ISO Greek

characters

27

Figure 7.11 ISO internationalization set

28

Building Web pagesBuilding Web pages

Here are some rules to writing Web pages Provide excellent content and look Keep page design and layout simple/easy to follow Display most important information at top of page Do not cram the page with too much information.

Have enough white space in the page Keep page short (one screen long) Choose the right page title and headings Divide the page into paragraphs and lists

29

Hierarchy of Web pagesHierarchy of Web pages

A Web site consists of multiple Web pages with a home (index) page that have links to the other pages

Web authors usually develop structures for their Web sites

Web authors may design their structures on a piece of paper

The most natural structure is a Web (figure 7.12)

30

Figure 7.12 A Web structure

31

TutorialsTutorialsTutorial 7.14.1 A Web page withhyperlinks (top tags are not shown)<BODY><H2><CENTER>Welcome to my Web page</CENTER></H2><CENTER>Name goes here</CENTER><CENTER>Address goes here</CENTER><CENTER>phone number goes

here</CENTER>Let me introduce myself. I have mastered HTML. I have been working with many people. This is my personal Web page, in case you want to know more about me.<A HREF="resume.html">Resume</A> <A HREF="professional.html">Professional</A> <A HREF="personal.html">Personal</A> <ADDRESS>Copyright © 2000 Abe Zeid <A HREF="mailto:[email protected]">Please e-mail me</A> Revised - January 2000 </ADDRESS></BODY></HTML>

32

TutorialsTutorialsTutorial 7.14.2 A Web pageWith anchors (shortened)<A NAME="Contents">Table of contents</A> <! Define source tags><A HREF="#resume">Resume</A> <A HREF="#professional">Professional</A> <A HREF="#personal">Personal</A> <! Define destination tag for resume source tag><A NAME="resume">RESUME Education: Education credentials go here Experience: Current and previous employment go here Skills: computer, software, and other skills go here <! Define a source tag for the first destination tag on the top><A HREF="#Contents">Return to table of contents</A>

33

TutorialsTutorials Tutorial 7.14.3 ISOcharacter sets<HTML><HEAD><TITLE>Using HTML character sets</TITLE></HEAD><BODY><H2><CENTER>Using ISO 8859-1 (Latin-1) and

Greek character sets</CENTER></H2>54>3025<10You may want to consider joiningthe πτΣ (Pi Tau Sigma)and τβπ (Tau Beta Pi) honor societies.<ADDRESS>Copyright © 2000 Abe Zeid <A HREF="mailto:[email protected]">Please e-mail me</A> Revised - January 2000 </ADDRESS></BODY></HTML>

34

TutorialsTutorialsTutorial 6.11.4 Usinghyperlinks as footers (shortened)<A HREF="resume.html">Resume</A> <A HREF="professional.html">Professional</A> <A HREF="personal.html">Personal</A> <! Add hyperlink footer><! Use this style><CENTER>[<A HREF="tutorial6.4.html">Home Page</A>][<A HREF="resume.html">Resume</A>][<A HREF="professional.html">Professional</A>][<A HREF="personal.html">Personal</A>]</CENTER><! Or use this style><CENTER>|<A HREF="tutorial6.4.html">Home Page</A>|<A HREF="resume.html">Resume</A>|<A HREF="professional.html">Professional</A>|<A HREF="personal.html">Personal</A>|

35

FAQsFAQs Q: Why is the browser not showing a Web page as it should?

– A: In many cases, this happens because of incorrect use of HTML tags, intentionally or unintentionally. A Web author may forget to close a tag, or the author may make a typo mistake. The author should check the HTML code of the page carefully, until all the mistakes are found and corrected. Sometimes, browsers may help the author find the mistakes. For example, Netscape browser sometimes flashes the HTML tags around the area where a mistake is. This happens only if the author views the HTML code of the page by clicking View => Page Source on the browser window. (Cont’d)

36

FAQsFAQs Q: What is the significance of the index.html (or

index.htm) file, and how can one use it?– A: This is the default file a browser displays if none is

specified during the downloading of a Web site. For example, if a user types www.xxx.com as the URL in the browser URL bar, the browser looks for the file index.html or index.htm and displays it. If this file does not exist, the browser displays some other default file or the directory structure of www.xxx.com. The index.html file can be put to good use. It is usually used when Web sites have many Web pages.

37

SummarySummary– Web pages are written using HTML– The two key concepts behind HTML are hypertext and

markup. Hypertext creates links. Markup formats page– Text or HTML editors can be used to write HTML code– Document structure tags are <HTML>, <HEAD>, <TITLE>,

<BODY>, and <ADDRESS>– Text tags are <H1> - <H6>, , , <CENTER>, ,

, , <HR>, , <BASEFONT>, etc.– The <A> tag creates hyperlinks and anchors. It attributes are

HREF, TITLE, and NAME– The <META> tag helps search engines in indexing– HTML special characters include ISO Latin-1 set

38

ExercisesExercises

Problem 7.6. Use the ISO Latin-1 character set to write this statement in a Web page: Borrowing $5000 @ 10% annual rate costs $500 a year.– Solution strategy: Follow tutorial 7.14.3. Use a

text editor to write and debug the HTML code. Use a browser to display the results

(Cont’d)

39

<HTML><HEAD><TITLE>Using HTML character sets</TITLE></HEAD><BODY><H2><CENTER>Using ISO 8859-1 (Latin-1)character sets</CENTER></H2>Borrowing $5000 @ 10% annualrate costs$500 a year.<ADDRESS>Copyright © 2000 Abe Zeid <A HREF="mailto:[email protected]">Please e-mail me</A> Revised - January 2000 </ADDRESS></BODY></HTML>

40

ProblemsProblems

Problem 7.17 (modified) Use the <BASEFONT> tag in Web page. Change fonts in the Web page relative to it. Hint: use or to increment or decrement the base font size, respectively.– Solution strategy: Use a text editor to write the

HTML code. Use a browser to test it (Cont’d)

41

<HTML><HEAD><TITLE>Using the BASEFONT tag</TITLE></HEAD><BODY><BASEFONT SIZE = 5>This text is size 7 This text is size 6 This text is size 5 This text is size 4 This text is size 3 This text is size 2 This text is size 1</BODY></HTML> (Cont’d)

42