01-網頁基本概念

9 月 13, 2021 | 基礎網頁設計, 網站設計

網路

現在的網路是由相當多的節點透過網路協定所串成的一個架構,原本是美國聯邦政府的一個研究,後來變成軍事、學術界應用相當廣泛的技術,而到了1990後商業化的擴展讓全世界的網路快速興起,由每個區域的小網路又整合成更大的網路,直到今天加上行動智慧硬體、通訊技術的發展,整個網路已經完成融入你我的生活

網站

網站是指在全球資訊網上,根據一定的規則,使用HTML等工具製作的用於展示特定內容的相關網頁的集合。簡單地說,網站是一種通訊工具,就像布告欄一樣,人們可以通過網站來發布自己想要公開的資訊,或網站來提供相關的網路服務。人們可以通過網頁瀏覽器來存取網站,獲取自己需要的資訊或者享受網路服務。
-維基百科

網頁設計

網頁設計就是網站所呈現給人們的重要方式,整個網路傳達的非常重要的概念是資訊,而資訊如何清楚、美觀的呈現就是網頁設計的環節。
而在現今的網頁已經不止是傳遞資訊,還包括了WEB 2.0應用程式、VR、AR等互動技術。
本門課程就是教大家如何從應用工具、程式碼、樣式表的應用製作出基本的網頁設計並了解整個網頁的架構。

瀏覽器

常見瀏覽器
常見瀏覽器

我們知道網站的位置(網址)後,要「瀏覽」網站的內容時,就必須利用瀏覽器這個應用程式來幫我們把網站的資訊呈現出來,但是要讓瀏覽器知道要怎麼呈現網站的內容,就必須要有一個統一的語言或規範,讓大家的瀏覽器知道比方「這段文字要大一點」,所以html這個格式就是針對這樣的情況所使用的。

html

說到網頁,就不得不提網頁所使用的標準格式- html,什麼是html呢?

超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用於建立網頁的標準標記語言。HTML是一種基礎技術,常與CSS、JavaScript一起被眾多網站用於設計網頁、網頁應用程式以及行動應用程式的使用者介面 -維基百科

html長的像這樣
html長的像這樣

實際測試

那不要覺得說看到像上圖的程式感覺就頭皮發麻,其實要製作出自已的第一個網頁是相當簡單的,我們可以在桌面上用記事本之類的軟體建立一個檔案,隨便打幾個字,但是這個檔案存檔時我們要將副檔名從.txt改成.html,存檔後點擊這個檔案會發現他是用瀏覽器開啟,而顯示的內容就是剛剛打的字,有沒有很簡單?

但是今天要是希望這個字要大一點,那我們要怎麼辦呢,這時後html的標記語言就相當方便了,我們將剛剛打的內容換成下面的內容並且存檔,再用瀏覽器開啟:

<h1> Hello World ! </h1>

字是不是變大了,所以要網頁顯示出想要的資訊其實不難,只是我們想告訴瀏覽器「這段內容應該用什麼方式呈現」就必須使用標記語言來作為跟瀏覽器溝通的橋粱了。