哈希技術部落格


Slider

基礎網頁前端設計 – HTML、CSS、JS

隨著網路的發展,各式各樣的資訊都可以透過網路取得。這時候,「網頁」就是多數資訊傳遞給大眾的媒介。也因此了解網頁背後的架構與原理,是非常重要的!

今天,我們會從零開始,簡單介紹網頁前端的程式語言:HTML、CSS

網頁如何呈現在我們眼前的?

我們可以對任何一個網站點擊右鍵>檢查原始碼,就會看見許多帶有<>符號的內容,網頁就是透過這些語法描述而成的。

藉由「人」想像HTML、CSS、JS含義

卡通人相關的向量圖素材集- 123RF
圖片來源:123rf
  • HTML就像是人體
    • 人包含頭、手、腳…等等部位。我們同樣會透過HTML建立出網站有哪些區塊組合而成
  • CSS像是衣服打扮
    • 透過CSS可以調整html的顏色、大小…等等外觀設計。
  • JS則是做出動作
    • 製作動畫,讓html區塊動態產生資料…等等

第一次接觸網頁開發,應該如何開始?

容易上手的開發環境,對於初學者來說非常重要。以網頁開發來說,我們推薦使用codepen進行開發。Codepen除了是一個線上的開發環境外,同時也是一個作品平台,可以在上面看見大家透過html、css、JS設計出來的作品。

免費註冊帳號後,就可以開始使用囉。點擊左側的「Pen」就可以建立新的網頁專案。建議可以在設定中將頁面排版調整成下圖的樣式,方便開發使用

接下來,我們可以先透過html語法,建立一個標題文字!
在HTML區塊中,加入以下程式碼:

<div>
  <h1>這是我的網頁!</h1>
</div>

完成效果如下圖:

下一步,我們可以藉由CSS,調整剛剛建立的html內容。我們以調整標題的顏色為示範。
在CSS區塊中,加入以下程式碼:

h1{
  color: red;
}

結論

學習了基礎的網頁製作後,接下來你可以嘗試看看更多的html與css語法,觀察看看可以產生什麼效果吧!
網路上有非常多的html、css語法說明的網站,像是w3schools就可以找到很多常見的語法哦

未來,我們還會繼續分享更多的網頁製作教學哦!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *