NEPA BlogCon 2012 - HTML 101

Basic HTML
Content Formatting Content Styling
<h[1-6]>...</h1> <strong>...</strong>
<p>...</p> <em>...</em>
<br /> <hr />
<span>...</span>
<blockquote>...</blockquote

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

</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
HTML
http://www.w3schools.com/html/html_quick.asp
http://www.cheatography.com/davechild/cheat-sheets/html4/

CSS
http://www.tutorialspoint.com/css/css_references.htm
http://www.cheatography.com/davechild/cheat-sheets/css2/

NEPA BlogCon 2012 - HTML 101

Recommended

Recommended

More Related Content

More from Michelle Davies (Hryvnak)

More from Michelle Davies (Hryvnak) (20)

Recently uploaded

Recently uploaded (8)

NEPA BlogCon 2012 - HTML 101