• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Writing beautiful HTML
 

Writing beautiful HTML

on

  • 5,507 views

My presentation "Writing beautiful HTML" at Webcamp Saigon 1

My presentation "Writing beautiful HTML" at Webcamp Saigon 1

Statistics

Views

Total Views
5,507
Views on SlideShare
5,462
Embed Views
45

Actions

Likes
10
Downloads
80
Comments
0

4 Embeds 45

http://www.fresco20.com 29
http://www.slideshare.net 11
http://sotayblog.com 4
http://fresco20.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Writing beautiful HTML Writing beautiful HTML Presentation Transcript

    • My name is @mintran I am • Web designer with 6 years of experience • Founder of Frexy Studio and IconEden.com • Beautiful HTML & CSS lover
    • Writing beautiful HTML HTML by @mintran Frexy.com
    • Beautiful HTML = Semantic <markup> <markup>
    • Web Standards are not about using DIV for everything for everything for everything
    • <div> stands for DIVision Use DIV to create the site structure
    • <div id=”header”> </div> <div id=”left”> <div id=”right”></div> </div>
    • Avoid using DIV for decoration for decoration
    • <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>
    • Multiple nested-DIVs are EVIL EVIL
    • 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>
    • & hierarchic O O O O O
    • <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>
    • 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>
    • 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>
    • Beautiful HTML = Use proper tags every type of data
    • <p> for paragraph <p> this is a paragraph</p> <p> this is another paragraph</p>
    • <h1>, <h2>,...<h6> for headlines <h1>Site name</h1> <h2>Main Headline</h2> <h3>Normal Headline</h3> <h4>Sub headline</h4>
    • <ul> for • Unordered list • Navigation
    • <ul> for <ol> for • Unordered list • Ordered list • Navigation • Step indicators
    • <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>
    • <dl> for pair values <dl> <dt>Name:</dt> <dd>Min Tran</dd> <dt>Website:</dt> <dd>http://www.frexy.com</dd> <dl>
    • autiful HTML = meaningful & human-frien name convention
    • <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>
    • Recommendation: naming classes and IDs for their PURPOSE rather than APPEARANCE
    • Class vs ID
    • 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;>
    • 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;>
    • ID and class can be friends <li id=quot;homequot; class=quot;currentquot;>
    • Beautiful HTML = Separate presentation from the content the content the content
    • but HOW?
    • let’s create a photo gallery
    • turn on the X-ray machine leaves.jpg frame.gif
    • User add photos by editing html or uploading via a CMS photos gallery
    • Photos are content Drop shadows and borders are presentation
    • content is user input data HTML should hold content only HTML should hold content only
    • 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>
    • 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; }
    • readable & organized O O O O
    • Use <!--comment --> to create separated code blocks to create separated code blocks
    • <!-- header --> <div id=quot;headerquot;> ... <div> <!-- end of header --> <!-- main --> <div id=quot;mainquot;> ... <div> <!-- end of main -->
    • <div id=quot;leftquot;> <ul id=quot;navquot;> <li> <ul> <li> ... </li> <li> ... </li> </ul> </li> <li>...</li> </ul> <div>
    • rather than <div id=quot;leftquot;> <ul id=quot;navquot;> <li> <ul> <li> ... </li> <li> ... </li> </ul> </li> <li>...</li> </ul> <div>
    • 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
    • HTML thật là điệp! Đú dzồi! ng Đú dzồi! ng