Introduction to HTML and CSS

Introduction to
HTML & CSSDan Paquette

All programs start
as empty text files*
*Hint: a website is a program.

So let’s
create
a text file.
• Create a folder on your
desktop.
• Open Notepad.
• Save it as index.html in your
folder.
• Open it in your browser.
• Pat yourself on the back.
• Having trouble? On a Mac?
Go to:
https://codepen.io/pen/

Let’s Learn HTML
HTML means Hypertext Markup Language

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
index.html
Document structure and the Doctype.

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
</body>
</html>
My Website
The title tag.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My Website</h1>
<p>Welcome to my website!</p>
</body>
</html>
My Website
The title tag.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My Website</h1>
<h2>My Website</h2>
<h3>My Website</h3>
<h4>My Website</h4>
<h5>My Website</h5>
<h6>My Website</h6>
</body>
</html>
My Website
Heading tags.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
Welcome to my <em>totally</em>
<strong>awesome</strong> website!
</p>
</body>
</html>
My Website
Inline tags and semantics.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
<ol>
<li>List Item</li>
<li>List Item</li>
</ol>
</body>
</html>
My Website
The ordered list and unordered list tags.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.google.com">
This is a link to Google!
</a>
</body>
</html>
My Website
The anchor tag.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<p>
This is a paragraph inside of a div
</p>
</div>
</body>
</html>
My Website
The divider tag.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img
src="https://i.imgur.com/INMtSvO.jpg"
alt="Image description." />
</body>
</html>

My Website
The image tag.

List of All HTML Tags
<a> <abbr> <address> <area> <article> <aside> <audio> <base>
<bdi> <bdo> <blockquote> <body> <br> <button> <canvas>
<caption> <cite> <code> <col> <colgroup> <data> <datalist> <dd>
<del> <details> <dfn> <div> <dl> <dt> <em> <embed> <fieldset>
<figcaption> <figure> <footer> <form> <h1> <h2> <h3> <h4> <h5>
<h6> <head> <header> <hr> <html> <iframe> <img> <input> <ins>
<kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta>
<meter> <nav> <noframes> <noscript> <object> <ol> <optgroup>
<option> <output> <p> <param> <pre> <progress> <q> <rp> <rt>
<rtc> <ruby> <samp> <script> <section> <select> <slot> <small>
<source> <span> <strong> <style> <sub> <summary> <sup> <table>
<tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time>
<title> <tr> <track> <ul> <var> <video> <wbr>

HTML Reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Eleme

Let’s Learn CSS
CSS means Cascading Style Sheets

Let’s create
another text
file.
• New, blank Notepad file.
• Save it as styles.css in the
same folder as your
index.html.
• Pat yourself on the back.
• Having trouble? On a Mac?
Go to:
https://codepen.io/pen/

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="styles.css" />
</head>
<body>
</body>
</html>

My Website
Linking the stylesheet.

<p>
This is my paragraph!
</p>

My Website
HTML
p {
background: green;
}
CSS
Let’s make it green!

<p>
</p>
My Website
HTML
p {
background: green;
color: white;
}
CSS
Let’s make it readable.

<p>
This is my paragraph! Let’s
make it longer!
</p>
My Website
HTML
p {
background: green;
color: white;
width: 150px;
height: 150px;
border-radius: 5px;
}
CSS
Styles for everything under the sun.

<p>
make it longer!
</p>
<p class="special-paragraph">
make it longer!
</p>
My Website
HTML
p {
background: green;
color: white;
width: 150px;
height: 150px;
border-radius: 5px;
}
.special-paragraph {
background: red;
}
/*
The period means we’re selecting a class
name rather than a tag.
*/
CSS
Class is in session.

<div class="container">
<p>
make it longer!
</p>
make it longer!
</p>
</div>
My Website
HTML
p {
background: green;
color: white;
width: 150px;
height: 150px;
border-radius: 5px;
}
background: red;
}
.container {
display: flex; /* Advanced! */
}
CSS
Let’s make them side-by-side.

<p>
make it longer!
</p>
Now I’m down here!
My Website
HTML
p {
background: green;
color: white;
width: 150px;
height: 150px;
border-radius: 5px;
margin-bottom: 100px;
}
CSS
Styles for everything under the sun.

<p>
make it longer!
</p>
My Website
HTML
p {
background: green;
color: white;
width: 150px;
height: 150px;
border-radius: 5px;
padding: 10px;
}
/*
We added padding. Why did our box get
bigger?
*/
CSS
Padding. Cool, but what happened?

</p>
My Website
HTML
p {
width: 100px;
height: 100px;
padding: 10px;
}
background: green;
}
background: orange;
}
CSS
Learning the cascade.

<div class="special-div">
</p>
</div>
My Website
HTML
p {
width: 100px;
height: 100px;
padding: 10px;
}
.special-div > .special-paragraph {
background: green;
}
CSS
The child selector.

</p>
</div>
My Website
HTML
p {
width: 100px;
height: 100px;
padding: 10px;
}
.special-div > .special-paragraph {
background: green;
}
background: orange;
}
CSS
Specificity.

<p>
</p>
</div>
My Website
HTML
.special-div {
font-family: arial;
background: green;
color: white;
font-weight: bold;
}
/*
Certain properties, like font styles, colors, and
weights, inherit down to child DOM nodes.
*/
CSS
Inheritance.

<p>
</p>
</div>
My Website
HTML
.special-div {
padding: 10px;
background: green;
border: 3px solid red;
}
.special-div > p {
border: inherit;
}
/*
But you can make anything inherit if you try hard
enough.
*/
CSS
Inheritance, continued.

<p>
This is my
<strong>paragraph</strong>!
</p>
<ul>
<li>
<strong>List Item</strong>
</li>
</ul>
</div>
My Website
HTML
.special-div strong {
color: red;
}
CSS
The descendant selector.

</p>
<p class="other-special-paragraph">
</p>
My Website
HTML
.special-paragraph,
.other-special-paragraph {
color: red;
}
CSS
Multiple selectors, one rule.

There’s a lot we
didn’t cover.
But you’ve got the basics, and the rest is
just knowing where to look.

Mozilla Developer Network
References
https://developer.mozilla.org/en-US/docs/Web/HTML/Eleme
https://developer.mozilla.org/en-US/docs/Web/CSS/Referenc

Validators
HTML: https://validator.w3.org/
CSS: https://jigsaw.w3.org/css-validator/

Code Editors
https://code.visualstudio.com/https://atom.io/

Tutorials and Learning Aids
https://css-tricks.com/ https://www.codecademy.com/
https://caniuse.com/ https://stackoverflow.com/

Developer Tools
Chrome: View > Developer >
Developer Tools
Firefox: Tools > Developer > Toggle
Tools
Edge: F12
Safari: Develop > Show Web
Inspector

Thanks for listening!And feel free to ask questions!

Introduction to HTML and CSS

Recommended

More Related Content

What's hot (20)

Similar to Introduction to HTML and CSS (20)

Recently uploaded (20)

Introduction to HTML and CSS