This hands-on session will introduce you to Bootstrap, a powerful HTML/CSS framework for developing responsive web sites. Learn how to leverage the various capabilities of this framework to quickly generate HTML prototypes.
Attendees will work through creating a basic consumer web site. We will look at the new features introduced in Bootstrap 4, a variety of web components, and some basic CSS styling.
Don’t worry if writing HTML is outside your comfort zone, this session will take you from the basics to creating impressive web prototypes in no time.
2. What is HTML & CSS
HTML stands for HyperText Markup Language.
CSS stands for Cascading Style Sheets
HTML is the structure of our web page and CSS
controls the visual presentation of our page
4. Common HTML Terms:Tags
Elements are often made of a set of tags. These
can be referred to as opening tags and closing
tags.
<a>…</a>
<img />
5. Common HTML Terms:Attributes
Attributes are properties within an element.
Common examples of this would be to assign an
id, class or title to an element, or src path for an
image, or a url for a hyperlink
<a href="http://ucsd.edu/">UCSD</a>
6. HTML Document Structure & Syntax
All HTML documents have a required structure
that includes the following declaration and tags:
doctype, html, head, and body.
7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
9. HTML Document Structure & Syntax
The head of the document is used to outline any
meta data, the document title, and links to any
external files.
10. HTML Document Structure & Syntax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a website.</p>
</body>
</html>
11. Common CSS Terms: Selectors
A selector determines exactly which element, or
elements, the corresponding styles will be
applied to. Selectors can include a combination
of different IDs, classes, types, and other
attributes – all depending on how specific you
wish to be.
p { ... }
12. Common CSS Terms: Properties
A property determines the style that will be
applied to an element.
p {
color: #ffff00;
font-size: 16px;
}
13. Common CSS Terms: Values
A value determines the behavior of a property.
Values can be identified as the text in-between
the colon and semicolon.
p {
color: #ffff00;
font-size: 16px;
}
14. CSS Structure & Syntax
CSS works by using selectors to apply styles to
HTML elements. All CSS styles cascade, allowing
different styles to be inherited by multiple
elements.
body {
color: #ffff00;
}
p {
color: #00ff00;
}
15. Long vs. Short Hand
/* Long Hand */
p {
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
}
/* Short Hand */
p {
padding: 20px 30px;
}
16. Comments within HTML & CSS
HTML comments wrap the content starting with
<!-- and end with -->.
CSS comments wrap the content starting with
/* and end with */.
CSS does allow for single line comments using
the //.
17. Selectors
CSS selectors are used to identify which HTML
element to apply the style to.
Some of the most common selectors include
elements, IDs, and classes, or some
combination of the three.
19. Class Selectors
Classes are denoted in CSS by identifying the
class with a leading period.
<div class="mobileCode">...</div>
HTML
.mobileCode { ... }
CSS
20. ID Selectors
ID selectors are similar to class selectors
however they are used to target only one
unique element at a time.
<div id="masthead">...</div>
HTML
#masthead { ... }
CSS
21. Combining Selectors
ul#social li {
padding: 0 6px;
}
ul#social li a {
height: 32px;
width: 32px;
}
ul#social li.twitter a {
background: url(’ollie.png') 0 0 no-repeat;
}
22. Selector Example
UNIVERSAL SELECTOR * { }
TYPE SELECTOR h1, h2, h3 { }
CLASS SELECTOR .note { }
ID SELECTOR #intro { }
CHILD SELECTOR li > a { }
DESCENDANT SELECTOR p a { }
ADJACENT SIBLING SELECTOR h1+p { }
GENERAL SIBLING SELECTOR h1~p {}
23. Referencing CSS
<!-- External CSS File -->
<link rel="stylesheet" href="mystyles.css">
<!-- Internal CSS -->
<style type="text/css">
p {
color: #ff6601;
font-size: 16px;
}
</style>
<!-- Inline CSS -->
<p style="color: #ff6601; font-size: 16px;">A long time ago, in
a galaxy...</p>
24. Divisions & Spans
A div is a block level element commonly used to
identify large sections of a web page, helping
build the layout and design.
A span on the other hand, is an inline element
commonly used to identify smaller sections of
text.
<div>...</div>
<span>...</span>
25. Block vs. Inline Elements
All elements are either block or inline level elements.
What’s the difference?
Block level elements begin on a new line on a page and
occupy the full available width. Block level elements may
be nested inside one another, as well as wrap inline level
elements.
Inline level elements do not begin on a new line and fall
into the normal flow of a document, maintaining their
necessary width. Inline level elements cannot nest a block
level element, however they can nest another inline level
element.
26. Typography
There are a number of different elements to
display text on a web page within HTML.
Headings
Paragraphs
Bold Text with Strong
Italicize Text with Emphasis
27. Headings
Headings are block level elements that come in
six different rankings, h1 through h6.
<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
28. Paragraphs
Paragraphs are defined by using the p block level
element.
<p>Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We
came in peace for all mankind.</p>
<p>What was most significant about the lunar voyage was not that man set foot on
the Moon but that they set eyes on the earth.<p>
29. Bold Text
To make text bold the strong inline level element
is used.
<strong>...</strong>
HTML5
<b>...</b>
HTML4
30. Italicize Text
To italicize text and place a stressed emphasis on
it the em inline level element is used.
<em>...</em>
HTML5
<i>...</i>
HTML4
31. Hyperlinks
One of the core elements of the internet is the
hyperlink, established by using an anchor.
The href attribute, known as hyperlink
reference, is used to set the destination of a link.
<a href="http://ucsd.edu">UCSD</a>
32. Relative & Absolute Paths
The two most common types of links include
links to other pages within a website and links to
other websites. How these links are identified is
by their path, also known as the value of their
href attribute.
<!-- Relative Path -->
<a href="/about.html">About</a>
<!-- Absolute Path -->
<a href="http://www.google.com/">Google</a>
33. Linking to an Email Address
To create an email link the href attribute value
needs to start with mailto: followed by the email
address to where the email should be sent.
<a
href="mailto:chris.griffith@gmail.com?subject=Hell
o&body=This%20is%20awesome">Email Me</a>
34. Linking to Elements within the Same Page
Creating an on page link is accomplished by
specifying an ID on the element you wish to link
to. Then, using the ID of that element in a links
href attribute value.
<a href="#awesome">Awesome</a>
<div id="awesome">Awesome Section</div>
35. <br>
<br />
<BR>
<img src="Logo.png" width=10 height=10 />
<img src="Logo.png" width="10" height="10" />
All ok, but the stricter quoted style is preferred.
39. Header
The header, just as it sounds, is used to identify
the heading of a page, article, section, or other
segment of a page.
<header>...</header>
41. Navigation
The nav is a block level element used to denote
a section of major navigational links on a page.
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>
42. Section
As a block level element, section is defined to
represent a generic document or application
section.
<section>...</section>
43. <div class="section">
<h1>Taking Center Stage</h1>
<p>Drawing from over 30 years of touring the world, Neil breaks
down, demonstrates, and performs classic drum parts from songs
spanning the entire Rush catalog, thereby giving the viewer the most in-
depth insight into Neil’s body of work ever documented.</p>
<p>By Neil Peart</p>
</div>
44. <section>
<h1>Taking Center Stage</h1>
<p>Drawing from over 30 years of touring the world, Neil breaks
down, demonstrates, and performs classic drum parts from songs
spanning the entire Rush catalog, thereby giving the viewer the most in-
depth insight into Neil’s body of work ever documented.</p>
<p>By Neil Peart</p>
</section>
45. Footer
The footer is identical to that of the header
however for the bottom of a page, article,
section, or other segment of a page.
<footer>...</footer>
46. <section>
<header>
<h1>Taking Center Stage</h1>
</header>
<p>Drawing from over 30 years of touring the world, Neil breaks
down, demonstrates, and performs classic drum parts from songs
spanning the entire Rush catalog, thereby giving the viewer the most in-
depth insight into Neil’s body of work ever documented.</p>
<footer>
<p>By Neil Peart</p>
</footer>
</section>
47. Aside
To accompany the header and footer elements
there is also the aside block level element.
<aside>...</aside>
50. Text Color
The only item needed to set the color of text is
the color property. The color property accepts
one value, however in many different formats.
You can use keywords, hexadecimal values, RGB,
RGBa, HSL, and HSLa.
body {
color: #867530;
}
51. Font Family
The font-family property is used to declare
which font, and fallback fonts, should be used to
display text. The value of the font-family
property contains multiple font names, all
comma separated.
p {
font-family: 'Helvetica Neue', Arial, Helvetica, Roboto,
sans-serif;
}
52. Font Size
Using the font-size property provides the ability
to set the size of text using common length
values, including pixels, em, percents, points,
and rems.
p {
font-size: 1.25em;
}
53. Font Style
To change text to italicized and vice versa the
font-style property is utilized.
p {
font-style: italic;
}
54. Font Weight
To set text as bold or set the specific weight of
bold text appears, we can use the font-weight
property.
p {
font-weight: bold;
}
55. Line Height
Line height, the distance between two lines of
text known as leading, is declared using the line-
height property.
The best practice for legibility is to set the line-
height to around one and half times that of your
font-size.
p {
line-height: 1.5em;
}
56. Shorthand Font Properties
All of the font based properties listed above may
be combined and rolled into one font property
and shorthand value. The order of these
properties should fall as follows from left to
right: font-style, font-variant, font-weight, font-
size, line-height, and font-family.
h2, p {
color: #555;
font: 1em/1.75em Arial, 'Helvetica Neue', 'Lucida
Grande', sans-serif;
}
57. Text Properties: Text Align
Using the text-align property such alignment can
be set. The text-align property has five values,
comprising of left, right, center, justify.
h1 {
text-align: center;
}
58. Text Properties: Text Decoration
The text-decoration property accepting the
following keyword values: none, underline,
overline, line-through, blink, and inherit.
a {
text-decoration: none;
}
59. Text Properties: Text Indent
The text-indent property can be used to indent
text like seen within printed books. The text-
indent property can be used to indent text both
inward and outward, all depending on the set
value.
p {
text-indent: 20px;
}
60. Text Properties: Text Shadow
The text-shadow property allows you to add a
shadow, or multiple shadows, to text.
h1 {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
61. Text Properties: Text Transform
The text-transform property accepts five values:
none, capitalize, uppercase, lowercase, and
inherit.
h1 {
text-transform: uppercase;
}
63. Backgrounds & Gradients
Adding a background to an element can be accomplished
in a few different ways, most often in the form of a solid
color, an image, or a combination of the two. The ability
to control exactly how a background is implemented on
an element provides greater direction to the overall
appearance.
With CSS3, new backgrounds and capabilities were
introduced, including the ability to include gradient
backgrounds and multiple background images on a single
element. These progressions are becoming widely
supported within all browsers and expand the
possibilities of modern web design.
64. Adding a Background Color
The quickest way to add a background to an
element is to add a single color background
using the background or background-color
property.
div {
background: #f60;
background-color: #f60;
}
65. Adding a Background Image
On top of adding a background color to an
element you can also add a background image.
div {
background: url('texture.png');
background-image: url('texture.png');
}
66. Background Repeat
By default, a background image will repeat
indefinitely, both vertically and horizontally,
unless specified.
div {
background: url('texture.png') no-repeat;
background-image: url('texture.png');
background-repeat: no-repeat;
}
67. Background Position
Using the background-position property you can
control exactly where the background image is
placed or repeated from.
div {
background: url('alert.png') 10px 10px no-repeat;
background-image: url('alert.png');
background-position: 10px 10px;
background-repeat: no-repeat;
}
68. Lists: Unordered & Ordered
Lists are an everyday part of life. To-do lists
determine what to get done. Navigational routes
provide a turn by turn list of directions. Recipes
provide both a list of ingredients and a list of
instructions.
HTML provides three different types of lists to
choose from when building a page, including
unordered, ordered, and definition lists.
69. Unordered List
Unordered lists are purely a list of related items,
in which their order does not matter nor do they
have a numbered or alphabetical list element.
<ul>
<li>iOS</li>
<li>Android</li>
<li>Windows Phone</li>
</ul>
70. Ordered List
The ordered list element, ol, works just like the
unordered list element. Instead of showing a dot
as the default list item element, an ordered list
uses numbers.
<ol>
<li>iOS</li>
<li>Android</li>
<li>Windows Phone</li>
</ol>
71. List Style Type Property
• none
No list item
• disc
A filled circle
• circle
A hollow circle
• square
A filled square
• decimal
Decimal numbers
• decimal-leading-zero
Decimal numbers padded by
initial zeros
• lower-roman
Lowercase roman numerals
• upper-roman
Uppercase roman numerals
• lower-greek
Lowercase classical Greek
• lower-alpha / lower-latin
Lowercase ASCII letters
• upper-alpha / upper-latin
Uppercase ASCII letters
72. Using an Image as a List Item
There may come a time when the default list
style type values are not enough, or you simply
want to customize your own list item element.
li {
background: url('tick.png') 0 0 no-repeat;
list-style: none;
padding-left: 20px;
}
73. Horizontally Displaying List
Occasionally lists may need to be displayed
horizontally rather than vertically.
The quickest way to display a list within a single
line is to set the list item to have a display
property of inline.
li {
display: inline;
margin: 0 10px;
}
74. Navigational List Example
<ul>
<li><a href="#" title="Profile">Profile</a></li>
<li><a href="#" title="Settings">Settings</a></li>
<li><a href="#" title="Notifications">Notifications</a></li>
<li><a href="#" title="Logout">Logout</a></li>
</ul>
HTML
77. Navigational List Example
li:first-child a {
border-left: none;
border-radius: 4px 0 0 4px;
}
li:last-child a {
border-right: none;
border-radius: 0 4px 4px 0;
}
CSS
78. Adding Images
For the img element to work, a src attribute
value must be included to specify the source of
the requested image. The src attribute value
comes in way of a URL, most often relative to
the server upon which the website is hosted.
<img src="cats.jpg" alt="grumpy cat">
79. Sizing Images
There are a couple of different ways to size
images so that they work well on a page. One
option is to use the height and width attributes
directly within the img tag in HTML.
img {
height: 200px;
width: 200px;
}
<img src="cat.jpg" width="200" height="200" />
80. Forms
Forms are an essential part of the internet as
they provide a way for websites to capture
information about users, process requests, and
give controls for nearly every use of an
application imagined.
81. Initializing a Form
To begin a form on a page the form element
must be used. The form element signifies where
on the page control elements will appear.
<form action="#" method="foo">
...
</form>
82. Text Fields
One of the primary elements used to obtain text
from users is the input element.
Along with setting a type attribute it is also best
practice to give an input a name attribute as
well.
<input type="text" name="sample_text_field">
83. HTML5 Inputs
Originally, the only two text based type attribute
values were text and password, for password
inputs.
• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week
85. Textarea
Another element used to capture text based
data is the textarea element. The textarea
element differs from the text input in that it is
for larger passages of text spanning multiple
columns.
<textarea name="sample_textarea">Sample
textarea</textarea>
86. Radio Buttons
Radio buttons are a quick and easy way to show
a small list of options and allow users to make a
quick decision. Radio buttons only allow users to
select one option, as opposed to selecting
multiple options.
<input type="radio" name="day" value="Friday"
checked> Friday
<input type="radio" name="day" value="Saturday">
Saturday
<input type="radio" name="day" value="Sunday">
Sunday
87. Checkboxes
Checkboxes are very similar to that of radio
buttons.
<input type="checkbox" name="day" value="Friday"
checked> Friday
<input type="checkbox" name="day"
value="Saturday"> Saturday
<input type="checkbox" name="day" value="Sunday">
Sunday
88. Drop Down Lists
Drop down lists are a perfect way to provide
users with a long list of options in a usable
manner.
<select name="day">
<option value="Friday" selected>Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>
89. Submit Button
Users click the submit button to process data
after filling out a form.
<input type="submit" name="submit" value="Submit
Form">
90. Label
Labels provide captions, or headings, for form
elements. The value of the for attribute should
be the same as the value of the id attribute
included within the form element the label
corresponds to.
<label for="username">Username</label>
<input type="text" name="username" id="username">
91. Disabling
The disabled Boolean attribute turns off an
element or control so that it is not available for
interaction or input. Elements that are disabled
will not send any values to the server for form
processing.
<label for="username">Username</label>
<input type="text" name="username" id="username"
disabled>
92. Placeholder Attribute
The placeholder HTML5 attribute provides a tip
within the control of an input and disappears
once the control is clicked in, or gains focus.
<label for="username">Username placeholder</label>
<input type="text" name="username" id="username"
placeholder="Holder">
93. Required Attribute
The required HTML5 attribute enforces that an
element or control contain a value upon being
submitted to the server. Should an element or
control not have a value an error message will
be displayed requesting a user complete the
required field. Currently error message styles
are controlled by the browser and are unable to
be styled with CSS.
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
94. Creating a Table
In general tables are made up of data within
rows and columns.
<table>
...
</table>
95. Table Row
A table can have numerous table rows, or tr
elements.
<table>
<tr>
...
</tr>
<tr>
...
</tr>
</table>
96. Table Data
The table data element creates a cell, of which
may include data.
<table>
<tr>
<td>Date</td>
<td>Artist</td>
<td>Location</td>
<td>Time</td>
</tr>
<tr>
<td>Monday, March 5th</td>
<td>Rush: Clockwork Angels Tour</td>
<td>United Center, Chicago, IL</td>
<td>7:00 PM</td>
</tr>
</table>
97. HTML Coding Practices
HTML by nature is a forgiving language, allowing
poor code to execute and render accurately.
<p id="intro"><strong>Lorem ipsum dolor sit.</p></strong>
<p id="intro">Ut enim veniam, quis nostrud exercitation.
Bad Code
<p class="intro"><strong>Lorem ipsum dolor sit.</strong></p>
<p class="intro">Ut enim veniam, quis nostrud exercitation.</p>
Good Code
98. Make Use of Semantic Elements
HTML has well over 100 elements available for
use. Deciding what elements to use to markup
different content can be difficult…
<span class="heading"><strong>Welcome Back</span></strong>
<br /><br />
Duis aute irure dolor in reprehenderit in voluptate.
<br /><br />
Bad Code
<h1>Welcome Back</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate.</p>
Good Code
99. Use Practical ID & Class Values
Creating ID and class values can oddly be one of
the more difficult parts of writing HTML.
<p class="red">Error! Please try again.</p>
Bad Code
<p class="alert">Error! Please try again.</p>
Good Code
The doctype declaration is used to instruct web browsers which version of HTML is being used and is placed at the very beginning of the HTML document. Following the doctype declaration, html tags signify the beginning and end of the document.
. It is permissible to use the same class attribute on multiple elements on a page.
In place of a period, as with classes, IDs are denoted by identifying the ID with a leading hash sign. IDs are only allowed to be used once per page and should ideally be reserved for significant elements.
A beauty of CSS is the ability to combine selectors and inherit styles. This allows you to start with a more generic selector and work your way to being more specific as necessary. In addition, you can combine different selectors to be as specific as you wish.
DEMO css_selectors
li > a Targets any <a> that are children of an <li> element
p a Targets any <a> that sit inside a <p>, even if other elements are nested between them
h1+p Targets the first <p> after any <h1>
h1~p
Semantics have been mentioned a number of times thus far, so exactly what are semantics? Semantics within HTML is the practice of giving content on the page meaning and structure. These semantics portray the value of content on a page, and are not solely used for styling purposes. Using semantic code provides a handful of benefits, including giving computers, screen readers, search engines, and other devices the ability to adequately read and understand web pages. Additionaly, semantic code is easier to manage and work with, knowing clearly what each piece of content is about.
By nature the a element is an inline element, however with the introduction of HTML5, a elements now have the ability to wrap block or inline level elements. This is a break from the standard convention yet permissible to turn entire blocks of content on a page into a link.
The header element should not be confused with the head or headings, h1 through h6.
The header element is a structural element that outlines a heading on a page, of which falls within the body element on a page. The head element is not displayed on the page and is used to outline meta data, the document title, and links to external files.
The section element represents a generic document or application section. It acts much the same way a <div> does by separating off a portion of the document.
The text-align property, however should not be confused with the float property. The text-align values left and right will align text within an element, where the float values left and right will move the entire element.
The text-align property, however should not be confused with the float property. The text-align values left and right will align text within an element, where the float values left and right will move the entire element.
The property requires four values all listed one after the other from left to right. The first three values are all lengths while the last value is a color. Within the three length values the first value determines the shadow’s horizontal offset, the second value determines the shadow’s vertical offset, and the third value determines the shadow’s blur radius. The fourth, and last, value is the shadow’s color, which can be any of the color values used within the color property.
Using CSS, these numbers can then be changed to letters, Roman numerals, and so on.
Using CSS, these numbers can then be changed to letters, Roman numerals, and so on.
Matching up the for and id values ties the two elements together, allowing users to click on the label to get focused within the proper form element.