Your SlideShare is downloading. ×
Writing beautiful HTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Writing beautiful HTML

3,248
views

Published on

My presentation "Writing beautiful HTML" at Webcamp Saigon 1

My presentation "Writing beautiful HTML" at Webcamp Saigon 1

Published in: Technology

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,248
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
83
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