rapid html prototyping with bootstrap 4
Post on 11-Apr-2017
357 Views
Preview:
TRANSCRIPT
@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>
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.
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>
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 <!-- and end 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<!-- 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>
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.
<!-- Relative Path --><a href="/about.html">About</a>
<!-- Absolute Path --><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=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.
<semantic markup/>
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
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>
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
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>
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
Navigational List Example
ul { list-style: none; margin: 0;}li { float: left;}
CSS
Navigational List Example
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
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
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
top related