iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
0
自我挑戰組

30天學會用FreeBSD & Apache架網站系列 第 14

【Day14】HTML(1)

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

HTML是什麼

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

  1. https://codepen.io/ 一個線上社群,可以在上面寫網頁然後直接看,最棒的是它有分割HTML、CSS、JS的功能,像這樣:
    https://ithelp.ithome.com.tw/upload/images/20190927/20120263MtSujNLrdx.png
  2. http://brackets.io/ 一個開發來專門給網頁開發用的,但是也支援其他程式語言啦。
  3. 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 tagend tagstart tag就像<p>;而end tag就像</p>,差在那/)。那了解之後就可以
我們分行來看:

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

今日小結

今天就是一個對HTML的基礎認識,接下來幾天會去講各個tag,喔還有每天寫好的建議不要刪,講CSS還用的著~
然後那個編輯器真的讚讚,可以多多去玩(?)


上一篇
【Day13】如何安裝(2)
下一篇
【Day15】HTML(2)
系列文
30天學會用FreeBSD & Apache架網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言