1 / 23

Blog HTML Code

Blog HTML Code . Professorpg.wordpress.com. What are we doing today (Learning Objectives)?. Basic HTML theory HTML Cheat sheets W3schools.com & Firebug CSS. HTML Code Example. <html> <head> <title>Enter a title, displayed at the top of the window.</title> </head> <body>

duy
Download Presentation

Blog HTML Code

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Blog HTML Code Professorpg.wordpress.com

  2. What are we doing today (Learning Objectives)? Basic HTML theory HTML Cheat sheets W3schools.com & Firebug CSS W3schools.com

  3. http://reference.sitepoint.com/html/page-structure

  4. http://reference.sitepoint.com/html/page-structure

  5. HTML Code Example http://www.dummies.com/how-to/content/a-sample-web-page-in-html.html

  6. <html> <head> <title>Enter a title, displayed at the top of the window.</title> </head> <body> <h1>Enter the main heading, usually the same as the title.</h1> <p>Be <b>bold</b> in stating your key points. Put them in a list: </p> <ul> <li>The first item in your list</li> <li>The second item; <i>italicize</i> key words</li> </ul> <p>Improve your image by including an image. </p> <p><imgsrc="http://www.mygifs.com/CoverImage.gif" alt="A Great HTML Resource"></p> <p>Add a link to your favorite <a href="http://www.dummies.com/">Web site</a>. Break up your page with a horizontal rule or two. </p> </body> </html> http://www.dummies.com/how-to/content/a-sample-web-page-in-html.html

  7. http://www.dummies.com/how-to/content/a-sample-web-page-in-html.htmlhttp://www.dummies.com/how-to/content/a-sample-web-page-in-html.html

  8. HTML Code Example • <html> • <head> • <title>Enter a title, displayed at the top of the window.</title> • </head> • <body> • <h1>Enter the main heading, usually the same as the title.</h1> • <p>Be <b>bold</b> in stating your key points. Put them in a list: </p> • <ul> • <li>The first item in your list</li> • <li>The second item; <i>italicize</i> key words</li> </ul> • <p>Improve your image by including an image. </p> • <p><imgsrc="http://www.mygifs.com/CoverImage.gif" alt="A Great HTML Resource"></p> <p>Add a link to your favorite <a href="http://www.dummies.com/">Web site</a>. Break up your page with a horizontal rule or two. </p> • </body> • </html> http://www.dummies.com/how-to/content/a-sample-web-page-in-html.html

  9. What are we doing today (Learning Objectives)? Basic HTML theory HTML Cheat sheets W3schools.com & Firebug CSS W3schools.com

  10. Basic Tags (Parts of Page) • <html></html> • Creates an HTML document • <head></head> • Sets off the title and other information that isn’t displayed on the web page itself • <body></body> • Sets off the visible portion of the document Categories of HTML Basic Tags Body Attributes Text Tags Links Formatting Tables www.webmonkey.com

  11. Body Attributes (How page looks) • <body bgcolor="pink"> • Sets the background color, using name or hex value • <body text="black"> • Sets the text color, using name or hex value • <body link="blue"> • Sets the color of links, using name or hex value Categories of HTML Basic Tags Body Attributes Text Tags Links Formatting Tables www.webmonkey.com

  12. Text Tags (Headlines/Fonts) • <h1></h1> Creates the largest headline • <h6></h6> Creates the smallest headline • <b></b> Creates bold text • <i></i> Creates italic text • <em></em> Emphasizes a word (with italic or bold) • <strong></strong> Emphasizes a word (with italic or bold) • <font size="3"></font> Sets size of font, from 1 to 7 • <font color="green"></font> Sets font color, using name or hex value Categories of HTML Basic Tags Body Attributes Text Tags Links Formatting Tables www.webmonkey.com

  13. Links (How to link to other sites) • <a href="URL"></a> • Creates a hyperlink • <a href="URL"><imgsrc="URL"> </a> • Creates an image/link Categories of HTML Basic Tags Body Attributes Text Tags Links Formatting Tables www.webmonkey.com

  14. Formatting (Paragraph/Alignment) • <p></p> Creates a new paragraph • <p align="left"> Aligns a paragraph to the left, right, or center. • <br> Inserts a line break • <blockquote></blockquote> Indents text from both sides • <dl></dl> Creates a definition list • <ol></ol> Creates a numbered list • <ul></ul> Creates a bulleted list Categories of HTML Basic Tags Body Attributes Text Tags Links Formatting Tables www.webmonkey.com

  15. Tables (Create a table) • <table></table> • Creates a table • <tr></tr> • Sets off each row in a table • <td></td> • Sets off each cell in a row • <th></th> • Sets off the table header (a normal cell with bold, centered text) Categories of HTML Basic Tags Body Attributes Text Tags Links Formatting Tables www.webmonkey.com

  16. What are we doing today (Learning Objectives)? Basic HTML theory HTML Cheat sheets W3schools.com & Firebug CSS W3schools.com

  17. www.codeacademy.com

  18. Firebug (shows html code) http://reference.sitepoint.com/html/page-structure

  19. What are we doing today (Learning Objectives)? Basic HTML theory HTML Cheat sheets W3schools.com & Firebug CSS W3schools.com

  20. Cascading Style Sheet (code language) www.blumentals.net

  21. Thank You Company SMM Plan: 2/22 Student Blog Unit #2: 3/1 Theme Pics 7 Posts Social Media Links 2 pages with content

  22. Play around in WP

More Related