View
5.673
Download
1
Category
Preview:
DESCRIPTION
My presentation "Writing beautiful HTML" at Webcamp Saigon 1
Citation preview
My name is @mintran
•Web designer with 6 years of experience
•Founder of Frexy Studio and IconEden.com
•Beautiful HTML & CSS lover
I am
Writing beautifulHTML
by @mintranFrexy.com
Beautiful HTML = Semantic <markup>
Web Standardsare not
about using DIV for everything
<div> stands for DIVision
Use DIV to create the site structure
<div id=”header”> </div>
<div id=”left”>
</div>
<div id=”right”></div>
Avoid using DIVfor decoration
<div>My headline <br/></br></div>
<div>Sub headline</div>
<div>A paragraph</div>
<h1>My headline </h1>
<h4>Sub headline</h4>
<p>A paragraph</p>
rather than
Multiple nested-DIVs
are EVIL
<div id="navigation">
<div class="active">
<div class="buttonLeft">
<div class="buttonRight">
<div class="strong">
<a href="#">Home</a>
</div>
</div>
</div>
</div>
this is EVIL
BEstructural
& hierarchic
O
<div id="nav">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
Use best practices
<ul id="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Services</a></li>
</ul>
Beautiful!
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
• Unordered list• Navigation
<ol> for
• Ordered list• Step indicators
<ul> <li><a href="#">Sign up</a></li> <li><a href="#">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>
Beautiful HTML = meaningful & human-friendly
name convention
<h2 class="title">Main article</h2><p class="summary">Article summary</h2>
rather than
<h2 class="blue">Main article</h2><p class="green">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="alert"><span class="alert error"><h2 class="headline">
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="header"><body id="home"><body id="home page">
ID and class can be friends <li id="home" class="current">
Beautiful HTML = Separate
presentation from the content
but HOW?
let’s create a photo gallery
turn on the X-ray machine
leaves.jpg
frame.gif
photos
User add User add photosphotos
by editing by editing html html
or uploading or uploading via a CMSvia a CMS
gallery
Photos are content
Drop shadows and borders are presentation
content is user input data
HTML should hold content only
<ul id= "gallery"> <li><img src="leaves.jpg" /></li> <li><img src="balloon.jpg" /></li> <li><img src="sea.jpg" /></li> <li><img src="trees.jpg" /></li><ul>
HTML
#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;}
CSS
STAYreadable
& organized
O
Use <!--comment --> to create separated code blocks
<!-- header --><div id="header"> ... <div><!-- end of header -->
<!-- main --><div id="main"> ... <div><!-- end of main -->
useindent
to improve
hierarchy
<div id="left"> <ul id="nav">
<li> <ul> <li> ... </li> <li> ... </li> </ul> </li> <li>...</li></ul>
<div>
<div id="left"><ul id="nav"><li><ul><li> ... </li><li> ... </li></ul></li><li>...</li></ul><div>
rather than
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!Đúng dzồi!
Recommended