Writing beautiful HTML

  • 3,200 views
Uploaded on

My presentation "Writing beautiful HTML" at Webcamp Saigon 1

My presentation "Writing beautiful HTML" at Webcamp Saigon 1

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,200
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
81
Comments
0
Likes
10

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

Transcript

  • 1. My name is @mintran I am • Web designer with 6 years of experience • Founder of Frexy Studio and IconEden.com • Beautiful HTML & CSS lover
  • 2. Writing beautiful HTML HTML by @mintran Frexy.com
  • 3. Beautiful HTML = Semantic <markup> <markup>
  • 4. Web Standards are not about using DIV for everything for everything for everything
  • 5. <div> stands for DIVision Use DIV to create the site structure
  • 6. <div id=”header”> </div> <div id=”left”> <div id=”right”></div> </div>
  • 7. Avoid using DIV for decoration for decoration
  • 8. <h1>My headline </h1> <h4>Sub headline</h4> <p>A paragraph</p> rather than <div>My headline <br/></br></div> <div>Sub headline</div> <div>A paragraph</div>
  • 9. Multiple nested-DIVs are EVIL EVIL
  • 10. this is EVIL <div id=quot;navigationquot;> <div class=quot;activequot;> <div class=quot;buttonLeftquot;> <div class=quot;buttonRightquot;> <div class=quot;strongquot;> <a href=quot;#quot;>Home</a> </div> </div> </div> </div>
  • 11. & hierarchic O O O O O
  • 12. <div id=quot;navquot;> <ul> <li class=quot;activequot;><a href=quot;#quot;>Home</a></li> <li><a href=quot;#quot;>About Us</a></li> <li><a href=quot;#quot;>Contact Us</a></li> <li><a href=quot;#quot;>Services</a></li> </ul> </div>
  • 13. Use best practices <div id=quot;navquot;> <ul> <li class=quot;activequot;><a href=quot;#quot;>Home</a></li> <li><a href=quot;#quot;>About Us</a></li> <li><a href=quot;#quot;>Contact Us</a></li> <li><a href=quot;#quot;>Services</a></li> </ul> </div>
  • 14. Beautiful! <ul id=quot;navquot;> <li class=quot;activequot;><a href=quot;#quot;>Home</a></li> <li><a href=quot;#quot;>About Us</a></li> <li><a href=quot;#quot;>Contact Us</a></li> <li><a href=quot;#quot;>Services</a></li> </ul>
  • 15. Beautiful HTML = Use proper tags every type of data
  • 16. <p> for paragraph <p> this is a paragraph</p> <p> this is another paragraph</p>
  • 17. <h1>, <h2>,...<h6> for headlines <h1>Site name</h1> <h2>Main Headline</h2> <h3>Normal Headline</h3> <h4>Sub headline</h4>
  • 18. <ul> for • Unordered list • Navigation
  • 19. <ul> for <ol> for • Unordered list • Ordered list • Navigation • Step indicators
  • 20. <ul> <li><a href=quot;#quot;>Sign up</a></li> <li><a href=quot;#quot;>Login</a></li> <ul> <ol> <li>Step 1: Pick a username</li> <li>Step 2: Pick a password</li> <li>Step 3: Enter your email address</li> <ol>
  • 21. <dl> for pair values <dl> <dt>Name:</dt> <dd>Min Tran</dd> <dt>Website:</dt> <dd>http://www.frexy.com</dd> <dl>
  • 22. autiful HTML = meaningful & human-frien name convention
  • 23. <h2 class=quot;titlequot;>Main article</h2> <p class=quot;summaryquot;>Article summary</h2> rather than <h2 class=quot;bluequot;>Main article</h2> <p class=quot;greenquot;>Article summary</h2>
  • 24. Recommendation: naming classes and IDs for their PURPOSE rather than APPEARANCE
  • 25. Class vs ID
  • 26. Use a class 1. The style is used in various places throughout the document. 2. The style is very general. <span class=quot;alertquot;> <span class=quot;alert errorquot;> <h2 class=quot;headlinequot;>
  • 27. Use an ID 1. The style is only used once ever in the document. 2. The style is specific to a certain area of the document. <div id=quot;headerquot;> <body id=quot;homequot;> <body id=quot;home pagequot;>
  • 28. ID and class can be friends <li id=quot;homequot; class=quot;currentquot;>
  • 29. Beautiful HTML = Separate presentation from the content the content the content
  • 30. but HOW?
  • 31. let’s create a photo gallery
  • 32. turn on the X-ray machine leaves.jpg frame.gif
  • 33. User add photos by editing html or uploading via a CMS photos gallery
  • 34. Photos are content Drop shadows and borders are presentation
  • 35. content is user input data HTML should hold content only HTML should hold content only
  • 36. HTML <ul id= quot;galleryquot;> <li><img src=quot;leaves.jpgquot; /></li> <li><img src=quot;balloon.jpgquot; /></li> <li><img src=quot;sea.jpgquot; /></li> <li><img src=quot;trees.jpgquot; /></li> <ul>
  • 37. CSS #gallery {list-style:none;} #gallery li { float:left; margin-right:20px; background:url(frame.gif) no-repeat; padding: 5px 5px 10px 5px; } #gallery img { display:block; width:150px; height:150px; }
  • 38. readable & organized O O O O
  • 39. Use <!--comment --> to create separated code blocks to create separated code blocks
  • 40. <!-- header --> <div id=quot;headerquot;> ... <div> <!-- end of header --> <!-- main --> <div id=quot;mainquot;> ... <div> <!-- end of main -->
  • 41. <div id=quot;leftquot;> <ul id=quot;navquot;> <li> <ul> <li> ... </li> <li> ... </li> </ul> </li> <li>...</li> </ul> <div>
  • 42. rather than <div id=quot;leftquot;> <ul id=quot;navquot;> <li> <ul> <li> ... </li> <li> ... </li> </ul> </li> <li>...</li> </ul> <div>
  • 43. Conclusion • There’s no rule, just recommendations • Always use the best methods and best practices • Say goodbye to bad coding habits • Build more websites • Code validator is your best friend
  • 44. HTML thật là điệp! Đú dzồi! ng Đú dzồi! ng