Your SlideShare is downloading. ×
HTML Basics, Textile and Movable Type
Movable Type  is the tool you’ll use to update CHILD. You’ll use very basic  HTML  and  Textile  within Movable Type to fo...
HTML Basics
Basic HTML Principles <ul><li>All text, headers, lists, tables, images, links, etc. need to be enclosed in HTML tags </li>...
Basic HTML Principles <ul><li>Tags are usually paired (e.g.,  <h1>  and  </h1> ) to start and end. </li></ul><ul><li>The e...
Headings Example HTML Heading One <h1>Heading One</h1> Heading Two <h2>Heading Two</h2> Heading Three <h3>Heading Three</h3>
Paragraphs Example HTML Here is the first paragraph. Here is the second paragraph. <p>Here is the first paragraph.</p> <p>...
Lists Example HTML <ul><li>Bullet Item </li></ul><ul><li>Bullet Item </li></ul><ul><li>Bullet Item </li></ul><ul> <li>Bull...
Hyperlinks <a href=“http://site/default.asp”>Home</a> Home
Images <img src=“/site/images/image.gif”>
Text Formatting DO NOT USE!  Underline Example HTML Bold <b>Bold</b> or <strong>Bold</strong> Italic <i>Italic</i> or <em>...
Basic HTML Principles <ul><li>Some tags include an attribute, which is additional information that is included inside the ...
Textile
What is Textile? <ul><li>Converts easy to use tags into HTML </li></ul><ul><li>“Humane” HTML </li></ul><ul><li>Like HTML S...
Textile Translations HTML Textile <h1>Heading One</h1> h1. Heading One <h2>Heading One</h2> h2. Heading Two <p>Paragraph</...
Textile Lists HTML Textile <ul> <li>Bullet Item</li> <li>Bullet Item</li> <li>Bullet Item</li> <ul> * Bullet Item * Bullet...
Textile Links No equivalent – need to use HTML <a href=“/departments/web/docs/mydoc.pdf” target=“_blank”>My Document</a> H...
Textile Images HTML Textile <a href=“/site/images/image.gif”> !/site/images/image.gif! <a href=“/site/images/image.gif” al...
Upcoming SlideShare
Loading in...5
×

HTML & Textile Training

710

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Transcript of "HTML & Textile Training"

  1. 1. HTML Basics, Textile and Movable Type
  2. 2. Movable Type is the tool you’ll use to update CHILD. You’ll use very basic HTML and Textile within Movable Type to format the text and add links. Why do I need to know this?
  3. 3. HTML Basics
  4. 4. Basic HTML Principles <ul><li>All text, headers, lists, tables, images, links, etc. need to be enclosed in HTML tags </li></ul><ul><li>HTML tags have a left angle bracket ( < ), a tag name, and a right angle bracket ( > ). </li></ul><ul><li>Example: </li></ul><ul><li><tag> </li></ul>
  5. 5. Basic HTML Principles <ul><li>Tags are usually paired (e.g., <h1> and </h1> ) to start and end. </li></ul><ul><li>The end tag looks just like the start tag except a slash (/) precedes the text within the brackets. </li></ul><ul><li>Example: </li></ul><ul><ul><ul><li><h1>Header One</h1> </li></ul></ul></ul><ul><ul><ul><li><b>Bold Text</b> </li></ul></ul></ul><ul><ul><ul><li><p>Paragraph</p> </li></ul></ul></ul>
  6. 6. Headings Example HTML Heading One <h1>Heading One</h1> Heading Two <h2>Heading Two</h2> Heading Three <h3>Heading Three</h3>
  7. 7. Paragraphs Example HTML Here is the first paragraph. Here is the second paragraph. <p>Here is the first paragraph.</p> <p>Here is the second paragraph.</p>
  8. 8. Lists Example HTML <ul><li>Bullet Item </li></ul><ul><li>Bullet Item </li></ul><ul><li>Bullet Item </li></ul><ul> <li>Bullet Item</li> <li>Bullet Item</li> <li>Bullet Item</li> </ul> 1. Item One 2. Item Two 3. Item Three <ol> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ol>
  9. 9. Hyperlinks <a href=“http://site/default.asp”>Home</a> Home
  10. 10. Images <img src=“/site/images/image.gif”>
  11. 11. Text Formatting DO NOT USE! Underline Example HTML Bold <b>Bold</b> or <strong>Bold</strong> Italic <i>Italic</i> or <em>Italic</em>
  12. 12. Basic HTML Principles <ul><li>Some tags include an attribute, which is additional information that is included inside the tag. For example, an “a” tag, which is used for hyperlinks, contains attributes as shown: </li></ul><ul><li><a href=http://www.seattlechildrens.org>Dot Org</a> </li></ul><ul><li>” a” is the tag </li></ul><ul><li>“ href” is an attribute (indicates what is linked to) </li></ul><ul><li>” target” is another attribute (indicates the link opens in a new window). Used for linking to documents (PDFs). </li></ul><ul><li><a href=“/departments/web/docs/mydoc.pdf” target=“_blank”>My Document</a> </li></ul>
  13. 13. Textile
  14. 14. What is Textile? <ul><li>Converts easy to use tags into HTML </li></ul><ul><li>“Humane” HTML </li></ul><ul><li>Like HTML Shorthand </li></ul>
  15. 15. Textile Translations HTML Textile <h1>Heading One</h1> h1. Heading One <h2>Heading One</h2> h2. Heading Two <p>Paragraph</p> n/a <b>Bold</b> *Bold* <em>Italic</em> _Italic_
  16. 16. Textile Lists HTML Textile <ul> <li>Bullet Item</li> <li>Bullet Item</li> <li>Bullet Item</li> <ul> * Bullet Item * Bullet Item * Bullet Item <ol> <li>Number One</li> <li>Number Two</li> <li>Number Three</li> </ol> # Number One # Number Two # Number Three
  17. 17. Textile Links No equivalent – need to use HTML <a href=“/departments/web/docs/mydoc.pdf” target=“_blank”>My Document</a> HTML Textile <a href=“http://child”>CHILD</a> “ CHILD”:http://child “ Dot Org”:www.seattlechildrens.org <a href=http://child” title=“Visit CHILD”>Access CHILD</a> “ Access CHILD(GO TO CHILD)”:http://child
  18. 18. Textile Images HTML Textile <a href=“/site/images/image.gif”> !/site/images/image.gif! <a href=“/site/images/image.gif” alt=“Image description”> !/site/images/image.gif(Image description)!

×