Skip to content

Latest commit

 

History

History
169 lines (120 loc) · 5.9 KB

section1.md

File metadata and controls

169 lines (120 loc) · 5.9 KB
Raw

初探HTML-從觀察開始

###前言 這是一篇寫給 ITAC 社員用教材，主要依照社員的程度來撰寫，至於會寫幾篇暫時還不知道呵呵。 這一系列教學比較不會像傳統教材 Step by Step 的進行，主要是引導大家如何自主學習 HTML 。

###從觀察開始 Imgur Dcard的首頁（未登入的狀況下）。

這些東西到底怎麼做出來的呢？

首先打開瀏覽器的開發者工具跟著我一起觀察吧～

####開啟開發者工具

Mac 上的 Safari、Firefox、Chrome、Opera 都可以透過 command + option + I 這個組合按鈕打開開發者工具；

Windows則是 Ctrl + Shift + I。

Mac上若按了組合鍵之後沒有反應可以參考下面的設定方法，再試一次 Safari ： 按下command + , 打開偏好設定，點一下進階，將最下方的在選單列中顯示「開發」選單打勾 Opera: 按一下檢視 -> 顯示「研發工具」選單。

當然你也可以對網頁上想要觀察的元件點一下右鍵選擇檢視元件（或者是檢視元素），也可以直接打開開發者工具，並會直接在跳到該元件的原始碼上。

Imgur 上圖是 Chrome 的開發者工具。

以下說明會用 Chrome 做為示範。

####認識HTML 首頁上最顯眼標語，在 HTML 看起來是什麼樣子呢？對他戳一下右鍵選擇檢視元件（或者是檢視元素）

可以看到原始碼當中對應的位置的被選起來了。

由

<p>
				有些緣分，<br>
				只有短短 24 小時的機會。<br>
				一旦錯過，他就會永遠消失<br>
				再也不會出現。
</p>

這段程式碼構成畫面上的這段文字

程式碼當中的p通常會我們會稱作 Tag name

不同的 Tag name 對應著不同的網頁物件

p對應是段落，其他還有像是h1對應的是第一級標題等。

大部分的寫法形式都會是 :

	<tag>內容</tag>

也有少部分會是:

	<tag />

像是<img />用法:

<img src="路徑" />

例如，放入 Dcard 網頁上的某張圖:

<img src="https://www.dcard.tw/img/dcard_index_res/dcard_city.svg">

這時候你可能會覺得他看起來超級大，想要設定一下他的寬高：

<img src="https://www.dcard.tw/img/dcard_index_res/dcard_city.svg" width="300" height="300">

有時候 tag 也可能包含一些設定值或稱為屬性(attribute)：

	<tag attr="value" />

像是前面 img tag 用來設定寬高的width和height都是屬於img的屬性喔！

詳細的各種 Tag 說明你可以參考：

在開發者工具中，你會看到很多像是這樣形式的程式碼，甚至不乏有 tag 中包含 tag 的狀況。

這樣的程式語言，被稱為標記語言 Markup Language，我們所看到的網頁就是由這樣的語言來構成的。

###網頁的基本架構

仔細觀察各個網頁基本上通常會包含以下的形式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>網頁標題</title>
  </head>
  <body>
  </body>
</html>
  • <!DOCTYPE html> 的作用是宣告以下的程式碼是 HTML 語言。
  • <head></head> 裡面包含的通常是在網頁尚未呈現於瀏覽器前預先告知的資訊，例如JavaScript和樣式表的載入、網頁標題、網頁編碼等等。
  • <body></body> 裡面所包含的部分就是我們在網頁上往看到的內容。

####什麼是網頁編碼？ 電腦上的資料都是由 0 和 1 組成的二進位資訊進行儲存的，中文字也不例外。不同的文字對應到不同的二進位數值。 將文字符號和一個二進位數值設定為對應關係的過程稱為編碼。若採用不同的二進位編碼，同樣的文字可能對應到不一樣的二進位數值，因此需要在在網頁開頭標明使用的編碼方式。 早期不同語言的網頁會採用不同的編碼方式，但現今為了在網頁上容納多國語言多採用"UTF-8"的方式進行編碼。

####DOM(Document Ojbect Model)

前面提到 html 當中，tag可以是一層包一層的關係， tag 也可以包含屬性，若我們把html想成一棵樹可以看成像是這樣：

DOM Tree 取自W3School http://www.w3schools.com/js/js_htmldom.asp

這棵樹和之後我們學 CSS 、 JavaScript 和 jQuery 有很大的關聯度喔。

###預告

下一篇會開始進入動手寫 HTML 的階段，大家可以開始找自己喜歡的編輯器囉，以下推薦兩款編輯器，大家可以從中挑一款自己喜歡的。

####Atom - GitHub 開發的文字編輯器 官方網站

必裝套件

####Sublime Text 3

官方網站

必裝套件

  • Package control 套件管理工具，先裝這個才能裝底下的東西喔
  • Emmet 超強大的自動完成（？
  • docblockr 寫註解專用，之後寫javascript會很常用到註解喔！
  • jQuery jquery的自動補完工具