Post on 14-Jan-2015
description
Web Design LSC: Class 10Planning Your Site & More on HTML
Don StanleyLSC 532
DON STANLEY | @3rhinomedia | 3rhinomedia.com
Why create your own site?
DON STANLEY | @3rhinomedia | 3rhinomedia.com
Why create your own site?
DON STANLEY | @3rhinomedia | 3rhinomedia.com
Getting Started
DON STANLEY | @3rhinomedia | 3rhinomedia.com
Step 1: Visualize
DON STANLEY | @3rhinomedia | 3rhinomedia.com
Step 2: Info Arch
DON STANLEY | @3rhinomedia | 3rhinomedia.com
Core Content for SiteWhat Should You Include on a Personal Site?
DON STANLEY | @3rhinomedia | 3rhinomedia.com
Start With ResearchWhat content and designs do you think work?»Dan Filler»Mike Davidson»Erick Danzer»Jay Hafling»Kim K»Ricky Downs»Gary Gale»Bret Victor»Chris Franco
DON STANLEY | @3rhinomedia | 3rhinomedia.com
Create Your Site MapTO DO LIST:»Start collecting design ideas»Start collecting content»Continue learning HTML
On to more HTML
DON STANLEY | @3rhinomedia | 3rhinomedia.com
HTML STEP 2:Working with Text
Learning HTML is like learning a new language
TAGS DESCRIBE CONTENT
Creating a page involves adding tags
to content aka adding “markup”
There are two types of markup...
SEMANTICSTRUCTURAL
HTML
<h1>This is a Main Heading</h1><h2>This is a level 2 heading</h2><h3>This is a level 3 heading</h3><h4>This is a level 4 heading</h4><h5>This is a level 5 heading</h5><h6>This is a level 6 heading</h6>
HEADINGS
RESULT
HTML
<p>A paragraph consists of one or more sentences that form a self-contained unit of discourse. The start of a paragraph is indicated by a new line.</p>
<p>Text is easier to understand when it is split up into units of text. For example, a book may have chapters. Chapters can have subheadings. Under each heading will be one or more paragraphs.</p>
PARAGRAPHS
RESULT
HTML
<p>This is how we make a word appear <strong>bold</strong>.</p>
<p>This is how we make a word appear <em>italic</em>.</p>
BOLD & ITALIC
RESULT
HTML
<p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p>
<p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in2009<sub>1</sub>.</p>
SUPERSCRIPT & SUBSCRIPT
HTML
<p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p>
<p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in2009<sub>1</sub>.</p>
SUPERSCRIPT & SUBSCRIPT
HTML
<p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p>
<p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in2009<sub>1</sub>.</p>
SUPERSCRIPT & SUBSCRIPT
RESULT
HTML
<p>The moon is
drifting away from the
earth.</p>
WHITESPACE IS COLLAPSED
RESULT
HTML
<p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>
LINE BREAKS
HTML
<p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>
LINE BREAKS
RESULT
HTML
<p>Venus is the only plant that rotates clockwise</p>
<hr />
<p>Jupiter is bigger than all the other planets combined.</p>
HORIZONTAL RULES
HTML
<p>Venus is the only plant that rotates clockwise</p>
<hr />
<p>Jupiter is bigger than all the other planets combined.</p>
HORIZONTAL RULES
RESULT
VISUAL EDITORS &THEIR CODE VIEWS
VISUAL EDITORS &THEIR CODE VIEWS
SEMANTIC MARKUP
WHAT IS IT?
Set of elements, for example:
The <em> tag adds emphasis
<blockquote>contains a quote
WHY USE IT?
Provides extra information about your content
Do NOT use it to alter presentation of those elements
APPLICATION
Screen readers can add emphasis to words in <em>
Search engines can find quotations in <blockquote>
HTML
<p><strong>Beware</strong> pickpockets operate in this area.</p>
<p>I <em>think</em> Ivy was the first.</p>
<p>I think <em>Ivy</em> was the first.</p>
<p>I think Ivy was the <em>first</em>.</p>
STRONG & EMPHASIS
RESULT
HTML
<blockquote> <p>Did you ever stop to think, and forget to start again?</p></blockquote>
QUOTATIONS
HTML
<blockquote> <blockquote><p>Did you ever stop to think, and forget to start again?</p></blockquote></blockquote>
QUOTATIONS
RESULT
HTML
<p><abbr title="Professor”>Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p>
<p><acronym title="National Aeronauticsand Space Administration">NASA</acronym>do some crazy space stuff.</p>
ABBREVIATIONS & ACRONYMS
HTML
<p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p>
<p><acronym title="National Aeronauticsand Space Administration">NASA</acronym>do some crazy space stuff.</p>
ABBREVIATIONS & ACRONYMS
HTML
<p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p>
<p><acronym title="National Aeronauticsand Space Administration">NASA</acronym>do some crazy space stuff.</p>
ABBREVIATIONS & ACRONYMS
RESULT
HTML
<address> <p><a href="homer@example.org"> homer@example.org</a></p> <p>742 Evergreen Terrace, Springfield</p></address>
AUTHOR DETAILS
HTML
<address> <p><a href="homer@example.org"> homer@example.org</a></p> <p>742 Evergreen Terrace, Springfield</p></address>
AUTHOR DETAILS
RESULT
HTML
<p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p>
<p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>
CHANGES TO CONTENT
HTML
<p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p>
<p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>
CHANGES TO CONTENT
HTML
<p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p>
<p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>
CHANGES TO CONTENT
HTML
<p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p>
<p>Laptop computer:</p><p><s>Was $995</s></p><p>Now only $375</p>
CHANGES TO CONTENT
RESULT
RESULT
HTML STEP 3:Lists
RESULT
1. Chop potatoes into quarters2. Simmer in salted water3. Heat milk and butter4. Drain potatoes and mash5. Mix in the milk mixture
THREE LIST TYPES
UNORDERED DEFINITIONORDERED
• 1kg King Edward potatoes• 100ml milk• 50g salted butter• Freshly grated nutmeg• Salt and pepper to taste
Sashimi Sliced raw fishScale A device used to accurately measure weight
RESULT
<ol> <li>Chop potatoes into quarters</li> <li>Simmer in salted water for 15-20 minutes until tender</li> <li>Heat milk, butter and nutmeg</li> <li>Drain potatoes and mash</li> <li>Mix in the milk texture</li></ol>
ORDERED LISTS (numbered)
RESULT
RESULT
<ul> <li>1kg King Edward potatoes</li> <li>100ml milk</li> <li>50g salted butter</li> <li>Freshly grated nutmeg</li> <li>Salt and pepper to taste</li></ul>
UNORDERED LISTS (bullets)
RESULT
RESULT
<dl> <dt>Sashimi</dt> <dd>Sliced raw fish served with condiments.</dd> <dt>Scale</dt> <dd>Device used to measure the weight of ingredients.</dd> <dd>A technique by which the scales are removed from the skin of fish. </dd></dl>
DEFINITION LIST
RESULT
RESULT
<ul> <li>Mousses</li> <li>Pastries</li> <ul> <li>Croissant</li> <li>Milles-feille</li> <li>Palmier</li> <li>Profiteroles</li> </ul> <li>Tarts</li></ul>
NESTED LIST
RESULT
RESULT
There are three types of HTML lists: ordered, unordered, and definition.
SUMMARY
RESULT
Ordered Lists use #
Unordered lists use bullets.Definition lists are used to define terminology.
Lists can be nested.
SUMMARY
RESULT
Collect Design Ideas
Begin Crafting Content
Work on W3Schools to learn HTML
Homework