class 10 learning about planning and more html
DESCRIPTION
TRANSCRIPT
![Page 1: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/1.jpg)
Web Design LSC: Class 10Planning Your Site & More on HTML
Don StanleyLSC 532
DON STANLEY | @3rhinomedia | 3rhinomedia.com
![Page 2: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/2.jpg)
Why create your own site?
DON STANLEY | @3rhinomedia | 3rhinomedia.com
![Page 3: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/3.jpg)
Why create your own site?
DON STANLEY | @3rhinomedia | 3rhinomedia.com
![Page 4: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/4.jpg)
Getting Started
DON STANLEY | @3rhinomedia | 3rhinomedia.com
![Page 5: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/5.jpg)
Step 1: Visualize
DON STANLEY | @3rhinomedia | 3rhinomedia.com
![Page 6: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/6.jpg)
Step 2: Info Arch
DON STANLEY | @3rhinomedia | 3rhinomedia.com
![Page 7: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/7.jpg)
Core Content for SiteWhat Should You Include on a Personal Site?
DON STANLEY | @3rhinomedia | 3rhinomedia.com
![Page 8: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/8.jpg)
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
![Page 9: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/9.jpg)
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
![Page 10: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/10.jpg)
HTML STEP 2:Working with Text
![Page 11: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/11.jpg)
Learning HTML is like learning a new language
![Page 12: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/12.jpg)
TAGS DESCRIBE CONTENT
Creating a page involves adding tags
to content aka adding “markup”
![Page 13: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/13.jpg)
There are two types of markup...
![Page 14: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/14.jpg)
SEMANTICSTRUCTURAL
![Page 15: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/15.jpg)
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
![Page 16: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/16.jpg)
RESULT
![Page 17: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/17.jpg)
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
![Page 18: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/18.jpg)
RESULT
![Page 19: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/19.jpg)
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
![Page 20: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/20.jpg)
RESULT
![Page 21: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/21.jpg)
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
![Page 22: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/22.jpg)
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
![Page 23: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/23.jpg)
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
![Page 24: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/24.jpg)
RESULT
![Page 25: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/25.jpg)
HTML
<p>The moon is
drifting away from the
earth.</p>
WHITESPACE IS COLLAPSED
![Page 26: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/26.jpg)
RESULT
![Page 27: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/27.jpg)
HTML
<p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>
LINE BREAKS
![Page 28: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/28.jpg)
HTML
<p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>
LINE BREAKS
![Page 29: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/29.jpg)
RESULT
![Page 30: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/30.jpg)
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
![Page 31: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/31.jpg)
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
![Page 32: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/32.jpg)
RESULT
![Page 33: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/33.jpg)
VISUAL EDITORS &THEIR CODE VIEWS
![Page 34: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/34.jpg)
VISUAL EDITORS &THEIR CODE VIEWS
![Page 35: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/35.jpg)
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>
![Page 36: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/36.jpg)
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
![Page 37: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/37.jpg)
RESULT
![Page 38: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/38.jpg)
HTML
<blockquote> <p>Did you ever stop to think, and forget to start again?</p></blockquote>
QUOTATIONS
![Page 39: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/39.jpg)
HTML
<blockquote> <blockquote><p>Did you ever stop to think, and forget to start again?</p></blockquote></blockquote>
QUOTATIONS
![Page 40: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/40.jpg)
RESULT
![Page 41: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/41.jpg)
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
![Page 42: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/42.jpg)
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
![Page 43: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/43.jpg)
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
![Page 44: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/44.jpg)
RESULT
![Page 45: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/45.jpg)
HTML
<address> <p><a href="[email protected]"> [email protected]</a></p> <p>742 Evergreen Terrace, Springfield</p></address>
AUTHOR DETAILS
![Page 46: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/46.jpg)
HTML
<address> <p><a href="[email protected]"> [email protected]</a></p> <p>742 Evergreen Terrace, Springfield</p></address>
AUTHOR DETAILS
![Page 47: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/47.jpg)
RESULT
![Page 48: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/48.jpg)
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
![Page 49: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/49.jpg)
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
![Page 50: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/50.jpg)
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
![Page 51: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/51.jpg)
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
![Page 52: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/52.jpg)
RESULT
![Page 53: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/53.jpg)
RESULT
HTML STEP 3:Lists
![Page 54: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/54.jpg)
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
![Page 55: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/55.jpg)
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)
![Page 56: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/56.jpg)
RESULT
![Page 57: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/57.jpg)
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)
![Page 58: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/58.jpg)
RESULT
![Page 59: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/59.jpg)
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
![Page 60: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/60.jpg)
RESULT
![Page 61: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/61.jpg)
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
![Page 62: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/62.jpg)
RESULT
![Page 63: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/63.jpg)
RESULT
There are three types of HTML lists: ordered, unordered, and definition.
SUMMARY
![Page 64: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/64.jpg)
RESULT
Ordered Lists use #
Unordered lists use bullets.Definition lists are used to define terminology.
Lists can be nested.
SUMMARY
![Page 65: Class 10 Learning about Planning and More HTML](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b627454a7959ce458b458d/html5/thumbnails/65.jpg)
RESULT
Collect Design Ideas
Begin Crafting Content
Work on W3Schools to learn HTML
Homework