A Basic Web Page. Chapter 2 Objectives HTML tags and elements Create a simple Web Page XHTML Line...

A Basic Web Page

Chapter 2 Objectives

• HTML tags and elements

• Create a simple Web Page

• XHTML

• Line breaks and Paragraph divisions

• Basic HTML elements

HTML Source Document

• Review Chapter 1– URL in browser instructs PC to request a doc– Server returns the HTML source document for

URL

• HTML source code in doc contains details of what and how to display doc

• The browser reads the instructions and displays on requesting PC

Source document

• All web pages are entirely plain-text documents. Chapter 5 introduces graphics

• Two types of text– Elements– Tags

• These are used to classify contents of document (header, body, title, etc.)

• Special formatting is imparted through the use of tags

Sample

<html><head>

<title>Basic Web Page</title></head><body>

<h1>Welcome to my Web page!</h1></body></html>

Creating a Source Document

– Avoid using any editor that is not plain-text only

– HTML files should end in .htm and not contain any spaces in the file name

– You can open a HTML file by simply dragging the file icon to an open browser window

HTML Code

– Writing and Indenting HTML Code• Use lower case letters for your tags• Indenting your code makes nesting tags easier

HTML, XML, and XHTML

– From HTML to XHTML• HTML implementations are different between browser

manufacturers even though all support a single standard• XHTML has been introduced to supercede HTML and has

stricter rules• HTML tags are not case sensitive, XHTML tags are case

sensitive

– Creating an XHTML Source Document• XHTML documents require an XML declaration at the head

of the document file• These lines comprise a Document Type Definition (DTD)

The <meta> Element

• Meta tags are used to add information about a web page that is invisible to web browsers

• The tags are read by search engines and indexers

• Meta tags are often used to identify keywords and descriptions

Paragraphs and Line Breaks

• The <p> Element– Browsers ignore consecutive whitespace characters – the

<p> tag (paragraph) is used to create a paragraph break on the page

– Good HTML design requires that you use the closing </p> tag, however no browser requires it

– Browsers ignore any tag that is not understood, so if a tag is not performing the function you want, check for misspelling or a missing < or >

• The <br /> Element– The br tag causes an immediate line break on the page– The br has no closing tag, so the XHTML tag has a trailing

forward slash

Headers

• Headers are content tags which select one of size text sizes

• They should be used only for titles and section headers

• h1 is the largest, h6 the smallest

• Proper use of header tags allow a table of contents to be retrieved by just displaying the hx tags

The <em> and <strong> Elements

• em and strong elements are also content tags

• In a browser, they is normally displayed as italics and bold, but this is entirely device dependent

• em and strong are preferred over the i (italic) and b (bold) tags because it separates the presentation from the content (meaning)

Block-level vs. Inline Elements

• Block-level elements are designed to define a complete section of text

• Examples of block elements are hx, p, and body tags

• Inline elements can affect an area as small as a single character

• Examples of inline elements are em, strong, and b tags

Blockquote

• This block-level element is used to define a long block of text, usually a quotation

• In IE and Navigator, the presentation is represented by indenting the text from both the left and right margins

Font Size

• Font sizes are manipulated by the hx tags and also by the big and small tags

• Unless your intention is to use an actual header, use the big and small tags to change the font

A Few Words about Fonts

• Font faces themselves can be defined by using the font tag, but the preferred method is to use style sheets

• Users can change their default fonts, both size and face, using the browser preferences, so do not count on absolute control

Comments about Comments

• Comments are used to document your HTML code for later reference

• The comment tag  encloses the comments which are not visible in the browser

• The browser ignores anything inside the comment tags, including HTML

End of Chapter 2

• HTML tags and elements

• Create a simple Web Page

• XHTML

• Line breaks and Paragraph divisions

• Basic HTML elements

A Basic Web Page. Chapter 2 Objectives HTML tags and elements Create a simple Web Page XHTML Line...

Documents

Transcript of A Basic Web Page. Chapter 2 Objectives HTML tags and elements Create a simple Web Page XHTML Line...