Rapid HTML Prototyping with Bootstrap 4

@ChrisGriffith
Intro to HTML & CSS

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

Common HTML Terms:Elements
Elements are objects within a page. Common
elements are paragraphs, anchors, div, span,
headers.
<a>
<img>

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

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>

HTML Document Structure & Syntax
All HTML documents have a required structure
that includes the following declaration and tags:
doctype, html, head, and body.

<!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">

The head of the document is used to outline any
meta data, the document title, and links to any
external files.

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

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

Common CSS Terms: Properties
A property determines the style that will be
applied to an element.
p {
color: #ffff00;
font-size: 16px;
}

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

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

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

Comments within HTML & CSS
HTML comments wrap the content starting with
.
CSS comments wrap the content starting with
/* and end with */.
CSS does allow for single line comments using
the //.

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.

Type Selectors
Type selectors are the most basic selector.
<p> … </p>
HTML
p { … }
CSS

Class Selectors
Classes are denoted in CSS by identifying the
class with a leading period.
<div class="mobileCode">...</div>
HTML
.mobileCode { ... }
CSS

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

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

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

Referencing CSS

<link rel="stylesheet" href="mystyles.css">

<style type="text/css">
p {
color: #ff6601;
font-size: 16px;
}
</style>

<p style="color: #ff6601; font-size: 16px;">A long time ago, in
a galaxy...</p>

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>

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.

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

Headings
Headings are block level elements that come in
six different rankings, h1 through h6.
<h1>This is a Level 1 Heading</h1>

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>

Bold Text
To make text bold the strong inline level element
is used.
<strong>...</strong>
HTML5
<b>...</b>
HTML4

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

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>

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.

<a href="/about.html">About</a>

<a href="http://www.google.com/">Google</a>

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>

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>

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

HTML5 Structural Elements
<section />
<header />
<footer />
<aside />
<nav />
<article />
<hgroup />

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>

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>

Section
As a block level element, section is defined to
represent a generic document or application
section.
<section>...</section>

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

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>

Aside
To accompany the header and footer elements
there is also the aside block level element.
<aside>...</aside>

Rapid HTML Prototyping with Bootstrap 4

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

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

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

Font Style
To change text to italicized and vice versa the
font-style property is utilized.
p {
font-style: italic;
}

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

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

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

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

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

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

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

Text Properties: Text Transform
The text-transform property accepts five values:
none, capitalize, uppercase, lowercase, and
inherit.
h1 {
text-transform: uppercase;
}

Embedding Web Fonts
@font-face {
font-family: 'Bryant Normal';
src: url('bryant-normal.eot');
src: url('bryant-normal.eot') format('embedded-opentype'),
url('bryant-normal.woff') format('woff'),
url('bryant-normal.ttf') format('truetype'),
url('bryant-normal.svg') format('svg');
}
body {
font-family: 'Bryant Normal', 'Helvetica Neue', Arial, Helvetica, sans-
serif;
}

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.

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

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

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

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

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.

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>

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>

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

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

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

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

ul {
list-style: none;
margin: 0;
}
li {
float: left;
}
CSS

a {
background: #404853;
background: linear-gradient(#687587, #404853);
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
display: block;
font-size: 11px;
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
text-transform: uppercase;
}
CSS

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

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

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" />

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.

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>

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

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

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>

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

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

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>

Submit Button
Users click the submit button to process data
after filling out a form.
<input type="submit" name="submit" value="Submit
Form">

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

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>

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

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>

Creating a Table
In general tables are made up of data within
rows and columns.
<table>
...
</table>

Table Row
A table can have numerous table rows, or tr
elements.
<table>
<tr>
...
</tr>
<tr>
...
</tr>
</table>

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>

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

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

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

Resources
HTML and CSS: Design and
Build Websites
Jon Duckett

Rapid HTML Prototyping with Bootstrap 4

More Related Content

What's hot (20)

Similar to Rapid HTML Prototyping with Bootstrap 4 (20)

More from UXPA International (20)

Recently uploaded (20)

Rapid HTML Prototyping with Bootstrap 4

Editor's Notes