HTML - 國立臺灣大學kmchao/bcc16spr/HTML... · 2015-05-14 · html 原理 (1) 本系概況...

HTML

2015 計算機概論

HTML 是什麼？

• HTML 是用來描述網頁的一種語言– HTML 指的是超文件標示語言

(Hyper Text Markup Language)

– HTML 不是一種編程語言，而是一種標記語言 (markup language)

– 標記語言是一套標記標籤 (markup tag)

– HTML 使用標記標籤來描述網頁

HTML 標籤

• HTML 標籤 (HTML tag)– 是由尖括號(angle bracket)包圍的關鍵詞

• <tagname>content</tagname>

– 通常是成對出現的• 例如 <p> 跟 </p>

– p 指文章段落 (paragraph)

– <p>指段落開始

– </p>指段落結束

HTML 原理 (1)

本系概況

國立臺灣大學成立於民國三十四年，即第二次世界大戰結束，台灣光復時。她的前身是建於民國十七年的台北帝國大學，為台灣第一所大學，校本區位於台北市大安區，另有法學院及醫學院分部，迄今有十個學院，五十三個學系，八十四個研究所，其中七十多個研究所設有博士班。

資訊工程學系成立於民國六十六年，首先招收大學部學生，民國七十年成立研究所，招收碩士班學生，博士班則成立於民國七十三年，從而建立起完整的高級資訊工程教育研究體系。本系大學部的課程奠定學生在計算機科學與資訊工程方面的基礎，碩士班課程以培養高級資訊工程師及為將來從事教學或研究工作鋪路，博士班課程則引導學生進入更專精的學術領域。目前本系每年約招收大學部學生一百餘人；碩士班一般生約一百人，在職專班三十人；博士班約二十人。總計現有大學部學生三百九十餘人；碩士班學生兩百三十餘人，博士班學生九十餘人，共計七百二十餘人。至九十年七月止，本系共有畢業生大學部餘人，碩士班研究生九百三十餘人，博士班研究生一百人。

標題

段落

段落

文章

HTML 原理 (2)

<文章開始><標題開始>本系概況<標題結束>

<段落開始>國立臺灣大學成立於民國三十四年，即第二次世界大戰結束，

台灣光復時。她的前身是建於民國十七年的台北帝國大學，為台灣第一所

大學，校本區位於台北市大安區，另有法學院及醫學院分部，迄今有十個

學院，五十三個學系，八十四個研究所，其中七十多個研究所設有博士班。

<段落結束>

<段落開始>資訊工程學系成立於民國六十六年，首先招收大學部學生，

民國七十年成立研究所，招收碩士班學生，博士班則成立於民國七十三年，

從而建立起完整的高級資訊工程教育研究體系。本系大學部的課程奠定

學生在計算機科學與資訊工程方面的基礎，碩士班課程以培養高級資訊工

程師及為將來從事教學或研究工作鋪路，博士班課程則引導學生進入更

專精的學術領域。目前本系每年約招收大學部學生一百餘人；碩士班一般

生約一百人，在職專班三十人；博士班約二十人。總計現有大學部學生

三百九十餘人；碩士班學生兩百三十餘人，博士班學生九十餘人，共計七

百二十餘人。至九十年七月止，本系共有畢業生大學部餘人，碩士班研

究生九百三十餘人，博士班研究生一百人。<段落結束><文章結束>

HTML 文件基本結構

• 一個 HTML 網頁文件檔具有下述的基本結構 :– <html> 是網頁文件標籤

– <head> 是網頁檔頭標籤

– <body> 是網頁內容標籤

<html><head></head><body></body>

</html>

檔題 (head)

內容 (body)

瀏覽器 (Browser) 的功用

<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Google</title></head><body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000onload="document.f.q.focus();if(document.images)new Image().src='/images/srpr/nav_logo13.png'" ><textareaid=csistyle=display:none></textarea><div id=ghead><div id=gog><div id=gbar><nobr><b class=gb1>所有網頁</b> <a href="http://www.google.com.tw/imghp?hl=zh-TW&tab=wi" onclick=gbar.qs(this) class=gb1>圖片</a> <a href="http://video.google.com.tw/?hl=zh-TW&tab=wv" onclick=gbar.qs(this) class=gb1>影片</a> <a href="http://maps.google.com.tw/maps?hl=zh-TW&tab=wl"onclick=gbar.qs(this) class=gb1>地圖</a> <a href="http://news.google.com.tw/nwshp?hl=zh-TW&tab=wn" onclick=gbar.qs(this)class=gb1>新聞</a> <a href="http://translate.google.com.tw/?hl=zh-TW&tab=wT" onclick=gbar.qs(this) class=gb1>翻譯</a> <ahref="http://mail.google.com/mail/?hl=zh-TW&tab=wm" class=gb1>Gmail</a> <a href="http://www.google.com.tw/intl/zh-TW/options/" onclick="this.blur();gbar.tg(event);return !1" aria-haspopup=true class=gb3><u>更多</u> <small>▼</small></a><divclass=gbm id=gbi><a href="http://blogsearch.google.com.tw/?hl=zh-TW&tab=wb" onclick=gbar.qs(this) class=gb2>網誌搜尋</a> <ahref="http://www.youtube.com/?hl=zh-TW&tab=w1&gl=TW" onclick=gbar.qs(this) class=gb2>YouTube</a> <a href="http://www.google.com/calendar/render?hl=zh-TW&tab=wc" class=gb2>日曆</a> <a href="http://picasaweb.google.com.tw/home?hl=zh-TW&tab=wq" onclick=gbar.qs(this) class=gb2>相片</a> <a href="http://docs.google.com/?hl=zh-TW&tab=wo" class=gb2>文件</a><a href="http://www.google.com.tw/reader/?hl=zh-TW&tab=wy" class=gb2>閱讀器</a> <a href="http://sites.google.com/?hl=zh-TW&tab=w3" class=gb2>協作平台</a> <div class=gb2><div class=gbd></div></div><a href="http://www.google.com.tw/intl/zh-TW/options/" class=gb2>更多 »</a> </div></nobr></div><div id=guser width=100%><nobr><span id=gbn class=gbi></span><spanid=gbfclass=gbf></span><span id=gbe><a href="/url?sa=p&pref=ig&pval=3&q=http://www.google.com.tw/ig%3Fhl%3Dzh-TW%26source%3Diglk&usg=AFQjCNG3304zG30_p2CaJNuUgrWxfsNDNw" class=gb4>iGoogle</a> | </span><a href="/preferences?hl=zh-TW" class=gb4>搜尋設定</a> | <a href="https://www.google.com/accounts/Login?hl=zh-TW&continue=http://www.google.com.tw/" class=gb4>登入</a></nobr></div><div class=gbh style=left:0></div><div class=gbh style=right:0></div></div></div> <center><br clear=all id=lgpd><div id=lga><div align=left style="background:url(/intl/en_com/images/srpr/logo1w.png) norepeat;height:110px;width:276px" title="Google" id=logo onload="window.lol&&lol()"><div nowrap style="color:#777;font-size:16px;font-weight:bold;left:214px;position:relative;top:70px">台灣</div></div><br></div><form action="/search" name=f><tablecellpadding=0 cellspacing=0><tr valign=top><td width=25%> </td><td align=center nowrap><input name=hl type=hiddenvalue=zh-TW><input name=source type=hidden value=hp><div class=ds style="height:32px;margin:4px 0"><input autocomplete="off"maxlength=2048 name=q class="lst" title="Google 搜尋" value="" size=57 style="background:#fff;border:1px solid #ccc;borderbottom-color:#999;border-right-color:#999;color:#000;font:18px arial,sans-serif bold;height:25px;margin:0;padding:5px 8px 06px;vertical-align:top"></div><br style="line-height:0"><span class=ds><span class=lsbb><input name=btnG type=submitvalue="Google 搜尋" class=lsb></span></span><span class=ds><span class=lsbb><input name=btnI type=submit value="好手氣"class=lsb></span></span></td><td nowrap width=25% align=left class=sblc><a href="/advanced_search?hl=zh-TW">進階搜尋</a><ahref="/language_tools?hl=zh-TW">語言選項</a></td></tr></table></form><div style="font-size:83%;min-height:3.5em"><br></div><div id=res></div><span id=footer><center id=fctr><div style="font-size:10pt"><div id=fll style="margin:19px auto 19pxauto;text-align:center"><a href="/intl/zh-TW/ads/">廣告服務</a><a href="/intl/zh-TW/about.html">Google 完全手冊</a><ahref="http://www.google.com/ncr">Google.com in English</a></div></div><p style="color:#767676;font-size:8pt">© 2010 - <ahref="/intl/zh-TW/privacy.html">隱私權政策</a></p></center></span> <div id=xjsd></div><divid=xjsi><script>if(google.y)google.y.first=[];if(google.y)google.y.first=[];google.dstr=[];google.rein=[];window.setTimeout(function(){vara=document.createElement("script");a.src="/extern_js/f/CgV6aC1UVxICdHcrMAo4aEAvLCswDjgRLCswFjgaLCswFzgHLCswGDgFLCswGTggLCswJTjKiAEsKzAmOAssKzAnOAQsKzA8OAIsKzBAOBA

HTML文件網頁瀏覽

用什麼寫?

• 任何文字編輯器– 記事本 (Notepad)

– NotePad++ https://notepad-plus-plus.org/

– Sublime Text http://www.sublimetext.com/

所見即所得

• 所見即所得（What You See Is What You Get-WYSIWYG）

– Adobe Brackets http://brackets.io/

HTML 元素

• HTML 元素 (elements)– 指的是從開始標籤（start tag）到結束標籤

（end tag）的所有內容

<html><body>

<h1>My First Heading</h1><p>My first paragraph.</p>

</body></html>

•<html> 元素定義整份文件•<body> 元素定義文件內容

•<h1> 元素定義標題•<p> 元素定義段落

標籤屬性

• HTML 標籤可以擁有屬性– 屬性提供了有關 HTML 元素的更多的訊息

• 屬性是寫在標籤內, 格式是: – 屬性名=值

• 例: <body bgcolor="black">

好的！你可以自己學了

•– 英文

http://www.w3schools.com/

– 簡體中文http://www.w3school.com.cn/

HTML - 國立臺灣大學kmchao/bcc16spr/HTML... · 2015-05-14 · html 原理 (1) 本系概況...

Documents

Transcript of HTML - 國立臺灣大學kmchao/bcc16spr/HTML... · 2015-05-14 · html 原理 (1) 本系概況...