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

<!DOCTYPE html>


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

HeadingsParagraphsBold Text with StrongItalicize 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><h2>This is a Level 2 Heading</h2><h3>This is a Level 3 Heading</h3>

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:[email protected]?subject=Hello&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 />

HTML4 structure

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>

<header> != Masthead

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>

<section><h1>Taking Center Stage</h1><p>Drawing from over 30 years of touring the


<p>By Neil Peart</p></section>

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>

<section><header>

<h1>Taking Center Stage</h1></header><p>Drawing from over 30 years of touring the


<footer><p>By Neil Peart</p>

</footer></section>

Aside

To accompany the header and footer elements there is also the aside block level element.

<aside>...</aside>

HTML5 structure

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 & GradientsAdding 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-romanLowercase 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

HTML5 Inputs

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

Technology