HTML 教學第二篇開始啦
相信讀過第一篇的朋友,一定可以感受到HTML其實不困難
你怎麼寫~瀏覽器就怎麼顯示
所以請抱持著輕鬆的心情來學習這第二篇
接下來的幾篇,我會針對一些比較常用的HTML標籤來解說
老規矩~親手打!不要複製貼上
1.換行標籤<br />
在HTML中要換行可不能直接打enter換行
必須得要用到換行標籤
範例:
<html>
<head>
<title>第一個範例</title>
</head>
<body>
HELLO~<br />WORLD!!
</body>
</html>
這樣HELLO和WORLD就會換成兩行了!打得越多,間隔越大
2.水平線標籤<hr />
簡單來說就是畫一條水平線
用一些設定值可以改變這條線的樣子
size:高度
width:寬度
color:顏色
align:位置(left:左,right:右,center:中間)
範例:
<html>
<head>
<title>第一個範例</title>
</head>
<body>
HELLO~
<hr size='5px' width='100px' color='blue' align='left' />
WORLD!!
</body>
</html>
可以試試看改變參數裡面的值,玩一玩!!
hr會上下換行,所以不用加上<br />
至於為什麼會上下換行,可以去查查HTML的塊狀元素
3.標題標籤<h1>~<h6>(這個標籤要結尾喔~)
所謂的標題通常都是要很顯眼,顯眼當然就是大XDD
h1~h6會讓字體變大,h1最大
範例:
<html>
<head>
<title>第一個範例</title>
</head>
<body>
<h1>我</h1>
<h2>是</h2>
<h3>工</h3>
<h4>程</h4>
<h5>師</h5>
<h6>唷</h6>
</body>
</html>
這個標籤會幫你換兩行!等同於加上兩次<br />
4.段落標籤<p>
基本上段落標籤就是幫你加上兩個<br />
範例:
<html>
<head>
<title>第一個範例</title>
</head>
<body>
<p>我</p>
<p>是</p>
<p>工</p>
<p>程</p>
<p>師</p>
<p>唷</p>
</body>
</html>
這種用法跟下面這種呈現出來的樣子是一樣的
<html>
<head>
<title>第一個範例</title>
</head>
<body>
我<br /><br />
是<br /><br />
工<br /><br />
程<br /><br />
師<br /><br />
唷<br /><br />
</body>
</html>
5.粗體<strong>
用來加強重點文字
範例:
<html>
<head>
<title>第一個範例</title>
</head>
<body>
我是工程師唷<br />
<strong>我是工程師唷</strong>
</body>
</html>
6.斜體<em>
就是把字用斜...
範例:
<html>
<head>
<title>第一個範例</title>
</head>
<body>
我是工程師唷<br />
<em>我是工程師唷</em>
</body>
</html>
7.置中<center>
就是把這標籤中的所有東西置中
範例:
<html>
<head>
<title>第一個範例</title>
</head>
<body>
<center>我是工程師唷</center>
</body>
</html>
8.格式標籤<pre>
還記得上面有說過要換行要加<br />
要加空白得用
但是在這個標籤內
你怎麼打,畫面就怎麼呈現
但是如果像範例中這樣打的話,會把縮排用的TAB也算進去!!
範例:
<html>
<head>
<title>第一個範例</title>
</head>
<body>
<pre>
今天風很大~ 所以肚子很餓
啦啦啦啦啦~~~
我要吃消夜
</pre>
</body>
</html>
9.圖片標籤<img>
這個標籤一定要有一個參數src(圖片網址)
範例:
<html>
<head>
<title>第一個範例</title>
</head>
<body>
<img src="www.twstar.biz/bbs/img/G1.jpg" />
</body>
</html>
10.超連結<a>
相信大家對於超連結這種東西不陌生
就是點了一個東西就會幫你連過去網址
這個標籤一定要有一個參數href(網址)
在這個標籤中放入的東西就是點擊後會觸發超連結,可以是文字,按鈕,圖片...等等
範例:
<html>
<head>
<title>第一個範例</title>
</head>
<body>
請按<a href="http://www.google.com.tw">連結</a>到GOOGLE
</body>
</html>
今天就先解說這10種常用到的標籤吧
之後幾篇也會像這種方式,介紹標籤然後給範例,等到大家都差不多熟悉後就會更進一步
另外標籤中也可以套入標籤唷~
比如說
<html>
<head>
<title>第一個範例</title>
</head>
<body>
<pre>
今天<a href="http://www.google.com.tw">風</a>很大~ <strong>所以<em>肚子</em>很餓</strong>
啦啦啦啦啦~~~
我要吃消夜
</pre>
</body>
</html>
範例中的"風"會超連結到GOOGLE,"所以肚子很餓"會變粗體,其中的"肚子"又會變斜體
所以等到三篇出來之前~就把這十種標籤蹦出新滋味吧~~
要熟悉一件事情,就是要常常去碰去摸~不然很快就會忘記!!
那各位~下次見啦