W3school-HTML

Title Attribution
href Atrribution
Size Atrribution
HTML Heading
HTML Horizontal Line
<pre> poem
background-color:lightgray
Text Color color:blue
HTML font  font-family:courier
Text Size  font-size:200%
Text Align text-align:center
Blod<b> Strong<strong>
Marked <mark>
deleted line <del>
underLine <ins>
Bi-Directional Override <bdo dir="rtl">

CSS border
CSS padding
CSS margin
CSS id
CSS class

HTML Link : colors and Icons
HTML Link : Target Atrribution
HTML Link : Image as links
HTML LinK : id as link   


HTML Image : Width Height or Style?
HTML Image : Image on Another Server
HTML Image : Image Maps
HTML Image : Image Floating


HTML Table  :  Defining <table> <tr> <td>
HTML Table  :  CSS Border border : 1px solid black
HTML Table  :  CSS collapse border  border-collapse : collapse
HTML Table  :  padding   padding : 20px
HTML Table  :  Table headings  <th>
HTML Table  :  Align  text-align: left
HTML Table  :  Border space  border-spacing : 2px
HTML Table  :  span colunms colspan="2"
HTML Table  :  span rows  rowspan="2"
HTML Table  :  caption  <caption>
HTML Table  :  id CSS table#id{  }
HTML Table  :  odd even style table#t01 tr:nth-child(odd)

HTML Lists  :  unordered Lists  <ul>  <li>
HTML Lists  :  unordered Lists Style Attribution  list-style-type : circle
HTML Lists  :  ordered Lists  <ol> <li>  type= "1"
HTML Lists  :  description Lists <dl> <dt> <dd>
HTML Lists  :  nested Lists
HTML Lists  :  Horizontal Lists  ul#id li {display:inline }
HTML Lists  :  Horizontal Lists style Attribution

• background-color : black
• padding : 10px 20px 
• text-decoration : none  (無超連結底線)
• border-radius  :  10px 10px 30px 30px

HTML Lists  :  hover    ul#id li a :hover {background-color : orange }

HTML Blocks : <div>
HTML Blocks : <span>

HTML Class  :  Class   .classname{}
HTML Class  :  Classing inline Elements  span.classname { }

HTML Layouts  :  layout using <div>



HTML Responsive :  using float  float : left
HTML Responsize  :  using Bootstrap


HTML iframe : display web in web  <iframe src="URL"></iframe>
HTML iframe : set Height and Width
HTML iframe : remove the border  style="border : none"
HTML iframe : change the border   style="border : 5px dotted red"
HTML iframe : Target for a link

1. <iframe src="www.google.com" name="iframe_a"></iframe>
2. <p><a href="www.yahoo.com.tw" target="iframe_a" >yahoo</a></p>

HTML ColorName : 140

HTML ColorValues 

• style="background-color : #FFFF00"
• style="background-color : rgb(255,255,0)"
• style="background-color : yellow"

HTML Scripts : change content  document.getElementById("Id").innerHTML = "OK";

HTML Scripts : change style    document.getElementById("Id").style.fontsize = "25px";

HTML symbol   <p>I will display &x20AC</p>



HTML form  :  input 

• text
• radio
• submit  <form action="url">  <input type="submit">  </form>

HTML form  :  action   

• method="GET"     傳送資料會出現在網址
• method="POST"   傳送資料不會出現在網址

HTML form  :  name Attribution  input 要有 name 才會傳

HTML form  :  grouping data <fieldset>

HTML form  :  <select>  <option>

HTML form  :  <textarea>

HTML form  :  <button>

HTML form  :  dataList

HTML form  :  <output>

HTML Input:

• text
• password
• submit
• radio
• checkbox
• button
• number  限制輸入數字範圍
• date
• color
• range
• email
• search
• tel
• url
• file