第1課 課程目標

學會 h1, h2. p, br 等等HTML元素的用法

學完之後,你將可以用HTML來替內容排版

第1課 課程內容

第一課只要學習最基本的HTML元素就可以了

請打開這個網站,用這個網站來開發你的網站:

https://jsfiddle.net

共有HTML, CSS, JavaScript三塊可以寫,先只要寫HTML就好。

閱讀並且練習這五份教學的內容:

HTML Basic

HTML Elements

HTML Attributes

HTML Headings

HTML Paragraphs

不習慣看英文,可以改看這裡:

HTML 基础

HTML 元素

HTML 属性

HTML 标题

HTML 段落

把教學裡面的HTML程式碼,貼到 jsfiddle 裡面的 HTML 區域,貼好之後按上面的 RUN 按鈕,就會在右下角的 Result 看到結果。

讀完、練習完這五份教學裡面的程式碼,就算是學會HTML的基礎了

第1課 作業

前往這個網站:風傳媒

或者任何你覺得版面很漂亮的媒體網站

找一篇你喜歡的文章

接著打開jsfiddle,把jsfiddle當成 Microsoft Word文書編輯軟體來用,用HTML的段落、標題、換行等等元素,把文章排版打出來。

只要打出文章內容就好,上方的導覽列、旁邊的熱門文章那些區塊都不用。

完成這些,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!

按讚的人:

共有 116 則留言

請問在JSFiddle上寫入一個link,console那裏連結點擊後無法跳轉是正常的嗎?

按讚的人:

正常的 可以不先管它 因為 jsfiddle 無法所有網頁功能都模擬 有些跟資訊安全相關的 像是網址跳轉功能 就會被擋

按讚的人:

繳交作業!再麻煩幫我檢視了,謝謝。 https://jsfiddle.net/wood0807/5v31kgyh/7/

按讚的人:

寫得很好,順利完成!

按讚的人:

作業完成,再麻煩您看一下了,謝謝。 https://jsfiddle.net/po9rx8a1/

按讚的人:

寫得很好,順利完成!

繳交作業~再麻煩您了,謝謝! https://jsfiddle.net/2mx46gr9/4/

按讚的人:

寫得很好,順利完成!

繳交作業~再麻煩檢查了,謝謝! https://jsfiddle.net/0bu6por7/2/

按讚的人:

寫得很好,順利完成!

謝謝站長的分享 第一次嘗試練習 繳交作業 麻煩站長檢視:)

https://jsfiddle.net/maddy770803/jtp62q5g/

按讚的人:

寫得很好,順利完成!繼續保持!

繳交作業~ 再請站長幫忙檢查,謝謝! https://jsfiddle.net/jim041116/890du7qe/1/

按讚的人:

寫得很好,順利完成!繼續保持!

https://jsfiddle.net/ykftr538/ 繳交作業

按讚的人:

寫得很好,順利完成!繼續保持!

https://jsfiddle.net/hqcx5bk7/ 繳交作業~再麻煩您了,謝謝!

按讚的人:

寫得很好,順利完成!繼續保持!

繳交作業~再麻煩您檢查了,謝謝! https://jsfiddle.net/Yiannnh618/1537bmyz/43/

按讚的人:

寫得很好,順利完成!繼續保持!

https://jsfiddle.net/elmon/bzrsvo6w/3/

練習做了一次,希望這樣是對的 再請您看看了~謝謝!

按讚的人:

寫得很好,順利完成!繼續保持!

交作業 ^^ https://jsfiddle.net/j437437/r7w0xp32/75/

( 謝謝站長大大提供這麼好的學習資源 )

按讚的人:

寫得很好,順利完成!繼續保持!

按讚的人:

繳交作業!再麻煩您幫忙檢查了,謝謝! https://jsfiddle.net/Lpa5dnuf/

按讚的人:

寫得很好,順利完成!繼續保持!

按讚的人:

https://jsfiddle.net/sky27/wvg9jmne/3/ 交作業 再麻煩看看哪裡需要修改 謝謝~

按讚的人:

寫得很好,順利完成!繼續保持!

按讚的人:

https://jsfiddle.net/ju29arc7/ 繳交作業~再麻煩幫忙檢查了,謝謝!

按讚的人:

寫得很好,順利完成!繼續保持!

按讚的人:

川大好,交作業 + 1 https://jsfiddle.net/98vgfbr6/37/

按讚的人:

寫得很好,順利完成!繼續保持!

https://jsfiddle.net/roywei/k2jaqL8s/7/

完成練習感謝分享

按讚的人:

寫得很好,順利完成!繼續保持!

按讚的人:

繳交作業~麻煩批閱!謝謝 https://jsfiddle.net/973224/9vspjb7h/74/

按讚的人:

寫得很好,順利完成!繼續保持!

作業完成,麻煩站長了,感謝>< https://jsfiddle.net/oillly/9gf8p0js/2/

按讚的人:

寫得很好,順利完成!繼續保持!

繳交作業,麻煩阿川老師,謝謝! https://jsfiddle.net/cv309pro/3/

按讚的人:

寫得很好,順利完成!繼續保持!

繳交作業,再麻煩您了,謝謝! https://jsfiddle.net/h8jcsmfL/

按讚的人:

寫得很好,順利完成!繼續保持!

交作業,再麻煩站長了,謝謝! https://jsfiddle.net/

這是 jsfiddle 首頁,沒東西顯示喔~

我忘儲存了! 再麻煩了,謝謝! https://jsfiddle.net/8ujsvd1y/

繳交作業~ 麻煩站長幫忙檢查 謝謝! https://jsfiddle.net/09sc4kah/

按讚的人:

寫得很好,順利通過!

再麻煩幫我檢查留意一下,非常感謝。

https://jsfiddle.net/Poyenlin/rskyew3L/

按讚的人:

寫得很好,順利完成!

謝謝分享,作業完成,再麻煩檢查,謝謝~ https://jsfiddle.net/nouveau89/v72sn60m/1/

按讚的人:

寫得很好,順利完成!

感謝大大製作的課程,奉上作業: https://jsfiddle.net/jared0921/jpxaq92y/17/

按讚的人:

寫得很好,順利完成!

謝謝分享,來交作業! https://jsfiddle.net/5esgaq1u/ 再麻煩幫忙查看>< 謝謝 文章參考這個 https://www.storm.mg/article/4770918

按讚的人:

寫得很好,順利完成!

新人報到,開始學習前端。繳交作業,謝謝 https://jsfiddle.net/o16fpke8/

參考文章:https://www.storm.mg/article/4774189

按讚的人:

寫得很好,順利完成!

新人報到,繳交作業,請站長幫忙檢視~謝謝! https://jsfiddle.net/RubyCCC/6qpkm01d/62/

按讚的人:

寫得很好,順利完成!

新人報到 繳交作業 還請站長檢查一下 謝謝 https://jsfiddle.net/eric60305/mzx7ybrd/24/

按讚的人:

寫得很好,順利完成!

作業完成,再請麻煩站長您看一下了,謝謝。 https://jsfiddle.net/stevencanweb/fgzam2s3/155/

按讚的人:

寫得很好,順利完成!

繳交作業 麻煩您了 謝謝~ https://jsfiddle.net/matt8899076/7gyzemk9/26/

按讚的人:

寫得很好,順利完成!

謝謝站長提供教材練習!這邊繳交作業,麻煩站長了,謝謝! https://jsfiddle.net/Departed/npe3g1hf/

按讚的人:

寫得很好,順利完成!

按讚的人:

新人報到來繳交作業,謝謝站長創設論壇與提供教學! https://jsfiddle.net/victoria304040/uf26kv7m/65/

按讚的人:

寫得很好,順利完成!

繳交作業!謝謝站長老師 https://jsfiddle.net/paul_chu/kmh8dc6t/

按讚的人:

寫得很好,順利完成!

繳交作業~ 一開始沒注意到是VIP文章...做到後面才發現只能擷取到一部份 稍微瞄了一下下一課的作業 可能要再找一篇文章才能有充足的練習 之後再找一篇來練習看看好了@@ https://jsfiddle.net/yuyu15/s2xrof91/8/

按讚的人:

重新做了一份~~ https://jsfiddle.net/yuyu15/hw3mfrso/19/

原本還在想說要怎麼做到同時粗體+更改顏色...思考了一下 style的部分雖然不知道能不能放多個參數 但意識到只放單一個參數後面也有一個分號 應該就是隔開參數用了 稍微測試了一下果然成功了XD~

另外有個問題想要請教 在第92行的部分

*食藥署最新資訊:<a href="https://www.fda.gov.tw/TC/siteListContent.aspx?sid=10087&id=29115" style="color:red;">https://www.fda.gov.tw/TC/siteListContent.aspx?sid=10087&id=29115</a></p>

超連結文字中的&id被以紅底白字標了起來 想知道是什麼原因?

按讚的人:

寫得很好,順利完成!

關於紅底白字,我看不出原因,不知是 jsfiddle 什麼功能,不重要,先不管它

https://jsfiddle.net/tony05060165/z03pt61n/3/ 作業完成 麻煩站長幫忙檢查

按讚的人:

寫得很好,順利完成!

https://jsfiddle.net/YuchiLR/w9yaepqr/2/ 作業繳交,麻煩站長檢查~

按讚的人:

寫得很好,順利完成!

https://jsfiddle.net/udkg30Lt/ 繳交作業~再麻煩檢查了,謝謝!

按讚的人:

寫得很好,順利完成!

作業繳交,再麻煩站長檢查了!謝謝!! https://jsfiddle.net/ayakaka/t45g0wjn/3/

按讚的人:

寫得很好,順利完成!

繳交作業~再麻煩您了,謝謝! https://jsfiddle.net/000dd/1zjcout0/5/

按讚的人:

寫得很好,順利完成!

https://jsfiddle.net/liang10000/tj5c3y2x/ 繳交作業!再麻煩站長了 還有我想再發問?,就是超連結要怎麼更改顏色比較好 因為第一段作者的連結,想要更改,但是無從更改

按讚的人:

樣式的部份,下一課就有答案!寫得很好,順利完成!

繳交作業,感謝站長的無私! 但是我找不到最後圖片無法顯示的原因 https://jsfiddle.net/Pansen/8gakpfxq/16/

按讚的人:

寫得很好,順利完成!

關於圖片問題:我有看到封面圖片,如果有其他圖片沒顯示,可以到討論區直接發問,單獨一篇討論!

我找到問題並更正了,是我打錯字了哈哈,把src打成sre了

按讚的人:

繳交作業!麻煩站長您了~~~ https://jsfiddle.net/y1tc7rf0/

按讚的人:

繳交作業,麻煩了 謝謝 https://jsfiddle.net/3tg78khm/

按讚的人:

繳交作業, 麻煩站長了, 謝謝 https://jsfiddle.net/etkz9ry0/4/

按讚的人:

繳交作業,再麻煩您幫我檢視了,謝謝 https://jsfiddle.net/frog0708/a87xnq2g/

按讚的人:

繳交作業~再麻煩您了,謝謝! https://jsfiddle.net/mpvfqcyw/13/

按讚的人:

交作業囉 應該是沒問題XD https://jsfiddle.net/pLfx47cv/1/ 附上原本新聞網址 https://www.storm.mg/article/4885727

按讚的人:

https://jsfiddle.net/q63g89vp/ 繳交作業,再麻煩您了;謝謝

按讚的人:

https://jsfiddle.net/uw8eozf6/22/ 作業完成,再麻煩您看一下了,謝謝。

按讚的人:

作業完成!再麻煩您幫我檢視了,謝謝。 https://jsfiddle.net/697b1zsu/1/

按讚的人:

謝謝站長分享 小弟來上繳作業了 麻煩站長檢視 感謝您 https://jsfiddle.net/keasdaz1dar8/47cvpfLm/1/

附上原新聞網址 https://www.storm.mg/article/4889870?page=1

按讚的人:

繳交作業 再麻煩幫我檢視了,謝謝! https://jsfiddle.net/3Lrj7zf0/ 參考文章 https://www.storm.mg/lifestyle/4899743

另外請問html內的元素要列在同行好 還是像這樣更好?

文字文字文字

按讚的人:

都可以,主觀習慣即可~

繳交作業啦~ https://jsfiddle.net/chloe1026/8svn0yu2/4/

按讚的人:

感謝站長~ 交作業 https://jsfiddle.net/yxgm9oqb/

按讚的人:

感謝站長!2024.02.05 交作業 https://jsfiddle.net/qtvz9efx/1/

按讚的人:

繳交作業:https://jsfiddle.net/aelgy369/2q1awxyb/31/,謝謝站長開這個網站!

按讚的人:

2024/0209/繳作業 https://jsfiddle.net/gustavofring/7rbLpxw4/ 如有問題! 再麻煩多多指教! 謝謝

按讚的人:

https://jsfiddle.net/wenwu/sehkbt76/66/

https://www.storm.mg/article/5018843 原網站

按讚的人:

繳交作業 # 20240216 https://jsfiddle.net/hwfjLp03/11/ 謝謝站長~~

按讚的人:

20240218繳交作業 https://jsfiddle.net/1w924g36/1/ 謝謝站長! https://www.everydayobject.us/hof-wellbeing/ (原網站)

按讚的人:

https://jsfiddle.net/Obivld13/pg0hmarc/23/ 僅分享 謝謝整理資料供測試 有需要修正的地方 再請各位指教

按讚的人:

重頭開始複習的第一份作業~謝謝 練習:https://jsfiddle.net/etai200/v2pLaf7z/36/ 原址:https://www.storm.mg/lifestyle/5036333

按讚的人:

繳交作業~謝謝! https://jsfiddle.net/Ltoxfqwb/2/

按讚的人:

交作業囉:https://jsfiddle.net/max002215/x623rmpo/

按讚的人: