作者benck (小伦)
看板b97902HW
标题[心得] HTML语法初级教学 (包含单班计概hw5教学)
时间Sat Nov 29 01:05:55 2008
因为小的写网页有一段的时间了，所以就代替强者来完成这项教学了。
这篇主要会涵盖到单班计概Assignment #5的内容，还有基础HTML教学和部份W3C规则。
-------------------------------------------------------------------------------
一个符合最新XHTML 1.0协定的网页至少会有以下的内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>This is title.</title>
</head>
<body>
</body>
</html>
至於为什麽是这样，就像#include <stdio.h> int main(){return 0;}一样，背起来吧！
而由於这次作业还没需要这麽严格的限制，所以就先打以下这样就可以了。
<html>
<head>
<title>This is title.</title>
</head>
<body>
</body>
</html>
HTML语法是属於tagged语言，就是
所有的东西都要用前後标签标起来，後标签要加上"/"，
而如果是不需要後标签的br或img的话，则在标签後加上" /"即可，范例如下。
<p>this is test.</p>
<br />
<p><img src="pic.jpg" /></p>
而且有点像stack(堆叠)的概念，
先进後出，後进先出，标签一定要成对，范例如下。
<font size="20"><p>this is a sentence.</p></font> //这是对的
<p><font size="20">this is a sentence.</p></font> //这是错的
而在网页中如果要"显示"以下字元(<,>,&)需分别使用< > &，范例如下。
<p> I & you</p> //错
<p> I & you</p> //正确
<a href="
http://www.website.com/test.php?a=1&b=2"> //错
<a href="
http://www.website.com/test.php?a=1&b=2"> //正确
-------------------------------------------------------------------------------
以下先解释一下基本语法使用(p,br,a,img,table)。
<p>主要是作为换行用途，范例如下。
<p>这是第一行</p>
<p>这是第二行</p>
而<br />则是另外一种换行。
这是第一行<br />
这是第二行
<a>则是连结使用，范例如下。
<a href="
http://tw.yahoo.com/" target="_blank">Yahoo!奇摩首页</a>
target中主要是在写有框架的网页中使用，
指定要用哪个框架开启连结网页。
而如果要开新网页的话，则是使用_blank，若未填target表示使用原来的同一页面。
<img>则是图片使用，范例如下。
<img src="test.jpg" alt="测试" />
src中填入图片档名(含副档名)，alt中则填入替代文字，主要是在图片无法显示时替代。
<table>则是较复杂的语法之一，以下范例是一个2row*3column的表格。
<table>
<tr>
<td>
A</td>
<td>
B</td>
<td>
C</td>
</tr>
<tr>
<td>
D</td>
<td>
E</td>
<td>
F</td>
</tr>
</table>
最外层先使用table框起来，tr则是开启一row，td则是一row要开几个column。
如果你有某格想要用类似word中合并储存格的功能，则就要使用到colspan或rowspan。
而因为这是作业之一，就不告诉大家了，大家可以自己测试看看，不难。
关於作业有某部份关於style，来解释一下。
style可以任意加在可使用style的标签中，如a,table,tr,td,p…等。
若需使用1个以上的style，可用分号分开，范例如下。
<p style="color:#FF0000">这会变红色的字</p>
<p style="color:#FF0000;font-size:large">这会变红色而且变大</p>
style语法可以参考这个网页：
http://css.1keydata.com/tw/
常常看到某些网页要特别手动调整编码才可正常浏览，那是因为原先网页撰写者设定错误
，不然就是未设定，网页编码使用如下(放在head标签之间)。
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
如果要用utf-8的话
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
到这边，这次作业应该就结束了。
-------------------------------------------------------------------------------
来提一下容易犯的一些W3C规范错误。
而标签中的所有设定值，都要有值，而且要用双引号quote起来。
如果不需设定值，则使用 属性="属性" 的方式设定。
<frame noresize> //错的
<frame noresize="noresize"> //正确
<font size=20> //错
<font size="20"> //正确
在HTML语言中，注解文字是使用以下规则，记住，注解文字中不可包含"-"字元。
<!--这是注解文字-->
<!--这是---错误的注解文字-->
而最新的XHTML协定中，标签需要是小写的。
<TITLE>This is title.</TITLE> //这是错的
<title>This is title.</title> //这才是标准写法
所有图片一定要含有alt属性。
<img src="yahoo.jpg"> //错误
<img src="test.jpg" alt="测试" /> //正确
大致是如此，而W3C也提供了个线上检测是否符合W3C规定的网页，如下：
http://validator.w3.org/
可测测看你写的网页究竟正确与否。
基础HTML教学就大致是这样，有问题请发问，有错误也麻烦更正，谢谢。
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 123.204.92.151
1F：推 LPH66:路人补充: <p>是分段(paragraph) <br>只是单纯分行 11/29 01:21
2F：→ LPH66:所以<p>的行间距会比<br>的大 11/29 01:21
3F：推 crystal0825: 谢谢强发伦 强发伦好棒!! 11/29 01:45
4F：推 jimmyken793:还有请尽量用div和css排版 table排版是坏习惯 11/29 08:34
5F：→ jimmyken793:到最後改网页常常痛不欲生阿.... 11/29 08:34
6F：→ jimmyken793:另外class和ID请尽量用有意义的名称 跟变数名一样 11/29 08:35
7F：→ benck:楼上说的很有道理 可是毕竟这是初级教学= =" 11/29 08:45
8F：推 jimmyken793:我来写个CSS教学吧 科科 11/29 08:58
9F：推 jimmyken793:然後其实後来的table规格里面有caption和tbody 11/29 09:01
10F：→ jimmyken793:很有趣也很好用的功能 11/29 09:01
11F：→ jimmyken793:阿 还有thead 11/29 09:01
12F：推 matt7983:(看来我把CSS书拿出来多看一看好了XDD) 11/29 12:16
13F：推 tempTTP1:作业不是要有背景色吗?那怎麽做? 11/29 15:31
14F：→ tempTTP1:图片放上去变成框中一个X的情形怎麽办? 11/29 15:32
15F：→ benck:如文中所说的 用style达成 背景的属性是background-color 11/29 15:37
16F：→ benck:在上面提供的网址可以查到 11/29 15:37
17F：→ benck:而你应该是想要整页变色吧？ 所以就加在body中 11/29 15:37
18F：→ benck:如以下 <body style="background-color:#FF0000"> 11/29 15:38
19F：→ benck:而图片无法显示的问题是因为你在上传网页时没有把该图一同上 11/29 15:38
20F：→ benck:传，才会让网页找不到图片，网页中的图片连结大多使用相对路 11/29 15:38
21F：→ benck:径，就是和网页目录的相对关系 如果是src="test.jpg" 11/29 15:38
22F：→ benck:在上传网页时 就要把该图一同上传至同一网页目录 11/29 15:39
23F：推 tempTTP1:感谢!!不过...图片怎麽上传啊? 11/29 15:45
24F：推 fishead1116:推楼上问题 11/29 16:00
25F：→ chenaren:用ftp程式 位址跟用putty连217一样 设定记得选sftp 11/29 16:12
26F：推 jackwhitekim:Q3是照投影片的图回答吗? 还是......?? 11/29 16:34
27F：→ benck:补充楼楼上 port打22也可以 11/29 18:42
28F：→ benck:楼楼上的问题，投影片是想要在最後一页最请大家检视原始码看 11/29 18:42
29F：→ benck:如果没有记录下来 可能就要再做一次了 11/29 18:43
30F：推 jimmyken793:其实并不推廌在标签里面直接打style="XXX"...改起来很 11/29 20:52
31F：→ jimmyken793:麻烦的= = 11/29 20:52
32F：推 LoganChien:要用 target 属性好像要用特别的 DTD。而且新标准好像 11/29 20:53
33F：→ LoganChien:太建议用 target="_blank" 11/29 20:53
34F：推 jimmyken793:target在新标准里面废掉罗 11/29 20:54
35F：推 LoganChien:囧了，少打一个字...，楼上上，是： 11/29 20:56
36F：→ LoganChien:不太建议用 target="blank" 11/29 20:57
37F：→ benck:果然很多网页强者呢，以上教学大部份是依照投影片内容和作业 11/29 20:59
38F：→ benck:要求打出来的，还请强者们一一更正喔 11/29 20:59
39F：推 applerman:单班学好多喔!!好羡慕@@! 11/29 21:35
40F：推 ming1053:推不要用table排版，太恶心了。 11/29 23:46
41F：推 lmr3796:单班要css啊...真发 11/30 10:35
42F：→ benck:楼上爆走了 11/30 12:19
43F：推 jimmyken793:小伦好发 11/30 12:49