01 LCD Slide Handout 1

HYPERTEXT MARKUP LANGUAGE (HTML)
Basic HTML and CSS describe web documents or web pages
HTML Basics tells how to display the content of the

document text, images, and other
CSS Basics support media
make the document interactive through

special hypertext links that can connect
your documents with other documents in
your web page
*Property of STI K0032
1 _________________________ 2 __________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
HYPERTEXT MARKUP LANGUAGE (HTML) STRUCTURE OF AN HTML PAGE

Hyper refers to creating link and nonlinear
structures of information
Text refers to the words on the computer
screen that we are marking up
Markup is the process of preparing the text to
define how it displays when viewed as pages
on the WWW by marking them with
formatting directions conveyed by notations
call tags
Language is a system of signs used for
communication written and oral
*Property of STI K0032 *Property of STI K0032
3 _________________________ 4 __________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
STRUCTURE OF AN HTML PAGE STRUCTURE OF AN HTML PAGE
<!DOCTYPE html> DOCTYPE declaration <body> describes the visible page content
for HTML5
<h1> to <h6> describes a heading
<html> defines the whole document
<head> provides information about the describes a paragraph
document
<title> provides the title for the
document
5 _________________________ 6 __________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
MORE ABOUT HTML TAGS MORE ABOUT HTML TAGS

Horizontal rule <hr> Links <a>
<a
I am the first paragraph href="http://www.sti.edu/
<hr/> ">Visit our STI Homepage
</a>
I am the second paragraph
The href attributes specifies the destination URL

(http://www.sti.edu/)
7 _________________________ 8 __________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
Images <img> Line break 
<img src="html5.gif" alt="HTML5 <body>

Icon" This is the first paragraph, at the very
style="width:128px;height:128px"> beginning of the body of this document.
 The tag above signals the start of
this second paragraph. When rendered
by a browser, it will begin slightly below
The src attributes defines the image URL, and the the end of the first paragraph, with a bit
alt attribute specifies an alternative text for the
of extra white space between the two
image if the image cannot be displayed by the
paragraphs. this is the last
paragraph in the example.
browser
</body>
9 _________________________ 10 _________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________

Phrase elements and Unordered list <ul>, <li>
 <ul>
HTML is really, <li>No shoes/li>
REALLY fun! <li>No Shirt</li>
 <li>No problem!</li>
</ul>
11 ________________________ 12 _________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
MORE ABOUT HTML TAGS POOR WAY OF PRODUCING STYLES
Ordered list <ol>

Welcome to Greasy
Example of ordered list Joes. You will
1. Luzon never, ever,
EVER beat OUR prices!
3. Mindanao 
Welcome to Greasy Joes. You will never, ever, EVER

beat OUR prices!
13 ________________________ 14 _________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
CASCADING STYLE SHEETS (CSS) CSS PROPERTIES - TEXT COLOR

Style sheets are groups of style rules used to set the color of the text
body {
color: blue;
}
h1 {
color: #00ff00;
}
h2 {
CSS Declaration color: rgb(255,0,0);
}
p {color:blue; text-align:center;}
15 ________________________ 16 _________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
CSS PROPERTIES - TEXT ALIGNMENT CSS PROPERTIES - TEXT DECORATION
used to set the aligning elements to left, used to set or remove decoration from text
right, center, etc
h1 {
h1 { text-decoration: overline;
text-align: center; }
} h2 {
p.date { text-decoration: line-through;
text-align: right; }
} h3 {
p.main { text-decoration: underline;
text-align: justify; }
}
17 ________________________ 18 _________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
CSS PROPERTIES TEXT TRANSFORMATION CSS PROPERTIES - TEXT INDENTION

used to control uppercase and lowercase used for indenting the first line property
letters in a text
p.uppercase {
text-transform: uppercase;
p {
} text-indent: 50px;
p.lowercase { }
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
19 ________________________ 20 _________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
CSS PROPERTIES - FONT FAMILY CSS BACKGROUND PROPERTIES
allows to prioritize font family names CSS background properties are used to define
(Times New Roman, Arial, Lucida etc.) the background effects of an element
and/or generic family names (serif, sans
serif) The following CSS properties are used for
p { background effects:
font-family: "Times New Roman", Background-color
Times, serif; Background-image
} Background-repeat
Background-attachment
Background-position
21 ________________________ 22 _________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
CSS BACKGROUND PROPERTIES CSS BACKGROUND PROPERTIES

CSS background color property specifies the background image property specifies an image to
background color of an element. The background- use as the background of an element
color of the page is defined in the body selector
body {
body { background-
background-color: #b0c4de; image: url("paper.gif");
}
}
23 ________________________ 24 _________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
CSS BACKGROUND PROPERTIES CSS BACKGROUND PROPERTIES
Background image repeated horizontally or Background image repeated horizontally or
vertically vertically
If the image is repeated only horizontally (use
repeat x), for the background to look better
body {
background-
image: url("gradient_bg.png") body {
; background-
} image: url("gradient_bg.png");
background-repeat: repeat-x;
}
25 ________________________ 26 _________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
___________________________ ___________________________
CSS BACKGROUND PROPERTIES

Background image set position and no repeat. The
CSS background-position property is used to
position a background image
body {
background-
image: url("img_tree.png");
background-repeat: no-repeat;
}
*Property of STI K0032
27 ________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________

01 LCD Slide Handout 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

01 LCD Slide Handout 1

Uploaded by

Copyright:

Available Formats

HYPERTEXT MARKUP LANGUAGE (HTML)

Basic HTML and CSS describe web documents or web pages

HTML Basics tells how to display the content of the

make the document interactive through

HYPERTEXT MARKUP LANGUAGE (HTML) STRUCTURE OF AN HTML PAGE

Property of STI K0032 Property of STI K0032

MORE ABOUT HTML TAGS MORE ABOUT HTML TAGS

The href attributes specifies the destination URL

Property of STI K0032 Property of STI K0032

<img src="html5.gif" alt="HTML5 <body>

MORE ABOUT HTML TAGS MORE ABOUT HTML TAGS

Property of STI K0032 Property of STI K0032

Welcome to Greasy Joes. You will never, ever, EVER

Property of STI K0032 Property of STI K0032

CASCADING STYLE SHEETS (CSS) CSS PROPERTIES - TEXT COLOR

Property of STI K0032 Property of STI K0032

CSS PROPERTIES TEXT TRANSFORMATION CSS PROPERTIES - TEXT INDENTION

Property of STI K0032 Property of STI K0032

Property of STI K0032 Property of STI K0032

CSS BACKGROUND PROPERTIES CSS BACKGROUND PROPERTIES

Property of STI K0032 Property of STI K0032

CSS BACKGROUND PROPERTIES

*Property of STI K0032

You might also like