2017年12月3日 星期日

HTML CSS (1) - 環境及常用標籤

1-1 準備工作

下載以下兩個工具
  1. Sublime Text3
  2. 自動排版套件
  3. 安裝sublime package -> 安裝後command+shift+p可搜尋安裝Emmet
測試是否會自動產生html tag
  1. 將儲存格式選定為.html
  2. 輸入<html
  3. 按下tab
簡單建立一網頁
  1. 建立一資料夾，名為project
  2. 開啟sublime輸入test
  3. 存檔為html format，命名為index.html
  4. 至資料夾開啟此html

1-2 使用html環境

  1. <!DOCTYPE html> : 使用HTML5格式寫html。（注意，要記得加入<!DOCTYPE> 宣告你的網頁, 這樣的話瀏覽器才會知道如何解讀你的HTML檔案）
  2. <html> : html的起始，root
  3. <head> : 網頁資訊，css，javascript
    • <title>：網頁標題
    • <meta charset="UTF-8"> : 編碼
  4. <body> : 程式碼都需要包在body內

1-3 認識html標籤 (大部分要有開頭<及斜線結尾/>)

  • <h1> to <h6> 標題
1
2
3
4
5
6
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
  • <p> 文字段落
1
<p>This is some text in a paragraph.</p>

  • <a> 連結 注意內有href attribute屬性
1
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

注意：不一定每個html標籤都有close tag，如img:
1
<img src="smiley.gif" alt="Smiley face" height="42" width="42">

顯示畫面：






















1-4 插入圖片, Path, Attribute


1
2
3
<body>
  <img src="maruko.png">
</body>
  • 相對路徑1: src內可用相對於index.html內的
  • 相對路徑2: 新增資料夾放入檔案，src就可以使用如img/maruko.png
  • 絕對路徑，可直接放入網站的圖片 src="http://chibimaru.tv/common/images/pagetop.png" （風險：若網站者移除此resource，則會無法找到此圖片）

1-5 開啟超連結

  • <a> 連結 注意內有href attribute屬性，但此預設是在同一個瀏覽器開啟
  • 增加target attribute，設定網頁開啟的模式 (attribute先後順序沒有影響)
    1. Target="_blank":開啟新視窗
    2. Target="_self": default
  • 增加title attribute，連結提示文字
  • <href>內可連結至檔案，如：href="img/maruko.png"
  • <a>圖片放入這裡</a>能夠讓圖片也具有超連結功能

1-6 清單標籤ul li

例：

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • 可建立項目清單，內建為圓點
  • 也可在<li>內新增超連結tag
註：若要新增order清單，則使用<ol>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>


張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)