講師：貝絲
網頁製作
HTML
自我介紹
- 我不會彈貝斯
- 機研人
- 新竹人
目錄
先來介紹一下網頁吧
- 使用者看到的介面
- 可以直接與使用者互動
- ex: 按鈕、影像、圖形
- HTML、CSS、JavaScript
前端網頁
- 伺服器端
- 處理前端互動資料
- ex: 儲存資料、接收前端請求
- Java、Python、Ruby
後端網頁
網頁的結構
- Hypertext Markup Language
- 管理網頁內容的標注語言
- 建立網頁的主結構
- 需要透過網頁瀏覽器才可以把它打開。
HTML
- 更改HTML檔案樣式的文件格式
- 美化網頁
CSS
- 函式先行的直譯式程式語言
- 呈現網頁動態效果
- 描述網頁如何與用戶互動。
JS
成發！
每個小隊員做一個自我介紹的網頁，外加一個首頁來統整每個人的作品，需要美編，最好是要有隱藏文字（按一下會出現之類的）
自我介紹！
如果學過網頁的可以自己開始先做了
前置作業
註冊CodePen
建立pen
使用介面
檔名＆作者
存檔
更改版面
HTML 編輯區
CSS 編輯區
JS 編輯區
VS Code 建立HTML檔
開啟你要放檔案的資料夾
新增檔案
檔名.html
VS Code 建立HTML檔
打「!」後按tab鍵，架構就幫你寫好了～
網頁的架構
HTML
HTML的架構
<html>
<head>
<!-- 使用者看不到的東西-->
<title>暑訓網頁教學</title>
</head>
<body>
<!-- 使用者看得到的東西-->
<h3>暑訓很好玩吧😏</h3>
</body>
</html>
<html>
根元素（root elements)
包括所有的的元素資訊
Body
title
- 網頁是由一個一個的標籤(Tag)組合而成，所有的內容都會被開始標籤與結束標籤包在裡面
- 元素：開始標籤＋結束標籤
- <標籤>內容 </標籤>
- 屬性：屬性名＋屬性值（ex: 照片）
HTML 標籤
<img src="sc.png" alt="暑訓頭貼">
屬性名
屬性值
- 放這個容器放的資訊
- 通常是使用者不需要知道的資訊
- 連接 CSS
Head
<link rel="stylesheet" href="要連接的 css 檔案">
- 連接 JS
<script src="要連接的 js 檔案"></script>
- title：可以更改網頁的標題字
<title>分頁上顯示的文字</title>
常見的元素
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
<p>內文</p>
<br><!--換行-->
<hr><!--水平線-->
<b>粗體</b>
<i>斜體</i>
<mark>螢光筆</mark>
<s>刪除線</s>
<u>底線</u>
<sub>下標</sub>
<sup>上標</sup>
<q>引述</q>
<!-- 註解長這樣-->
插入連結/圖片
<a href="連結網址">連結在網頁上呈現的樣子</a>
<!--target="_self / _blank" 在原本分頁/新分頁開啟連結-->
<img src="圖片連結/網址連結" alt="圖片跑不出來的時候會顯示的字"
title="鼠標放上去時顯示的文字">-
絕對路徑
- 檔案在本機端或是網路上的絕對位置
- 相對路徑
- 是相對於現在目錄的路徑表示
- 檔案在哪裡，目錄的路徑起始點就在哪裡
- <input>
- type="text, number, checkbox, date..."
- placeholder="輸入框預設文字"
- <button>按鈕</button>
按鈕＆輸入框
<input type="text" placeholder="預設顯示文字">
<button>按我</button>- 包住html標籤，將HTML文件的內容整理出不同獨立區塊
-
<div></div>: 區塊元素(block element)
- 切出一個區塊時使用
- 自動換行
- <span></span>: 行內元素(inline element)
- 用來做區塊或是標籤內的細部變化
- 不自動換行
容器
-
<ol></ol>：有序清單
- <li></li>：清單裡的項目
- start="起始編號"
- reversed -> 數字由大到小
-
type：
- 1：默認(1, 2, 3, 4, 5)
- a：小寫字母 (a, b, c, d, e)
- A：大寫字母(A, B, C, D, E)
- i：小寫羅馬字母(i, ii, iii, iv)
- I：大寫羅馬字母(I, II, III, IV)
容器
-
<ul></ul>：無序清單
- <li></li>：清單裡的項目
-
type：
- none：不顯示
- disc：預設值，實心圓形
- circle：空心圓點
- square：實心方塊
容器
Class：可以多個元素共用
ID：只能對應一個元素
class/id
<div class = "class1" id="id1"></div>
<div class = "class1" id="id2"></div>
<div class = "class2" id="id3"></div>
<div class = "class2" id="id4"></div>
<div class = "class3" id="id5"></div>
<div class = "class3" id="id6"></div>實作時間～
暑訓網頁html
By Beth chen
