【教學】拿記事本來做網頁！（完整）

製作網頁，　這種東西大家都會吧？

幾乎大家製作方法都是「使用專門軟體來製作」

但是你會用「記事本」來做嗎？

最近我學到了「ＨＴＭＬ語法」

只有說這樣，　可能大家都會疑問：「這蝦咪洨？」

簡單的跟大家介紹一下，

網頁有分三個趨勢：

Web 1.0　＝　只給大家看資訊的，　就好比說巴哈姆特　你只能看文章　不能回文

Web 2.0　＝　強調大家不只可以看資訊，　還可以提供資訊！　就像現在的巴哈姆特

Web 3.0　＝　主張個人化的資訊，　依照使用者的喜好　來制定你喜歡的模式

除了分三個趨勢以外，　還有分「靜態網頁」、「動態網頁」

那這兩個又是甚麼東西呢？

靜態網頁　＝　只能提供使用者資訊的網頁，　就好比說是Web 1.0

動態網頁　＝　不只提供資訊，　使用者也能參與互動，　就好比說是Web 2.0

那Web 3.0呢？　其實這是現在網路最新的一種模式，　到底有沒有？

應該是有啦～　只是沒有那麼的廣泛！　畢竟是新的東西～

然而，　今天我們要教「ＨＴＭＬ語法」　這是「靜態網頁」的程式碼！

聽到這裡，　或許有些人會反駁說：「用專用軟體來做不就好了？」

但我們是要用「記事本」來做，　順而學習它的語法到底是怎麼樣來設定的？

首先請各位在桌面創一個記事本吧～　如果連這不會就該考慮去上祖父母級電腦班了！

以下文章我使用「全形字型」來打，　以便各位觀看容易！

紅字是說明，　請不要把紅字當成程式碼喔～

在記事本寫程式碼的時候，　請使用「半形字形」來打！　不然會沒效果的！

（　全形字形　＝　ＡＢＣ　　　　　半形字形　＝　ABC　）

然後接下來，　就要進入比較深奧的課程囉！

會有字體的顏色設定，　超連結點，　什麼的一大堆，

因為要介紹的東西真的實在太多了！

所以可能會有點擠，　請稍為見諒　

各位可以自己去設計一個自己喜歡的網頁，

請注意！　如果有插圖等等，　建議都放在「同一個資料夾」

然後寫完了程式碼之後～　它還只是個「記事本」啊！

我們要把它「轉換成可以看的網頁」

不知道大家的成品會是怎麼樣子呢？

其實這做完之後，　是可以拿來給大家看的！

只要你上傳到「線上網路硬碟」

然後又可以讓大家看到你所上傳的網路資料，

那就可以當成你自己的網頁了！

可是務必記得！　要先轉換成「ｈｔｍｌ」才能觀看喔！

接下來呢　。。。。。。

恭喜你，　你學會了基本的「ＨＴＭＬ語法」

我現在只是「高一生」，　沒辦法教大家「ＪａｖａＳｃｒｉｐｔ動態網頁語法」

抱歉嘿＞＂＜　等我學到了再說吧～

有問題再提出來吧～

謝謝大家觀看本文章　

LINE 分享

碧藍幻想Relink全道具收集全螃蟹全筆記全寶箱全史萊姆

【月勳】實習⑧

霧鎖王國－區網伺服器架設簡易流程。(Enshrouded Dedicated Server)

留言

2011-05-17 18:31冰鎮香蕉：
豆豆真厲害:)
2011-05-17 18:36豆某：[e16]謝謝
2011-05-17 21:43☆寒月映雪☆：
飛進來~
小映雪正在學php語法跟.NET = =///
2011-05-17 21:45豆某：小映雪幾年級 [e15]
2011-05-17 22:03☆寒月映雪☆：
飛進來~
大二> <
小映雪小屋的個人資訊有寫年紀捏~
學php跟.NET只是好玩的~
小映雪現在光Java還有為了專題跟比賽要去做機器人就忙翻了= =///
2011-05-17 22:10豆某：我跟你差好多>"<
我只是高一學生而已
加油吧 ~ (一個天天吃吃喝喝的高一生XDDD)
2011-05-17 22:12☆寒月映雪☆：
加油吧~
你念資訊嗎?
2011-05-17 22:21豆某：資料處理科 >///<
2011-05-17 23:46：
要我教你嗎?
2011-05-18 17:27豆某：不要 - 3 - +
2011-05-17 23:48：
但是千萬不要用 Dreamweaver系列版本
來寫html
2011-05-18 17:27豆某：那是甚麼 ?
2011-05-19 00:33偽善：
安安

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

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

另外我雞婆一下

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

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

<script type="text/javascript"></script>
2011-05-19 00:39豆某：@@
2011-05-19 00:37：
你把上述程式碼弄在 <BODY> 貼在這裡 </BODY> 之間

動態網頁
大概就有了~

2011-05-19 00:40豆某：如果我沒看錯的話，這應該是「JavaScript」
原來你長大了！！！！！[e28]
2011-05-19 00:41偽善：
javascript我要等到大2才有的學......
現在學校在教C++
我反而比較想學VB,因為高中就有學過 = =
2011-05-19 23:34豆某：好多大學生 [e27] 我還只是年紀小小的高中生 [e13]
2011-05-19 17:43huh?：
早期有些高手真的是用記事本寫語法的
因為當時網頁軟體還不是很流行

2011-05-19 23:35豆某：噗噗 XD 其實我國中就對這些東西有初步的概念
(因為是老師把東西弄成原始碼給我看的- 3-")
2011-05-19 19:19Kami：
有點懶的打程式碼＝　＝
荳荳ｇｐ＋１看你打的真辛苦
2011-05-19 23:35豆某：這其實很簡單的啦 XD
2011-05-19 19:32聖小熊★：
之前有用過，不過現在沒在用了…
2011-05-19 23:36豆某：當然啊 ~ 現在網頁設計專用的軟體一堆 ~
這些寫程式碼的都比較少了 !
(改天興致忡忡來投個一千封檢舉信把阿文玩壞掉[e22])
2011-05-19 21:08ShengWen：
我太弱了...
我只對電腦配備有興趣XD
給個GP給辛苦的腦豆
要架網站要有固定IP QQ
2011-05-19 23:37豆某：不用啦 ~ 有些免費的網路硬碟
會給你當作網站的架設
缺點是只能作靜態網頁不能作動態的
2011-05-19 22:46TinTin：
在很早很早年的時候
用記事本寫出來的陽春網頁
1個就500元
結果就很多人投入下去
最後就是太多人吃這份大餅造成市場萎縮
2011-05-19 23:38豆某：可能那個年代我還是個小baby - 3 -"
現在也還只是個小學生=ˇ="
2011-05-20 00:31huh?：
真好我一直是有興趣但沒動力 >_>
所以學也學不精..
2011-05-23 01:05豆某：其實這很簡單的 ~ 只要知道怎麼寫
然後他的程式碼通通寫在小抄上
大功告成 O_<
2011-05-20 23:22Js炎武：
很好的網頁製作基礎入學~^^~
2011-05-23 01:05豆某：謝謝你的讚賞 ^^
2011-05-22 09:00聖誕阿文快樂：
讓我想起之前我們班的自己架設我們班專屬的ro私服,檔案全是記事本[e26]
2011-05-23 01:05豆某：原來阿文是壞人 [e31]
2011-05-26 00:28摘希：
我只是年紀更小的國二生~
可是我不會寫html[e28]
我只會寫C++的語法
我太爛了嗎[e28]
2011-05-26 17:26豆某：c++ =ˇ=?
2011-05-26 17:43摘希：
就是C++呀
只不過是個用來做一些計算的語言
我就是只會這個[e13]
雖然我能給它做一些變化
還是比不上其他[e13]
2011-05-26 18:15豆某：我不會那東西的說
沒聽老師教過[e13]
2011-05-26 19:26摘希：
那個比html簡單太多了
會html比較厲害
2011-05-26 19:35豆某：改天來教我看看~
2011-05-26 20:09摘希：
好阿，那你教我html如何[e19]

2011-05-26 20:19豆某：HTML寫出來的說 - 3 -
2011-05-26 22:53摘希：
呵呵~我知道[e16]
有興趣我可以跟你說一些關於C++的事喔[e16]
2011-05-27 19:16豆某：@@
2011-05-27 18:59死宅工程師羊大帝：
嚴格說的話，
錯誤一堆，請使用標準的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。

2011-05-27 19:22豆某：其實這些都是從課本學來的=ˋ="
有些真的其實不用收尾>"<
所以說老早其實是我學到最基礎的東西
有些意思並不是我翻錯
而是讓看的人比較容易理解=ˇ="
不然太明瞭的東西反而很難記
寫這篇文章的用意
也只是方便自己有空上來複習...
2011-05-27 18:59死宅工程師羊大帝：
樓上更誇張，
html一天內可以搞懂，
C++你一輩子也學不完
2011-05-27 19:22豆某：其實c++我真的不知道是什麼
所以不參予評論XD"
2011-05-27 20:49摘希：
C++還好阿
很快就能學會了
除非你是學更進階的一些程式碼
但是基本的要做一些簡單的程式就綽綽有餘了
2011-05-27 20:55豆某：(霧煞煞[e15])
2011-05-27 20:52老佑威：
現在小6只能做出最基本的...(內容完全不知道寫啥)
2011-05-27 20:55豆某：什麼東西 0..0
2011-05-28 02:39loveSETSUNA：
C++就是所謂的學海無涯...我大一下,學校教了很多,我覺得我還是什麼都不會...[e28]
2011-05-28 18:54豆某：C++ +C+ ++C [e16]
2011-05-28 22:51小肥宅：
你跟不上時代了..這好久以前的方法了
2011-05-28 22:59豆某：我知道啊
文中也有提到是很早的網頁寫法= =
只是給人有個概念而已
這東西很好學想學的就會找更新的寫法
2011-05-29 07:23小肥宅：
其實有些軟體也可以做網頁

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

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

只好去複製同學的[e16]
2011-05-29 09:27豆某：我記得沒錯的話
ｗｏｒｄ　也可以拿來做網頁
而且似乎比較方便呢！
做完再轉成ｔｘｔ檔案
大概就是原始碼了！～
2011-06-20 18:08幽靈：
高手我都不懂
2011-07-01 21:47瘋狂喵ZZ客：
安窩都布賄顆顆
2011-07-04 22:58豆某：也是看不懂ˇˇ"
2011-10-21 22:47奶茶☇雪狼：
一竅不通～～( ´≖ ω≖`)✧

我還是回去作我的遊戲吧我( ´≖ ω≖`)✧
2011-10-24 13:30豆某：呵呵 ~ 這是十幾年前做網頁的方式
2011-11-05 20:22廷守：
恩
電腦硬體裝修丙級正有考
當時我們都用簡單的語法做網頁
當時打完的心情超爽的'

高一考的

2011-11-06 10:35豆某：我想我也該去考考看了 [e25]
2013-11-05 17:24小拔辣：
怎麼無法插入背景嗚嗚試了好久><
2016-03-21 22:17小西西：
大大您新增圖片那邊好像打錯您打成<img sre= 應該是<img src= c打成e
2016-12-26 14:12三色小野貓：
i你[e7]
現在剛好超需要這個的
拿雞皮砸你
2017-01-29 17:50偽善の紳士：
<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>
2017-03-15 20:36：
豆好厲害>A<
我最近正在學習這個呢，有你幫忙整理這個筆記真的幫大忙呢>W<
這樣真的很好對照一下英文和中文代表的意思(筆記筆記)
謝謝豆:))
2018-03-16 00:01七七：
我一直在想到底有沒有方法在記事本上放上線上影片的網址讓他從我做的網頁撥放
2018-03-16 00:02七七：
爬很多似乎都沒有

小屋創作

日誌2011-05-17 18:21
【教學】拿記事本來做網頁！（完整）

相關創作

碧藍幻想Relink全道具收集全螃蟹全筆記全寶箱全史萊姆

【月勳】實習⑧

霧鎖王國－區網伺服器架設簡易流程。(Enshrouded Dedicated Server)

留言

日誌2011-05-17 18:21【教學】拿記事本來做網頁！（完整）

相關創作

碧藍幻想Relink全道具 收集 全螃蟹 全筆記 全寶箱 全史萊姆

【月勳】實習⑧

霧鎖王國－區網伺服器架設簡易流程。(Enshrouded Dedicated Server)

留言

日誌2011-05-17 18:21
【教學】拿記事本來做網頁！（完整）

碧藍幻想Relink全道具收集全螃蟹全筆記全寶箱全史萊姆