ID01 / W01

Week 01
Introduction to HTML & CSS

DEFINITIONS

HTML Hyper Text Mark-Up Language:
STRUCTURE A system of tags that describe the structure of a
webpage.

+
CSS Cascading Stylesheets:
Design Instructions for each tag.
DESIGN

=
Browser Software that can read & Display
DISPLAY HTML, CSS, Java, PHP, etc.

HTML SYNTAX

<h1> Cool Website </h1>

<img src="cat.jpg" title="My Cat" />

HTML SYNTAX

Start Element End
Tag Content Tag

Element <h1> Cool Website </h1>

Element <img src="cat.jpg" title="My Cat" />

Attribut Value Attribut Value End
e e Tag
Start
Tag

Mark-Up: Required Format
<!DOCTYPE html>
<html>

<head>
<title> My First Website </title>
<link type="text/css" rel="stylesheet" href="style.css">

</head>
<body>

<h1> My First Website </h1>

</body>
</html>

Mark-Up: Tabbing
<!DOCTYPE html>
<html>

<head>
<link type="text/css" rel="stylesheet" href="style.css">

</head>
<body>


</body>
</html>

HTML Nesting

CORRECT

<li> <a href="..."> Text </a> </li>

<li> <a href="..."> Text </li> </a>

INCORRECT

Mark-Up: Nesting
<!DOCTYPE html>

<html>
<head>

<link type="text/css" rel="stylesheet"
href="style.css">

</head>
<body>


</body>
</html>

Mark-Up in the Body plain text

This is a Heading!
This is a Sub-Heading!

Google
NYTimes
Facebook

This is a Sub-Sub-Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur eu ante odio. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ac ipsum urna. Maecenas volutpat,
tellus non molestie vestibulum, velit ipsum sollicitudin nisi,
vel volutpat augue nibh eget metus. Integer vitae metus eget
augue fermentum egestas.

Mark-Up in the Body Identify Parts

This is a Heading!
This is a SubHeading!

Google
NYTimes
Facebook


Curabitur eu ante odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vestibulum ac ipsum urna.
Maecenas volutpat, tellus non molestie vestibulum, velit ipsum
sollicitudin nisi, vel volutpat augue nibh eget metus. Integer
vitae metus eget augue fermentum egestas.

Mark-Up in the Body Add Tags
<body>
<h1>This is a Heading!</h1>
<h2>This is a SubHeading!</h2>

<ul>
<li><a href="http://www.google.com"> Google </a></li>
<li><a href="http://www.nytimes.com"> NYTimes </a></li>
<li><a href="http://www.facebook.com"> Facebook </a></li>
</ul>

<h3>This is a Sub-Sub-Heading<h3>

<p>
Curabitur eu ante odio. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ac ipsum urna. Maecenas volutpat,
tellus non molestie vestibulum, velit ipsum sollicitudin nisi,
vel volutpat augue nibh eget metus. Integer vitae metus eget
augue fermentum egestas.
</p>

</body>

Mark-Up in the Body Browser View

This is a Heading!
This is a Sub-Heading!

Google
NYTimes
Facebook


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu ante odio. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Vestibulum ac ipsum urna. Maecenas volutpat, tellus
non molestie vestibulum, velit ipsum sollicitudin nisi, vel volutpat augue nibh eget metus.
Integer vitae metus eget augue fermentum egestas.

CSS Syntax

h1 {
color: red;
font-size: 20px;
}

CSS Syntax: notation

h1 {
color: red;
font-size: 20px;
}

CSS Syntax

Selector Property Value

h1 {
color: red; Declaration

font-size: 20px; Declaration

}

Relationship between
HTML, CSS & the Browser

HTML CSS Browser
STRUCTURE DESIGN DISPLAY

HTML CSS Browser
<body> body { HEADER
background-color: lightBlue;
} Sub-Header

<h1> HEADER </h1>
<h2> Sub-Header </h2> First
Second
h1 { Third
font-size: 14px;
<ul> text-decoration: underline;
<li>First</li> {
<li>Second</li> This is a paragraph. It is made of sentences and
words.
<li>Third</li>
</ul> h2 {
font-size: 12px;
}
<p> This is a paragraph.
It is made of sentences
and words. </p> ul {
background-color: white;
}

</body> li {
font-weight: bold;
font-size: 12px;
color: blue;
}
p {
text-align: center;
}

HTML CSS Browser
<body> body { HEADER
background-color: lightBlue;
} Sub-Header

<h1> HEADER </h1>
<h2> Sub-Header </h2> First
Second
h1 { Third
font-size: 14px;
<ul> text-decoration: underline;
<li>First</li> {
<li>Second</li> This is a paragraph. It is made of sentences and
words.
<li>Third</li>
</ul> h2 {
font-size: 12px;
}
<p> This is a paragraph.
It is made of sentences
and words. </p> uo {
background-color: white;
}

</body> li {
font-weight: bold;
font-size: 12px;
color: blue;
}
p {
text-align: center;
}

CONNECTING HTML TO CSS
THE <link> TAG

<head>

Start Tag stylesheet = design Path to the End Tag
instructions CSS sheet.
type of information Relation href
type
attribute Attribute Attribute

<link type="text/css" rel="stylesheet" href="style.css" />

</head>

Images in HTML

Start Tag Alternate text if image End Tag
doesn't appear
Search Path to Image Alternate Title Image Title
Attribute Attribute Attribute

<img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />

FOLDER STRUCTURE & PATHS

Root Directory Folder

index.html css html images
p1.jpg

style.css gallery full
.html p2.jpg

t1.jpg
info thumbs
.html
t2.jpg

contact
.html



p1.jpg

.html p2.jpg

t1.jpg
info thumbs
.html
t2.jpg

contact
.html
Paths:
link from info.html to gallery.html

<a href="gallery.html">



p1.jpg

.html p2.jpg

t1.jpg
info thumbs
.html
t2.jpg

contact
.html
Paths:
hyperlink from index.html to gallery.html

<a href="html/gallery.html">



p1.jpg

.html p2.jpg

t1.jpg
info thumbs
.html
t2.jpg

contact
.html
Paths:
link between index.html and style.css

<link rel="stylesheet" type="text/css" href="css/style.css" />



p1.jpg

.html p2.jpg

t1.jpg
info
thumbs
.html
t2.jpg

contact
.html
Paths:
hyperlink from gallery.html to style.css

<link rel="stylesheet" type="text/css" href="../css/style.css" />



p1.jpg

.html p2.jpg

t1.jpg
info
thumbs
.html
t2.jpg

contact
.html
Paths:
image p1.jpg displayed on gallery.html

<img src="../images/full/p1.jpg" />

ID01 / W01

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie ID01 / W01

Ähnlich wie ID01 / W01 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

ID01 / W01

Hinweis der Redaktion