Basic HTML and CSS: Hypertext Markup Language (HTML)

HYPERTEXT MARKUP LANGUAGE (HTML)
Basic HTML and CSS
HTML Basics
CSS Basics
describe web documents or web pages

tells how to display the content of the
document text, images, and other
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
1 _________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
HYPERTEXT MARKUP LANGUAGE (HTML)
K0032
2 __________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
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
3 _________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
*Property of STI
K0032
4 __________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
<!DOCTYPE html> DOCTYPE declaration
<body> describes the visible page content
for HTML5
<html> defines the whole document
<head> provides information about the

document
<h1> to <h6> describes a heading

 describes a paragraph
<title> provides the title for the

document
*Property of STI
K0032
5 _________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
*Property of STI
K0032
6 __________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
MORE ABOUT HTML TAGS
Horizontal rule <hr>
Links <a>
<a
href="http://www.sti.edu/
">Visit our STI Homepage
</a>
I am the first paragraph

<hr/>
I am the second paragraph
The href attributes specifies the destination URL

(http://www.sti.edu/)
*Property of STI
K0032
7 _________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
*Property of STI
K0032
8 __________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
Images <img>
Line break 
<body>
This is the first paragraph, at the very
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 end of the first paragraph, with a bit
of extra white space between the two
paragraphs. this is the last
paragraph in the example.
</body>
<img src="html5.gif" alt="HTML5

Icon"
style="width:128px;height:128px">
The src attributes defines the image URL, and the

alt attribute specifies an alternative text for the
image if the image cannot be displayed by the
browser
*Property of STI
K0032
9 _________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
*Property of STI
K0032
10 _________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
Phrase elements and 
Unordered list <ul>, <li>

HTML is really,
REALLY fun!

*Property of STI
K0032
11 ________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
<ul>
<li>No shoes/li>
<li>No Shirt</li>
<li>No problem!</li>
</ul>
*Property of STI
K0032
12 _________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
POOR WAY OF PRODUCING STYLES
Ordered list <ol>

Example of ordered list
1. Luzon
2. Visayas
3. Mindanao

Welcome to Greasy
Joes. You will
never, ever,
EVER beat OUR prices!

Welcome to Greasy Joes. You will never, ever, EVER
beat OUR prices!
*Property of STI
K0032
13 ________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
*Property of STI
K0032
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 {
color: rgb(255,0,0);
}
CSS Declaration
p {color:blue; text-align:center;}
*Property of STI
K0032
15 ________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
*Property of STI
K0032
16 _________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
CSS PROPERTIES - TEXT ALIGNMENT
CSS PROPERTIES - TEXT DECORATION
used to set the aligning elements to left,

right, center, etc
used to set or remove decoration from text

h1 {
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
*Property of STI
K0032
17 ________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
}
h2 {
}
h3 {
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
*Property of STI
K0032
18 _________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
CSS PROPERTIES TEXT TRANSFORMATION
CSS PROPERTIES - TEXT INDENTION
used to control uppercase and lowercase

letters in a text
used for indenting the first line property
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
*Property of STI
K0032
19 ________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
p {
text-indent: 50px;
}
*Property of STI
K0032
20 _________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
CSS PROPERTIES - FONT FAMILY
CSS BACKGROUND PROPERTIES
allows to prioritize font family names

(Times New Roman, Arial, Lucida etc.)
and/or generic family names (serif, sans
serif)
CSS background properties are used to define

the background effects of an element
p {
font-family: "Times New Roman",
Times, serif;
}
*Property of STI
K0032
21 ________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
The following CSS properties are used for

background effects:
Background-color
Background-image
Background-repeat
Background-attachment
Background-position
*Property of STI
K0032
22 _________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
CSS background color property specifies the

background color of an element. The backgroundcolor of the page is defined in the body selector
background image property specifies an image to

use as the background of an element
body {
background-color: #b0c4de;
}
*Property of STI
K0032
23 ________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
body {
backgroundimage: url("paper.gif");
}
*Property of STI
K0032
24 _________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
Background image repeated horizontally or

vertically
Background image repeated horizontally or

vertically
body {
backgroundimage: url("gradient_bg.png")
;
}
*Property of STI
K0032
25 ________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
Background image set position and no repeat. The
CSS background-position property is used to
position a background image
body {
backgroundimage: url("img_tree.png");
background-repeat: no-repeat;
}
*Property of STI
K0032
27 ________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
If the image is repeated only horizontally (use

repeat x), for the background to look better
body {
backgroundimage: url("gradient_bg.png");
background-repeat: repeat-x;
}
*Property of STI
K0032
26 _________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________
___________________________

Basic HTML and CSS: Hypertext Markup Language (HTML)

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Basic HTML and CSS: Hypertext Markup Language (HTML)

Diunggah oleh

Hak Cipta:

Format Tersedia

HYPERTEXT MARKUP LANGUAGE (HTML)

Basic HTML and CSS

describe web documents or web pages

Hyper refers to creating link and nonlinear

Language is a system of signs used for

STRUCTURE OF AN HTML PAGE

STRUCTURE OF AN HTML PAGE

<!DOCTYPE html> DOCTYPE declaration

<body> describes the visible page content

<head> provides information about the

<h1> to <h6> describes a heading

<title> provides the title for the

MORE ABOUT HTML TAGS

MORE ABOUT HTML TAGS

Horizontal rule <hr>

<p>I am the first paragraph</p>

The href attributes specifies the destination URL

MORE ABOUT HTML TAGS

MORE ABOUT HTML TAGS

Line break <br>

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

The src attributes defines the image URL, and the

MORE ABOUT HTML TAGS

MORE ABOUT HTML TAGS

Phrase elements <em> and <strong>

Unordered list <ul>, <li>

MORE ABOUT HTML TAGS

POOR WAY OF PRODUCING STYLES

Ordered list <ol>

CASCADING STYLE SHEETS (CSS)

CSS PROPERTIES - TEXT COLOR

Style sheets are groups of style rules

used to set the color of the text

CSS PROPERTIES - TEXT ALIGNMENT

CSS PROPERTIES - TEXT DECORATION

used to set the aligning elements to left,

used to set or remove decoration from text

CSS PROPERTIES TEXT TRANSFORMATION

CSS PROPERTIES - TEXT INDENTION

used to control uppercase and lowercase

used for indenting the first line property

CSS PROPERTIES - FONT FAMILY

CSS BACKGROUND PROPERTIES

allows to prioritize font family names

CSS background properties are used to define

The following CSS properties are used for

CSS BACKGROUND PROPERTIES

CSS BACKGROUND PROPERTIES

CSS background color property specifies the

background image property specifies an image to

CSS BACKGROUND PROPERTIES

CSS BACKGROUND PROPERTIES

Background image repeated horizontally or

Background image repeated horizontally or

If the image is repeated only horizontally (use

Anda mungkin juga menyukai