【Day14】HTML(1)

11th鐵人賽

siriuskoan

團隊電神們with菜鳥們

2019-09-27 21:56:17

679 瀏覽

分享至

之前十幾天用了很多機器吧!好累歐...
不過我想這幾天是不用碰到機器了呢!
畢竟我們要講的是如何架網站，所以一點點的寫網頁教學也是需要的吧!
這幾天要講的是HTML，所以可以看到五彩繽紛的GUI喔，真是令人開心!

HTML是什麼

HTML = HyperText Markup Language(超文本標記性語言)，請注意，他是標記性語言，不是程式語言。
簡單來說HTML就是由一堆tag(< >)所組成的，他非常的像一般人類思考，怎麼打他就怎麼出來，所以學起來不會很難。
再來他是所有網頁的基本，不管你寫PHP或是Python Flask等等，都要以他為基礎。
通常不會有人只單獨用HTML，他會搭配上CSS跟JavaScript一起用，讓網頁更美觀。這幾天我只會講到HTML跟一點點CSS。
然後講到寫網頁，就一定要講一下w3schools，這是由W3C(全球資訊網協會)所管理的，裡面有很多的教程，像是HTML、CSS、JS甚至還有SQL，如果想要深造可以進去玩玩。
最後推薦一些很有用的網頁跟軟體:

https://codepen.io/ 一個線上社群，可以在上面寫網頁然後直接看，最棒的是它有分割HTML、CSS、JS的功能，像這樣:
http://brackets.io/ 一個開發來專門給網頁開發用的，但是也支援其他程式語言啦。
https://code.visualstudio.com/ 比較輕量的編輯器，尤其他對HTML有很神奇的功能，可以去HTML in Visual Studio Code看看。

動態網頁&靜態網頁

我自己其實學網頁語言只學了一年，一年前當我第一次看到這兩個名詞的時候，反應是一個有動畫會動另一個不會動，現在想起來真的是好好笑XD
他的動態跟靜態指的是網頁會不會跟你互動，舉例來說有登入的就會是動態的，那如果是那種純觀看，都不會動的那種就是靜態的(例:https://cnmc.tw)，顯然靜態很少呢。
還有一個判斷方式是看副檔名，如果是.html .htm那就是靜態網頁；如果是.php之類的就是動態網頁。

網頁大致結構

今天會先在這邊講一下結構，明天之後會講文字甚至是圖片、影片等等的插入。

一個標準的網頁有這樣的結構:

<!DOCTYPE html>
<html>
    <head>
        (meta, title and link)
    </head>
    <body>
        (content)
    </body>
</html>

開始講之前要先說一下什麼是tag。
tag就是長得像< >的東西，像是<p>、<b>、<div>等等，而tag通常都會需要成對(一個start tag跟end tag，start tag就像<p>；而end tag就像</p>，差在那/)。那了解之後就可以
我們分行來看:

<!DOCTYPE html> 這是用什麼東西來寫的，可能是HTML、XML等等，那我們這邊當然是用HTML。這一行可有可無，HTML是非常容錯的，但是建議都要加，不然會出什麼事不好說...
<html> 這就是一個tag，而他的end tag在最後一行。他是整個檔案的最外層，當然沒打一般也不會怎麼樣，但是就怕出意外。
<head> 看名字就知道他是頭，裡面放的東西會是這個網站的基本資訊，是不會顯示的，像是標題、編碼之類的，明天會細講。
<body> 他是身體，所有呈現出來的內容都會在這裡。通常也會是內容最多的地方。
以上大概就是一個網頁的基本結構，通常要開始寫一個新網頁都會先把這個結構弄出來，除非只是要測試。