iT邦幫忙

2024 iThome 鐵人賽

DAY 18
0
Python

自主學習Python網路爬蟲-PTT爬蟲、Hahow爬蟲、Yahoo電影爬蟲實作系列 第 18

Day18 藉由影片教學學習HTML與CSS基礎

  • 分享至 

  • xImage
  •  

今天要分享的是HTML教學中的製作一個簡單網頁換行、註解與空格有序列表與無序列表表格 Table以及超連結 a
首先先簡單介紹HTML,CSS,JavaScript的差別,如果以一間房子為例的話:
HTML->房屋的結構 CSS->房子的裝飾 JavaScript->讓房子有功能性(例如有冰箱可以裝食物飲料)
HTML(Hyper Text Markeup Language)
稱為超文本標記語言
Hyper Text:某人所撰寫的網頁,其他人也可以透過連結連到他的網頁,反之亦然。
Markeup Language:以Hello World!為例,左邊的括號為起始標籤,右邊則為結束標籤,透過這樣的方式可以知道某個段落是什麼樣類型的元素。
#需要瀏覽器(Chrome)與文字編輯器(VS Code),在VS Code中即可開始撰寫
一、製作一個簡單網頁
#內容詳細註解寫在截圖上!
https://ithelp.ithome.com.tw/upload/images/20240928/20167787FkrZ8eTAin.jpg
二、換行、註解與空格
#換行:
#註解:Windows->Ctrl+/ Mac->cmd+/
#空格:&nbsp
https://ithelp.ithome.com.tw/upload/images/20240928/20167787fNYLBTTUUY.png
三、有序列表與無序列表
https://ithelp.ithome.com.tw/upload/images/20240928/20167787GjlYW1G5hE.png
四、表格 Table
https://ithelp.ithome.com.tw/upload/images/20240928/201677878NuK3JRSwH.png
五、超連結 a
#開兩個檔案為index.html跟page2.html
index.html
https://ithelp.ithome.com.tw/upload/images/20240928/20167787zhEgfMcAsQ.png
page2.html
https://ithelp.ithome.com.tw/upload/images/20240928/20167787XDpLMdmY7l.png


以上是我今天的分享,謝謝大家!
參考網址:https://www.youtube.com/watch?v=fa214Ct6t9w&list=LL&index=3


上一篇
Day17 藉由影片教學學習Python基礎語法
下一篇
Day19 藉由影片教學學習HTML與CSS基礎
系列文
自主學習Python網路爬蟲-PTT爬蟲、Hahow爬蟲、Yahoo電影爬蟲實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言