基本語法介紹

:::

5. 網頁概念

5-2 HTML / CSS 自學內容 next

google 雲端服務

5-1 基本語法介紹

基本語法

標籤語法基礎

語法使用規則，要以頭尾包著要表達的內容，忽略大小寫。開頭 <XXX>，結尾 </XXX> ，例 <TITLE>基本標籤教學 </TITLE>

基本html5樣式

<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
<body>


網頁中的內容都要放在這個區塊中！
第一行文字
第二行文字

文字有很多空白                       像這樣

<p>正確段落換行</p>
指令換行<br><br><br><br><br><br><br>
空白字&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用特定語法


</body>
</html>

把上面的內容貼到記事本中（Linux 使用 gedit 文字編輯器)：

要做成網頁，所以檔案存成例如 1.htm 或 1.html ，編碼記得改為 UTF-8

最後直接開啟檔案，看到的結果：

文字字體

<H1> 標題大小1</H1>
<H2> 標題大小2</H2>
<H3> 標題大小3</H3>
<H6> 標題大小6</H6>
<b>粗體</b>
<i>斜體</i>
<u>加底線</u>
<blink>閃爍</blink>

直接換行<br>
<p>段落換行</p>
<p><FONT SIZE=5 COLOR=red> 字體大小5及顏色紅色。</Font></p>
<p><FONT SIZE=2 COLOR=#ff00ff> 字體大小2及顏色（紅綠藍三原色值）。</Font></p>

段落排版

圖型

<IMG SRC="https://www.syps.tn.edu.tw/uploads/tadgallery/2019_06_10/2027_%E5%85%AD%E4%B9%99.jpg"  >

以上語法，表示顯示網路上的圖形，可以試著改為自已的圖片檔。
這組標籤不需要 </IMG>做結尾。
如果改為自已的圖檔。

表格

<TABLE border=1>
<TR> <TD>第一行第一格</TD> <TD>第一行第二格</TD></TR>
<TR> <TD>第二行第一格</TD> <TD>第二行第二格</TD></TR>
</TABLE>

連結

<A HREF="http://www.syps.tn.edu.tw">連到新營國小</A>

也可以連結到其他的檔案、網站

<A HREF="http://nas.syps.tn.edu.tw/data/traffic.jpg">按這裡會看到新營國小地圖</A>

代表連結到 image 次目錄中的 ex71.gif 圖案。

<A HREF="1.htm">連到網頁</A>

也可以連結到其他的檔案、網站( http://syps.tn.edu.tw )或 EMAIL(mailto:user@mail.tw)

注意：
c:\image\01.gif 這樣的連結目錄是錯誤的，這樣的連結會連結到觀看者的本機目錄，自然會造成錯誤。

網頁編輯工具

線上編輯工具測試

5. 網頁概念

5-2 HTML / CSS 自學內容 next

友善列印 & 下載 PDF 匯出 MarkDown 格式

Google網站翻譯工具列

站內搜尋

進階搜尋