Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Base HTML & CSS
Nick
HTML DOCTYPE?
HTML DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loos...
<body>
SAMPLE CODE
<style type="text/css">
.text-layer {
font-family: Monaco, "Courier New", monospace;
font-size: 12px;
c...
<h1>
<h1> ~ <h6>
h1

h2

h2

h3

h3
attr id
Attribute id
<div id="elem_id"></div>

Identity of HTML Element
●
●

It is the only
Always use in JavaScript
attr class
Attribute class
<div class="text-layer bg-red"></div>

Styling the HTML Element
●
●

It can be many
Each class ...
<table>

VS
<div>
<table> VS <div>
<table> Base usage
<table>
<tr>
<td>row1 column1</td>
<td>row1 column2</td>
</tr>
<tr>
<td>row2 column1</...
<table> VS <div>
<table> colspan
<table>
<tr>
<td colspan=”2”>
row1 column1 + row1 column2
</td>
</tr>
<tr>
<td>row2 colum...
<table> VS <div>
<table> rowspan
<table>
<tr>
<td rowspan=”2”>
row1 column1 + row2 column1
</td>
<td>row1 column2</td>
</t...
<table> VS <div>
Tips for using <table>
●
●

When the container has margin or padding, do not set table in 100% width
Do n...
<table> VS <div>
Why <div> ?
●
●
●

Easy to control
No any extra css
Default display “Block”

<div id=”1” style=”position:...
<table> VS <div>
So...
<table>
●
●
●

Not too much customize
Seems simple
Have a some format

<div>
●
●
●

Lots of customi...
margin & padding
margin & padding
margin
margin

content
margin & padding
padding
padding

content
About transparent
About transparent
Cross browser
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */...
<END/>
Upcoming SlideShare
Loading in …5
×

Base HTML & CSS

603 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Base HTML & CSS

  1. 1. Base HTML & CSS Nick
  2. 2. HTML DOCTYPE? HTML DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > HTML5 DOCTYPE <!DOCTYPE html>
  3. 3. <body> SAMPLE CODE <style type="text/css"> .text-layer { font-family: Monaco, "Courier New", monospace; font-size: 12px; cursor: text; } .bg-red { background-color: red; } </style> <body> <h1 style="color:red">Juhu Kinners</h1> <div id="elem_id"></div> <div class="text-layer bg-red"></div> </body>
  4. 4. <h1> <h1> ~ <h6> h1 h2 h2 h3 h3
  5. 5. attr id Attribute id <div id="elem_id"></div> Identity of HTML Element ● ● It is the only Always use in JavaScript
  6. 6. attr class Attribute class <div class="text-layer bg-red"></div> Styling the HTML Element ● ● It can be many Each class match with their css in stylesheet .text-layer { font-family: Monaco, "Courier New", monospace; font-size: 12px; cursor: text; } .bg-red { background-color: red; }
  7. 7. <table> VS <div>
  8. 8. <table> VS <div> <table> Base usage <table> <tr> <td>row1 column1</td> <td>row1 column2</td> </tr> <tr> <td>row2 column1</td> <td>row2 column2</td> </tr> </table> row1 column1 row1 column2 row2 column1 row2 column2
  9. 9. <table> VS <div> <table> colspan <table> <tr> <td colspan=”2”> row1 column1 + row1 column2 </td> </tr> <tr> <td>row2 column1</td> <td>row2 column2</td> </tr> </table> row1 column1 + row1 column2 row2 column1 row2 column2
  10. 10. <table> VS <div> <table> rowspan <table> <tr> <td rowspan=”2”> row1 column1 + row2 column1 </td> <td>row1 column2</td> </tr> <tr> <td>row2 column2</td> </tr> <tr> <td>row3 column1</td> <td>row3 column2</td> </tr> </table> row1 column1 + row2 column1 row1 column2 row2 column2 row3 column1 row3 column2
  11. 11. <table> VS <div> Tips for using <table> ● ● When the container has margin or padding, do not set table in 100% width Do not try to set the height, if you want to make it flexible padding <table width=”100%”> padding <table width=”auto”>
  12. 12. <table> VS <div> Why <div> ? ● ● ● Easy to control No any extra css Default display “Block” <div id=”1” style=”position: absolute”> <div id=”1” style=” position: relative”> <div id=”2” style=” position: relative”> <div id=”4” style=”position: absolute”> <div id=”3” style=” position: relative”> <div id=”4” style=” position: relative”> <div id=”5” style=” position: relative”> <div id=”6” style=” position: relative”> <div id=”2” style=” position: absolute”> <div id=”3” style=” position: absolute”>
  13. 13. <table> VS <div> So... <table> ● ● ● Not too much customize Seems simple Have a some format <div> ● ● ● Lots of customize Complex layout Not in same format
  14. 14. margin & padding
  15. 15. margin & padding margin margin content
  16. 16. margin & padding padding padding content
  17. 17. About transparent
  18. 18. About transparent Cross browser /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Good browsers */ opacity: 0.5;
  19. 19. <END/>

×