4. Common HTML terms
Elements Tags Attributes
<h1>I’m a HTML Element</h1>
<p>so am I!</p>
<a>We’re a tag</a>
<h2>because I</h2>
<p>have brackets</p>
<a href="http://shayhowe.com/">
You find me
</a>
<p title="I'm a tooltip">
after an equal sign
</p>
8. HTML CHEAT SHEET
DOCUMENT OUTLINE
<!DOCTYPE>
<html>
<head>
<body>
Version of html
HTML document
Page information
Page documents
COMMENTS
<!--comment text-->
PAGE INFORMATION
<base/>
<meta/>
<title>
<link/>
<style>
<script>
Base URL
Meta data
Title
Relevant resource
Style resource
Script esource
DOCUMENT STRUCTURE
<h[1-6]>
<div>
<span>
<p>
<br/>
<hr/>
Heading
Page section
Inline section
Paragraph
Line break
Horizontal rule
LINKS
<a href=””>
<a href=”mailto:”>
<a href=”name”>
<a href=”#name”>
Page link
Email link
Anchor
Link to anchor
TEXT MARKUP
<strong>
<em>
<blockquote>
<q>
<abbr>
<acronym>
<address>
<pre>
<dfn>
<code>
<cite>
<del>
<ins>
<sub>
<sup>
<bdo>
Strong emphasis
Empahasis
Long quotation
Short quotation
Abrreviation
Acronym
Address
Pre-formatted text
Definition
Code
Citation
Deleted text
Inserted text
Subscript
Superscript
Text direction
<form>
<fieldset>
<legend>
<label>
<input/>
<select>
<optgroup>
<option>
<textarea>
<button>
Form
Collection of fields
Form legend
Input label
Form input
Drop-down box
Group of options
Drop-down options
Large text input
Button
FORMS
IMAGES AND IMAGE MAPS
<img/>
<map>
<area/>
Image
Image map
Area of image map
LISTS
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
Ordered list
Unordered list
List item
Definition list
Definition term
Term description
TABLES
<table>
<caption>
<thead>
<tbody>
<tfoot>
<colgroup>
<col/>
<tr>
<th>
<td>
Table
Caption
Table header
Table body
Table footer
Column group
Column
Table row
Header cell
Table cell
CORE ATTRIBUTES
class
id
style
title
*<br/> empty tags
19. Type Selectors
Type selectors target elements by their element type
div { ... }
<div>...</div>
CSS
HTML
<div>...</div>
20. Class selectors allow us to select an element based on
the element’s class attribute value.
Class Selectors
.awesome { ... }
<div class=”awesome”>...</div>
CSS
HTML
21. ID Selectors
#anacidre { ... }
<div id=”anacidre”>...</div>
CSS
HTML
ID selectors are even more precise than class selectors, as they
target only one unique element at a time.
24. In order to get our CSS talking to our HTML, we need to reference our
CSS file within our HTML.
<head>
<link rel="stylesheet" href="main.css">
</head>
26. 1.1 Inside of our “styles-conference” folder, let’s create a new
folder named “assets.”
1. Create a folder named “styles-conference” inside our initial
folder.
1.2 For our style sheets, let’s go ahead and add another
folder named “stylesheets” inside the “assets” folder.
1.3 A new file named main.css and save it within the
“stylesheets” folder we just created.
1.4 Head over to Eric’s website, copy his reset, and paste
it at the top of our main.css file:
http://meyerweb.com/eric/tools/css/reset/
27. 2. Let’s connect our stylesheet to our index.html file.
<head>
<meta charset="utf-8">
<title>Your title here</title>
<link rel="stylesheet" href="main.css">
</head>
