Intro to HTML + CSS

View Github Repository Open presentation in a new window

anythingcodes

See all presentation from anythingcodes

Intro to HTML + CSS

0 0

hubspot-html-css

A 1-hour intro to HTML/CSS for a HubSpot master class

On Github anythingcodes / hubspot-html-css

Show navigation

Intro to HTML + CSS

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:

 

Ask if everyone was able to download everything. If not, no big deal. download now.

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

Point out how the bullet's line is content, but 'structure' looks different because of how it's marked up by HTML (start yellow, end yellow).

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>
Call attention to the slash?

HTML in Action

If you 'View Page Source', you see this:

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

We'll get to CSS next week. SHOW EXAMPLE OF PAGE WHERE CSS IS 'BROKEN.' MOST PEOPLE HAVE SEEN THIS HAPPEN.

Tag Breakdown

HTML Coding Tip #1

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>
Prevents any stray unclosed tags -- show an example in NotePad?

Anatomy of an HTML element

Attributes

  • 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: 
      									<img src="my_picture.jpg" />
									<div id="intro">Lorem ipsum</div>
									<a href="http://hubspot.com" class="fancy-link">HubSpot</a>
Attribute placed inside an opening tag, right before the angle bracket. Can add as many as you want and order doesn't matter. Code an example of an image with multiple attributes (src, ID, class, alt, title). Each attribute separated by a space with name="value".

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>

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

Exclamation mark indicates informative content that doesn't show up as text on the screen. Example: A human can look at a type of document and understand what type of document that is (letter, award, outline, etc.), but a browser has to be told specifically what it's looking at. Reads from top to bottom -- now that it knows it's HTML, it moves on to parsing the rest of the document as HTML.

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>
We'll get into the CSS file part next week

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

Make a quick example on your machine, showing some head tags (title, possibly meta description), and some body tags as you update.

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>
Memorize this, and you will go far! Every page begins with this.

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

Do this example in Notepad++.

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?

Hint: There is one pair of siblings, so two siblings total. HTML tag called the 'root' element, parent of all parents.

HTML Coding Tip #2

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

 

... 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.

Helps you more obviously see the family relationships and troubleshoot problems.

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.

If confused by file system, don't worry, can still get through class by starting from scratch.

Activity: Project Setup

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

 

Ignore the styles.css file for now.

Ignore the CSS file for now. Code this alongside students from scratch. Have them open up index.html in Chrome and in NotePad++, tell them to refresh every time you add text to their text editor.

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.

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

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:

The tag:

<a></a>

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

HubSpot's Homepage

The href attribute (the destination of the link):

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

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

a standards for anchor

Common HTML Tags

Additional Link Options

The title attribute for descriptive 'hover' text:

title="View HubSpot's homepage"

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>

The "title" is mainly for accessibility. Provides additional description when link hovered over. Show example of hover text?

Common HTML Tags

Additional Link Options

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:

Mention that we'll get to images very soon.

Common HTML Tags

Additional Link Options

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:

The tag:

<img />

The src attribute:

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

The alt attribute:

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.

Clarify what lorempixel is if you haven't already.

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.
Analogy: Relative paths are like directions, absolute are like a specific address. Show example: Save an image from somewhere, then reference it in NotePad++

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, babyRight round like a record, babyRight 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
Ordered List Item 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.

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>

Common HTML Tags

Character Codes

  • Copyright symbol: © 
    &copy;
  • Space (to make consecutive spaces): 
    &nbsp;
  • Double arrow: » 
    &raquo;
  • Less than, greater than: < and > 
    &lt; and &gt;
  • A full list is available here

Activity: Add HTML

Open index.html in your text editor Add a <h1> containing your name Add two <section>s, one with a class attribute of main and another with a class attribute of footer Go wild — add paragraphs, bold and italicized text, lists, links, character codes, and images
Mention breaking a page up into rows

Intro to CSS

CSS: What can it do?

All colored text, positioning, sizes

Our class project

CSS: What is it?

In this class, only going to cover 'screen' aspect. Intermediate, get into responsive development, which is when your page responds to the width of your device.

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 ☺

We'll go over CSS syntax shortly.

How does it work?

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

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
Don't really need to know what each portion is called, more concerned with you knowing how to use them. Selector, curly brace, property, colon, property value, semicolon. Whitespace doesn't matter.

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

Inline Embedded External ✔ Why mention if they aren't recommended? Just in case you see it as you are editing code.

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
We are in the HTML file now, NOT the CSS file.

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
We are in the HTML file now, NOT the CSS 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
Team: For content entry, inefficient to keep flipping through a style guide to see what color, font-size, etc. a certain heading should be. Instead, you can let the CSS control the styling for you. Also introduce concept of 'separation of concerns'. Bandwidth: caching, so downloaded once. Divide and conquer!

Connecting CSS to HTML

3. External

What We'll Be Coding Today

View design image »

Activity

Go to tiny.cc/hubspothtml2 and download the file Unzip the file and move the master-class-2 folder to your Desktop or another convenient area Create a new file in your text editor and save it as styles.css within the master-class-2/css folder 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!

Do this with students! Point out that the relative path is the same, since we're in index.html and going into the css folder. Give them some body BG CSS to ensure it's working properly.

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

There are other selectors that we'll get into later. Start with this one so we can style different elements as we move along. CODE THE P AND IMG EXAMPLES FOR THEM.

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

Ask students which words would have a yellow BG with blue italicised text. Ask students what element would be an immediate child of the div. CODE EXAMPLE WITH STRUCTURE, AND ASK WHAT ANCESTORS OF A CERTAIN ELEMENTS WOULD HAVE. Also ask about two different ways to target an H1, for example.

Selector: Class

Enter a period (.)followed directly by the class attribute's valueto 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

Rare that you'll want every div to have a black background, for instance, or every link to be the same color. Need a way to narrow that down further. We'll use this to distinguish our main and footer sections. We'll use classes to style our footer and main content differently. OPTIONAL: Mention IDs, as well, and that they are unique. Example includes 'Raise your hand if you have dark hair. Those people would have a class of 'darkhair', while an individual person would have a unique ID, such as SSN, which could be used to target individually.'

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 tealSee a full list »

NOT EXPECTED TO KNOW HOW THIS WORKS: Lots of ways to refer to colors other than the color name. Mention that, when you see the same property on different lines, that just means they're different settings you can use for that property.Mention that the RGBA controls opacity, while RGB is solid. Can shorten hexadecimals to three characters if the R/G/B channel value for each is the same. For example, #ffcc00 can become #fc0. Hexadecimal values are base-16.

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 »

Recognizes = have downloaded to their machine. Possibly mention CSSfontstack.com? Mention web-safe fonts, and also give example with Segoe UI. Also, say that these two blocks of CSS mean different things. The first overwrites, while the second is a prioritization. Called 'family' because all of these fonts look similar. Point out that applying fonts, background, etc. to the body element applies it to all the children.

Properties:font-style and font-weight

The font-style property sets italic styling for textThe 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);
}
Mention RGBA if you haven't already. Do this alongside them!

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

Applying a background to the body element is how you should set your entire page's background. Show them how it can work alongside the color property -- google 'transparent texture background'. EMPHASIZE STARTING FILE LOCATION AND WHAT ../ MEANS.

Property: padding

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

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

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!

 

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

A whole lot! Don't need to use all. Mention that you can append this styling to the same rule, and code an example.

Tips & Resources

Tip

Using the Inspector

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

Additional Resources

Questions

?
Can always Slack us!
HubSpot — Intro to HTML + CSS —