Class 10 Learning about Planning and More HTML
•Transferir como PPT, PDF•
1 gostou•500 visualizações
The document discusses planning a website and learning HTML. It covers why to create a personal site, how to get started with planning by visualizing content and creating an information architecture. The document then teaches HTML by explaining different tags for text formatting, including headings, paragraphs, bold, italics, superscript, subscript, line breaks, and horizontal rules. It also covers semantic markup tags and different types of lists. The homework assigned is to collect design ideas, craft content, and continue learning HTML on W3Schools.
Recomendados
Mais conteúdo relacionado
Semelhante a Class 10 Learning about Planning and More HTML
Semelhante a Class 10 Learning about Planning and More HTML (20)
Mais de Don Stanley
Mais de Don Stanley (20)
Último
Último (20)
Class 10 Learning about Planning and More HTML
- 1. Web Design LSC: Class 10 Planning Your Site & More on HTML Don Stanley LSC 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 Site What Should You Include on a Personal Site? DON STANLEY | @3rhinomedia | 3rhinomedia.com
- 8. Start With Research What 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 Map TO DO LIST: »Start collecting design ideas »Start collecting content »Continue learning HTML On to more HTML DON STANLEY | @3rhinomedia | 3rhinomedia.com
- 10. HTML STEP 2: Working with Text
- 11. Learning HTML is like learning 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 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>
- 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 you will learn about E=MC<sup>2</sup>.</p> <p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in 2009<sub>1</sub>.</p>
- 22. SUPERSCRIPT & SUBSCRIPT HTM L <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 in 2009<sub>1</sub>.</p>
- 23. SUPERSCRIPT & SUBSCRIPT HTM L <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 in 2009<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 tons heavier every day<br />due to falling space dust.</p>
- 28. LINE BREAKS HTM L <p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>
- 29. RESULT
- 30. HORIZONTAL RULES HTM L <p>Venus is the only plant that rotates clockwise</p> <hr /> <p>Jupiter is bigger than all the other planets combined.</p>
- 31. HORIZONTAL RULES HTM L <p>Venus is the only plant that rotates clockwise</p> <hr /> <p>Jupiter is bigger than all the other planets combined.</p>
- 32. RESULT
- 33. VISUAL EDITORS & THEIR CODE VIEWS
- 34. VISUAL EDITORS & THEIR CODE VIEWS
- 35. SEMANTIC MARKUP WHAT IS IT? WHY USE IT? APPLICATION Set of elements, for Provides extra Screen readers can example: information about add emphasis to your content words in <em> The <em> tag adds emphasis 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> 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>
- 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 Aeronautics and 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 Aeronautics and 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 Aeronautics and 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. RESULT HTML STEP 3: Lists
- 54. THREE LIST TYPES RESULT ORDERED UNORDERED DEFINITION 1. Chop potatoes into quarters • 1kg King Edward potatoes Sashimi 2. Simmer in salted water • 100ml milk Sliced raw fish 3. Heat milk and butter • 50g salted butter Scale 4. Drain potatoes and mash • Freshly grated nutmeg A device used to 5. 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 salted butter</li> <li>Freshly grated nutmeg</li> <li>Salt and pepper to taste</li> </ul>
- 58. RESULT
- 59. DEFINITION LIST 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>
- 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
Notas do Editor
- 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