iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
自我挑戰組

我要成為全端王!系列 第 13

全端入門Day13_前端程式撰寫之HTML

  • 分享至 

  • xImage
  •  

昨天安裝好VS Code了,今天就要來使用VS Code寫程式,那麼要寫什麼程式呢?

HTML!

今天就要來寫簡單的HTML,先進入到VS Code裡面
https://ithelp.ithome.com.tw/upload/images/20210901/20140126QEhrDOmIjQ.jpg
點左上角的檔案之後新增檔案
https://ithelp.ithome.com.tw/upload/images/20210901/20140126TIamaz3hVP.jpg
我們到右下方,現在是純文字的地方給他按下就會叫你選擇什麼程式語言,今天要寫HTML,所以就選擇HTML
https://ithelp.ithome.com.tw/upload/images/20210901/20140126gcaWHya4Jk.jpg
之後打上一個驚嘆號!然後按enter就會跑出基本的程式碼
https://ithelp.ithome.com.tw/upload/images/20210901/201401266j2lt68J1f.jpg
如果無法做的話,也可以手動輸入
之後我們來把這個程式碼存檔,一樣左上角檔案,案儲存,存到你想要的地方,然後把檔案名稱改成index.html
https://ithelp.ithome.com.tw/upload/images/20210901/20140126r0DJrqruI1.jpg
之後我們開啟剛剛存的檔案,就會是這樣
https://ithelp.ithome.com.tw/upload/images/20210901/20140126AzLDpsrwiT.jpg
你沒有看錯,完全空白,全部都是白的,所以我們就要改程式碼。

再改之前還是要來簡單說明HTML:

HTML會有很多的標籤,所謂的標籤就是<>,左括號跟右括號,那我們找被標籤包起來的body,這會是你網站的內容,我們在裡面寫個
https://ithelp.ithome.com.tw/upload/images/20210901/20140126xlppWazGvP.jpg
之後存檔,到網頁重新整理,就會有hello world了!
https://ithelp.ithome.com.tw/upload/images/20210901/20140126ao3PoQY1i4.jpg

今天就先介紹到這,明天多介紹HTML。


上一篇
全端入門Day12_安裝IDE
下一篇
全端入門Day14_前端程式撰寫之多一點的HTML
系列文
我要成為全端王!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言