Archive

Archive for the ‘HTML’ Category

JavaScript on the web

May 22, 2012 Leave a comment

在Head中引用Javascript文件(像引用CSS文件一樣)：

  • <head><script type=”text/javascript” src=”script.js”></script></head>

HTML中表單與Javascript的交互(HTML部份)：

  • <button onclick=”functionName(‘input’)”>Button Name</button>
  • <form name=”formName”>
    • <label for=”inputName”>labelName</label>
    • <input type=”text” name=”textinput”>
    • <select name=”selectName”>
      <option value=”A” selected>A</option>
      <option value=”B”>B</option>
      </select>
    • <input type=”radio” name=”radioName” value=”choice1″ checked>Choice 1<br>
      <input type=”radio” name=”radioName” value=”choice2″ checked>Choice 2<br>
    • <input type=”checkbox” name=”checkboxName” >
    • <input type=”button” value=”name” onclick=”function()”>

    </form>

HTML中表單與Javascript的交互(JS部份)：

  • document.getElementById(“divID”).innerHTML += HTMLcode; //將JS結果寫入HTML
  • var variable= document.formName.textinput.value; //將網頁表單text內容寫入JS
  • for (var i=0; i < document.formName.radioName.length; i++) {
    if (document.formName.radioName[i].checked) {
    newvariable = document.formName.radioName[i].value; //將網頁表單radio內容寫入JS
    }
Categories: HTML, Javascript

HTML and CSS (3)

April 30, 2012 Leave a comment

Interactive CSS：

  • #idName:hover {…} /* mouseover */
  • #idName:active {…}
  • #idName:link {…}
  • #idName:visited {…}
  • #idName:before {content: “string”;} /* generate content */
  • #idName:after {content: “string”;} /* generate content */
  • #idName:nth-child(odd) {…} /* set all children that are odd */
  • #idName:nth-child(even) {…} /* set all children that are even */
  • #idName:first-child {…}
  • #idName:last-child {…}

Example：

  • #nav ul li a{
  • padding: 20px;
  • background: orange;
  • color: white;
  • }
  • #nav ul li a:hover{
  • background-color: #ffb424;
  • box-shadow: 0px 1px 1px #666;
  • }
  • #nav ul li a:active{ background-color: #ff8f00; }

New HTML5 Codes：

  • <section></section>
  • <nav></nav>
  • <footer></footer>

Selectors Hierarchy：

  • #id .class div /* descendant selector: applied to div under class with id */
  • div > p /* child selector: applied to p that are direct descendant of div */
  • div, p, strong /* group selector */
  • #id:hover /* Pseudo selector */

!important declaration：

  • div { font-size: 10px !important; }

Categories: HTML

HTML and CSS (2)

April 18, 2012 Leave a comment

HTML中的Style Sheet：

  • /* HTML body中的CSS */
    <div style=”color:red; background:teal;”></div> <!– whole line –>
    <span style=”color:red; background:teal;”></span> <!– part of line –>
  • /* HTML header中的CSS */
    <style>
    em {color:green;}
    span {font-family:monospace;}
    .className {color:green;}
    </style>
  • /* 連結HTML外部文件的CSS */
    <head><link rel=”stylesheet” href=”style.css” /></head>
    <head><link rel=”stylesheet” href=”http://twitter.github.com/bootstrap/assets/css/bootstrap.css”></head&gt;

外部文件的CSS：

  • selector, selector  {property: value value; property: value value;}
    parent descendant: {…}
    parent > child: {…}
  • * { color:red; } /* Global Selector */
    html * * *  /* HTML下第三層所有 */
  • p { color:red; } /*  */
  • .className {color:blue;} /* Class，HTML中加入「class=”className”」顯示 */
    p.className /* 在Paragraph中符合className的 */
  • #idName {color:yellow;} /* ID attribute，HTML中加入「id=”idName”」顯示 */
  • #idName li /* 在idName子層的li */
    #idName li:hover /* Mouseover時的反應 */
    #idName li:first-child /* 第一個li */
    #idName li:last-child /* 最後一個li */

CSS Style(color)：

CSS Style(text appearance)：
  • font-family:monospace/arial;
  • font-weight:bold;
  • font-size:25px;
  • font-style:italic;
  • text-decoration:underline/overline/line-through;
  • text-shadow: 3px 3px 3px yellow;
  • text-transform:capitalize/uppercase/lowercase;
CSS Style(layout)：
  • text-align:left/right/center/justify;
  • text-indent: 5%/20px; /* 第一行縮行 */
  • width: 10px/10%;
  • height: 10px/10%;
  • letter-spacing:normal/10px;
  • line-height: 5%/20px;
  • column-count: 3;
  • transform: rotate(25deg);

CSS Style(shadow):

  • text-shadow: [left] [top] [blur] [color];
  • box-shadow: [left] [top] [blur] [color];

CSS Style(“Box Model”: content > padding > border > margin )：

  • padding: 30px/30%; /* = [top] [right] [bottom] [left] */
  • box-shadow: 8px 8px 6px -2px black; /* shadowed box */
  • border: solid/dashed 1px black; /* = [style] [width] [color] */
  • border-radius: 15px; /* rounded corners */
  • margin: 10px/10%;  /* = [all four]/[vert][horz] */
  • margin: 10px/10%;  /* [top] [right] [bottom] [left] */

CSS Style(positioning)：

  • float: left/right; height/width: 50%; /* make it “float” and separate as left and right columns */
  • right: 15px; left: 15px; top: 15px; bottom: 15px;
  • position: absolute; /* to position elements relative to their ‘containing block’ */
  • position: relative; /*  to position blocks relative to where they would have been in the document flow */
  • position: fixed; /* like absolute but ALWAYS relative to the browser window no matter how you scroll */
  • position: static;
  • display: inline; /* include part, not whole line */
  • display: block; /* include whole line */
  • display: none; /* not displaying */
  • display: inline-block; /* vertical lined >> in one line */
  • clear: right/left/both;  /* clear format set previously */
  • z-index: -5 /* vertical depth */
Categories: HTML

HTML & CSS

April 9, 2012 Leave a comment

基礎HTML語法：

  • <html></html>
  • <head></head>
  • <title>Title</title>
  • <body>Body</body>
  • <p >Paragraph</p>
    • <p style=”color:red/#FF0000″></p>
    • <p style=”font-size:20″></p>
    • <p style=”text-align:center/left/right”></p>
    • <em>Emphasis</em>
    • <strong>Strong</strong>
  • <h1>Headline 1</h1>…<h7>Headline 7</h7>
  • <a href=”hyperlink_reference”></a>
  • <ul><li>List Item</li></ul>  <!– unordered list –>
  • <ol><li>List Item</li></ol>  <!– ordered list –>
  • <img src=”source_link” length=”480″ width=”360″ />
  • <table></table>
    • <thead></thead>  <!– table head –>
      • <tr></tr>  <!– table row –>
        • <th colspan=”2″></th>  <!– table head –>
    • <tbody></tbody>  <!– table body –>
      • <tr></tr>  <!– table row –>
        • <td></td>  <!– table data –>
  • <table></table>

 

Categories: HTML