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. 可以測試新的程式碼,而無需刪除舊的程式碼。
2017年3月11日 星期六
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. 可以讓你實驗性的寫程式,而不用刪除舊有的程式。
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>
避免在段落中使用過多的文字,
很多段落有大量文字,會分散人們的注意力。
在<ol>的網頁格式中,會以
1. 中國
2. 印度
3. 美國
來顯示。
<a>表示錨,anchor,會在<a>之中,加入了屬性href
<a href="http://www..........." target="_blank">
href表示屬性的名稱,http://.....為屬性的值
後面的target表示,會在新的標籤開啟新的空白網頁。
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的課程整理
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的課程整理
訂閱:
文章 (Atom)