Embed Size (px)
DESCRIPTION
H tags, line breaks, and alt-text, oh my! HTML is an essential element in a blogger's tool box. In this session, you'll learn basic HTML tricks that can make your blog even better while also enhancing your site's overall functionality.
Citation preview
<HTML>101
Basic HTML
Content Formatting<h[1-6]>...</h1>
<p>...</p>
<br />
<span>...</span>
<blockquote>...</blockquote
Content Styling<strong>...</strong>
<em>...</em>
<hr />
Basic HTML
<h1>This is my Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentu.
mauris nec velit molestie sit amet dignissim est euismod. Nulla interdum nulla eu metus scelerisque adipiscing.<br />Cras aliquam interdum mi, non posuere massa condimentum a. Sed placerat lacus sed nisi dictum accumsan. Etiam in turpis vitae felis vehicula interdum. Phasellus ac arcu elementum nisi varius feugiat. Sed vel purus nec diam aliquam tempor vitae id felis. Phasellus nec leo a purus tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p><blockquote>Aliquam quam justo, bibendum vitae tristique nec, dapibus eu nisl. Cras ut enim mauris, in molestie nibh. Donec egestas ante </blockquote><p>eget nisi imperdiet in feugiat nulla tincidunt.</p>
<h2>My Sub Header</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentu.
mauris nec velit <span>molestie sit amet dignissim est euismod. </span>Nulla interdum nulla eu metus scelerisque adipiscing.</p>
Basic HTML
<h1>This is my Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentu.
mauris nec velit molestie sit amet dignissim est euismod. Nulla interdum nulla eu metus scelerisque adipiscing.<br />Cras aliquam interdum mi, non posuere massa condimentum a. Sed placerat lacus sed nisi dictum accumsan. Etiam in turpis vitae felis vehicula interdum. Phasellus ac arcu elementum nisi varius feugiat. Sed vel purus nec diam aliquam tempor vitae id felis. Phasellus nec leo a purus tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <blockquote><em>Aliquam quam justo, bibendum vitae tristique nec, dapibus eu nisl. Cras ut enim mauris, in molestie nibh. Donec egestas ante </em></blockquote><p>eget nisi imperdiet in feugiat nulla tincidunt.</p>
<h2>My Sub Header</h2><p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
fermentu. mauris nec velit</strong> <span>molestie sit amet dignissim est euismod. </span>Nulla interdum nulla eu metus scelerisque adipiscing.</p>
Basic CSS
CSS can be used to either provide global styling or tag specific styling either by entering them on a specific page or by using a external style sheet
<style type=”text/css”>[styles here]</style>
<link rel="stylesheet" href="myCssDocument.css" />
Class or ID
<h1 class=”myStyle”>
Inline style
<h1 style=”[styles here]”>
Basic CSS
<h1 style="border-bottom:1px solid #CCCCCC;">This is my Title</h1>
<p>Lorem ipsum dolor sit amet. Nulla interdum nulla eu metus scelerisque adipiscing.</p> <blockquote style="background-color:#CCCCCC; border:1px solid #999999;padding:10px;"><em>Aliquam quam justo, bibendum vitae tristique nec, dapibus eu nisl. Cras ut enim mauris, in molestie nibh. Donec egestas ante </em></blockquote>
<h2 style="color:#FF0000;text-decoration:underline;">My Sub Header</h2>
<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentu. mauris nec velit</strong> <span>molestie sit amet dignissim est euismod. </span>Nulla interdum nulla eu metus scelerisque adipiscing.</p>
Basic CSS
<style type="text/css"><!--.title{border-bottom:1px solid #CCCCCC;}.quote{background-color:#CCCCCC; border:1px solid
#999999;padding:10px;}--></style><h1 class="title">This is my Title</h1><p>Lorem ipsum dolor sit amet. Nulla interdum nulla eu metus scelerisque
adipiscing.</p> <blockquote class="quote"><em>Aliquam quam justo, bibendum vitae tristique nec, dapibus eu nisl. Cras ut enim mauris, in molestie nibh. Donec egestas ante </em></blockquote>
Online References
HTMLhttp://www.w3schools.com/html/html_quick.asp
http://www.cheatography.com/davechild/cheat-sheets/html4/
CSShttp://www.tutorialspoint.com/css/css_references.htm
http://www.cheatography.com/davechild/cheat-sheets/css2/
