創作內容

27 GP

【教學】拿記事本來做網頁!(完整)

作者:豆某│2011-05-17 18:21:26│巴幣:63│人氣:52704
 
製作網頁, 這種東西大家都會吧?
 
幾乎大家製作方法都是「使用專門軟體來製作」
 
但是你會用「記事本」來做嗎?
 
最近我學到了「HTML語法」
 
只有說這樣, 可能大家都會疑問:「這蝦咪洨?」
 
簡單的跟大家介紹一下,
 
網頁有分三個趨勢:
 
 
Web 1.0 = 只給大家看資訊的, 就好比說巴哈姆特 你只能看文章 不能回文
 
Web 2.0 = 強調大家不只可以看資訊, 還可以提供資訊! 就像現在的巴哈姆特
 
Web 3.0 = 主張個人化的資訊, 依照使用者的喜好 來制定你喜歡的模式
 
 
除了分三個趨勢以外, 還有分「靜態網頁」「動態網頁」
 
那這兩個又是甚麼東西呢?
 
靜態網頁 = 只能提供使用者資訊的網頁, 就好比說是Web 1.0
 
動態網頁 = 不只提供資訊, 使用者也能參與互動, 就好比說是Web 2.0
 
那Web 3.0呢? 其實這是現在網路最新的一種模式, 到底有沒有?
 
應該是有啦~ 只是沒有那麼的廣泛! 畢竟是新的東西~
 
 
然而, 今天我們要教「HTML語法」 這是「靜態網頁」的程式碼!
 
聽到這裡, 或許有些人會反駁說:「用專用軟體來做不就好了?」
 
但我們是要用「記事本」來做, 順而學習它的語法到底是怎麼樣來設定的?
 
首先請各位在桌面創一個記事本吧~ 如果連這不會就該考慮去上祖父母級電腦班了!
 
以下文章我使用「全形字型」來打, 以便各位觀看容易!
 
紅字是說明, 請不要把紅字當成程式碼喔~
 
在記事本寫程式碼的時候, 請使用「半形字形」來打! 不然會沒效果的!
 
( 全形字形 = ABC     半形字形 = ABC )
 



 
 
然後接下來, 就要進入比較深奧的課程囉!
 
會有字體的顏色設定, 超連結點, 什麼的一大堆,
 
因為要介紹的東西真的實在太多了!
 
所以可能會有點擠, 請稍為見諒 
 
 



 
 
各位可以自己去設計一個自己喜歡的網頁,
 
請注意! 如果有插圖等等, 建議都放在「同一個資料夾」
 
然後寫完了程式碼之後~ 它還只是個「記事本」啊!
 
我們要把它「轉換成可以看的網頁」
 



 
 
不知道大家的成品會是怎麼樣子呢?
 
其實這做完之後, 是可以拿來給大家看的!
 
只要你上傳到「線上網路硬碟」
 
然後又可以讓大家看到你所上傳的網路資料,
 
那就可以當成你自己的網頁了!
 
可是務必記得! 要先轉換成「html」才能觀看喔!
 
接下來呢 。。。。。。
 
恭喜你, 你學會了基本的「HTML語法」
 
我現在只是「高一生」, 沒辦法教大家「JavaScript動態網頁語法」
 
抱歉嘿>"< 等我學到了再說吧~
 
有問題再提出來吧~
 
謝謝大家觀看本文章 
 

 
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=1310025
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 41 篇留言

冰鎮香蕉
豆豆真厲害:)

05-17 18:31

豆某
[e16]謝謝 05-17 18:36
☆寒月映雪☆
飛進來~
小映雪正在學php語法跟.NET = =///

05-17 21:43

豆某
小映雪幾年級 [e15]05-17 21:45
☆寒月映雪☆
飛進來~
大二> <
小映雪小屋的個人資訊有寫年紀捏~
學php跟.NET只是好玩的~
小映雪現在光Java還有為了專題跟比賽要去做機器人就忙翻了= =///

05-17 22:03

豆某
我跟你差好多>"<
我只是高一學生而已
加油吧 ~ (一個天天吃吃喝喝的高一生XDDD)05-17 22:10
☆寒月映雪☆
加油吧~
你念資訊嗎?

05-17 22:12

豆某
資料處理科 >///<05-17 22:21

要我教你嗎?

05-17 23:46

豆某
不要 - 3 - +05-18 17:27

但是千萬不要用 Dreamweaver系列版本
來寫html

05-17 23:48

豆某
那是甚麼 ?05-18 17:27
偽善
安安

其實我們也有在學這種HTML語法,用記事本作,很簡單

只不過在存檔時很多人都不會選擇所有檔案,並改掉副檔名就直接存檔了= =

另外我雞婆一下

像<html> 或是 <br> 這種指令碼 一定是上下 或左右兩兩對稱

大家有注意到嗎 XD

05-19 00:33

豆某
<br>沒有對稱[e23]
那個我記得沒錯的話應該是~
可是其他的就會對稱了~
光是碰到這個我就有點頭大了~
以前還想做線上留言版呢XDDDD05-19 00:38


<script type="text/javascript"><!--
document.write("<span id=\"yudan_clock\"><\/span>");
var now,hours,minutes,seconds,timeValue;
function yudan_time(){
now = new Date();
hours = now.getHours();
minutes = now.getMinutes();
seconds = now.getSeconds();
timeValue = (hours >= 12) ? "下午 " : "上午 ";
timeValue += ((hours > 12) ? hours - 12 : hours) + " 時";
timeValue += ((minutes < 10) ? " 0" : " ") + minutes + " 分";
timeValue += ((seconds < 10) ? " 0" : " ") + seconds + " 秒";
document.getElementById("yudan_clock").innerHTML = timeValue;
setTimeout("yudan_time()",100);}
yudan_time();
// --></script>

05-19 00:36

豆某
@@05-19 00:39

你把上述程式碼弄在 <BODY> 貼在這裡 </BODY> 之間

動態網頁
大概就有了~

05-19 00:37

豆某
如果我沒看錯的話,這應該是「JavaScript」
原來你長大了!!!!![e28]05-19 00:40
偽善
javascript我要等到大2才有的學......
現在學校在教C++
我反而比較想學VB,因為高中就有學過 = =

05-19 00:41

豆某
好多大學生 [e27] 我還只是年紀小小的高中生 [e13]05-19 23:34
huh?
早期 有些高手真的是用記事本寫語法的
因為當時網頁軟體還不是很流行

05-19 17:43

豆某
噗噗 XD 其實我國中就對這些東西有初步的概念
(因為是老師把東西弄成原始碼給我看的- 3-")05-19 23:35
Kami
有點懶的打程式碼= =
荳荳gp+1看你打的真辛苦

05-19 19:19

豆某
這其實很簡單的啦 XD05-19 23:35
聖小熊★
之前有用過,不過現在沒在用了…

05-19 19:32

豆某
當然啊 ~ 現在網頁設計專用的軟體一堆 ~
這些寫程式碼的 都比較少了 !
(改天興致忡忡 來投個一千封檢舉信 把阿文玩壞掉[e22])05-19 23:36
ShengWen
我太弱了...
我只對電腦配備有興趣XD
給個GP給辛苦的腦豆
要架網站要有固定IP QQ

05-19 21:08

豆某
不用啦 ~ 有些免費的網路硬碟
會給你當作網站的架設
缺點是只能作靜態網頁 不能作動態的05-19 23:37
TinTin
在很早很早年的時候
用記事本寫出來的陽春網頁
1個就500元
結果就很多人投入下去
最後就是太多人吃這份大餅造成市場萎縮

05-19 22:46

豆某
可能那個年代我還是個小baby - 3 -"
現在也還只是個小學生=ˇ="05-19 23:38
huh?
真好 我一直是有興趣但沒動力 >_>
所以學也學不精..

05-20 00:31

豆某
其實這很簡單的 ~ 只要知道怎麼寫
然後他的程式碼通通寫在小抄上
大功告成 O_<05-23 01:05
Js炎武
很好的網頁製作基礎入學~^^~

05-20 23:22

豆某
謝謝你的讚賞 ^^05-23 01:05
聖誕阿文快樂
讓我想起之前我們班的自己架設我們班專屬的ro私服,檔案全是記事本[e26]

05-22 09:00

豆某
原來阿文是壞人 [e31]05-23 01:05
摘希
我只是年紀更小的國二生~
可是我不會寫html[e28]
我只會寫C++的語法
我太爛了嗎[e28]

05-26 00:28

豆某
c++ =ˇ=?05-26 17:26
摘希
就是C++呀
只不過是個用來做一些計算的語言
我就是只會這個[e13]
雖然我能給它做一些變化
還是比不上其他[e13]

05-26 17:43

豆某
我不會那東西的說
沒聽老師教過[e13]05-26 18:15
摘希
那個比html簡單太多了
會html比較厲害

05-26 19:26

豆某
改天來教我看看~
05-26 19:35
摘希
好阿,那你教我html如何[e19]

05-26 20:09

豆某
HTML寫出來的說 - 3 -
05-26 20:19
摘希
呵呵~我知道[e16]
有興趣我可以跟你說一些關於C++的事喔[e16]

05-26 22:53

豆某
@@05-27 19:16
死宅工程師羊大帝
嚴格說的話,
錯誤一堆,請使用標準的XHTML 。

首先,<p>不是換行,而是段落,
換行標記是<br />
標題h1是最大,h6才是最小,
一般而言會使用到的大概只有h1~h3

所有標籤都請收尾好嗎?
有<p>就一定要有</p>,
<hr>沒有</hr>,<img>也沒有</img>
這類標籤請直接收在裡面<hr />、<img src="a.png" />

<font>這是老早就過時的東西,
在html5裡面都被拿掉了,
格式的設定請使用CSS取代font。

框架這東西也是不再建議被使用的,
在html5裡面也被拿掉了,
要用就用內置框架iframe

巢狀的標籤請縮排,不然純手寫也沒意義了。

網頁和圖片別放在同一個目錄下,
圖片請另建新的資料夾,
一般習慣是再開一個images資料夾。

動態網頁的意思是使用到資料庫,
PHP或ASP(.net)等,而不是指用到JavaScript。

05-27 18:59

豆某
其實這些都是從課本學來的=ˋ="
有些真的其實不用收尾>"<
所以說老早 其實是我學到最基礎的東西
有些意思並不是我翻錯
而是讓看的人比較容易理解=ˇ="
不然太明瞭的東西反而很難記
寫這篇文章的用意
也只是方便自己有空上來複習...05-27 19:22
死宅工程師羊大帝
樓上更誇張,
html一天內可以搞懂,
C++你一輩子也學不完

05-27 18:59

豆某
其實c++我真的不知道是什麼
所以不參予評論XD"05-27 19:22
摘希
C++還好阿
很快就能學會了
除非你是學更進階的一些程式碼
但是基本的要做一些簡單的程式就綽綽有餘了

05-27 20:49

豆某
(霧煞煞[e15])05-27 20:55
老佑威
現在小6只能做出最基本的...(內容完全不知道寫啥)

05-27 20:52

豆某
什麼東西 0..0
05-27 20:55
loveSETSUNA
C++就是所謂的學海無涯...我大一下,學校教了很多,我覺得我還是什麼都不會...[e28]

05-28 02:39

豆某
C++ +C+ ++C [e16]05-28 18:54
小肥宅
你跟不上時代了..這好久以前的方法了

05-28 22:51

豆某
我知道啊
文中也有提到是很早的網頁寫法= =
只是給人有個概念而已
這東西很好學 想學的就會找更新的寫法05-28 22:59
小肥宅
其實有些軟體也可以做網頁

不過大部分都需要新台幣 自己斟酌吧..

小學的時候曾經做了一個網頁,用記事本打的,連我到底哪裡打錯都不知道

只好去複製同學的[e16]

05-29 07:23

豆某
我記得沒錯的話
word 也可以拿來做網頁
而且似乎比較方便呢!
做完再轉成txt檔案
大概就是原始碼了!~05-29 09:27
幽靈
高手 我都不懂

06-20 18:08

瘋狂喵ZZ客
安 窩都布賄 顆顆

07-01 21:47

豆某
也是看不懂ˇˇ"07-04 22:58
奶茶☇雪狼
一竅不通~~( ´≖ ω≖`)✧

我還是回去作我的遊戲吧我( ´≖ ω≖`)✧

10-21 22:47

豆某
呵呵 ~ 這是十幾年前做網頁的方式10-24 13:30
廷守

電腦硬體裝修丙級正有考
當時我們都用簡單的語法 做網頁
當時打完的心情 超爽的'

高一考的

11-05 20:22

豆某
我想我也該去考考看了 [e25]11-06 10:35
小拔辣
怎麼無法插入背景嗚嗚 試了好久><

11-05 17:24

小西西
大大您新增圖片那邊好像打錯 您打成<img sre= 應該是<img src= c打成e

03-21 22:17

三色小野貓
i你[e7]
現在剛好超需要這個的
拿雞皮砸你

12-26 14:12

偽善の紳士
<form>
<select name="YourLocation">
 <option value="Taipei">台北</option>
 <option value="Taoyuan">桃園</option>
 <option value="Hsinchu">新竹</option>
 <option value="Miaoli">苗栗</option>
 ...
</select>
</form>

<textarea style="width:300px;height:100px;">
上面選項影響這邊顯示的文字要怎麼寫?
</textarea>

01-29 17:50


豆好厲害>A<
我最近正在學習這個呢,有你幫忙整理這個筆記真的幫大忙呢>W<
這樣真的很好對照一下英文和中文代表的意思(筆記筆記)
謝謝豆:))

03-15 20:36

七七
我一直在想 到底有沒有方法 在記事本上 放上線上影片的網址 讓他從我做的網頁撥放

03-16 00:01

七七
爬很多 似乎都沒有

03-16 00:02

我要留言提醒:您尚未登入,請先登入再留言

27喜歡★karta2103144 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:【好遊戲介紹】好玩的單機... 後一篇:【好遊戲介紹】軒轅劍3 ...

追蹤私訊切換新版閱覽

作品資料夾

face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】