11

XP

New Perspectives on New Perspectives on Creating Web Pages Creating Web Pages

with HTMLwith HTML

Tutorial 1: Developing a Basic Web Tutorial 1: Developing a Basic Web PagePage

22

XPIntroducing the World Wide WebIntroducing the World Wide Web

In order for computers to share resources In order for computers to share resources efficiently, they can be linked together in efficiently, they can be linked together in one of the following structured networks:one of the following structured networks: linked within a local area network (LAN)linked within a local area network (LAN) Metropolitan area network (MAN)Metropolitan area network (MAN) linked across a wide area network (WAN)linked across a wide area network (WAN) Personal area network (PAN)Personal area network (PAN) wirelesswireless

33

XPThe InternetThe Internet

““network of networksnetwork of networks” - ” - InternetInternet..

1989 – WWW – electronic files1989 – WWW – electronic files

The Internet - millions of interconnected The Internet - millions of interconnected computers - enable users to communicate computers - enable users to communicate and share information.and share information.

Hypertext documents - WWWHypertext documents - WWW

Web serverWeb server

Web browserWeb browser

44

XPStructure of the InternetStructure of the Internet

This figure shows the physical structure of the Internet, which uses fiber-optic cables, This figure shows the physical structure of the Internet, which uses fiber-optic cables, satellites, phone lines, and other telecommunications media to send data back and forth.satellites, phone lines, and other telecommunications media to send data back and forth.

55

XPLinear Versus Hypertext Linear Versus Hypertext DocumentsDocuments

This figure shows how topics can be related in a hypertext fashion, This figure shows how topics can be related in a hypertext fashion, as opposed to a linear fashion.as opposed to a linear fashion.

66

XPHypertext Documents Hypertext Documents ContinuedContinued

The key to hypertext - links- move from The key to hypertext - links- move from one topic to another.one topic to another. a link can open a document on a computer a link can open a document on a computer

anywhere in the world anywhere in the world

Documents on the Web - as Documents on the Web - as Web pagesWeb pages..A Web browser can either be text-based, A Web browser can either be text-based, or graphical.or graphical. Lynx, Explorer, Navigator, Opera, SafariLynx, Explorer, Navigator, Opera, Safari

77

XPUsing a Browser to View a Web Using a Browser to View a Web Document on a ServerDocument on a Server

This figure shows to view web pages, the user runs a Web browser, a software program that retrieves the page and displays it.

88

XPWeb Page with Interesting Web Page with Interesting Fonts, Graphics, and LayoutFonts, Graphics, and Layout

This figure shows a Web page is not only a source of information, it can also be a work of art.

links

graphic image

The Web designer has a great deal of control over the format of the page.

interesting fonts

99

XPHTML: The Language of the HTML: The Language of the WebWeb

Web pages - text files- Web pages - text files- Hypertext Markup Hypertext Markup LanguageLanguage - - HTMLHTML..A markup language - describe format of A markup language - describe format of documents.documents.Standard Generalized Markup Language Standard Generalized Markup Language (SGML)(SGML), a language used for large-scale , a language used for large-scale documents.documents.SGML - cumbersome and difficult- HTML was SGML - cumbersome and difficult- HTML was created.created.

1010

XPHypertext Markup Language Hypertext Markup Language (HTML)(HTML)

displayed across different operating displayed across different operating systems - portability.systems - portability.

nonprogrammers can learn to use it.nonprogrammers can learn to use it.

HTML describes the format of Web pages HTML describes the format of Web pages through the use of tags.through the use of tags. it’s the job of the Web browser to interpret it’s the job of the Web browser to interpret

these tags and render the text accordinglythese tags and render the text accordingly

1111

XPHypertext Markup Hypertext Markup Language (HTML) ContinuedLanguage (HTML) Continued

HTML - of rules - HTML - of rules - syntaxsyntax.. syntaxsyntax - set of standards or specifications - set of standards or specifications

developed by a consortium of Web developed by a consortium of Web developers, programmers, and authors called developers, programmers, and authors called the the World Wide Web Consortium (WC3)World Wide Web Consortium (WC3)

HTML extensionsHTML extensions

1212

XPWeb DevelopmentWeb Development

Web designers - determine - browsers and Web designers - determine - browsers and browser versions support their web pages.browser versions support their web pages.

In the future, Web development is focusing more In the future, Web development is focusing more on on XML (Extensible Markup Language)XML (Extensible Markup Language) and and XHTML (Extensible HyperText Markup XHTML (Extensible HyperText Markup Language)Language) for developing document content. for developing document content. XML - same functionality as HTML, but with greater XML - same functionality as HTML, but with greater

flexibilityflexibility

1313

XPTools for Creating HTML Tools for Creating HTML DocumentsDocuments

HTML documents - text files, which a text editor HTML documents - text files, which a text editor such as Windows NotePad can be used to create.such as Windows NotePad can be used to create.

You can also use an HTML converter or an HTML You can also use an HTML converter or an HTML editor.editor. an HTML converter like Microsoft Word takes text an HTML converter like Microsoft Word takes text

in one format and converts it to HTML codein one format and converts it to HTML code an HTML editor helps you create an HTML file by an HTML editor helps you create an HTML file by

inserting HTML codes for you as you workinserting HTML codes for you as you work

1414

XPCreating an HTML DocumentCreating an HTML Document

heading 1

image

horizontal lineparagraph

list

bold and italic text

heading 3

It’s always a good idea to plan the appearance of your Web page before you start writing code.

1515

XPHTML SyntaxHTML Syntax

TagsTags - HTML codes - control the - HTML codes - control the appearance of the document content.appearance of the document content. tagtag is the name of the HTML tag is the name of the HTML tag attributesattributes are properties of the tag are properties of the tag document contentdocument content is actual content that is actual content that

appears in the Web pageappears in the Web page

1616

XPHTML TagsHTML Tags

Tags can be one-sided or two-sided.Tags can be one-sided or two-sided. two-sided tags contain an opening tag two-sided tags contain an opening tag <b><b> that tells that tells

the browser to turn on a feature and apply it to the the browser to turn on a feature and apply it to the contact that follows, and a closing tag contact that follows, and a closing tag </b></b> that turns that turns off the featureoff the feature

one-sided tags are used to insert noncharacter data one-sided tags are used to insert noncharacter data into the Web page, such as a graphic image or video into the Web page, such as a graphic image or video clip clip <tag attribute><tag attribute>

Tags are not case sensitive. The current Tags are not case sensitive. The current standard is to display all tags in lowercase standard is to display all tags in lowercase letters.letters.

1717

XPInterpretation of the Interpretation of the <H1><H1> tag by tag by Different BrowsersDifferent Browsers

This figure shows how three different browsers might interpret a line of HTML code.

1818

XPInitial HTML Tags in NotepadInitial HTML Tags in Notepad

Your text editor may not display the file extension in the title bar. This is okay.

<title> tag containsthe Web page title

Page content willgo between the<body> tags

<head> tag contains information about the Web page

<html> tag indicates that this file is written in HTML

1919

XPThe 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.

2020

XPCreating Heading TagsCreating Heading Tags

HTML supports six levels of headings, HTML supports six levels of headings, numbered numbered <h1><h1> through through <h6><h6>, with , with <h1> <h1> being the largest and most prominent.being the largest and most prominent.

Headings are always displayed in a bold Headings are always displayed in a bold font.font.

2121

XPSix Heading LevelsSix Heading Levels

This figure illustrates the general appearance of the six heading styles. Your browser might use slightly different fonts and sizes.

2222

XPEntering Heading Tags and Entering Heading Tags and TextText

heading tags

As of HTML 3.2, the heading tag can contain additional attributes, one of which is the alignment attribute.

2323

XPHeadings As They Appear Headings As They Appear in the Browserin the Browser

<h1>

<h2>

<h3>

2424

XPEntering Paragraph TextEntering Paragraph Text

If you are using a test editor like NotePad, the text might not wrap to the next line automatically.

Selecting the Word Wrap command within NotePad will allow you to see all the text on your screen.

2525

XPParagraph Text in the BrowserParagraph Text in the Browser

2626

XPAdding ParagraphsAdding Paragraphs

addingparagraphs

2727

XPThe Paragraphs Displayed The Paragraphs Displayed by the Browserby the Browser

four grading paragraphs are notseparated

Remember: HTML formats text only through the use of tags and ignores such things as extra blank spaces, blank lines, or tabs.

2828

XPThe Grading Text Separated The Grading Text Separated into Paragraphsinto Paragraphs

text is now separated into four

paragraphs

To add space between paragraphs, you use the paragraph tag <p>.

2929

XPCreating ListsCreating Lists

HTML supports three kinds of lists:HTML supports three kinds of lists: an an ordered listordered list - information in a numeric - information in a numeric

orderorder an an unordered list - unordered list - items are not listed in a items are not listed in a

particular order, i.e. bulletsparticular order, i.e. bullets a a definition listdefinition list, which is a list of terms - , which is a list of terms -

followed by a definition line that is typically followed by a definition line that is typically indented slightly to the rightindented slightly to the right

3030

XPEntering an Unordered ListEntering an Unordered List

<ul> unordered list tag

<li> list item tag

3131

XPThe Unordered List in the The Unordered List in the BrowserBrowser

unordered list

An unordered list is a bulleted list.

3232

XPCreating Character TagsCreating Character Tags

A tag - apply to an individual character is A tag - apply to an individual character is called a called a character tag - character tag - two typestwo types logical character taglogical character tag physical character tagphysical character tag

3333

XPCommon Logical Character Common Logical Character TagsTags

This figure lists some common logical character tags.

3434

XPCommon Physical Character Common Physical Character TagsTags

This figure shows examples of how these tags can be displayed in a browser.

3535

XPLogical Character Tags as They Logical Character Tags as They Appear in the BrowserAppear in the Browser

examples of individual

tags

example of combined

tags

3636

XPPhysical Character Tags as Physical Character Tags as They Appear in the BrowserThey Appear in the Browser

Underline text can sometimes be confused with hyperlinked text (which is usually underlined), and for that reason, use of the <u> tag is discouraged.

3737

XPApplying Character TagsApplying Character Tags

Italic <i> </i> and bold <b> </b>

character tags

If you support users with older browsers, you should use a logical tag. Otherwise, use physical tags, which are more common and easier to interpret.

3838

XPThe Effect of the Character The Effect of the Character

Tags Tags in the Browserin the Browser

text formatted with bold and italic

3939

XPInserting a GraphicInserting a Graphic

Images - displayed - two waysImages - displayed - two ways an inline image displays directly on the Web an inline image displays directly on the Web

page - displayed when the page is accessed page - displayed when the page is accessed by a userby a user

an inline image - placed on a separate line in an inline image - placed on a separate line in your HTML code or - placed directly within a your HTML code or - placed directly within a line of textline of text

inline images should be in one of two file inline images should be in one of two file formats: formats: GIF (Graphics Interchange Format)GIF (Graphics Interchange Format) or or JPEG (Joint Photographic Experts JPEG (Joint Photographic Experts Group)Group)

4040

XPInserting a Graphic ContinuedInserting a Graphic Continued

an external image is not displayed with the an external image is not displayed with the Web page, the browser must have a file Web page, the browser must have a file viewer- separate program that the browser viewer- separate program that the browser launches when it encounters an external launches when it encounters an external image fileimage file

external images are represented by an icon external images are represented by an icon that a user clicks to view the imagethat a user clicks to view the image

external images are not limited to GIF or external images are not limited to GIF or JPEG formatsJPEG formats

4141

XPInserting a GraphicInserting a Graphic

Image filedube.jpg

use the <p> tag so you can center the image

4242

XPThe Image File as it Appears The Image File as it Appears in the Browserin the Browser

4343

XPSpecial CharactersSpecial Characters

registered trademark symbol ®registered trademark symbol ® copyright symbol copyright symbol ©©

HTML supports - character symbols - HTML supports - character symbols - identified by a code number or name.identified by a code number or name.

4444

XPSpecial Characters and CodesSpecial Characters and Codes

This figure shows some HTML symbols and the corresponding code numbers or names.

4545

XPSpecial Characters in the Special Characters in the BrowserBrowser

accented é addedto last name

This figure shows an example of the code “Welcome to Mr. Dub&#233’s Web site”, which accented the é in his last name.

4646

XPInserting Horizontal LinesInserting Horizontal Lines

A horizontal line can improve the appearance of A horizontal line can improve the appearance of a Web page.a Web page.<hr align=“align” size=“size” <hr align=“align” size=“size” width=“width” color=“color” noshade>width=“width” color=“color” noshade> alignalign - horizontal alignment - (center, left, or right) - horizontal alignment - (center, left, or right) sizesize - height of the line in pixels or percentage - height of the line in pixels or percentage width width - width of the line in pixels or percentage - width of the line in pixels or percentage color color noshadenoshade - display a solid line - display a solid line

4747

XPDifferent Line StylesDifferent Line Styles

size=12width-100%

size=6width-50%

size=3width-25%

size=1width-10% You can use line

styles to improve the appearance of your

Web page.

<hr align=“center” size=“12” width=“100%”>

<hr align=“center” size=“6” width=“50%”>

<hr align=“center” size=“3” width=“25%”>

<hr align=“center” size=“1” width=“10%”>

4848

XPHorizontal Line Added to the Horizontal Line Added to the PagePage

horizontal line

4949

XPAssign #1Assign #1

Assign: #1 read chapter 1, session 1.1 Assign: #1 read chapter 1, session 1.1 quick check 1-7, pg. 1.09, session 1.2 quick check 1-7, pg. 1.09, session 1.2 quick check 1-6, pg. 1.29, session 1.3 quick check 1-6, pg. 1.29, session 1.3 quick check 1-7, pg. 1.36.quick check 1-7, pg. 1.36.

5050

XPAssign #2Assign #2

Case 1, pg. 1.39-1.41; Case 2, pg. 1.41-Case 1, pg. 1.39-1.41; Case 2, pg. 1.41-1.42 - print code and finished product, 1.42 - print code and finished product, black and white is acceptable. black and white is acceptable.

5151

XPAssign #3Assign #3

Read chapter 2, session 2.1 quick check Read chapter 2, session 2.1 quick check 1-6, pg. 2.10, session 2.2 quick check 1-1-6, pg. 2.10, session 2.2 quick check 1-6, pg. 2.22, session 2.3 quick check 1-6, 6, pg. 2.22, session 2.3 quick check 1-6, pg. 2.32.pg. 2.32.