Your SlideShare is downloading. ×
0
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Class 10 Learning about Planning and More HTML

551

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
551
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Explain: There are six levels of heading. <h1> is shown the largest and <h6> is shown the smallest. The "h" in the tag name stands for the word "heading".
  • Explain: The <p> tag is used for paragraphs of text. You now have basic structure of headings and paragraphs of text. This is another example of how the letters in the tags describe the purpose of the tag. That is, the "p" in this tag stands for the word "paragraph".
  • Please note: The <strong> and <em> tags are described in a later section talking about semantic markup. It can be confusing to introduce this too early as beginners are more familiar with concepts of bold and italic.
  • Explain: Multiple spaces get collapsed into a single space. (As students will see later, this allows you to add space into code to make it more readable.)
  • Explain: This tag is not to be used to separate paragraphs. That is what the <p> element is for.
  • Explain: This is a WYSIWYG editor. WYSIWYG stands for "What You See Is What You Get". These are commonly used in content management systems and blogging tools.
  • Explain: There is often an HTML editor that sits alongside the WYSIWIG editor, so you can edit the source code directly.
  • Explain: Some elements add semantic information about the document. Click: What is semantic markup? Click: Why use semantic markup (note not to be used just for visual effect) Click: Examples of how this markup could be used
  • Note: The <acronym> tag has been dropped from HTML5 (which just uses <abbr>).
  • Note: This tag is for the author of a given web page only, not for general address details. (For those, coders may use microformats.)
  • Explain: None of these tags are to be used just for visual effect. CSS offers that option. Note: There was a <u> element in older versions of HTML.
  • Explain: This tag is not really for content that was supposed to be deleted.
  • Explain: There are three different types of list... 1. Ordered - The order of list items is important 2. Unordered - The order of list items is not important 3. Definition - To explain the meaning of terms
  • Explain: What tags stand for: <ol> = ordered list <li> = list item Re-iterate that the sequence of the steps in a recipe is important, therefore we use an ordered list
  • Explain: What tags stand for: <ul> = unordered list <li> = list item Re-iterate that there is not sequence to these items, therefore unordered list
  • Explain: What tags stand for: <dl> = definition list <dt> = definition term <dd> = definition description
  • Explain how you can nest lists inside other lists You can do the same for ordered lists to create sub-points
  • Clicks: Load individual bullets
  • Clicks: Load individual bullets
  • Clicks: Load individual bullets
  • Transcript

    • 1. Web Design LSC: Class 10Planning Your Site & More on HTMLDon StanleyLSC 532 DON STANLEY | @3rhinomedia | 3rhinomedia.com
    • 2. Why create your own site? DON STANLEY | @3rhinomedia | 3rhinomedia.com
    • 3. Why create your own site? DON STANLEY | @3rhinomedia | 3rhinomedia.com
    • 4. Getting Started DON STANLEY | @3rhinomedia | 3rhinomedia.com
    • 5. Step 1: Visualize DON STANLEY | @3rhinomedia | 3rhinomedia.com
    • 6. Step 2: Info Arch DON STANLEY | @3rhinomedia | 3rhinomedia.com
    • 7. Core Content for SiteWhat Should You Include on a Personal Site? DON STANLEY | @3rhinomedia | 3rhinomedia.com
    • 8. 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
    • 9. Create Your Site MapTO DO LIST:»Start collecting design ideas»Start collecting content»Continue learning HTMLOn to more HTML DON STANLEY | @3rhinomedia | 3rhinomedia.com
    • 10. HTML STEP 2:Working with Text
    • 11. Learning HTML is likelearning a new language
    • 12. TAGS DESCRIBE CONTENT Creating a page involves adding tags to content aka adding “markup”
    • 13. There are two types of markup...
    • 14. STRUCTURAL SEMANTIC
    • 15. HEADINGS HTM L<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>
    • 16. RESULT
    • 17. PARAGRAPHS HTM L<p>A paragraph consists of one or moresentences that form a self-contained unitof discourse. The start of a paragraph isindicated by a new line.</p><p>Text is easier to understand when it issplit up into units of text. For example,a book may have chapters. Chapters canhave subheadings. Under each heading willbe one or more paragraphs.</p>
    • 18. RESULT
    • 19. BOLD & ITALIC HTM L<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>
    • 20. RESULT
    • 21. SUPERSCRIPT & SUBSCRIPT HTM L<p>On the 4<sup>th</sup> September youwill learn about E=MC<sup>2</sup>.</p><p>The amount of C0<sub>2</sub> in theatmosphere grew by 2ppm in2009<sub>1</sub>.</p>
    • 22. SUPERSCRIPT & SUBSCRIPT HTM L<p>On the 4<sup>th</sup> September youwill learn about E=MC<sup>2</sup>.</p><p>The amount of C0<sub>2</sub> in theatmosphere grew by 2ppm in2009<sub>1</sub>.</p>
    • 23. SUPERSCRIPT & SUBSCRIPT HTM L<p>On the 4<sup>th</sup> September youwill learn about E=MC<sup>2</sup>.</p><p>The amount of C0<sub>2</sub> in theatmosphere grew by 2ppm in2009<sub>1</sub>.</p>
    • 24. RESULT
    • 25. WHITESPACE IS COLLAPSED HTM L<p>The moon is drifting away from the earth.</p>
    • 26. RESULT
    • 27. LINE BREAKS HTM L<p>The Earth<br />gets one hundred tonsheavier every day<br />due to fallingspace dust.</p>
    • 28. LINE BREAKS HTM L<p>The Earth<br />gets one hundred tonsheavier every day<br />due to fallingspace dust.</p>
    • 29. RESULT
    • 30. HORIZONTAL RULES HTM L<p>Venus is the only plant that rotatesclockwise</p><hr /><p>Jupiter is bigger than all the otherplanets combined.</p>
    • 31. HORIZONTAL RULES HTM L<p>Venus is the only plant that rotatesclockwise</p><hr /><p>Jupiter is bigger than all the otherplanets combined.</p>
    • 32. RESULT
    • 33. VISUAL EDITORS &THEIR CODE VIEWS
    • 34. VISUAL EDITORS &THEIR CODE VIEWS
    • 35. SEMANTIC MARKUPWHAT IS IT? WHY USE IT? APPLICATIONSet of elements, for Provides extra Screen readers canexample: information about add emphasis to your content words in <em>The <em> tag addsemphasis Do NOT use it to Search engines alter presentation can find quotations<blockquote> of those elements in <blockquote>contains a quote
    • 36. STRONG & EMPHASIS HTM L<p><strong>Beware</strong> pickpocketsoperate 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>
    • 37. RESULT
    • 38. QUOTATIONS HTM L<blockquote> <p>Did you ever stop to think, and forget to start again?</p></blockquote>
    • 39. QUOTATIONS HTM L<blockquote> <blockquote><p>Did you ever stop to think, and forget to start again?</p></blockquote></blockquote>
    • 40. RESULT
    • 41. ABBREVIATIONS & ACRONYMS HTM L<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>
    • 42. ABBREVIATIONS & ACRONYMS HTM L<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>
    • 43. ABBREVIATIONS & ACRONYMS HTM L<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>
    • 44. RESULT
    • 45. AUTHOR DETAILS HTM L<address> <p><a href="homer@example.org"> homer@example.org</a></p> <p>742 Evergreen Terrace, Springfield</p></address>
    • 46. AUTHOR DETAILS HTM L<address> <p><a href="homer@example.org"> homer@example.org</a></p> <p>742 Evergreen Terrace, Springfield</p></address>
    • 47. RESULT
    • 48. CHANGES TO CONTENT HTM L<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>
    • 49. CHANGES TO CONTENT HTM L<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>
    • 50. CHANGES TO CONTENT HTM L<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>
    • 51. CHANGES TO CONTENT HTM L<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>
    • 52. RESULT
    • 53. RESULTHTML STEP 3: Lists
    • 54. THREE LIST TYPES RESULT ORDERED UNORDERED DEFINITION1. Chop potatoes into quarters • 1kg King Edward potatoes Sashimi2. Simmer in salted water • 100ml milk Sliced raw fish3. Heat milk and butter • 50g salted butter Scale4. Drain potatoes and mash • Freshly grated nutmeg A device used to5. Mix in the milk mixture • Salt and pepper to taste accurately measure weight
    • 55. ORDERED LISTS (numbered) 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>
    • 56. RESULT
    • 57. UNORDERED LISTS (bullets) RESULT<ul> <li>1kg King Edward potatoes</li><li>100ml milk</li> <li>50g saltedbutter</li> <li>Freshly gratednutmeg</li> <li>Salt and pepper totaste</li></ul>
    • 58. RESULT
    • 59. DEFINITION LIST RESULT<dl> <dt>Sashimi</dt> <dd>Sliced raw fishserved with condiments.</dd><dt>Scale</dt> <dd>Device used to measurethe weight of ingredients.</dd><dd>A technique by which the scales are removed from the skin of fish.</dd></dl>
    • 60. RESULT
    • 61. NESTED LIST 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>
    • 62. RESULT
    • 63. SUMMARY RESULT There are three types of HTML lists: ordered, unordered, and definition.
    • 64. SUMMARY RESULT Ordered Lists use # Unordered lists use bullets. Definition lists are used to define terminology. Lists can be nested.
    • 65. Homework RESULT Collect Design Ideas Begin Crafting Content Work on W3Schools to learn HTML

    ×