iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

跟著 OXXO 一起學 HTML 系列

吳柏毅 ( Uber Eats ) 什麼都點得到,就是點不到 HTML,對吧!?
由於 HTML 這麼簡單,大家都不太想分享,既然如此那我就來分享一下吧,透過鐵人賽分享 HTML 的相關知識,相信對於要入門網頁的朋友來說,一定非常實用喔!

----
大家好,我是 OXXO.STUDIO,我在 2021 年成立了 STEAM 教育學習網,在網站裡,我已經撰寫超過 1000 篇以上的教學文章,也包含了快 100 篇的 HTML 教學,這次會從我撰寫的文章中挑選相關內容分享,希望大家會喜歡。

鐵人鍊成 | 共 90 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文
DAY 28

( Day 28.1 ) HTML 點陣畫布 <canvas>

&lt;canvas&gt; 點陣畫布元素是 HTML 裡使用「像素」繪製圖案的元素,許多遊戲畫面、動態圖形或 3D 圖形渲染,都會使用 &lt;canvas&...

2023-09-28 ‧ 由 oxxo 分享
DAY 28

( Day 28.2 ) HTML 向量圖形 <svg>

&lt;svg&gt; 向量圖形元素是 HTML 裡使用「數學向量公式」繪製圖形的元素,所繪製的圖形就是所謂的 SVG 圖形 ( .svg ),因為向量圖形具有...

2023-09-28 ‧ 由 oxxo 分享
DAY 28

( Day 28.3 ) HTML 響應式圖片 <picture>

&lt;picture&gt; 響應式圖片元素可以在 HTML 裡放入適合不同解析度的圖片,當符合特定解析度時,就會顯示對應的圖片 ( 俗稱的響應式設計 ),這...

2023-09-28 ‧ 由 oxxo 分享
DAY 29

( Day 29.1 ) HTML alert() 彈出警告視窗

當網頁執行 JavaScript 的 alert() 方法時,網頁就會彈出警告視窗,進行提示使用者的動作,這篇教學會介紹兩種呼叫 alert() 開啟警告視窗的...

2023-09-29 ‧ 由 oxxo 分享
DAY 29

( Day 29.2 ) HTML confirm() 彈出確認視窗

當網頁執行 JavaScript 的 confirm() 方法時,網頁就會彈出讓使用者選擇「確認」或「取消」的視窗,同時會根據使用者的選擇,進行接下來的動作,這...

2023-09-29 ‧ 由 oxxo 分享
DAY 29

( Day 29.3 ) HTML prompt() 彈出輸入視窗

當網頁執行 JavaScript 的 prompt() 方法時,網頁就會彈出讓使用者「輸入文字」的視窗,透過使用者所輸入的文字,進行接下來的動作,這篇教學會介紹...

2023-09-29 ‧ 由 oxxo 分享
DAY 30

( Day 30 ) HTML 網頁中嵌入 YouTube 影片

YouTube 是目前全球最大的線上影音平台,這篇教學會介紹如何透過 HTML 的實作,將 YouTube 嵌入到網頁中,在網頁裡就能播放 YouTube 影片...

2023-09-30 ‧ 由 oxxo 分享

( Day 31 ) HTML 網頁中嵌入 Google 地圖

Google 地圖 ( Google Maps ) 是目前全球最多人使用的線上地圖,這篇教學會介紹如何透過 HTML 的實作,將 Google 地圖加到網頁中,...

2023-10-01 ‧ 由 oxxo 分享

( Day 32 ) HTML 網頁中嵌入 Google 日曆 ( 行事曆 )

Google 日曆 ( Google Calendar ) 是非常方便的線上日曆應用程式,不論是任何的作業系統,只需要打開瀏覽器就能看到自己所需的日曆行程,這篇...

2023-10-02 ‧ 由 oxxo 分享

( Day 33 ) HTML 網頁中嵌入 Google 表單 ( 簡易留言板 )

Google 表單 ( Google Forms ) 是非常方便的線上表單應用程式,通常會作為問卷的填表使用,但如果將其嵌入到網頁中,甚至也能當作簡單的留言板,...

2023-10-03 ‧ 由 oxxo 分享