Html and css

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

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

Basic HTML Tags
• Headings
• Paragraph
• Line Break
• Horizontal Rule
• Logical Tags
<strong>......</strong>
<abbr>.......</abbr> , etc.
• Physical Tags
<i>....</i>
<sub>......</sub>,etc.

• 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

1. HTML Background
2. HTML Color
3. HTML Lists
4. HTML Images
MORE TOPICS...

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.

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”

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>

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)

CSS DECLARATION
The declaration is always defined in a property value pair. The two are seperated with the
colon.
Example :
P {
Color: red
}

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

Html and css

In this document

More Related Content

What's hot

Similar to Html and css

Recently uploaded

Html and css