HTML網站開發教學 - 初步介紹

    No.1

    前幾天吧?真的是前幾天。我才剛學完HTML與CSS網站設計,雖然對這兩個還不是弄得很精讚,但你不要懷疑,它並不難!基本上它比程式設計還簡單(如果你覺得VB很簡單的話,這個就更簡單了)。我這麼講不是要你相信我的技術不會錯,而是我要告訴我的朋友與對電腦有興趣的青少年們,如果真的想要用電腦做點甚麼事,這個可以是你的方向!

    再來講點HTML的事。基本上,它的演變並不難理解,在這裡我就不多講了,有興趣的可以到維基百科看看。而它的用途就是開發網站上必須的程式語言,也是目前最常用的網站設計語言。它真正的名字叫做「超文件標示語言」(HyperText Markup Language,簡稱HTML),而編譯軟體呢?……其實用「記事本」就可以編譯了。不過記事本不是這麼的好用,尤其是排版與測試那更是麻煩。如果你想要用比較好用的編譯軟體,你可以用Aptana編譯,它的功能很多,用來做網站設計很方便。不過如果有人有注意到BlueGriffonkompozer這兩套軟體,你也可以用這兩套軟體做設計,也是一個不錯的選擇(我會比較建議使用BlueGriffon)。甚麼?你我問用甚麼設計網站啊?其實我都用Aptana在設計網站,但最近開始用BlueGriffon了。

      當然,網站不能只有HTML而已,還必須要有CSS,也就是所謂的樣式表。他的主要功用就是讓網站不單單只是文字與圖片,因該要有一些美觀的介面或者實用的UI。CSS一樣很簡單,只要你懂它的使用方式就可以了,基本上沒有甚麼需要動腦的地方。

    好,那我們先來講解一些基本的HTML語法好了:


 

在裡面可以看到這幾樣元素:


<!DOCTYPE html>:宣告本頁面使用的HTML版本,少了這個還是可以顯示網站,只不過建議還是放上去比較保險。

<html>…</html>:這代表在這元素裡面,這些程式碼都是HTML語言。

<head>…</head>:也就是HTML網站頭部的意思,不過通常我們都不會拿來打文字,都放CSS或者是Meta、Title等……程式碼。

<meta>:表示出此頁面的相關資訊,通常我們會放網站的簡介、作者。也會拿來宣告此網站的屬性與是否要被搜尋引擎加入搜尋結果。

<body>…</body>:這元素理大部分的程式碼都是在寫網站了,很少有其他元素。

<h1>…</h1>:用這個元素,會將字體顯示為「大標題」。

<h2>…</h2>:用這個元素,會顯示比h1小的標題。

[有關於h”多少”這部分就不多寫了,大致上最多用到h4而已。最多到h6]

<br />:用這個元素,瀏覽器將會把元素後的文字顯示在新的一行,就跟Enter的功能一樣。

<hr />:用這個元素,會在網頁上顯示一條水平線。

<p>…</p>:最常用的元素,就是所謂的「段落」文字。


 

這些都是基礎,基本上都是「網站必備品」,所以很重要。

還有一些東西也是蠻常用的:


<b>…</b>:這個元素會顯示粗體。

<i>…</i>:這個元素會顯示斜體。

<sup>…</sup>:這個元素會顯示出數學次方的記號。例如:22

使用的方式是先打一個數字(例如:2),再填入<sup>2</sup>就可以顯示出22

<sub>…</sub>:這個元素會顯示像化學記號的文字。例如:CO2

<blockquote>…</blockquote>:這個元素預設是讓文章縮排,但你可以用CSS改變它的效果。例如:現在你所看到的這個東西。

<q>...</q>:這個元素是用在引述上,通常瀏覽器會在兩端加上引號,但IE並不會這麼做,所以很多人盡量不使用這個元素。

<abbr title="輸入文字">…</abbr>:這個元素是使用在表達更詳細的註解上,只要滑鼠碰到就會顯示一個方框,並且裡面會有詳解。基本上這個元素不是很常遇到。例如:請讓滑鼠碰到這裡

<cite>…</cite>:這個元素大多會寫作者所參照的書籍、電影或者文章的話或段落。瀏覽器通常會顯示斜體。

<dfn>…</dfn>:這個元素通常使用在文件中第一次顯示學術概念或名稱等字詞的時候所標示的。通常瀏覽器不會對此元素的文字做任何改變。

<address>…</address>(裡面可以加href="輸入E-mail"):這個元素的用途是可以在裡面打上地址或者E-mail地址。

<ins>…</ins>:這個元素是使用在被插入文件中的內容,會顯示底線。

<del>…</del>:這個元素是使用在被刪除的內容,會顯示刪除線。

<s>…</s>:這個元素使用「不再正確」或跟內容相關但不因該刪除的內容,會顯示刪除線。


這些,大部分都是常用的HTML語法,少部分可能用不太到 。而這些只是基本,HTML當然不單單只有這些,未來獅子還會再寫更多HTML語法的,請各位繼續關注期待摟!

喜歡3C科技,常常自己坐在電腦前玩APP與寫程式。目前是個全職高中生,課餘的時間就會來3C玩物學堂寫寫文章,分享各種3C科技資訊。

社群分享

文章推薦

Previous
Next Post »

8 意見

Write 意見
2013年8月16日 下午10:40 delete

謝謝你!
不過你上次說W3C有範例甚麼的.....?那是甚麼?

Reply
avatar
2013年8月19日 下午8:53 delete

http://www.w3schools.com/
or
http://www.w3school.com.cn/



cn是之前這貢獻者推給我的資源

Reply
avatar
Dstar
2013年9月15日 下午3:56 delete

如果能夠更一步一步的詳細講解,相信更容易引起剛起步學HTML新手的興趣

Reply
avatar
2013年9月15日 下午4:59 delete

恩,這部分我會再下一篇教學上做調整。
希望可以讓更多人學會HTML!

Reply
avatar
元 影片
2013年10月10日 下午6:54 delete

我是一個html的笨蛋~完全不會

Reply
avatar