尤川豪   ·  5年前
445 貼文  ·  275 留言

自學網頁の嬰兒教材:第1課 ── HTML 輕入門

⚠️⚠️⚠️ 公告 ⚠️⚠️⚠️

📢📢📢 本課程已有更新版本:請前往新版網站瀏覽、討論、交作業 📢📢📢

👉 點我前往新課程網站


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

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

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

  分享   共 38,758 次點閱
按了喜歡:
共有 64 則留言
   ·  5年前
0 貼文  ·  7 留言

覺得版主的作業很實用,完成貼上來獻醜; 想加入line群組,但網頁的上的連結好像是連去Line官網(?)

作業:https://jsfiddle.net/KitHuang/fb5emjvy/2/ 參考文章:https://www.storm.mg/lifestyle/696209

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

Hello 謝謝你的支持~!那個 line 群組應該要在手機上面開!應該會自動打開 Line!你再試試看

還是加不了的話 再跟我說!

你的作業「25K翻轉成600多萬資產!」那個我看了,寫的很好!沒問題!

目標順利完成,期待看到你之後的其他作業!加油摟~

 
按了喜歡:
   ·  5年前
0 貼文  ·  1 留言

hello~版主..

很高興能在網路上看到你分享的自學文章系列,所以我也做了一個範例 作業網址:https://jsfiddle.net/fredyang201812/s2z61g8f/47/ 參考文章:https://www.storm.mg/article/815521

有些東西與效果還是用不出來,例如開頭第一段" 對賴清德院長.."其中"對"呈現的方式:無法複製文字,所以在想是不是他是圖片表達的。 還有關於文章標題有好幾個下拉式選項: 如"新聞、評論、專題"...等等 這部分也尚無法處理。這部分我會繼續看往下研讀你的課程. 謝謝版主分享

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

你好,我看到你寫的作業囉,寫得非常好,不用擔心!

本課目標都有完成!

針對你的問題:

開頭第一段" 對賴清德院長.."其中"對"呈現的方式

並不是用圖片表達的喔!

請參考這邊的回答:https://devs.tw/post/157

關於文章標題有好幾個下拉式選項

這是比較複雜的 html/css/javascript 技巧,未來的課程會提到,不用擔心

加油摟~期待看到你下次的作業~!

按了喜歡:
feifeitzu   ·  5年前
0 貼文  ·  21 留言

謝謝版主的分享,我也完成了第一份作業:https://jsfiddle.net/xvrqmz7d/21/ 參考文章:https://www.storm.mg/lifestyle/836475

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

你好,我看到你寫的作業「以為只是太累,結果竟是腦中風差點送命!」囉~

寫得非常好,本課目標都有完成!完全沒問題~

有一個很好的起步了!

期待看到你下一次的作業!加油摟~!

   ·  5年前
0 貼文  ·  5 留言

Hi,我也完成了第一份作業,可是影片的連結實在不知道怎麼用,就打開原始碼偷看了一下。 文章開頭人字的兩倍行距的大小,不知道怎麼處理。 謝謝你的教學 作業:https://jsfiddle.net/mooju7463/m37stujr/11/ 原文:https://www.storm.mg/article/860547

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

你好 我看到你寫的海平面的那篇作業囉 寫得非常好!

文章開頭的文字問題,請參考這篇的討論:https://devs.tw/post/157

別擔心,你的進度非常好,本課目標都有順利完成!

繼續加油囉~期待看到你之後的作業!

Ruo-Yin Tong  ·  5年前
0 貼文  ·  1 留言

hi~ 我也完成我的第一份作業了 可以請版主幫我看一下O不OK嗎 https://jsfiddle.net/k9806zqn/2/ 我參考的文章是這篇 https://www.storm.mg/article/892422

謝謝版主提供的資源跟教學 讓我能更輕鬆快速的學習!

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

可以,我看了,「金鑛咖啡忠孝門市歇業」,作業寫得非常好

甚至超過本課進度,非常不錯

學習目標都有達成,沒問題!

之後的作業也要 po 出來唷!

期待看到你之後的作業!

Jia Ming He  ·  5年前
0 貼文  ·  1 留言

我也完成了一份作業 https://jsfiddle.net/wakeup_jiaming/u8pqyb3t/22/ 但我覺得好複雜,很多元素都沒用上 希望之後能穩穩交作業XD 參考自 https://www.storm.mg/article/1015209

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

「鄉下剩男如何找到春天」

寫得很好 別怕 本課目標都有達成 元素那些不急 慢慢來

期待看到你的下一次作業!

J-Ting Liu  ·  5年前
0 貼文  ·  1 留言

我也完成我的第一份作業了 https://jsfiddle.net/JaysonLiu/6w0goxbm/16/ 我參考的文章是這篇 https://www.storm.mg/category/k137503

做完才發現根本是影片介紹....

 
尤川豪   ·  5年前
445 貼文  ·  275 留言

「新手Youtuber必看!一年訂閱成長30倍呱吉這樣圈鐵粉」

寫得非常好,本課目標都有完成,甚至超前進度,有了漂亮樣式

繼續保持,期待看到你的下一份作業!

黃俊豪  ·  4年前
0 貼文  ·  2 留言

Hello版主,這是我的第一份作業:https://jsfiddle.net/n19911028/p0fvL4ka/21/ 參考文章為:https://www.storm.mg/lifestyle/1126813

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

「低頭族小心了!」作業,寫得很好!

沒問題,學習目標順利完成!

JiaSin Choong  ·  4年前
0 貼文  ·  2 留言
 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

「日本超商廁所」作業寫得很好,目標通通達成!繼續保持!

Chris Yang  ·  4年前
0 貼文  ·  2 留言
 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

「博恩脫口秀」作業寫得很好,目標通通達成!

Yvonne  ·  4年前
0 貼文  ·  1 留言
 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

「觀點投書:Google分手華為」

寫得很好 目標都有完成

繼續保持!

按了喜歡:
Anderson Chen  ·  4年前
0 貼文  ·  1 留言
 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

我看到囉!「不看盤也能賺大錢」!

寫得很好

目標有達成!繼續保持!

   ·  4年前
0 貼文  ·  6 留言

Hi~~~版主 這是我的第一份作業,再請版主幫我看作業~謝謝!

參考文章: https://crossing.cw.com.tw/blogTopic.action?id=742&nid=11862 作業: https://jsfiddle.net/hannahtest190619/hz48nu5p/

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

「外派年薪百萬」作業 我看到了

寫得很好 目標都有達成!

保持努力!

Clucky Lai   ·  4年前
0 貼文  ·  7 留言

老師好,這是我的第一份作業, 作業:https://jsfiddle.net/ClarkLai/x1hyko0d/1/ 參考文章:https://www.storm.mg/lifestyle/1405103?srcid=7777772e73746f726d2e6d675f64333135616464646333623831333136_1561374541 老師的教學淺顯易懂,謝謝老師。

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

阿拉丁是中國人,「靈體附物」早現於唐朝!《阿拉丁》故事中的神祕異國想像

作業寫得很好

沒問題 目標都有達成~

繼續加油嘿~

Jessica Chen  ·  4年前
0 貼文  ·  3 留言

版主好~雖然寫起來懵懵懂懂的也是完成了第一次的作業了!再麻煩版主看看唷~謝謝! https://jsfiddle.net/Jessica35/dzucwxg5/16/ 參考文章:https://www.storm.mg/lifestyle/1264898

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

天主教千年朝聖之路,為何讓韓綜藝之神都嚮往?《西班牙寄宿家庭》拍下這條路怎麼療癒人生

看到囉 別擔心 寫得很好

之後會慢慢理解更多

目標都有完成~繼續加油~!

Bacon Lee   ·  4年前
0 貼文  ·  2 留言

版主你好 你的教學很淺顯易懂 :) 我挑了厲害的之晨大大當第一次作業,再麻煩你看看,謝謝!
作業:https://jsfiddle.net/bacon0811/9ez7v0sb/16/ 參考文章:https://www.storm.mg/article/1512037?srcid=7777772e73746f726d2e6d675f64356232613534666431636130333837_1563937572

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

名人真心話》從1年被當15學分到台灣大總經理 林之晨:輸在起跑點沒關係,重點是贏在折返點

寫得很棒,沒問題

繼續保持!

按了喜歡:
薛百九  ·  4年前
0 貼文  ·  2 留言

最近想說重新練習程式,感謝版主的分享,這是我的第一份作業,連結:https://jsfiddle.net/shihsiansyue/aby0pf4v/; 參考文章:https://www.storm.mg/article/1648011; 再麻煩版主看看了,謝謝!

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

1個月5萬,不是退休金

看到囉,寫得很好!

目標順利完成!

Nori Chung  ·  4年前
0 貼文  ·  1 留言

感謝版主的教學,這是我的第一份作業:https://jsfiddle.net/vwqkuof4/1/ 參考文章:https://www.storm.mg/article/1671298

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

虧損5 億歐元,這個CEO 竟還帶員工到荒郊野外露營!?

寫得非常好~

本課目標順利完成囉~

繼續保持哦~

王馨君  ·  4年前
0 貼文  ·  3 留言

嗨!版主大大你好! 我看完教學做了作業,但有個問題想舉手發問 我用 <a href="網址">文字</a> 加網址在文字上,但在a後面加數字之後就不行了,像<a1 href="網址">文字</a1>,但要調不同字型大小或是粗細之類的,所以<style>裡面有a1、a2、a3...,不知道這樣要怎麼辦!

作業:https://jsfiddle.net/judy931490judy/m857ug4a/ 參考文章:https://www.storm.mg/article/1677251

BTW謝謝版主大大整理教材!

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

夏珍專欄:蔡英文與胡適

寫得很好 本課目標都有達成!

關於你的問題,第二課就有答案嚕

持續努力 繼續保持

:)

按了喜歡:
王馨君  ·  4年前
0 貼文  ·  3 留言

正在努力讀第二課,有發現解法了XDDDD 也發現我把CSS跟html都混在一起寫了哈哈哈

按了喜歡:
   ·  4年前
0 貼文  ·  2 留言

您好,最近開始摸索網頁,謝謝您如此簡潔易懂的教學、還有作業的機會:) 作業:https://jsfiddle.net/PeiPeiYen/Lknach2u/2/ 參考文章:https://www.storm.mg/lifestyle/1929275

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

「成天賴在家裡、吃飯便溺全在電腦前」

作業寫得很好~

學習目標都有完成~!

Hung-ching Kao  ·  4年前
0 貼文  ·  2 留言

您好,感謝您詳細的教學,最近完成了第一份作業,請幫我看一下 作業:https://jsfiddle.net/Keeee/x17z45ak/1/ 參考文章:https://www.storm.mg/article/1997226

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

「流浪動物希望協會理事長驟逝 北市動保處協助40隻貓咪找新家」

我看到了,寫得很棒!

學習目標都有順利完成!

張棨翔  ·  4年前
0 貼文  ·  1 留言

版主您好,最近心血來潮想要學習如何寫網頁,感謝大大您詳細的教學文章,以下是我寫的第一份作業:https://jsfiddle.net/LiSA666/x1hek5cu/ 參考文章:https://www.storm.mg/lifestyle/2018316 ,希望之後能看到更多版主大大的精采文章。

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

嗨嗨 我看到你寫的「沮喪、暴食、莫名想哭,天氣冷心情很差該怎麼辦?心理師親授:這七招即時緩解憂鬱情緒」作業

寫得非常優秀,沒問題!

學習目標都有達成!

按了喜歡:
   ·  4年前
0 貼文  ·  1 留言

版主您好 因工作需求要開始學習如何製作網頁 非常感謝您不吝分享 來先交第一份作業: https://jsfiddle.net/JoshuaTsou/07o4yrag/1/

文章:https://www.storm.mg/lifestyle/2176567

還請不吝賜教 感謝

 
培根  ·  4年前
0 貼文  ·  1 留言

版主您好 因為想要學習新技能的想法 我來學習了之前有興趣的網頁設計 這是我的第一份功課:https://jsfiddle.net/yui1127qq/5fLr19u7/1/ 文章參考:https://www.storm.mg/article/2178063 還請版主檢查 謝謝

有個問題想問 就是文章開頭的[台]是如何讓它變大的?

 
   ·  2年前
0 貼文  ·  5 留言

html <p> 你好 </p>

css p::first-letter { font-weight: bold;
font-size: 36pt; } font-weithg:bold -> 粗體 font-size 設定大一點的size就可以了

按了喜歡:
Nin Chang  ·  4年前
0 貼文  ·  1 留言

版主您好,想嘗試自己寫網站而開始自學之路, 這是我的第一份功課:https://jsfiddle.net/cLo62v14/ 文章參考:https://www.storm.mg/article/2138227 還煩請幫忙檢查與指點,謝謝。

P.S. 跟前面的學習者一樣問題,有些段落開頭的第一個字是如何放大的呢?

 
   ·  2年前
0 貼文  ·  5 留言

建議可參考這方式

史達鈴  ·  4年前
0 貼文  ·  2 留言

版主您好,因要做備審資料所以來學習如何製作網站,這是第一份作業 : https://jsfiddle.net/byj75L9r/1/ 文章參考: https://www.storm.mg/article/2314346 非常感謝您! P.S. 跟前面、前前面的學習者一樣問題,有些段落開頭的第一個字是如何放大的呢?

 
   ·  2年前
0 貼文  ·  5 留言

建議可參考這方式

RaBi Huang  ·  3年前
0 貼文  ·  1 留言

非常感謝有這樣的網站可以練習。

https://jsfiddle.net/pgtsujmz/

參考文獻https://www.storm.mg/article/2531777

我想慢慢照步驟進行。

 
Terry Yu  ·  3年前
0 貼文  ·  2 留言

作業來囉 感謝大大的教學網站 作業:https://jsfiddle.net/TaiKuangYu/a21v4gpt/41/ 參考:https://www.storm.mg/article/2590090

 
陳清雯  ·  3年前
0 貼文  ·  1 留言

版主您好,感謝您詳細的教學文章,這是我的第一份作業: https://jsfiddle.net/chingwen4141/zakyqw7f/1/ 參考新聞: https://www.storm.mg/article/2714922

 
淳安  ·  3年前
0 貼文  ·  2 留言

版主好 這是我的作業 https://jsfiddle.net/xbe1v6nz/1/ 參考新聞 https://www.storm.mg/article/2787903 還煩請幫忙檢查與指點,感謝您

 
淳安  ·  3年前
0 貼文  ·  2 留言

版主好 這是我的作業 https://jsfiddle.net/xbe1v6nz/1/ 參考新聞 https://www.storm.mg/article/2787903 還煩請幫忙檢查與指點,感謝您

 
   ·  3年前
0 貼文  ·  1 留言

版主您好 非常感謝資源分享 我的作業 https://jsfiddle.net/56bhm28s/3/ 參考新聞 https://www.storm.mg/lifestyle/2000098 再麻煩您幫忙過目與指導 謝謝

 
張珮綺  ·  3年前
0 貼文  ·  1 留言

版主您好! 這是我的第一份作業 還請您幫我過目!謝謝~ https://jsfiddle.net/peggy0418/1grf7b63/4/ 參考文章:https://www.storm.mg/lifestyle/2506241

 
劉偉立  ·  3年前
0 貼文  ·  1 留言

版主您好~網頁設計真的好有趣,版主給的資源也真的很有幫助,不過想請問如果我想在一個段落中的其中一段讓他變成超連結,我是應該使用<a>去帶入那段文字嗎?? 這是我這次的作業 : https://jsfiddle.net/adjug30z/ 參考文章 : https://www.storm.mg/article/2956510

 
   ·  3年前
0 貼文  ·  1 留言

版大您好~再麻煩您幫我看一下!謝謝您! 作業:https://jsfiddle.net/kwrngoef/ 參考文章:https://www.storm.mg/article/3369113 十分感謝您的文章跟練習!~

 
liupe  ·  3年前
0 貼文  ·  1 留言

HI版主,我也完成了第一份作業,在麻煩你幫我看一下行不行,插入視頻的部份我還不瞭解所以改用插入連結的方式,你給的資源都非常有幫助,很感謝你^_^ 作業:https://jsfiddle.net/bh3sr896/ 參考文章:https://www.storm.mg/lifestyle/3367068

 
   ·  2年前
0 貼文  ·  5 留言

Hi 版主大大您好:") 我完成了第一份作業,如果方便麻煩您看一下我寫的code,謝謝您喲!:)

作業:https://jsfiddle.net/boom017o/rdpanq3z/43/ 參考文章:https://www.storm.mg/article/3811671

 
   ·  1年前
0 貼文  ·  1 留言

最近在自主學習,做個作業讓未來自己記得感謝版主提供這個空間 作業:https://jsfiddle.net/m6wdcp9q/19/ 參考文章:https://www.storm.mg/article/4452658

 
您的留言