尤川豪   ·  5月前
Exp. 1,633  ·  213 貼文  ·  146 留言

自學網頁の嬰兒教材:第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的段落、標題、換行等等元素,把文章排版打出來。

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

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

  分享   共 5,858 次點閱
共有 18 則留言
   ·  4月前
Exp. 62  ·  0 貼文  ·  7 留言

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

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

 
尤川豪   ·  4月前
Exp. 1,633  ·  213 貼文  ·  146 留言

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

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

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

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

 
   ·  3月前
Exp. 7  ·  0 貼文  ·  1 留言

hello~版主..

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

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

 
尤川豪   ·  3月前
Exp. 1,633  ·  213 貼文  ·  146 留言

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

本課目標都有完成!

針對你的問題:

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

並不是用圖片表達的喔!

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

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

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

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

feifeitzu   ·  2月前
Exp. 121  ·  0 貼文  ·  21 留言

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

 
尤川豪   ·  2月前
Exp. 1,633  ·  213 貼文  ·  146 留言

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

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

有一個很好的起步了!

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

   ·  2月前
Exp. 31  ·  0 貼文  ·  5 留言

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

 
尤川豪   ·  2月前
Exp. 1,633  ·  213 貼文  ·  146 留言

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

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

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

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

Ruo-Yin Tong  ·  2月前
Exp. 6  ·  0 貼文  ·  1 留言

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

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

 
尤川豪   ·  2月前
Exp. 1,633  ·  213 貼文  ·  146 留言

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

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

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

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

期待看到你之後的作業!

Jia Ming He  ·  1月前
Exp. 6  ·  0 貼文  ·  1 留言

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

 
尤川豪   ·  1月前
Exp. 1,633  ·  213 貼文  ·  146 留言

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

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

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

J-Ting Liu  ·  1月前
Exp. 1  ·  0 貼文  ·  1 留言

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

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

 
尤川豪   ·  1月前
Exp. 1,633  ·  213 貼文  ·  146 留言

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

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

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

黃俊豪  ·  2週前
Exp. 12  ·  0 貼文  ·  2 留言

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

 
尤川豪   ·  2週前
Exp. 1,633  ·  213 貼文  ·  146 留言

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

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

JiaSin Choong  ·  1週前
Exp. 12  ·  0 貼文  ·  2 留言
 
尤川豪   ·  1週前
Exp. 1,633  ·  213 貼文  ·  146 留言

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

您的留言