WEB ENGINEERING

HOW WEB PAGE DISPLAY

HTML ELEMENTS

IS HTML CASESENSITIVE ?

In HTML, the capitalization of element

names is not important. So <img>, <Img>, and <IMG> are all the same as far as the browser is concerned. However, in XHTML (the stricter version of HTML) all element names must be all lowercase in order to be valid. Many web developers have come to like the orderliness of the stricter XHTML markup rules and stick with all lowercase.

BASIC DOCUMENT STRUCTURE

BLOCK AND INLINE ELEMENTSBlock element: elements start on new lines

Inline element: element start within line

COMMENTS IN HTML You can leave notes in the source document for yourself and others by marking them up as comments. Anything you put between comment tags (<!-- -->) will not display in the browser and will not have any effect on the rest of the source.

Comments are useful for labeling and organizing long documents, particularly when they are shared by a team of developers. In this example, comments are used to point out the section of the source that contains the navigation.

EMPTY ELEMENTS

A handful of elements, however, do not have text content because they are used to provide a simple directive.

EMPTY ELEMENTS IN XHTML

In XHTML, all elements, including empty elements, must be closed (or terminated, to use the proper term). Empty elements are terminated by adding a trailing slash preceded by a space before the closing bracket, like so: <img />, <br />, <meta />, and <hr />. Here is the line break

ATTRIBUTE

Attributes are instructions that clarify or modify an element. For the img element, the src (short for “source”) attribute is required, and specifies the location (URL) of the image file.

ATTRIBUTE

The syntax for an attribute is as follows:

attributename="value"

Attributes go after the element name, separated by a space. In non-empty

elements, attributes go in the opening tag only:

<element attributename="value">

<element attributename="value">Content</element>

You can also put more than one attribute in an element in any order. Just keep them separated with spaces.

<element attribute1="value" attribute2="value">

IDENTIFY ERROR

PARAGRAPHS

<p> A paragraph element </p>

In HTML, it is OK to omit the closing </p> tag. A browser just assumes it is closed when it encounters the next block element. However, in the stricter. XHTML syntax, the closing tag is required.

HEADINGS There are actually six levels of headings, from h1 to h6. When you add headings to content, the browser uses them to create a document outline for the page. Assistive reading devices such as screen readers use the document outline to help users quickly scan and navigate through a page. In addition, search engines look at heading levels as part of their algorithms (information in higher heading levels may be given more weight). For these reasons, it is a best practice to start with the Level 1 heading (h1) and work down in numerical order (see note), creating a logical document structure and outline.

15

HTML <P> AND <PRE> TAGTag Purpose

<pre> Defines preformatted text

<p> Define paragraph

<p>This is some text in a paragraph.</p>

Align= left, right, center, justify

The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

<P> V/S <PRE>

17

HTML TEXT FORMATTING

Tag Purpose

<b> and <strong>

To Bold Text

<i> and <em> To italic Text

<sub> Defines subscripted text

<sup> Defines superscripted text

<small> Defines smaller text

<big> Defines bigger text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

18

HTML FONT The <font> tag specifies the font face, font size, and font color of text.

Attribute Purpose

Color Defines the color of text. Values can be defined in the form of RGB code, name of color

Size Size of the font

Face Family of the font

<p> <font size="3" color="red" face="Times New Roman" > This is some text!</font></p>

ADDING LINKS

To make a selection of text a link, simply wrap it in opening and closing <a>...</a> tags and use the href attribute to provide the URL of the target page.

Anchor Syntax

The simplified structure of the anchor element is:

<a href="url">linked text or element</a>

<a href="http://www.oreilly.com">Go to the O'Reilly Media site</a>

ABSOLUTE URLS

Absolute URLs provide the full URL for the document, including the protocol (http://), the domain name, and the pathname as necessary. You need to use an absolute URL when pointing to a document out on the Web (i.e., not on your own server).

RELATIVE URLS

describe the pathname to a file relative to the current document. Relative URLs can be used when you are linking to another document on your own site (i.e., on the same server). It doesn’t require the protocol or domain name—just the pathname.