tbennett’s gists

tbennett / HTML5 Template

Last active December 30, 2021 22:06

A basic HTML5 template based on HTML5 Bolierplate minus the Google analytics bits

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Page Title</title>
	<link rel="stylesheet" href="styles/css/main.css" />
	</head>

	<body id="home">

tbennett / form_example

Last active April 5, 2022 20:41

HTML5 Example Form

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTML5 Example Form: Kitchen-Sink</title>
	</head>
	<body>

tbennett / figure-demo

Last active October 31, 2019 07:26

Figure example with caption

	<style>
	.media-module {
	width:300px; border:solid;padding:10px;margin:0;
	}
	.media-module .main-item {
	width:100%; height:auto; background:#ccc;
	}
	.media-module .caption {
	font-size:.75em;
	margin-top:.5em;

tbennett / Description List

Last active August 29, 2015 14:10

Description Lists - previously known as Definition Lists

	<!--
	Description List (aka. Definition List)
	more info here:
	https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

	you can use mutiple DT's or DD's per list entry
	-->

	<dl>
	<dt>Ira Glass</dt>

tbennett / header-demo

Last active September 18, 2022 04:25

Header example with logo, tagline, search, nav, and meta-nav

	<!--
	An example of how one might setup the HTML for a site header complete with
	a meta nav and main site navigation. Source order could be changed, but I consider
	the H1 and main nav more important than the meta nav, so that's how I ordered things.

	Styles are added just to give an impression as to how this might be set up
	visually.
	-->
	<!DOCTYPE html>
	<html lang="en">

tbennett / flexbox-example

Last active April 13, 2020 21:55

Basic Flexbox Layout Example

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Flexbox Demo</title>
	<style>

tbennett / HTML-selectList-US-States

Last active April 5, 2022 20:42

A HTML form select with US states and territories

	<form id="res_form" action="" method="post" accept-charset="utf-8">
	<fieldset>
	<legend>Guest Information<span>* Indicates required field</span></legend>

	<label for="state">* State/Territory/Associations</label>
	<select name="state" required title="Please select a state or territory.">
	<option value="">select your location</option>
	<optgroup label="US Territories">
	<option value="AS">American Samoa</option>
	<option value="PR">Commonwealth of Puerto Rico</option>

tbennett / HTML Table Example

Last active October 12, 2021 05:58

Example of HTML Table w/ header,footer and body



	<table id="example" class="display" border="1">
	<!-- in HTML5 the summary, cellspacing, and cellpadding attributes are obsolete/deprecated -->
	<caption> Global Employees Listing</caption>
	<thead>
	<tr>
	<th scope="col">Name</th>
	<th scope="col">Position</th>
	<th scope="col">Office</th>

tbennett / HTML Mobile 1st Example (inline-block) DON'T USE! for reference only

Last active June 12, 2019 01:23

Mobile 1st: Responsive multiple columns using display:inline-block and single media query


	<!doctype html>
	<html>
	<head>
	<title>test</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<!-- specialized typefaces can be added to a webpage from external sources -->

tbennett / HTML Mobile 1st Example (FLOATS) DON'T USE! for reference only

Last active June 12, 2019 01:22

HTML Mobile 1st: Responsive multicolumn layout using floats and single media query

	<!doctype html>
	<html>
	<head>
	<title>test</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style>
	/* Ideally, this stylesheet should be external and linked to this document.
	it is embedded here to simplify the demo process */

tbennett tbennett