Lesson 109 23 aug13-1430-ay

Unit 1: Web Fundamentals
Lesson 9: Separation of Concerns
August 23, 2013

Lesson 9: Separation of Concerns
2
Introduction
to HTML
Learning to
Use HTML
HTML and
Email
History and
Future of the
Web
HTML and
Forms
Search
Engine
Optimization
Learning to
Use CSS
Introduction
to CSS
Reusing
Code
3 Ways to
Use CSS
Separation of
Concerns
Launching
Your Own
Website
Lesson 1 Lesson 2 Lesson 3 Lesson 4
Build understanding Develop skills

Recap from last time (I)
• Creating a CSS file is just as easy as making an HTML file
• CSS always needs to be paired with HTML for the styling to take
effect
3

Recap from last time (II)
• The HTML code must tell the browser where to find the matching
CSS file
• There are infinite possibilities in styling a website!
4

Why do we do it this way?
• We’ve already learned how to write our own HTML and CSS files
and link them together
• But why do we need TWO sets of code? Wouldn’t it be easier to just
combine the two files into one?
5

Why do we separate HTML and CSS?
1. Saves time by reusing code
2. Helps us debug our code
1. Keeps us organized
6

Reusing code saves a lot of time! (I)
• We saw in Lesson 8 that we had to include a line of code in our
HTML to link it with our CSS file
7
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“smelly-cat.css”>
</head>
<body>
…
This line tells the browser to look for a
CSS file called “smelly-cat.css”

Reusing code saves a lot of time! (II)
• But what if we had two HTML pages that we wanted to style the
same way? Would we need a second CSS file?
• Nope. All we have to do is include the same line of code in both
HTML files to tell the browser where to find the one CSS file to use
8
<html>
<head>
<link rel=“stylesheet”
type=“text/css” href=“smelly-
cat.css”>
</head>
<body>
…
<html>
<head>
<link rel=“stylesheet”
type=“text/css” href=“smelly-
cat.css”>
</head>
<body>
… HTML file #1 HTML file #2

Reusing code saves a lot of time! (III)
• Now imagine that instead of two HTML files, we had 100 of them
• Being able to link them all to the same CSS file saves us from
having to write 99 more CSS files!
9
<html>
<head>
<link rel=“stylesheet” type=“text/css”
href=“smelly-cat.css”>
</head>
<body>
…
<html>
<head>
</head>
<body>
…
<html>
<head>
</head>
<body>
…
<html>
<head>
</head>
<body>
…
<html>
<head>
</head>
<body>
…
<html>
<head>
</head>
<body>
…
<html>
<head>
</head>
<body>
…
HTML file #1 HTML file #2 HTML file #3 HTML file #4
HTML file #5 HTML file #6 HTML file #7
. . .

Reusing code saves a lot of time! (IV)
• Most websites have more than one page but want to keep the same
theme across all pages, so they are often reusing CSS code
• They can share font styles, background colors, font sizes, and many
other elements
10
www.codecademy.com www.codecademy.com/about
Both pages share the same navigation bar,
and probably the same CSS stylesheet!

11

Everyone makes mistakes (I)
• No one is perfect – when we make mistakes while coding, our
website won’t look the way we want.
• We then need to debug, or find and fix mistakes in our code
• But sometimes, it’s obvious that something is wrong with your
website, but you can’t find the error in your code
12

Everyone makes mistakes (II)
• To find errors more quickly, we need to make sure our code is easy
to read and review
• If we combined our HTML and CSS files into one, it would become a
lot harder to debug!
• Combining the two results in code bloat, big and messy code that’s
difficult to read
13

Everyone makes mistakes (III)
14
<html>
<head>
</head>
<body>
<p>Avoid code bloat!</p>
</body>
</html>
body {
text-align: center;
p {color: red;}
}
<html>
<head>
<style type=“text/css”>
body {text-align: center;}
</style>
</head>
<body>
<p style=“color: red;”>
Avoid code bloat!
</p>
</body>
</html>
HTML mixed with CSS HTML only
CSS only
This is code bloat!

Everyone makes mistakes (IV)
• Remember that code is read many times, but written only once
• Since code is read every time you review, debug, or share files with
others, we need to make sure it’s easy to read!
15
Avoiding code bloat makes code easier to read!

16

Separation of concerns (I)
• We’ve seen how avoiding code bloat helps in debugging our code
• It also helps to divide our code into multiple sections that each focus
on different areas – this is known as separation of concerns
• This is why it makes sense to split HTML and CSS into two files –
HTML focuses on the structure of the page while CSS affects its
presentation
17

Separation of concerns (I)
• Dividing our code into two files also makes it easier for us to work on
them with others
• One person can focus on changing the HTML structure while
another can work on the CSS styling
• If it were combined into a single file, version control would be much
harder – it would be more difficult to keep track of the changes
everyone was making!
18

Separation of concerns (III)
19
Header
Footer
Signup form
Login form
• We apply this principle not just to dividing HTML from CSS, but to all
the code we write!
• For example, you may want to separate the sections of your code
that describe your website’s header, footer, login, and signup

Summary (I)
• It’s important to divide our HTML pages from our CSS files
1. It saves us time by reusing code. We can link multiple HTML
pages with a single CSS stylesheet.
20
www.codecademy.com www.codecademy.com/about
Both pages share the same navigation bar,
and probably the same CSS stylesheet!

Summary (II)
2. It helps us debug our code. By keeping the files separate, it
makes our code easier to read, which helps us find our mistakes.
21
<html>
<head>
</head>
<body>
<p>Avoid code bloat!</p>
</body>
</html>
body {
text-align: center;
p {color: red;}
}
<html>
<head>
<style type=“text/css”>
body {text-align: center;}
</style>
</head>
<body>
<p style=“color: red;”>
Avoid code bloat!
</p>
</body>
</html>
HTML mixed with CSS HTML only
CSS only
This is code bloat!

Summary (III)
3. It keeps us organized. Separation of concerns splits our code into
sections, which helps us to work together in teams.
22
Header
Footer
Signup form
Login form

What to do on your own
1. Go to URL to complete the Codecademy course online
2. Do the practice set on the material learned
1. Take the follow-up quiz to test your understanding
23

Lesson 109 23 aug13-1430-ay

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (10)

Similar a Lesson 109 23 aug13-1430-ay

Similar a Lesson 109 23 aug13-1430-ay (20)

Más de Codecademy Ren

Más de Codecademy Ren (6)

Último

Último (20)

Lesson 109 23 aug13-1430-ay