iT邦幫忙

DAY 2
6

MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松系列 第 2

MIS2000Lab.的「HTML5 認證考試,從零開始」#2--開發工具 與 我的第一個HTML5網頁

  • 分享至 

  • xImage
  •  

上一篇文章 http://ithelp.ithome.com.tw/question/10156737

==== HTML5開發工具 (免費下載) ====

您可以用任何文字編輯器、網頁編輯器來寫HTML5網頁
免費、功能又強大的,還是「微軟Visual Studio」

目前是VS 2013,有免費版可以下載 VS 2013 Express for Web(專寫網頁的)
由此下載,http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx

再來:http://www.dotblogs.com.tw/mis2000lab/archive/2013/10/21/free_download_expression_web_4_sp2.aspx

  1. 您最好安裝新版本的瀏覽器
  2. 多安裝幾套,除了IE以外,Chrome、FireFox、Opera最好都裝上

您寫好的網頁,可能在不同瀏覽器會看到不少的差異
(HTML5仍是一個正在發展中、時時刻刻都在成長的技術、規範。
瀏覽器也一直更新、改版本,不是嗎?.......差異是必然的,要有心理準備)

我們設計網頁的時候,不知道用戶是哪一種瀏覽器,所以請多多測試、多測試幾個版本(廠牌)

這裡有個網站,可以簡單測試您的瀏覽器「支援HTML5」的程度,會評分喔!
請看 http://www.dotblogs.com.tw/mis2000lab/archive/2012/05/16/browser_html5.aspx

==== 還在用過氣的網頁編輯器? (免費下載) ====

我慣用FrontPage,但這套微軟的軟體在Office 2003以後就失蹤了
它被歸納到另一套工具內,但這套Microsoft Expression Studio也.....

好在微軟有免費、公開新版FrontPage給大家下載喔,真是佛心來著

[免費下載]FrontPage新版 -- Microsoft Expression Web 4 (Free Version)與 SharePoint Designer 2013
請看 http://www.dotblogs.com.tw/mis2000lab/archive/2013/10/21/free_download_expression_web_4_sp2.aspx

我建議各位使用最新版的 Visual Studio
針對 HTML5 / jQuery / JavaScript / CSS等等,都有智慧選字系統(Intellisense)
而且有高亮度(highlight)來區別程式碼

最新版本真的好用很多,不要去考古(找舊版本來害自己啦!)

微軟號稱Visual Studio是當代最強的網頁、程式開發工具,自有他的一套!
(抱歉,我是微軟MVP,得幫忙抬轎 *^_^*)

Adobe當然也是一等一的好軟體,
但他實在好貴,而且今天的新聞似乎傳出不利消息(2014/9/26)

Adobe關閉中國研發部門,遣散逾300名員工
http://www.ithome.com.tw/news/91117

摘錄如下:
Adobe表示,從2012年以來便已將全球的技術基地從80個縮減至56個,期望數量更少的技術團隊可創造更大的效率與即時協作,此次只是Adobe裁減技術基地策略的一部份,並不會影響Adobe全球的員工佈局或是在研發上的投資。原本在中國的研發與技術任務將轉由其他技術基地負責。

==== 我的第一個HTML5網頁 ====

HTML5網頁裡面(最上方)的第一列就是 ****

以前的版本(如HTML4.01),您會在網頁開頭看到其他的DOCTYPE寫法:

還有好幾種不同的寫法

後續的與沒什麼大改變

我喜歡稱這些<HTML符號>為「標籤」,HTML tag
但很多書本裡面,英文都稱為元素(Element)。

舉例來說:
<p>您好,這是一段文字</p>

前後的<p>...</p>區塊就是開始與結束元素(Element)
中間的文字,稱為內容(Content)

[img=415,234]http://ithelp.ithome.com.tw/upload/images/20140927/201409270011375425903952fea_resize_600.jpg[/img]

我自己並沒有認真背誦、記憶HTML標籤,

我是用FrontPage、DreamWeaver這種網頁編輯器
先做出來,然後看看他幫我翻譯的HTML原始碼

看久了,常用的就會熟悉了
我只打算介紹HTML5新增的、特有的東西,傳統(舊)HTML既有的標籤(元素),在此不贅述

在這裡要表揚一下微軟(認證考試)原廠教材!
他的教材編排是一種交錯式的寫法,
例如他先寫HTML常用標籤、CSS常用屬性

把基本的學完以後,後面又出現HTML5 / CSS3的章節
這時候,只教「新的東西」了,舊的不提

這也是一種**「堆積木」的教學法,**
打好基礎以後,新功能慢慢加上去,大家學得輕鬆、但能力很扎實!

.............................................................
如果您想線上學習HTML標籤(元素)
.............................................................
這個網站一定要來看! http://www.w3schools.com/html/default.asp

每一個標籤、每一個屬性、每一種用法與變化
他都提供範例讓大家立即觀看、改了就看見結果

這種學習方法,只要花時間就能學會
也就是我說的**「小範例最強」理論!**

把每一個關鍵都弄懂了,就能學會。
一開始,不要看大範例,裡面太複雜,初學者容易迷路。

為了SEO,搜尋引擎最佳化

HTML5裡面用<h1>、<h2>......<h6>來區分文字標題

可以參閱 http://pydoing.blogspot.tw/2012/01/html-5-heading.html

也持用項目清單,例如<ul>、<li>來做
您看到很多新的網頁套件,裡面甚至都用<div>搭配CSS搞定,

HTML碼很簡潔,因為很多東西都寫在CSS裡面了。

可以參閱 http://www.dotblogs.com.tw/mis2000lab/Tags/Bootstrap/default.aspx

[img=415,360]http://ithelp.ithome.com.tw/upload/images/20140927/20140927001324542590a4e0032_resize_600.jpg[/img]

以本範例的巢狀結構來說,<ol>不建議放在<ul>底下,而<dl>也不建議放在<ol>底下。

因此Visual Studio會在HTML標籤下以「綠色虛線」來警示您。
這並非語法錯誤而是一種警告,告訴您「不建議」這樣做。

如果您想知道我是怎麼自我學習(自修)?
怎麼買書練習?

可以參閱這幾篇文章:

[給初學者的話]挑書與買書,買適合自己的書(電腦書、程式設計入門書)
http://www.dotblogs.com.tw/mis2000lab/archive/2010/11/15/choice_your_style_choice_good_book_for_yourself.aspx

[給初學者的話] IT世界裡面,沒有一本搞定的「初學者聖經」
http://www.dotblogs.com.tw/mis2000lab/archive/2008/07/14/4490.aspx

只看書、不動手,一無所成!
[學習之道] 修福不修慧,大象披瓔珞; 修慧不修福,羅漢托空缽 (學習寫程式,只靠補習上課嗎?)
http://www.dotblogs.com.tw/mis2000lab/archive/2014/09/17/learning-and_do-it_20140917.aspx

想走網頁程式設計師**(後端、資料庫程式)**,可以參考
http://www.dotblogs.com.tw/mis2000lab/archive/2008/06/18/4323.aspx

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

不要走開,馬上回來

下一篇文章:http://ithelp.ithome.com.tw/question/10156981

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
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


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#1--HTML的緣起與Berners-Lee博士
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#3--HTML Form 表單 & Script程式
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Alan.Liu
iT邦研究生 1 級 ‧ 2014-09-30 10:17:43

讚讚
手邊也有一本完美風暴
但始終沒時間細細的品嘗
這次看了前輩的文章
該是下手的時候了o_o

我要留言

立即登入留言