講師：貝絲

網頁製作

HTML

自我介紹

  • 我不會彈貝斯
  • 機研人
  • 新竹人

目錄

HTML

成發

前置作業

 

先來介紹一下網頁吧

  • 使用者看到的介面
  • 可以直接與使用者互動
  • ex: 按鈕、影像、圖形
  • HTML、CSS、JavaScript

前端網頁

  • 伺服器端
  • 處理前端互動資料
  • ex: 儲存資料、接收前端請求
  •  Java、Python、Ruby

後端網頁

網頁的結構

  • Hypertext Markup Language
  • 管理網頁內容的標注語言
  • 建立網頁的主結構
  • 需要透過網頁瀏覽器才可以把它打開。

HTML

  • 更改HTML檔案樣式的文件格式
  • 美化網頁

CSS

  • 函式先行的直譯式程式語言
  • 呈現網頁動態效果
  • 描述網頁如何與用戶互動。

JS

成發！

每個小隊員做一個自我介紹的網頁，外加一個首頁來統整每個人的作品，需要美編，最好是要有隱藏文字（按一下會出現之類的）

自我介紹！

如果學過網頁的可以自己開始先做了

前置作業

註冊CodePen

VS Code 教學

https://codepen.io/

註冊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>

實作時間～

Made with Slides.com