base html & css
TRANSCRIPT
Base HTML & CSS
Nick
HTML DOCTYPE?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML DOCTYPE
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>
<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>
<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 match with their css in stylesheet
.text-layer {
font-family: Monaco, "Courier New", monospace;
font-size: 12px;
cursor: text;
}
.bg-red {
background-color: red;
}
<table>
VS<div>
<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
<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
<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
<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
<table width=”100%”>
padding
<table width=”auto”>
padding
<table> VS <div>
Why <div> ?
● Easy to control● No any extra css● Default display “Block”
<div id=”1” style=”position: absolute”>
<div id=”4” style=”position: absolute”>
<div id=”2” style=”position: absolute”>
<div id=”3” style=”position: absolute”>
<div id=”1” style=”position: relative”>
<div id=”2” style=”position: relative”>
<div id=”3” style=”position: relative”>
<div id=”4” style=”position: relative”>
<div id=”5” style=”position: relative”>
<div id=”6” style=”position: relative”>
<table> VS <div>
So...
● Not too much customize● Seems simple● Have a some format
<table>
● Lots of customize● Complex layout● Not in same format
<div>
margin & padding
margin & padding
margin
content
margin
margin & padding
padding
content
padding
About transparent
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;
<END/>