資訊實務應用讀書會第一堂課：Basic HTML

Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

資訊實務讀書會：第一堂課 Basic HTML 師大資工103級灆洢 / 曹又霖

Slide 2

Slide 2 text

網頁、網站、瀏覽器

Slide 3

Slide 3 text

網頁

Slide 4

Slide 4 text

網站 • 網頁的集合體。 • 通常用樹狀圖來架構網站。首頁自我介紹個人作品遊戲介紹

Slide 5

Slide 5 text

首頁 • 檔名通常為index • 若為HTML檔案：index.html / index.htm • 若為PHP檔案：index.php

Slide 6

Slide 6 text

瀏覽器

Slide 7

Slide 7 text

認識HTML

Slide 8

Slide 8 text

HTML • HyperText Markup Language • 超文件標記語言 • 用於網頁的排版

Slide 9

Slide 9 text

HTML網頁基本結構這裡是標題的部分這裡是內容的部分。版本宣告 HTML文件文件整體資訊文件內容

Slide 10

Slide 10 text

基本文章結構

Slide 11

Slide 11 text

標題

一級標題

二級標題

三級標題

四級標題

五級標題

六級標題

Slide 12

Slide 12 text

段落

第一個段落

第二個段落

Slide 13

Slide 13 text

強調標籤與換行標籤

斜體強調，
粗體強調，
粗斜體強調

Slide 14

Slide 14 text

pre標籤

這是一篇很長的文章，
害我懶的用br和p標籤，
真是抱歉！

Slide 15

Slide 15 text

Meta標籤：設定編碼(UTF-8) 標題

Slide 16

Slide 16 text

DOM Tree

Slide 17

Slide 17 text

DOM Tree 文章範例

主要標題

粗斜體強調

Document html head body title 文章範例 h1 em 主要標題粗斜體強調 strong p

Slide 18

Slide 18 text

圖片與超連結

Slide 19

Slide 19 text

圖片

全身圖

Slide 20

Slide 20 text

超連結往 Google

Slide 21

Slide 21 text

表格及清單

Slide 22

Slide 22 text

行列&欄列行、欄、column 列、 row

Slide 23

Slide 23 text

表格 5月10日去幫爸爸買車 6月10日去幫媽媽買房子 7月10日去幫哥哥買電腦

Slide 24

Slide 24 text

表格標題格日期待辦事項 5月10日去幫爸爸買車

Slide 25

Slide 25 text

合併行

Slide 26

Slide 26 text

合併列

Slide 27

Slide 27 text

符號式清單

Slide 28

Slide 28 text

編號式清單

Slide 29

Slide 29 text

多媒體嵌入

Slide 30

Slide 30 text

embed：外部播放器嵌入法

Slide 31

Slide 31 text

audio：播放音樂

Slide 32

Slide 32 text

video：播放影片

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

source：多來源 Your browser does not support the audio element.

Slide 36

Slide 36 text

參考資料與作業

Slide 37

Slide 37 text

• 新罪楓翼☆灆洢騎士 • http://knightzone.logdown.com/ • W3schools.com • http://www.w3schools.com/ • W3schools 簡中 • http://www.w3school.com.cn/ • Codecademy • http://www.codecademy.com/ • W3C • http://www.w3.org/ • MOZILLA DEVELOPER NETWORK • https://developer.mozilla.org/zh-TW/

Slide 38

Slide 38 text

作業：介紹自己興趣的網站 • 設計幾頁的網站來介紹自己的興趣的相關內容。 • 例如：音速小子、LoveLive……等等 • 禁止使用未被HTML5接納的標籤 • 你可以至w3schools.com上面查看 • 並不要求一定要通過W3C嚴格檢查 • 樣式部分可先省略 • 因為我尚未教CSS • 各位可以先自學看看

Slide 39

Slide 39 text

Thanks.