MIS2000Lab.的「HTML5 認證考試, 從零開始」#4 / #5 -- CSS 與selector、HTML5超簡易入門

[it邦幫忙]鐵人賽
MIS2000Lab.的「HTML5 認證考試, 從零開始」#4 -- 超入門的CSS 與 selector
MIS2000Lab.的「HTML5 認證考試, 從零開始」#5 -- HTML5超簡易入門




 

 

 

我在今年(2014)底將出版一本認證教材,主題就是網頁與HTML5。 

有別於市面上的認證教材,都是PO一些簡報畫面就輕輕帶過, 
我的出版計畫則是「認證 + 實力養成」所以會加入不少範例,維持我的一貫風格。 

這裡先挑選30篇文章與大家分享,希望對於HTML5 初學者 有幫助.......謝謝。

(抱歉!目前發表的文章內容,都經過簡化..............)

 

上一篇文章:

MIS2000Lab.的「HTML5 認證考試,從零開始」#3-- HTML Form 網頁表單 & 網頁裡的Script程式

 
 
 
本文開始     本文內容,將會在2014年底,碁峰出版社推出的HTML5新書裡面
 
=================================================================================
 
MIS2000Lab.的「HTML5 從零開始」#4--超入門的CSS 與 selector
 

本文也發表在 IT邦幫忙 2014鐵人賽  http://ithelp.ithome.com.tw/question/10157050

請幫我連結過去,增點人氣、加點「點閱率」,感恩!

 
 
 
CSS跟上一章介紹的<script>標籤有點類似,
 
大多寫在網頁的表頭<head>標籤裡面。基礎的架構如下:
 
 
<style type="text/css">
  selector {
      property1:value; 作者註解 : 寫法為「屬性: 值」。
      property2:value;
      ..
      propertyN:value;
  }
</style>

 

 
 
 
我們直接用範例CSS_01.html來說明最快(如下圖),
 
所謂的selector就是指向「下面的<h1>標籤」,
 
 
 
當我們指定<h1>標籤的文字大小、顏色之後,整個網頁的<h1>標籤都會統一管理,
 
 
日後要更換<h1>標題的文字與顏色,只要在表頭<head>的CSS統一管理就行了,
 
不需要深入網頁更改每一個<h1>標籤。
 

 

如果您的CSS設定太龐大,便可以寫在另外一個.css檔案中這是一個純文字檔)。
 
一樣寫在<head>網頁表頭標籤裡面,寫法如下:
 
 
<link rel="stylesheet" type="text/css" href="自己的檔名.css" media="screen">
 

 

 

在此要推薦微軟說的「當今世界上,最強的開發工具」 -- Visual Studio
 
您可以到此下載免費的Express版本,
 
記得喔!!要下載 for Web版才是網頁用的!
 
 
 
 
====操作步驟如下:====
 
1. 先開一個「新網站」
 
 
 
2. 然後在畫面右側的「方案總管」,請點選您的網站或目錄之後
 
再按下「滑鼠右鍵」,加入一個CSS檔(樣式表)
 

 

完成CCS檔以後,如下圖,
 
請在您的網頁HTML檔裡面,引用剛剛的CSS檔案。
 

 

 

 

====另一種selector的寫法:====
 
    下方CSS裡面的「div.xyz」針對<div>標籤,加上class="xyz"來體現CSS效果。
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type=”text/css”>
    div.xyz {
        width: 100px;
    }
</style>
</head>
<body>

<div class="xyz"> 簡單的CSS寫法 </div>

</body>
</html>

 

 
 
====善用瀏覽器的工具與偵錯====
 
 
 
我們使用IE 11瀏覽器裡面有開發人員的工具
 
可以針對網頁進行偵錯與比對。只需按下「F12」按鍵即可。
 

 
您可以點選不同的HTML碼或是CSS,立刻對照畫面上的成果
 
不光是IE瀏覽器有這功能,大部分瀏覽器都有提供類似的 Debug工具

 

 

本文也發表在 IT邦幫忙 2014鐵人賽  http://ithelp.ithome.com.tw/question/10157050

請幫我連結過去,增點人氣、加點「點閱率」,感恩!

完整文章列表,http://ithelp.ithome.com.tw/ironman7/app/#/profile/20079471/dev

 

=================================================================================

下一篇文章:

 

MIS2000Lab.的「HTML5 從零開始」#5-- HTML5超簡易入門

 

根據維基百科的說明:

2004年由Web Hypertext Application Technology Working Group(WHATWG)提出

名為Web Applications 1.0,即是HTML 5草案的前身,再於2007年獲W3C接納並成立了新的HTML工作團隊。

在2008年1月22日第一份正式草案發行。......資料來源 http://zh.wikipedia.org/wiki/HTML5

 

HTML5新功能如下:
 
用來增加文檔的語義結構(semantic structure)的新元素。 
新的表單控制項和內建的驗證功能。 
支援原生(native)的audio和video,這樣用戶就不必依賴於瀏覽器plug-in元件(不用外掛程式)。 
在<canvas>元素和相關的JavaScript API提供了網頁一個自由的區域進行繪製,而JavaScript命令做繪圖,匯入與匯出。 
支援檔案上傳到Web Server。 
支援拖放(dragging and dropping)頁面上的元素。 
當瀏覽器處於離線狀態,仍支援Web應用程序繼續運行。 
支援local data storage,功能面遠超過傳統的Cookie。 
 
 
 
==== HTML5文件架構 ====
 
 
下圖列出幾個重點:
 
<nav>用來作為導覽(navigation)。如下圖最上方,可以經由導覽列連回首頁。建議只放置主要的導覽標題到<nav>裡面。
 
<article>表示文章的主體部分,可以獨立展示的Blog文章(或一篇新聞)、網友針對這篇文章的評論、或是分類目錄。
 
<section>用來表示文章內容的一部份,以下圖為例,一篇文章裡面有兩個<section>段落。
 

 

 
==== 可編輯的<article> ====
 
根據O’REILLY出版的「HTML5 Cookbook」一書的說明,
<artcle>的內容如果允許編輯,請改為<article contenteditable>。
 
這樣的功能早在IE 5.5就有支援,當初是希望做成「所見即所得(WYSIWYG)」的瀏覽器。
 

 

如下圖
 
在<header>裡面放了兩份標題與導覽 <nav>。
 

 

在<header>裡面也常見到另一個<hgroup>,用來將表頭標題增加更多訊息。

通常會用<h1>~<h6>來制訂標題文字的大小,<h1>文字最大而<h6>最小。

 

 

==== 日期時間 與 圖片 ====

 

首先介紹日期與時間的<time>

<time datetime="2014-08-08T09:00:00-0500"> 9am today in New York </time>

請搭配ISO(國際標準組織)的日期與時間格式。
 
 
 
再來是圖片的部分,
 
<figure>代表圖片區塊。
底下會有<figcaption>表示圖片的”標題”。
 
請注意<figcaption>與<img alt=”圖片取代文字”>兩者的差異。
 
 

 

==== details,折疊與隱藏 ====

 

<details>必須搭配<summary>才能在折疊(隱藏)時,做一個摘要的說明。

不過,IE 11瀏覽器看不到這效果,

我改用 Chrome瀏覽器來觀看。

 

 

 

 

本文也發表在 IT邦幫忙 2014鐵人賽  http://ithelp.ithome.com.tw/question/10157184

請幫我連結過去,增點人氣、加點「點閱率」,感恩!

 

完整文章列表,http://ithelp.ithome.com.tw/ironman7/app/#/profile/20079471/dev



 

本網站內的下一篇文章:MIS2000Lab.的「HTML5 認證考試,從零開始」#6 / #7 -- CSS樣式、Box Model與HTML5 / JavaScript入門 

 
 
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材
9789863475750

HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

  • 出版商:碁峰
  • 出版日期:2015-04-09
  • 台幣定價:
  • $480
  • 售價:7.9 折 $379
  • 語言:繁體中文
  • ISBN:9863475750
  • ISBN-13:9789863475750

 

 

 

 

**********************************************************************************************************************

我要買書:

PChome  http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI

博客來  http://www.books.com.tw/products/0010671214

天瓏書局  https://www.tenlong.com.tw/items/9863475750?item_id=1003110

 

 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

線上課程,遠距教學 (Web Form 49hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程,遠距教學 (ASP.NET MVC 75hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

ASP.NET MVC線上課程 第一天 免費看 (5.5小時) 

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.台灣  或  school (at) mis2000lab.net


ASP.NET遠距教學、線上課程(Web Form + MVC)。 第一天課程, "完整" 試聽。 

................   facebook社團   https://www.facebook.com/mis2000lab   ......................

................  YouTube (ASP.NET) 線上教學影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

Blog文章 "附的範例" 無法下載,請看 這裡 ...... https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)

......................................................................................................................................................

...................................................................................................................................................... 

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講

事先錄製好的影片,並非上課時側錄!   觀看影片時,有如我「一對一」跟您面對面講課

 

ASP.NET MVC 5 線上教學

累積時數約 75小時...... 第一天(5.5小時)完整內容,"免費"讓您評估