Intro to HTML + CSS

HubSpot Logo

tiny.cc/hubspot

Welcome!

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

Get Started: Tools

We'll be using the following tools in class today:

 

Intro to HTML

What is HTML?

  • HTML is the code that allows us to build websites
  • It adds structure to a webpage's content

 

HTML: Hyper Text Markup Language

What's a 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>
					
				

HTML in Action

If you 'View Page Source', you see this:
HTML page source

Anatomy of a Website

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.

Anatomy of a Website

Concrete example
  • Content:
    							
    								A paragraph is your content
    							
    						
  • + HTML: Putting your content into an HTML tag to make it look like a paragraph is structure
    							
    								<p>A paragraph is your content</p>
    							
    						
  • + CSS: Making the paragraph's text red with an 18px font size is presentation
  • = Website: In the browser, the paragraph looks like:

    A paragraph is your content

Tag Breakdown

Tag breakdown

HTML Coding Tip #1

Whenever you type an opening tag, immediately type the closing tag, then fill in your content.

  1. 							
    								<strong>
    							
    						
  2. 							
    								<strong></strong>
    							
    						
  3. 							
    								<strong>Now I can add content!</strong>
    							
    						

Anatomy of an HTML element

Attributes

Attributes in HTML
  • Attribute Name: class, ID, style, href, etc.
    • Placed inside an opening tag, before the right angle bracket.
  • Attribute Value
    • Value is the value assigned to a given attribute
    • Values must be contained inside quotation marks:
      										<a href="https://www.hubspot.com" class="fancy-link">HubSpot</a>
      <img src="my_picture.jpg" />
      <div id="intro">Lorem ipsum</div>
      									

The Fundamental Structure of an HTML File

Doctype

The first thing in an HTML file is the doctype, which tells the browser which language the page is using:

					
						<!DOCTYPE html>
					
				
Various document types

The doctype is case-insensitive.
DOCtype, doctype, DocType and DoCtYpe are all valid.

The Fundamental Structure of an HTML File

HTML Element

After <!DOCTYPE html>, the page content must be contained between <html></html> tags.


<!DOCTYPE html>
<html>

</html>
				

The Fundamental Structure of an HTML File

Head Element

The head contains information about the page, but does not contain page content. It contains elements that let the browser know:

  • The page's title
  • Meta information about the page for search engines: Search results title and description
  • Where to find the CSS file (which styles the page)
<!DOCTYPE html>
<html>
	<head>

	</head>
</html>

The Fundamental Structure of an HTML File

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>
				

Head and Body Tags: Example

example of head and body

The Fundamental Structure of an HTML File

Memorize this ☺

<!DOCTYPE html>
<html>
	<head>
		<title>Title of the page</title>
	</head>
	<body>
		All of your page content goes here
	</body>
</html>

Nesting

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

Nesting: Example

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

Nesting

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?

HTML Coding Tip #2

  1. Whenever you add a 'child' element:
    <body>
    </body>

     

  2. ... indent it on a new line!
    <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.

Get Started: Folder Structure

All the files for your site should be stored within the same folder.

This includes:

  • HTML Files
  • CSS Files
  • Images
  • JavaScript files
  • Anything else that will appear on your site

Note: File names should not include spaces or special characters. File names ARE case sensitive.

Folder Structure

Activity: Project Setup

Folder Structure
  1. Create a master-class folder that contains a css folder and an images folder.
  2. Open your text editor and create a new file. Save it as index.html in the master-class folder.
  3. Add the fundamental structure (a doctype, head, title and body) to index.html.

 

Ignore the styles.css file for now.

Common HTML Tags

Common HTML Tags

Paragraph

HTML:

<p>Paragraph 1</p>
					<p>Paragraph 2</p>
					<p>Paragraph 3</p>

White space outside of any tags won't render (that's just for us humans!):



					<p>Paragraph 1</p>


					<p>Paragraph 2</p>
					<p>Paragraph 3</p>
					

Result:

Paragraph 1

Paragraph 2

Paragraph 3

Common HTML Tags

Paragraphs in Action

Paragraphs allow you to format your content in a readable fashion.

Example of Paragraphs in the wild

You can edit how paragraphs are displayed with CSS

Common HTML Tags

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:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading number indicates hierarchy, not size. Think: Outlines from high school papers

Common HTML Tags

Headings in Action

Example of headings

Common HTML Tags

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.


Note: em and strong are meant to indicate meaning through style. If you want italicized or bold text for appearance and not to communicate meaning, you should use CSS.

Common HTML Tags

Links

Standard links have three components:

  1. The tag:

    <a></a>

  2. The content (the clickable portion within the a element):

    HubSpot's Homepage

  3. The href attribute (the destination of the link):

    href="http://www.hubspot.com"

<a href="http://www.hubspot.com">HubSpot's Homepage</a>

Common HTML Tags

Additional Link Options

  1. The title attribute for descriptive 'hover' text:

    title="View HubSpot's homepage"

  2. The target attribute:

    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>

Common HTML Tags

Additional Link Options

  1. Surround another element, such as a heading or images, within <a></a> tags to link it

     

HTML:

<a href="http://petsmart.com">
	<img src="http://lorempixel.com/150/200/animals/" />
</a>

Result:

Common HTML Tags

Additional Link Options

  1. Make an email link, which launches a user's mail program, by inserting mailto: directly before the email address
    <a href="mailto:liz@hubspot.com">Email me!</a>

Common HTML Tags

Images

Images have three components:

  1. The tag:

    <img />

  2. The src attribute:

    src="http://lorempixel.com/100/100/city/"

  3. The alt attribute:

    alt="Picture of a city"

<img src="http://lorempixel.com/200/200/city/" alt="Picture of a city" />

Picture of a city

* Notice: This tag is our first example of a stand-alone or "self-closing" element.

File Paths

Relative vs. absolute paths for links, images, etc.

  • Relative
    • Relative paths change depending upon the page the link is on.
      • Links within the same directory need no path information. "filename.gif"
      • Subdirectories are listed without preceding slashes. "images/filename.gif"
  • Absolute
    • Absolute paths refer to a specific location of a file, including the domain. "http://www.hubspot.com/images/filename.gif"
    • Typically used when pointing to a link that is not within your own domain.

Common HTML Tags

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



Common HTML Tags

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:

  • Unordered List Item
  • Another List Item
  1. Ordered List Item
  2. Another List Item

Unordered lists (ul) are bulleted by default, while ordered lists (ol) are numbered by default.

Common HTML Tags

Lists in Action

Lists can be used to organize any list of items.

Examples of lists

You'd be surprised how often lists are used in web development.

Common HTML Tags

Layout Dividers

  • <div>
  • <section>
  • <nav>
  • <main>
  • <aside>
  • <article>
  • <header>
  • <footer>

A page divided up into sections

Activity: Add HTML

  1. Open index.html in your text editor
  2. Add a <h1> containing your name
  3. Add two <section>s, one with a class attribute of main and another with a class attribute of footer
  4. Go wild — add paragraphs, bold and italicized text, lists, links, and images

Intro to CSS

CSS: What can it do?

All colored text, positioning, sizes

CSS: What is it?

HTML + CSS

  • HTML structures the content:
    						<p>This paragraph should have red text.</p>
    						
  • Since CSS is a different language, it is kept in a different file (.css instead of .html). CSS says how your structured content should look:
    
    p {
       color: red;
    }
    
    						
  • On your Website, the result is:

    This paragraph should have red text.


Without CSS, your HTML pages would look boring ☺

How does it work?

  1. You make an HTML file
  2. You make a CSS file that describes how specific HTML elements should look
  3. Within the <head></head> of your HTML file, you link to your CSS file
  4. The CSS searches through and selects specific elements that you've said should be styled, and applies that styling

CSS Syntax

CSS Syntax
selector {
   property: values;
}

 

  • A block of CSS code is a rule
  • The rule starts with a selector
  • It has sets of properties and values

CSS Syntax

CSS Syntax

You can add multiple property-value pairs to a rule, each ending with a semicolon:

body {
   color: lightblue;
   background-color: black;
   text-transform: uppercase;
}

CSS Coding Tip #1

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

Connecting CSS to HTML

3 ways

  1. Inline
  2. Embedded
  3. External ✔

Connecting CSS to HTML

1. Inline

<p style="color:red;font-size:12px;">Some text.</p>
  • Not preferred
  • Uses the HTML attribute called style
  • Difficult to use in large projects

Connecting CSS to HTML

2. Embedded

<head>
  <style type="text/css">
    p {
      color: red;
      font-size: 12px;
    }
  </style>
</head>
  • Not preferred
  • Inside head element
  • Uses style tag
  • Needs to be placed in each HTML file

Connecting CSS to HTML

3. External

<head>
  <link rel="stylesheet" href="css/styles.css" />
</head>
  • Preferred by developers everywhere! ✔

  • External CSS saves a lot of work by controlling the look and feel of multiple pages at once
  • Easy to maintain
  • Useful when working with a team
  • Reduced bandwidth
  • Easier for search engines to crawl your site's content

Connecting CSS to HTML

3. External

What We'll Be Coding Today

Design - before and after

View design image »

Activity

  1. Go to tiny.cc/hubspothtml2 and download the file
  2. Unzip the file and move the master-class-2 folder to your Desktop or another convenient area
  3. Create a new file in your text editor and save it as styles.css within the master-class-2/css folder
  4. Add a <link> to css/styles.css in the <head> of the index.html file

 

<link rel="stylesheet" href="css/styles.css" />


Now we can begin styling!

Styling with CSS

Selector: Element

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

Selector: Descendant

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:

Buy one get one free

Offer valid today only

Selector: Class

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

Property: color

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:

  • Color name (e.g. white)
  • Hexadecimal value (e.g. #FFFFFF or #FFF)
  • RGB value (e.g. rgb(255, 255, 255) )
  • RGBA value for opacity (e.g. rgba(255, 255, 255, 0.5) )

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 »

Property: text-align

The text-align property aligns text to the left, right, or center


p {
  text-align: left;
  text-align: right;
  text-align: center;
}
        

Property: font-family

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 »

Properties:
font-style and font-weight

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;
}
        

Property: background-color

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);
}
				

Property: background-image

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

Property: padding

  • Space between the border and the content
  • Adds to the total width of the box
  • Same background color as the content

The Box Model

Padding

15 pixels on all sides:


selector {
  padding: 15px;
}

25 pixels on top only:


selector {
  padding-top: 25px;
}

Property: padding

See the Pen Padding by Liz Shaw (@anythingcodes) on CodePen.

Property: float

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

A floating example

Property: float

An Example

See the Pen Float - Before by Liz Shaw (@anythingcodes) on CodePen.

View result of above CodePen »

Properties: width

Sets the width of an element


img {
  width: 100px;
}
          

Property: height

Sets the height of an element


footer {
  height: 200px;
}
          

Activity

Get Styling!

Design

 

Tip: Try to use the descendant selector to style descendants, and the class selector to style elements with classes.

Tips & Resources

Tip

Using the Inspector

Not sure where styles are coming from? Right-click a page and choose 'Inspect Element'!

Additional Resources

Questions

?