iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
1
自我挑戰組

一步一腳印,探索網頁前端設計之美系列 第 2

第二步 - 探索前需準備相關知識(網頁基本知識)

今天喵橘就先講解理論的部分,請大家多多指教喔!

何謂網頁?

在日常生活當中,現在人最習慣早上第一件事情就是打開手機去看是否朋友有留給您,朋友傳遞一個搞笑的新聞內容,那一段長長的數字與英文組合就是網址( 英語:Uniform Resource Locator,縮寫:URL ),就如同網路上的門牌。

網址簡單的排列定義如下圖所顯示:

https://ithelp.ithome.com.tw/upload/images/20190903/20117282gNuTOwJdug.png

當自己點擊超連結( 英語:Hyperlink )網址進入一個頁面,而那一個頁面就稱為網頁( 英語:Web Page ),網頁是由HTML( 英語:Hyper Text Markup Language)語言所組成,它是用來製作網頁的標記式語言。標記( 英語:Markup),是指在一個頁面上的內容開頭或結尾各加上標籤( 英語:Tag)的記號,用來定義這一段內容的功能意義。

網頁構成基本三元素

製作網頁最重要的三個元素就是.. HTML 、 CSS 、 Javascript

https://ithelp.ithome.com.tw/upload/images/20190903/20117282KdXDtH807j.png

如上圖所顯示,HTML就是架構出一個網頁的基礎輪廓,但因為沒有顏色的調配,無法看到它的美。所以,就需要CSS來幫忙美化它的外表,最後 Javascript讓裡面靜態內容動起來,讓大家能感受真正的網頁前端之美。

瀏覽網頁常見的瀏覽器

一個網頁要被瀏覽,就需要一個瀏覽器的幫忙,本人就介紹台灣最常使用的瀏覽器:

  1. google Chrome

https://ithelp.ithome.com.tw/upload/images/20190903/201172827mVCQptAfL.png

  1. FireFox

https://ithelp.ithome.com.tw/upload/images/20190903/20117282l4ccQstLue.png

  1. Internet Explorer

https://ithelp.ithome.com.tw/upload/images/20190903/20117282QUMZHIddkE.png

  1. safari

https://ithelp.ithome.com.tw/upload/images/20190903/20117282I6xQocsVb3.png

  1. Opera

https://ithelp.ithome.com.tw/upload/images/20190903/20117282esNQRfLD4t.png

明天預告

今天先簡單講解網頁設計的基礎架構,明天開始詳細對這三個元素(HTML、CSS、Javascript)的基礎入門方法。


上一篇
第一步 - 追逐夢想的開始(前言與目錄)
下一篇
第三步 - 打開地圖,探訪第一站( HTML入門介紹)
系列文
一步一腳印,探索網頁前端設計之美33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言