HTML Basic Tags
-
Upload
nisa-soomro -
Category
Education
-
view
215 -
download
7
description
Transcript of HTML Basic Tags
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.