Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
資訊實務應用讀書會 第一堂課:Basic HTML
Search
Maplewing
September 16, 2013
Programming
1
2.1k
資訊實務應用讀書會 第一堂課:Basic HTML
2013/09/16 12:50-13:30 @NTNU C208
Basic HTML
Maplewing
September 16, 2013
Tweet
Share
More Decks by Maplewing
See All by Maplewing
師大資工系ACM-ICPC讀書會:肆、鏈結串列與二元樹
sinmaplewing
0
120
資訊實務應用讀書會 第七堂課:jQuery
sinmaplewing
0
2k
師大資工系ACM-ICPC讀書會:參、堆疊與佇列
sinmaplewing
0
200
師大資工系ACM-ICPC讀書會:貳、排序搜尋與數學基礎
sinmaplewing
0
170
資訊實務應用讀書會 第六堂課:Basic CSS
sinmaplewing
0
1.7k
師大資工系ACM-ICPC讀書會:壹、字串處理與大數運算
sinmaplewing
0
130
師大資工系ACM-ICPC讀書會:零、比賽介紹、解題系統介紹
sinmaplewing
0
190
資訊實務應用讀書會 第四堂課(支線):Linux
sinmaplewing
0
1.8k
Other Decks in Programming
See All in Programming
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
290
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
1
350
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
730
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
150
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
140
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
180
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
slogパッケージの深掘り
integral0515
0
120
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.2k
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
680
Caude codeで爆速開発
codelynx
0
100
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
For a Future-Friendly Web
brad_frost
179
9.8k
Practical Orchestrator
shlominoach
189
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Designing Experiences People Love
moore
142
24k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Transcript
資訊實務讀書會:第一堂課 Basic HTML 師大資工103級 灆洢 / 曹又霖
網頁、網站、瀏覽器
網頁
網站 • 網頁的集合體。 • 通常用樹狀圖來架構網站。 首頁 自我介紹 個人作品 遊戲介紹
首頁 • 檔名通常為index • 若為HTML檔案:index.html / index.htm • 若為PHP檔案:index.php
瀏覽器
認識HTML
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
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:外部播放器嵌入法
audio:播放音樂
video:播放影片
None
None
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 • 各位可以先自學看看
Thanks.