第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的段落、標題、換行等等元素,把文章排版打出來。

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

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


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

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

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

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

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

按讚的人:

共有 129 則留言

請問在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/hqcx5bk7/
繳交作業~再麻煩您了,謝謝!

按讚的人:

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

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/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/Departed/npe3g1hf/

按讚的人:

寫得很好,順利完成!

按讚的人:

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

按讚的人:

寫得很好,順利完成!

繳交作業~ 一開始沒注意到是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/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內的元素要列在同行好
還是像這樣更好?
<p>
文字文字文字
</p>

按讚的人:

都可以,主觀習慣即可~

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

按讚的人:

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

按讚的人:

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

按讚的人:

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

按讚的人:

作業完成,麻煩看一下謝謝 https://jsfiddle.net/fouroneeight/rbsc7ytn/2/

按讚的人:

繳交作業 再麻煩檢查 謝謝 https://jsfiddle.net/46n7k1pr/6/

按讚的人:

20240530繳交作業https://jsfiddle.net/chrissyhuang/pk3qjsy5/23/

按讚的人:

繳交作業 https://jsfiddle.net/Brian8556/czq9tgfx/52/
過程中有遇到不確定的排版或連結顯示,偶爾會F12參考原版如何寫,也有學到一些特別的語法,挺有趣的。

按讚的人:

繳交作業https://jsfiddle.net/chroma2887/1hL64f29/102/

按讚的人:

繳交作業!https://jsfiddle.net/clayuu25/w7xvtedc/308/
有F12檢查原本的語法!也有為了併排對齊圖片
查詢如何才能打出來~但總覺得好像還是有點怪
感覺學習之路還很漫長!謝謝站長的教材

按讚的人: