Some "rules"
We'll be using the following tools in class today:
HTML: Hyper Text Markup Language
A markup language is a set of markup tags:
<tagname>content</tagname>
Each HTML tag describes its content:
<p>This sentence goes in a paragraph (p) tag.</p>
If you 'View Page Source', you see this:
Your Content
+ HTML: Structure
+ CSS: Presentation
= Your Website
A website is a way to present your content to the world, using HTML to structure that content, and CSS to make it look good.
A paragraph is your content
<p>A paragraph is your content</p>
A paragraph is your content
Whenever you type an opening tag, immediately type the closing tag, then fill in your content.
<strong>
<strong></strong>
<strong>Now I can add content!</strong>
Attributes
<a href="https://www.hubspot.com" class="fancy-link">HubSpot</a>
<img src="my_picture.jpg" />
<div id="intro">Lorem ipsum</div>
Doctype
The first thing in an HTML file is the doctype, which tells the browser which language the page is using:
<!DOCTYPE html>
The doctype is case-insensitive.
DOCtype, doctype, DocType and DoCtYpe are all valid.
HTML Element
After <!DOCTYPE html>, the page content must be contained between <html></html> tags.
<!DOCTYPE html>
<html>
</html>
Head Element
The head contains information about the page, but does not contain page content. It contains elements that let the browser know:
<!DOCTYPE html>
<html>
<head>
</head>
</html>
Body Element
The body contains the actual content of the page. Everything that is contained in the body is visible to the user.
Most of your work will be done within the <body></body> tags!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Memorize this ☺
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
All of your page content goes here
</body>
</html>
All elements "nest" inside one another
Nesting is what happens when you put other containing tags inside other containing tags. For example, you would put the <p></p> inside of the <body></body> tags. The <p></p> is now nested inside the <body></body>, and is one of its descendants
All your page's content is 'nested' inside the body element:
<body>
<p>
A paragraph inside the body element
</p>
</body>
And other elements can be nested inside of that:
<body>
<p>
A paragraph inside the body element
<em>which has some italic text</em>
and
<strong>some bold text</strong>
</p>
</body>
⇒ A paragraph inside the body element which has some italic text and some bold text
HTML elements are often looked at as a family tree. Developers will often refer to elements as "siblings", "immediate children", and "descendants".
Can you name any siblings?
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
All of your page content goes here
</body>
</html>
How about immediate children?
<body>
</body>
<body>
<p>I'm indented!</p>
<p>I'm also indented!</p>
</body>
This will make your life much easier down the road, as you add more content and style your pages.
All the files for your site should be stored within the same folder.
This includes:
Note: File names should not include spaces or special characters. File names ARE case sensitive.
Ignore the styles.css file for now.
Paragraph
HTML:
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
Result:
Paragraph 1
Paragraph 2
Paragraph 3
Paragraphs in Action
Paragraphs allow you to format your content in a readable fashion.
You can edit how paragraphs are displayed with CSS
Headings
HTML:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Result:
Headings in Action
Formatted Text
HTML:
<p>Here is a paragraph with <em>Emphasized</em> text and <strong>Important</strong> text.</p>
Result:
Here is a paragraph with Emphasized text and Important text.
Links
Standard links have three components:
<a></a>
HubSpot's Homepage
href="http://www.hubspot.com"
<a href="http://www.hubspot.com">HubSpot's Homepage</a>
Additional Link Options
title="View HubSpot's homepage"
target="_blank" (opens link in a new tab)
<a href="http://www.hubspot.com" title="View HubSpot's homepage" target="_blank>HubSpot's Homepage</a>
Additional Link Options
Additional Link Options
<a href="mailto:liz@hubspot.com">Email me!</a>
Images
Images have three components:
<img />
src="http://lorempixel.com/100/100/city/"
alt="Picture of a city"
<img src="http://lorempixel.com/200/200/city/" alt="Picture of a city" />
* Notice: This tag is our first example of a stand-alone or "self-closing" element.
Relative vs. absolute paths for links, images, etc.
"filename.gif"
"images/filename.gif"
"http://www.hubspot.com/images/filename.gif"
Line Break
<p>
You spin me right round, baby<br />
Right round like a record, baby<br />
Right round round round
</p>
You spin me right round, baby
Right round like a record, baby
Right round round round
Unordered and ordered lists
HTML:
<ul>
<li>Unordered List Item</li>
<li>Another List Item</li>
</ul>
<ol>
<li>Ordered List Item</li>
<li>Another List Item</li>
</ol>
Result:
Lists in Action
Lists can be used to organize any list of items.
You'd be surprised how often lists are used in web development.
Layout Dividers
All colored text, positioning, sizes
See the Pen Completely Unnecessary Bender by Liz Shaw (@anythingcodes) on CodePen.
<p>This paragraph should have red text.</p>
p {
color: red;
}
This paragraph should have red text.
Without CSS, your HTML pages would look boring ☺
selector {
property: values;
}
You can add multiple property-value pairs to a rule, each ending with a semicolon:
body {
color: lightblue;
background-color: black;
text-transform: uppercase;
}
Just like HTML, CSS ignores whitespace. All you need is for each rule to be in the correct format.
Best: ✔
p {
font-size: 22px;
text-align: center;
color: red;
}
Decent:
p{font-size:22px;text-align:center;color:red;}
Not-so-great:
p {
font-size:22px;
text-align : center;
color: red;
}
The base format of a rule is selector{property:value;}
It doesn't matter where whitespace goes, as long as the format is correct
3 ways
1. Inline
<p style="color:red;font-size:12px;">Some text.</p>
2. Embedded
<head>
<style type="text/css">
p {
color: red;
font-size: 12px;
}
</style>
</head>
3. External
<head>
<link rel="stylesheet" href="css/styles.css" />
</head>
3. External
<link rel="stylesheet" href="css/styles.css" />
Now we can begin styling!
Enter the element's tag name to target those elements:
p {
color: aqua;
}
p { } in CSS corresponds to <p></p> in HTML
The following selects all image elements:
img {
width: 600px;
}
img { } in CSS corresponds to <img /> in HTML
To target elements that are descended from another element, use a selector for the ancestor, then a space, then a selector for the descendant:
HTML:
<div>
Buy one get one
<strong>free</strong>
<p>
Offer valid
<strong>today</strong>
only
</p>
</div>
CSS:
div strong {
background-color: yellow;
color: blue;
}
Result:
Offer valid today only
Enter a period (.)
followed directly by the class attribute's value
to target all elements with that class:
HTML:
<p class="warning">Lorem ipsum</p>
<span class="warning">Dolor sit amet</p>
CSS:
.warning {
color: red;
}
Result:
Lorem ipsum
Dolor sit amet
.red { } in CSS corresponds to <tagname class="red"></tagname> in HTML
The color property changes the color of the text.
p {
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.7);
}
Options:
There are 140 reserved color names, including: black, blue, aqua, fuchsia, grey, green, lime, maroon, navy, olive, purple, red, and teal
See a full list »
The text-align property aligns text to the left, right, or center
p {
text-align: left;
text-align: right;
text-align: center;
}
The font-family property defines which font is used
body {
font-family: Arial;
}
If a font name is more than one word, it goes in quotation marks (like "Helvetica Neue").
Preferred ✔: Use a prioritized list. The page will load whichever font it recognizes first in the list:
body {
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
Helpful site: CSSFontStack.com »
The font-style property sets italic styling for text
The font-weight property sets text boldness
h4 {
font-style: normal;
font-style: italic;
font-style: oblique;
font-weight: normal;
font-weight: bold;
}
The background-color property changes the color of the background
body {
background-color: black;
background-color: #000000;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.7);
}
The background-image property changes the background image of an element
body {
background-image: url('images/bg.jpg');
background-image: url('http://lorempixel.com/1800/700');
}
Just like images and links, the path to your background image can be relative or absolute
15 pixels on all sides:
selector {
padding: 15px;
}
25 pixels on top only:
selector {
padding-top: 25px;
}
See the Pen Padding by Liz Shaw (@anythingcodes) on CodePen.
selector {
float: left;
float: right;
}
The float property shifts an element to the left or right on the current line, taking it out of normal flow
When an element is floated, subsequent elements wrap around it
An Example
See the Pen Float - Before by Liz Shaw (@anythingcodes) on CodePen.
Sets the width of an element
img {
width: 100px;
}
Sets the height of an element
footer {
height: 200px;
}
Tip: Try to use the descendant selector to style descendants, and the class selector to style elements with classes.
Not sure where styles are coming from? Right-click a page and choose 'Inspect Element'!