The100 HTML5 Bootstrap Primer by SynergyNT
I'm going to take a stab at writing a primer for HTML5 bootstrap, with specific attention paid to what is and isn't supported on the100 pages. While I have prior knowledge of HTML, most of my knowledge of HTML5 Bootstrap comes from what I learned via w3schools (http://www.w3schools.com/bootstrap/) and testing on our the100 page (https://www.the100.io/groups/135). If you're at all comfortable with HTML, CSS or programming languages, you may find it more beneficial to use other resources. I also can't promise how much or how often I'll update this, so please bear with me.
HTML5 Bootstrap is designed to be scalable and responsive so it functions similarly well on mobile devices as it does on laptop and desktop computers. Due to other systems involved, not all features of HTML5 Bootstrap can be used on the100 pages. It is recommended that buttons and other elements designed to look like buttons be avoided on the100 pages.
It is generally good practice to place elements on their own lines, indenting them to make them easier to read, but on the100 pages, the Latest News input box will interpret some of this text and insert its own breaks and spaces in your content. To avoid this, simply run each tag directly behind the last and manually insert tags where you need line breaks.
HTML Tags
Most HTML is written with tags, which generally consist of angle brackets on either end of a keyword or property with its value represented in a mathematical structure. Some tags require a closing tag that consists of the same keyword with a forward slash before it and others can be self-closed where the forward slash is placed at the end of the initial tag. Examples of both are below. Note that classic font tags are not supported on the100 pages.
<font color="red">This is header text</font> <br />
CSS
CSS, or Cascading Style Sheets, are used to provide more detailed formatting and layout options for web pages. CSS can either be presented in a separate stylesheet (.css) file, in a section within the header section of an HTML file or inline within HTML tags. Since we do not have access to load stylesheets or modify the base HTML files for the100 pages, we must use inline CSS. We are also limited by what is supported in HTML5 Bootstrap. The best method I have found is to specify a CSS class within an HTML tag, as demonstrated below.
<h3 class="issue-item">Your Text Here</h3>
Paragraphs and Divisions
The paragraph and division tags are generally used to organize and group content. It is also possible to use CSS classes to change the style of groups of text and sometimes other elements.
<div class="alert alert-info">Your Content Here</div>
<p>Paragraph Text</p>
Breaks and Horizontal Rules
Breaks and horizontal rules are used to insert blank lines or visible horizontal lines between sections of other content or text. Both tags can be self-closed.
<br />
<hr />
Hyperlinks
Hyperlinks use the anchor tag as demonstrated below. The text between the anchor tags can be plain text or another element, such as an image.
<a href="the100.io">The100</a>
Images
Images have several standard properties, but also support specific styling through HTML5 Bootstrap. It is recommended to use https URLs for images on the100 pages to avoid issues with the overall page. Only the src property in the example below is truly required.
Imgur is a good site to host pictures that you would like to add.
<img src="https://www.the100.io/assets/the-100-logo-cac04317141c8a2db77ac43a93e4a493.png" class="img-circle" alt="Text If Image Fails To Load" title="Text When Hovering Mouse" width="150" height="49" />
Heading Text
HTML5 Bootstrap supports headings 1-6, with heading 1 being the largest and heading 6 being the smallest. Heading tags also support CSS classes.
<h1>Big Text</h1>
<h3 class="issue-item">Medium Text with Styling</h3>
<h6>Small Text</h6>
Lists
Lists can either be ordered (1, 2, 3...) or unordered. The unordered list will not contain a bullet or other marker on each item as has been standard with HTML in the past. Each list must start and end with a tag defining the type of list, then contain individual list item tags within. The list item tag is the same, regardless of the type of list chosen. The first example below is written with all tags immediately following each other as should be used on the100 pages and the second example uses standard formatting best practice.
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li><a href="www.google.com">Item 3</a></li>
</ul>
GlyphIcons
HTML5 Bootstrap supports the GlyphIcons Halflings set of icons listed at http://glyphicons.com/. These icons are specified as a class within an HTML span tag.
<span class="glyphicon glyphicon-envelope"></span>
Bold Text
<b>this text is bold</b>
Italic Text
<i>this text is italic</i>
Comments
0 comments
Please sign in to leave a comment.