1.2 Creating a structured document

Website like a house.

HTML like the structure .

CSS is the decoration.

Javascipts are your interactive components.

Logistics, Project 1, and Text Editors

Stage 1-Webcast第一篇

Correctly nesting and closing tags

包 Tag 不要包錯，像下面這個是正確的

<strong>
<a href="https://www.udacity.com">This site rocks!</a>
</strong>

不要忘記 Closing tag，像下面這個就忘記 </li>

<ol>
<li>Apples
<li>Bananas
<li>Mandarins
</ol>

工具 Correctly spelling tags

W3C Validator

Chrome DevTools Overview

影片
看Transcript比較好，但內容其實只有講到基本的操作，像是可以在 Tool 上修改內容，下面我整理了一下。Transcript 加入書籤

重點摘要

可以直接在 Dev tool 更改看效果如何，反正不會存檔，要重來就 reload
安裝 Chrome 就可以使用
開啟 Dev tool 後可以在你有疑問的 element 按右鍵找到 scroll into view
會看到"Styles" 這一區，裡面就是 CSS Code
舊版網站新版網站
提供的資料包含DOM，還可以監看後端的部分，可以看到圖片讀取的效能

分析結構 - Tree :branching structure

例子二

HTML and CSS are both "languages"
HTML controls the "structure" of a web page
CSS controls the "style" of a page (how it looks).
When programmers talk about the "DOM" (Document Object Model) they are talking about the tree-like structure of a page.

To learn more about what a "tree-like structure" means, read the first two paragraphs of thewikipedia article on Tree Structures.

HTML- HyperText Markup Language - the standard markup language used to create web pages.

CSS- Cascading Style Sheets - style sheet language used for describing the look and formatting of a document written in a markup language.

DOM- Document Object Model - a cross-platform and language-independent convention for representing and interacting with objects in HTML (and other markup languages). The nodes of every document are organized in a tree structure, called the DOM tree.

The browser turns HTML tags into elements that form a tree.

The document object model,or DOM, which is a standard convention for representing and interacting with elements in html.

Boxfying

加上class attribute

Having to change 100 lines of code when you want to make the site look different.(跟上面其實一樣)

寫法 1：

<div style="color : blue">this text would be blue</div>

寫法2,可以用style tags直接加css：

<style>
div {color:blue}
</style>

<style>
  div {
    height : 50px;
    width : 50px;
    border-radius: 25px;
  }

.stop {

background-color: red;

}

.slow {

background-color: yellow;

}

.go {

background-color: green;

}

</style>

Box Sizing and Positioning Summary

Flex Box Layout

.app {
    display: -webkit-flex;
    display: flex;
}

http://www.oxxostudio.tw/articles/201501/css-flexbox.html](http://www.oxxostudio.tw/articles/201501/css-flexbox.html

從實際案例學到的CSS

.body {

    padding: 20px 10px;  /*前面指上下，後面指左右*/
    font-family: Comic Sans MS; /*字體都可以換*/
    max-width: 2000px;
    margin: 0 auto; /* The 0 refers to the top and bottom margins and the "auto"              automatically */
    font-size: 1.4em; /*字會變大*/
    text-align: center; /*字靠中間*/
    border-radius: 20px; /*背景如果是方形，可以造出角角*/
    color: white; /*當字體顏色用*/
    background-color: #294860;
}

補充em的介紹，再加上rem

http://jas9.blogspot.com/2011/09/pxemrem.html](http://jas9.blogspot.com/2011/09/pxemrem.html

.lesson {
    background-color: #294860;
    border-radius: 20px;
    color: white;
    padding: 10px;
    margin: 10px auto;
}

Padding 和 Margin

這裡的padding，可以讓裡面的字和背景空出距離，完全發揮padding的特性，margin的話就是整個divsion外圍的調整，有加就有差

小段落的上下行距調整

p {
    margin: 10px 0;
}

list-style-type介紹

http://www.w3schools.com/cssref/pr\_list-style-type.asp](http://www.w3schools.com/cssref/pr\_list-style-type.asp

可以改變 list 的樣式，還蠻酷的

ul {
    list-style-type: none;
    /* this removes the bullets that show up by default in unordered lists */
}

行高

找顏色的好所在

font-weight

1.2 Creating a Structured Document