跳至主要内容

用 HTML5 UP 打造第一個網站

前言​

從前學習英文時，比起面對單字本，更傾向聽英文歌或看電影遇到英文單字時，自然的把它們記下來。學習程式時也是這樣，偏好先找一些範例來修改，再於加入想要功能時學習語法。

以下來推薦網頁入門的好用框架～

HTML5 UP!​

HTML5 UP 是一個提供免費、開源、現代化、響應式網站模板的網站，由前 Google 工程師和網頁設計師 Steve Schoger 創建，目的是為開發者提供高品質、美觀、易於使用和易於自定義的網站模板。

這個資源相當讚，提供使用 HTML5、CSS3、JavaScript、RWD等現代 Web 技術開發，具有個人網站、公司網站、部落格、作品集等的模板，能輕鬆建構想要的網站，最後是豐富的教學資源和文檔，方便使用者學習如何使用這些網站模板。

個人部落格範例​

從 HTML5 UP 選定想要的模板後，可以直接下載下來， 以 strata 為例，目錄結構如下所示：

.
├── LICENSE.txt
├── README.txt
├── assets
├── images
└── index.html

可以在 .html 裡進行想要的修改，尤其透過使用 HTML5 UP 的框架，可以透過修改原本圖片、文字的方是來快速學習，接著是從別人切版的方式，也能學習到易讀簡潔的寫法。

基本HTML語法​

網頁架構​

不管是哪個模板，都會有最基礎的網頁架構，如下：

<!DOCTYPE HTML>
<html>
    <head>  
    </head>

    <body>  
    </body>
</html>

head 區塊，能在 <title></title> 裡設置網頁標題，會顯示在瀏覽器的標題欄中
body 區塊，是網站的主體部分，包含了網頁的所有內容，例如文字、圖像、表格等

常用標籤​

以下依 strata 裡使用的標籤為例，來進介紹

  • <h1> - <h6>：用於定義標題。<h1> 開始是由字最大往下變小
  • <p>：用於定義段落。
  • <a>：用於建立超連結，設定 href 屬性可指定超連結的目標網頁或檔案
  • <img>：用於顯示圖片，設定 src 屬性可指定圖片的來源
  • <ul> 和 <ol>：分別用於建立無序列表和有序列表，使用 <li> 建立列表項目
  • <form>：用於建立表單，<form>需要兩個必要的屬性：method 和 action。
  • <div> 和 <span>：用於區分和樣式化網頁內容，使用 <div> 建立區塊元素，使用 <span> 建立行內元素