• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Base HTML & CSS
 

Base HTML & CSS

on

  • 183 views

 

Statistics

Views

Total Views
183
Views on SlideShare
183
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

    Base HTML & CSS Base HTML & CSS Presentation Transcript

    • Base HTML & CSS Nick
    • 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>
    • <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 padding <table width=”100%”> padding <table width=”auto”>
    • <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”>
    • <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
    • 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 */ filter: alpha(opacity=50); /* Good browsers */ opacity: 0.5;
    • <END/>