Download - Writing beautiful HTML
![Page 1: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/1.jpg)
My name is @mintran
•Web designer with 6 years of experience
•Founder of Frexy Studio and IconEden.com
•Beautiful HTML & CSS lover
I am
![Page 2: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/2.jpg)
Writing beautifulHTML
by @mintranFrexy.com
![Page 3: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/3.jpg)
Beautiful HTML = Semantic <markup>
![Page 4: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/4.jpg)
Web Standardsare not
about using DIV for everything
![Page 5: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/5.jpg)
<div> stands for DIVision
Use DIV to create the site structure
![Page 6: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/6.jpg)
<div id=”header”> </div>
<div id=”left”>
</div>
<div id=”right”></div>
![Page 7: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/7.jpg)
Avoid using DIVfor decoration
![Page 8: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/8.jpg)
<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
![Page 9: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/9.jpg)
Multiple nested-DIVs
are EVIL
![Page 10: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/10.jpg)
<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
![Page 11: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/11.jpg)
BEstructural
& hierarchic
O
![Page 12: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/12.jpg)
<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>
![Page 13: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/13.jpg)
<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
![Page 14: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/14.jpg)
<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!
![Page 15: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/15.jpg)
Beautiful HTML = Use proper tags
every type of data
![Page 16: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/16.jpg)
<p> for paragraph
<p> this is a paragraph</p><p> this is another paragraph</p>
![Page 17: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/17.jpg)
<h1>, <h2>,...<h6> for headlines
<h1>Site name</h1>
<h2>Main Headline</h2>
<h3>Normal Headline</h3>
<h4>Sub headline</h4>
![Page 18: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/18.jpg)
<ul> for
• Unordered list• Navigation
![Page 19: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/19.jpg)
<ul> for
• Unordered list• Navigation
<ol> for
• Ordered list• Step indicators
![Page 20: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/20.jpg)
<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>
![Page 21: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/21.jpg)
<dl> for pair values
<dl> <dt>Name:</dt> <dd>Min Tran</dd> <dt>Website:</dt> <dd>http://www.frexy.com</dd><dl>
![Page 22: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/22.jpg)
Beautiful HTML = meaningful & human-friendly
name convention
![Page 23: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/23.jpg)
<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>
![Page 24: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/24.jpg)
Recommendation:
naming classes and IDs for their
PURPOSE
rather than
APPEARANCE
![Page 25: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/25.jpg)
Class vs ID
![Page 26: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/26.jpg)
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">
![Page 27: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/27.jpg)
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">
![Page 28: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/28.jpg)
ID and class can be friends <li id="home" class="current">
![Page 29: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/29.jpg)
Beautiful HTML = Separate
presentation from the content
![Page 30: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/30.jpg)
but HOW?
![Page 31: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/31.jpg)
let’s create a photo gallery
![Page 32: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/32.jpg)
turn on the X-ray machine
leaves.jpg
frame.gif
![Page 33: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/33.jpg)
photos
User add User add photosphotos
by editing by editing html html
or uploading or uploading via a CMSvia a CMS
gallery
![Page 34: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/34.jpg)
Photos are content
Drop shadows and borders are presentation
![Page 35: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/35.jpg)
content is user input data
HTML should hold content only
![Page 36: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/36.jpg)
<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
![Page 37: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/37.jpg)
#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
![Page 38: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/38.jpg)
STAYreadable
& organized
O
![Page 39: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/39.jpg)
Use <!--comment --> to create separated code blocks
![Page 40: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/40.jpg)
<!-- header --><div id="header"> ... <div><!-- end of header -->
<!-- main --><div id="main"> ... <div><!-- end of main -->
![Page 41: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/41.jpg)
useindent
to improve
hierarchy
![Page 42: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/42.jpg)
<div id="left"> <ul id="nav">
<li> <ul> <li> ... </li> <li> ... </li> </ul> </li> <li>...</li></ul>
<div>
![Page 43: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/43.jpg)
<div id="left"><ul id="nav"><li><ul><li> ... </li><li> ... </li></ul></li><li>...</li></ul><div>
rather than
![Page 44: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/44.jpg)
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
![Page 45: Writing beautiful HTML](https://reader036.vdocuments.net/reader036/viewer/2022081518/54531d0ab1af9f17128b46da/html5/thumbnails/45.jpg)
HTML thật là điệp!Đúng dzồi!