iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0
Modern Web

每個人都可以做出理想中的網站!系列 第 2

Day02-推薦的網頁編輯器 / 網頁的架構

不知道昨天大家有沒有試著用f12觀察別人的網頁組成編碼呢

今天我們就來介紹一下好用的文字編輯器: Visual Studio Code
編輯器對於寫程式來說簡直是大大提升了效率,因為他可以自動偵測錯誤,即使你少打了一個符號,他也會跳出紅線來提醒你喔~
那麼就來下載看看吧!(直接點下方藍色字即可)
Visual Studio Code下載

在等待下載的時間呢~我們來聊聊網頁的架構吧!

首先,我們將網頁分成兩個部分,一個是head,另一個為body,head所指的是對這個網頁本身的一些設定,而body內的部分就是我們想要呈現在網頁中的東西,也就是說你希望在你的網頁中看到什麼,就把想要的素材放在body裡面。

那麼這邊先跟大家介紹一下,當我們要寫上內容時,我們必須寫在所謂的「標籤」內,這樣才能分清楚什麼東西應該放這裡、什麼東西放那裡。標籤有固定的格式,舉例來說head標籤,以 <head> 作開頭,而 </head> 當結尾,夾在 <head> </head> 中的程式就是我們要用在head的東西。

我們在寫網頁時,常常會把很多個標籤夾在一起使用,有點類似洋蔥的概念,話不多說,直接看程式吧!

<head><title>每個人都可以做出理想中的網站! </title></head>
title標籤是用來決定網頁名稱的功能,只要把名稱寫在title中間就行了。

head中可以使用的一些標籤:

  • title 網頁標題
  • meta 提供關於網頁的內容資訊
  • script 導入頁面所需的JavaScript資源檔
  • link 設定網頁內需要導入的外部資源 ex:style
    格式都和上面的範例一樣,夾在<head></head> 中間就可以了

那麼head就先介紹到這邊喔~
明天開始就要換body囉!!!


上一篇
Day01-別人的網頁有什麼
下一篇
Day03-HTML標籤(1)
系列文
每個人都可以做出理想中的網站!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言