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

2014-09-29

1526
0
HTML5
2015-10-16

[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>網頁表頭標籤裡面，寫法如下：

在此要推薦微軟說的「當今世界上，最強的開發工具」 -- Visual Studio

您可以到此下載免費的Express版本，

記得喔！！要下載 for Web版才是網頁用的！

http://www.visualstudio.com/downloads/download-visual-studio-vs#d-express-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 認證教材

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 約 51hr) https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

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

寫信給我，不要私訊 -- mis2000lab (at) yahoo.com.tw 或 school (at) mis2000lab.net

(1) 第一天 ASP.NET MVC5 完整影片（5.5小時 / .NET 4.x版）免費試聽。影片 https://youtu.be/9spaHik87-A

(2) 第一天 ASP.NET Core MVC 完整影片（3小時 / .NET Core 6.0~8.0）免費試聽。影片 https://youtu.be/TSmwpT-Bx4I

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm 。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b

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 MVC => .NET Core MVC 線上教學 ...... 第一天課程完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程上線了！MIS2000Lab.主講事先錄好的影片，並非上課側錄！觀看時，有如「一對一」面對面講課。

回首頁

ASP.NET專題實務 WebForm + MVC線上教學影片 -- MIS2000Lab.

MIS2000 Lab.已推出20餘本電腦書，曾任資策會專任講師與微軟MVP。自.NET 1.x起，已出版15本ASP.NET (Web Form)書籍，也有遠距教學線上教程教學影片