The document discusses various HTML elements and tags. It covers topics like whether HTML is case sensitive, empty elements, attributes, paragraphs, headings, text formatting, fonts, links, and URLs. Key points include: HTML element names can be uppercase, lowercase, or mixed case; empty elements require a closing slash in XHTML; attributes provide additional information for elements; paragraphs and headings define structure; and links are created using anchor tags with href attributes specifying the URL.

1. WEB ENGINEERING

2. HOW WEB PAGE DISPLAY

3. HTML ELEMENTS

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

5. BASIC DOCUMENT STRUCTURE

6. BLOCK AND INLINE ELEMENTS
Block element: elements start on new lines
Inline element: element start within line

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

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

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

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

11. 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">

12. IDENTIFY ERROR

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

14. 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> TAG
Tag 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.
15

16. <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
17

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>
18

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

20. 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).

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