Class 10 Learning about Planning and More HTML

Web Design LSC: Class 10Planning Your Site & More on HTML

Don StanleyLSC 532

DON STANLEY | @3rhinomedia | 3rhinomedia.com

Why create your own site?


Why create your own site?


Getting Started


Step 1: Visualize


Step 2: Info Arch


Core Content for SiteWhat Should You Include on a Personal Site?


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


http://danielfiller.com/

http://www.mikeindustries.com/blog/about

http://www.erickdanzer.com/

http://www.jayhafling.com/

http://www.kimkruegerwriting.com/

http://www.rickydownsdesign.co.uk/

http://garygale.com/

http://worrydream.com/

http://chrisfran.co/

Create Your Site MapTO DO LIST:»Start collecting design ideas»Start collecting content»Continue learning HTML

On to more HTML


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

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.

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.

PARAGRAPHS

RESULT

HTML

This is how we make a word appear bold.

This is how we make a word appear italic.

BOLD & ITALIC

RESULT

HTML

On the 4th September you will learn about E=MC2.

The amount of C02 in the atmosphere grew by 2ppm in20091.

SUPERSCRIPT & SUBSCRIPT

HTML




HTML




RESULT

HTML

The moon is

drifting away from the

earth.

WHITESPACE IS COLLAPSED

RESULT

HTML

The Earth gets one hundred tons heavier every day due to falling space dust.

LINE BREAKS

HTML

The Earth gets one hundred tons heavier every day due to falling space dust.

LINE BREAKS

RESULT

HTML

Venus is the only plant that rotates clockwise

<hr />

Jupiter is bigger than all the other planets combined.

HORIZONTAL RULES

HTML

Venus is the only plant that rotates clockwise

<hr />

Jupiter is bigger than all the other planets combined.

HORIZONTAL RULES

RESULT

VISUAL EDITORS &THEIR CODE VIEWS

VISUAL EDITORS &THEIR CODE VIEWS

SEMANTIC MARKUP

WHAT IS IT?

Set of elements, for example:

The 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 

Search engines can find quotations in <blockquote>

HTML

Beware pickpockets operate in this area.

I think Ivy was the first.

I think Ivy was the first.

I think Ivy was the first.

STRONG & EMPHASIS

RESULT

HTML

<blockquote> Did you ever stop to think, and forget to start again?</blockquote>

QUOTATIONS

HTML

<blockquote> <blockquote>Did you ever stop to think, and forget to start again?</blockquote></blockquote>

QUOTATIONS

RESULT

HTML

<abbr title="Professor”>Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.

<acronym title="National Aeronauticsand Space Administration">NASA</acronym>do some crazy space stuff.

ABBREVIATIONS & ACRONYMS

HTML

<abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.



HTML

<abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.



RESULT

HTML

<address> <a href="[email protected]"> [email protected]</a> 742 Evergreen Terrace, Springfield</address>

AUTHOR DETAILS

HTML

<address> <a href="[email protected]"> [email protected]</a> 742 Evergreen Terrace, Springfield</address>

AUTHOR DETAILS

RESULT

HTML

It was the <del>worst</del> <ins>best</ins> idea she had ever had.

Laptop computer:<s>Was $995</s>Now only $375

CHANGES TO CONTENT

HTML



CHANGES TO CONTENT

HTML



CHANGES TO CONTENT

HTML



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

Education

Class 10 Learning about Planning and More HTML