打好你的HTML基礎

現在真的很流行CSS,因為網頁標準化是個誰都不能抗拒的趨勢,但是,CSS到底要誰來寫比較好?

對程式設計師而言,CSS不難懂,但是他們沒有排版的概念與美感,就算會了也不會用;對視覺設計師而言,設計很容易,但是CSS與HTML就像天書一樣,他們只會用Dreamweaver按,實際上按出了什麼往往一點概念也沒有。

一般來講,CSS應該是要專門的CSS設計師來負責,由Art設計版面,由CSS設計師轉化成實際的HTML頁面與CSS檔案,不過就台灣的狀況,是不太可能給你一個專門的CSS設計師的職稱,所以這個位置通常掉到Art頭上,再不然就是不知道該給誰的尷尬狀況。之前,我也算是Dreamweaver的愛用者,不過那是我開始寫程式以前;現在,因為開一個Dreamweaver大概可以開兩個Maya,所以就放棄了,改用PSPade。

記得之前在補習班教網頁設計最後一次上課的時候,我抱著豁出去的心情,決定從第一堂課跟這些學生講HTML程式及網頁標準化技術講到最後一堂課,我覺得,反正這些人現在也是什麼都不會,我教什麼他們就學什麼,既然如此,為什麼不直接教他們程式碼及正確的網頁技術?比起教了一堆錯的方式,然後最後還要花時間矯正他們的錯誤觀念,不如直接講正確的東西;不過,我這種教法是不見容於補習班的,所以也只能在最後一堂課這樣教,所以,那堂課的學生到底是犧牲品還是幸運兒,我也不可能有機會知道,不過就我到後面幾堂課,發現大多數的人都會簡單的CSS,也可以徒手寫出一些基本的HTML語法,我想,應該是優點大於缺點吧!

我當時常常跟學生說,CSS要寫得好,HTML一定要寫得漂亮;不只是正確而已,要結構化、標準化、程式碼簡約大方,如果打開一個網頁,裡面的HTML連你自己都看不懂,我可以保證,你寫出來的CSS不會比路邊的垃圾還要值錢。說真的,我還蠻討厭看到那種把div當成表格來用的笨蛋,與其要這樣用,那不如不要那麼痛苦的用CSS,根本是一點意義也沒有。

網頁設計本來就是個非常綜合性的技術,一個好的網頁設計師,如果對程式及網頁語法結構一點認識及概念也沒有,那他永遠都只能負責製作網頁的icon,而且,還會常常連icon都弄不好,因為這種人連該製作什麼樣的網頁圖檔來讓網頁讀取更有效率都不知道,對網頁有任何實質上的幫助嗎?只知道讓畫面看起來美美的是不夠的,如果你只能做到這樣,那我建議你還是乖乖留在平面設計界吧!網頁設計對你來講是太難了點。

程式設計人員也不能光顧自己的程式,而完全不了解CSS與網頁標準化,基本上,一個連CSS與HTML結構都不了解的程式設計師,是不可能會寫出好程式;拜託,CSS與網頁標準化技術是基本常識好嗎?連個基本常識都沒有,要說自己有多專業,我都覺得是個屁。

我的CSS與網頁標準化技術都談不上專業,說實在,也就是具備了基本知識而已,然而我已經如此差強人意了,居然還有一脫拉庫的人比我更加的不懂,那我實在不知道,你們要跟別人競爭什麼。嘿!你們等於連個門外漢都不如ㄟ!很多Art總是在說,自己沒有程式設計背景,也沒有上補習班補習,當然不懂CSS與程式碼;但是,我就是純設計背景出身,沒有接受任何程式設計訓練,更沒有上補習班補過電腦,全部自學,憑什麼我學得會你們學不會?全是藉口!講真的,就算完全還不會寫PHP等網頁程式,只要看三本書,一個禮拜之內就可以具備一定程度的CSS能力及技術,我比誰都清楚學CSS根本一點都不難,HTML也根本不是天書,不過,Art的藉口不要那麼多是真的。

如果真的想做網頁設計師,為甚麼不去了解HTML,明知道HTML語法是一切網頁的基礎,卻不用心去學,難道連頁面排版都要假手程式設計師嗎?那你們這些設計到底還有什麼用處?

之所以發這樣的牢騷,是因為覺得很多製作網頁的Art實在很離譜,難怪大家都叫你們Art,不會稱你們為Web Designer,因為你們根本沒有資格被人們這樣稱呼。如果永遠只會用軟體按來按去,你永遠就只是個半殘廢的網頁製作者而已;如果程式設計師不懂CSS及網頁標準化技術,你也跟半殘廢的網頁工程師沒有兩樣,台灣,還有多少網頁的殘障人士?

9 thoughts on “打好你的HTML基礎

  1. 您好,我是一個想學html的新手,如您所說的我以前製作網頁都是用dreamweaver東點點西點點的方式來製作。但是因為現在想學css所以想先學好html。請問您是否能給我一些建議,例如您推薦的書籍或是補習班,或者是您現在是否還有在教課呢?如果有的話地點在哪呢?希望能有機會跟您學習!

  2. Dear Monster:

    嗯,我現在沒有在教課了,而且我之前那種強調CSS與HTML的上課方式,應該也不會見容於補習班吧!哈哈!(我之前是因為最後一堂課,才敢如此囂張啦~)

    不過我想您應該對網頁已經有基本概念,剩下的自己閱讀應該也沒有問題,HTML並不難,建議您可以從歐萊禮的「HTML & XHTML: The Definitive Guide, 5th Edition」開始閱讀,這本書介紹了許多非常實用而且完整的HTML的用法與概念,幾乎可以說是必備的工具書。

    其他關於HTML的書籍我就沒有特別想要推薦的。

    如果看完之後,還意猶未盡想要找更深的HTML資料,大概就只剩下W3C的官方網站可以去了吧!XHTML2 Working Group Home Page可以說是HTML最詳盡的資料網站,我也常常會上去研讀相關的資料,但是因為他很繁雜龐大,如果沒有具備之前那本書的基礎,就建議你不要上去,會頭昏腦脹低~

    憑良心講,好好把上面推薦的那本書完全看完吸收進去,您的HTML在台灣也就可以說是一般的水準之上了!一本書定價$680元,上補習班要近萬元,但是講真的,補習班最主要還是在教你用DW拖拖拉拉按一按,想要深入的學語法,不建議你花冤枉錢上補習班。我那最後一班的網頁設計學生是賽到,才會那麼可憐的被我從第一堂課教CSS跟HTML教到最後一堂課,現在想想,他們上得還真辛苦哩~

  3. 謝謝您的回覆,真是讓對學習html一頭霧水的我眼前閃出一線光芒耶。

    好巧喔,我正好上網訂的就是這本歐萊禮的書耶,不過我訂的是中文版本的”HTML&XHTML大全”,聽起來似乎是同一本書。不知道中文書跟原文書的內容會有差異嗎?在聽您這麼一介紹我真的好想趕快去天瓏把它給帶回家喔!

    非常謝謝您在這個網頁上提供了大家好多程式的資訊,您的教學頁寫的方式實在文筆非常的順暢重點清晰讓人很好理解!

  4. 這兩本是同一本喔!買中文版就可以了,這類的書,還是能買中文就買中文,倒也不是要大家別看英文,而是那個價錢實在是……歐~痛!

    很感謝您的留言鼓勵,有空我會繼續提供更多有用的資料,希望能讓更多有興趣的人能夠獲得想要的資訊。

    PS.另外有個站也相當不錯,是jaceju的網站製作學習誌,裡面也有相當多的實用文章,有需要也可以去逛逛喔~

  5. 謝謝您提供的網站,剛好可以搭配我現在讀的書耶。書上看不懂得還可以去查查。

    看完您回覆的當天我就去天瓏買了”HTML&XHTML大全的第五版”了,他的英文版已經出到第六版了耶,不過如您所說那個價錢嚇了我一跳。最後由於店員解釋說其實第五版跟第六版的內容其實不會差太多,再加上英文版的對我讀起來應該會耗費很多的時間,不~以我的英文程度來說應該是會讀個很多年吧,所以我還是認命的買了中文第五版的啦。

    這幾天抱著書狂看,真的很棒!整本書很有條理看的很舒服,解釋很詳盡(雖然有時還是頭腦轉不過來要多讀幾次 或上網看看),還有很重要的一點翻譯好通順。總之要謝謝您介紹這本書給我。

    另外我之前有買一本也是歐萊禮的”css問題解決速查手冊第二版”不知您是否知道?之前看我都看不懂,不過我想等我學會了html之後去看應該會比較容易理解。另外請問在css的部分您可以介紹自學的書給我嗎?謝謝!

  6. 我知道歐萊禮的「css問題解決速查手冊第二版」,不過我沒買這一本,因為現在好像沒有很需要,CSS這種東西很有趣,一開始覺得很難,等到搞懂了就會覺得反倒是HTML比較重要。但是CSS有本書我很推薦大家閱讀,那就是Web Standards Solutions網頁設計標準規格,這本書會給使用者一個網頁標準化很基礎的概念,透過裡面的例子,你也可以去學習HTML與CSS兩者之間的關係。

    再來,如果你想要範例來練習的話,CSS網頁設計師手札-101個您一定會遇到的問題與解答是一本可以買來作為CSS範例練習的書,只要裡面的範例你都可以活用,CSS排版就不會是問題了。其他的書,坦白講,如果你這兩本都徹底的會了,買了都是多餘的,我也就買過三本關於CSS的書,第三本因為是在這兩本之後買的,所以對我來講成了廢書一本。

    我的CSS全部自學的書就這兩本,外加之前的HTML,剩下的就是網路資料了!(那種CSS的怪招還是要看網路比較快…XD),你可以先去看看,CSS這東西,懂得HTML以後就快了~因為HTML本身就可以解決很多事情了!哈哈~

  7. 這邊我會建議想學CSS的人可以去看歐萊里的CSS大全,這本書超熱銷~每一版都可以賣到缺貨,書中的CSS觀念更是講得很清楚~等你看完這本書之後~外面的CSS範例要看懂簡直就跟吃稀飯一樣簡單了~CSS的書大概目前推薦兩位作者寫的,一個是”大藤幹”、一位是”Eric A. Meyer”,這兩位的書都可以買來參考學習喔~另外要看技巧的話~CSS Zengardan這個網站也是一個不錯的管道~

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s