1 / 22

HTML / CSS – Basics

HTML / CSS – Basics. Why the heck are we doing this ?. HTML. HyperText Markup Language. CSS. Cascading Style Sheets. Reasons to learn HTML and CSS. Presentation. Content. Structure. Layout / Design. I have some content , how do I structure it ?.

kamal-wiggins
Download Presentation

HTML / CSS – Basics

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. HTML / CSS – Basics Whythe heck arewedoingthis?

  2. HTML HyperText Markup Language

  3. CSS Cascading Style Sheets

  4. Reasonstolearn HTML and CSS Presentation Content Structure Layout / Design I havesomecontent, how do I structureit? I havethecontentandthestructure, how do I makeitlookgood? Appreciatethelogic in this. Change thelookofeverythingefficiently.

  5. HTML Document – Basic Structure Youalwaysneedthis: <html>Start ofdocument <head> Start of Head </head>End of Head <body> Start of Body </body>End of Head </html> End ofdocument

  6. HTML – Source andSurface Source code Whatthebrowserdisplaysisactually:

  7. Rules • Alwaysclose tags. Always! No matter what. • Some tags can not benested in others. <h1><p></p></h1> • A nested tag must beclosedbefore a parent tag isclosed. <p><span></p></span> <p><span></span></p>

  8. HTML – Basic tags <p></p>a paragraph <h1></h1>headingofthefirst order <h2>-<h6>moreheadings <ul></ul> an unorderedlist <ol></ol>an orderedlist <li></li> a list item <a></a>theanchor tag <img /> an imageobject

  9. HTML – Hierarchy <html> <head> <body> <p> <h1> <div> <ol> <ul> <span> <li> <a> <img>

  10. HTML – Hierarchy <html> <head> <body> <p> <h1> <div> <ol> <ul> <span> <li> <a> <img>

  11. HTML – Hierarchy <html> <head> <body> <p> <h1> <div> <ol> <ul> <span> <li> <a> <img>

  12. HTML – Basic attributes <a href="">Some Text</a> the hypertext reference, turning “Some Text” into a link <imgsrc="" alt="" /> an image object is not complete if the source is not given and an alternative text is missing

  13. Absolute vs. Relative Links <a href="http://www.google.com/"> Some Text</a> an absolute reference <a href="page2.html">Some Text</a> a relative reference

  14. Relative links revisited <a href="page2.html">Some Text</a> file in the same directory <a href="pages/page2.html">Some Text</a> file in a sub-directory called pages

  15. Relative links revisited 2 <a href="../page2.html">Some Text</a> file in the parent directory <a href="../pages/page2.html">Some Text</a> file in a sub-directory of the parent directory dw

  16. HTML – Special tags <div></div>a division <span></span>specialsegments <strong></strong>makeitbold <em></em>makeititalics <br /> line break <hr /> horizontal line <blockquote> a block ofquote </blockquote>

  17. Want more? http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/ http://www.selfhtml.org/ http://www.w3schools.com/html/

  18. Want more? Forthoseofyou not goodatrememberingstuff. http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/ http://www.selfhtml.org/ http://www.w3schools.com/html/

  19. Want more? http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/ http://www.selfhtml.org/ http://www.w3schools.com/html/ Forthoseofyouwhowanttoknowallthedetails.

  20. Want more? http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/ http://www.selfhtml.org/ http://www.w3schools.com/html/ Forthoseofyouwholiketotry out things.

  21. Want more? http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/ http://www.selfhtml.org/ http://www.w3schools.com/html/

More Related