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

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

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

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

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

HTML網頁基本結構
<!DOCTYPE html>
<html>
<head>
<title>這裡是標題的部分</title>
</head>
<body>
這裡是內容的部分。 
</body>
</html>
版本宣告
HTML文件
文件整體資訊
文件內容

標題
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>

段落
<body>
<p>第一個段落</p>
<p>第二個段落</p>
</body>

強調標籤與換行標籤
<body>
<p>
<em>斜體強調</em>，<br />
<strong>粗體強調</strong>，<br />
<em><strong>粗斜體強調</strong></em>
</p>
</body>

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

Meta標籤：設定編碼(UTF-8)
<head>
<meta charset="UTF-8" />
<title>標題</title>
</head>

DOM Tree
<!DOCTYPE html>
<html>
<head>
<title>文章範例</title>
</head>
<body>
<h1>主要標題</h1>
<p>
<em>
<strong>粗斜體強調</strong>
</em>
</p>
</body>
</html>
Document
html
head body
title
文章範例
h1
em
主要標題
粗斜體強調
strong
p

圖片
<body>
<img src="http://www.knightzone.org/image/thumbs/32.jpg"
alt="全身圖" /> 
</body>

超連結
<body>
<a href="http://www.google.com" target="_blank">往
Google</a>
</body>

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

表格
<body>
<table border="1">
<tr>
<td>5月10日</td> <td>去幫爸爸買車</td>
</tr>
<tr>
<td>6月10日</td> <td>去幫媽媽買房子</td>
</tr>
<tr>
<td>7月10日</td> <td>去幫哥哥買電腦</td>
</tr>
</table>
</body>

表格標題格
<table border="1">
<tr>
<th>日期</th><th>待辦事項</th>
</tr>
<tr>
<td>5月10日</td> <td>去幫爸爸買車</td>
</tr>
</table>

embed：外部播放器嵌入法

source：多來源
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

• 新罪楓翼☆灆洢騎士
• 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/

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

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (15)

Similar to 資訊實務讀書會第一堂課：Basic HTML

Similar to 資訊實務讀書會第一堂課：Basic HTML (20)