2. 2
• HTML DOCUMENTS ARE SIMPLY TEXT DOCUMENTS WITH A SPECIFIC
FORM
• DOCUMENTS COMPRISED OF CONTENT AND MARKUP TAGS
• CONTENT: ACTUAL INFORMATION BEING CONVEYED
• THE MARKUP TAGS TELL THE WEB BROWSER HOW TO DISPLAY
THE PAGE
• AN HTML FILE MUST HAVE AN HTM OR HTML FILE EXTENSION
• AN HTML FILE CAN BE CREATED USING A SIMPLE TEXT EDITOR
HTML: HYPERTEXT MARKUP
LANGUAGE
3. HTML Tags
HTML tags are used to mark-up HTML elements
– Surrounded by angle brackets < and >
– HTML tags normally come in pairs, like <tagname> (start tag) and
</tagname> (end tag)
– The text between the start and end tags is the element content
– Not case-sensitive
– Use lowercase tags
4. 4
TAG ATTRIBUTES
• TAGS CAN HAVE ATTRIBUTES THAT PROVIDE ADDITIONAL INFORMATION
TO AN HTML ELEMENT
• ATTRIBUTES ALWAYS COME IN NAME/VALUE PAIRS LIKE:
NAME=“VALUE”
• ATTRIBUTES ARE ALWAYS SPECIFIED IN THE START TAG
• ATTRIBUTE VALUES SHOULD ALWAYS BE ENCLOSED IN QUOTES.
DOUBLE QUOTES ARE MOST COMMON.
• ALSO CASE-INSENSITIVE: HOWEVER, LOWERCASE IS RECOMMENDED
• <TAGNAME A1=“V1” A2=“V2”></TAGNAME>
• FOR EXAMPLE, <TABLE BORDER=“0”> IS A START TAG THAT DEFINES A
TABLE THAT HAS NO BORDERS
5. 5
HTML DOCUMENT STRUCTURE
• ENTIRE DOCUMENT ENCLOSED WITHIN <HTML> AND </HTML> TAGS
• TWO SUBPARTS:
• HEAD
• ENCLOSED WITHIN <HEAD> AND </HEAD>
• WITHIN THE HEAD, MORE TAGS CAN BE USED TO SPECIFY TITLE OF
THE PAGE, META-INFORMATION, ETC.
• BODY
• ENCLOSED WITHIN <BODY> AND </BODY>
• WITHIN THE BODY, CONTENT IS TO BE DISPLAYED
• OTHER TAGS CAN BE EMBEDDED IN THE BODY
6. Basic HTML Tags
• Headings
• Paragraph
• Line Break
• Horizontal Rule
• Logical Tags
<strong>......</strong>
<abbr>.......</abbr> , etc.
• Physical Tags
<i>....</i>
<sub>......</sub>,etc.
7. • HTML frames are a means of having several browser
windows open within a single larger window
• Each HTML document is called a frame
• Disadvantages:
• Must keep track of more HTML documents
• Difficult to print the entire page
HTML Frames
9. CSS stands for “Cascading Style Sheets”.
Cascading: refers to the procedure that determines which style will apply to a certain
section, if you have more than one style rule.
CSS
Style: how you want a certain part of your page to look. You can set things like color,
margins, font, etc for things like tables, paragraphs, and headings.
Sheets: the “sheets” are like templates, or a set of rules, for determining how the webpage
will look.
10. WHAT IS “STYLE”?
“STYLE” IS A COMMAND THAT YOU SET TO TELL THE BROWSER HOW A
CERTAIN SECTION OF YOUR WEBPAGE SHOULD LOOK.
What is “Style”
11. Where do I put my style rules?
There are three types of style-rule-places that
we will cover:
- Inlined
- Internal Style Sheet
- External Style Sheet
• <p style=“text-align: center; font- weight:
bold; color: yellow;”>What was I
thinking?</p>
• <style type=“text/css”>
body {
text-align: left;
font-family: trebuchet,
verdana;}
</style>
• <head><title>My Way</title>
<link rel="stylesheet"
href="http://www2.hawaii.edu/~myway.
css" type="text/css“>
</head>
12. CSS SELECTORS
A CSS Selector is the part of a CSS rule set that actually selects the contents which we want
to style.
• Universal Selector (*)
• ID Selector (#)
• Class Selector (.)
• Element Type Selector (p)
13. CSS DECLARATION
The declaration is always defined in a property value pair. The two are seperated with the
colon.
Example :
P {
Color: red
}
14. HTML is the universal markup language for the Web.
HTML lets you format text, add graphics, create links,
input forms, frames and tables, etc., and save it all in a
text file that any browser can read and display. Hence
CSS provides it the attractive and effective look to make it
more efficient.
Conclusion