2017年3月11日 星期六

CSS Fundamentals---The CSS Setup, Basic CSS Structure & Syntax

3. CSS Fundamentals---The CSS Setup, Basic CSS Structure & Syntax

    想要在html中改變文字的色彩、字體大小、文字間距、文字位置、
邊界,都可以在css檔案中改變。不用造成html中過於冗長的情形。

檔案名稱,例如style.css

    在html中的<head>之中,放入<link>。
 <link href="/style.css" type="text/css" rel="stylesheet">
href 設定連結到html的路徑檔案。

    在style.css,想改成<p>的文字大小。









    注意,在p之後與尖括號之中有一個空白。
                 在{ 與 }之中沒有空白,
                 使用兩個空白鍵在屬性的段落縮排。
                 (圖片中的例子只是便於說明)

    想要一次改變多個元素的顏色。可以使用 ,  。
例如:
h1, h2 , p {
                 color: red;
                 }
     有一個強大的universal selector *
可以改成整個html的屬性。

    在CSS中,當然也可以留下備註。
使用/*        */
    其目的有二,
1. 幫忙你或別人之後在維護管理CSS時,更容易理解容內。
2. 可以測試新的程式碼,而無需刪除舊的程式碼。


Html Content---Common Html Elements(二)

2. HTML CONTENT
Common HTML Elements之二

想要在HTML中插入圖片,可以用以下例子,
記得喔! <img>是self-closing tag
<img src="http://........jpg" />

img是屬性為src,就像href為link的屬性。

    對於視障的同胞,img有個屬性是alt。可以念出alt的那段文字內容。
<img src="#" alt="a field of sunflowers" />

    屬性alt有兩個目的:
1. 當圖片載入失敗時,使用者可以把滑鼠移到圖片上,
    即可看到圖片的文字敘述。
2. 視障人士在使使用電腦中,遇到這張圖片。
    閱讀軟體會念出來這張圖片的文字。

    若要在網頁中增加空位,在index.html中輸入
空白鍵是沒有用的。其結果,不影響網頁中的空位。

使用html的break element: </br>,可以讓文字跳到下一行開頭。

World Wide Web Consordium(W3C)建議段落縮排時,
要有兩個空白鍵。
切記,段落縮排,不可以使用Tab鍵取代空白鍵。

<!---    --> 可以在html中當作備註使用。
其目的有二,
1. 對於後續的處理,讓別人或自己更容易清楚了解。
    那段程式碼的意義。
2. 可以讓你實驗性的寫程式,而不用刪除舊有的程式。


Html Content---Common Html Elements(一)

2. HTML CONTENT
Common HTML Elements之一

在HTML中有六種heading。

<h1> 主標題main heading。用於強調或是放大幾個字
    <p>
        <ul>
            <li>      </li>
            <li>      </li>
            <li>      </li>
     
        </ul>
    </p>
        <ol>
            <li>中國</li>
            <li>印度</li>
            <li>美國</li>
        </ol>

<h2>  其餘的為次標題 subheadings
<h3>
<h4>
<h5>
<h6>

    避免在段落中使用過多的文字,
很多段落有大量文字,會分散人們的注意力。
<ul>表示unordered list,裡面的<li>在網頁格式中,會以項目符號(•)為分類。
<ol>表示ordered  list,以上面為例,人口最多的國家。
在<ol>的網頁格式中,會以
1. 中國
2. 印度
3. 美國
來顯示。

<a>表示錨,anchor,會在<a>之中,加入了屬性href
<a href="http://www..........." target="_blank">

href表示屬性的名稱,http://.....為屬性的值
後面的target表示,會在新的標籤開啟新的空白網頁。

2017年3月5日 星期日

1. Html Fundamental HTML & CSS---Structure

1. HTML Fundamental

HTML & CSS---Structure

<!DOCTYPE html>   寫網頁的第一行總是寫這一個詞
<html>   這個是html的opening tag
    <head>
        <title>維基百科-首頁 </title>
           在<title>和</title>之中的文字,會顯示於網頁的最上方
        <body>
         文字、圖案、按鈕可以加在body之中
       <p> p表示paragraph element     </p>
     

        </body>
    </head>
</html>  這個是html的closing tag。closing tage要加上forward slash



<表示尖括號 angle bracket

以上課程是codecademy的課程整理