HTML基礎篇最終回了?利用簡單易懂的基礎,一起建造屬於你的第一個網站吧!


上次介紹過了超連結還有插入圖片,還有一些簡單的操作了,那這次就先來教大家製作表格吧!
還沒看過或者忘記的可以先去複習一下哈哈哈😂
 
 
因為等一下想要用一個新的網頁教大家其他東西,所以就開新檔案來做表格,那首先,一樣先把該打的東西打一打,既然這裡是在講表格,<title>就叫table吧!
 
那整張表格我們會用<table>包裝起來,長這樣~~Post images
中間的空白就是我們要補上的表格內容

⚠️第一個要先注意的就是:當我們在編表格的時候,都是”一列一列”的寫喔!!!一定要記得!⚠️

只要寫一列,我們就用<tr>包起來,接著每一格儲存格都要分開來打,標題列是用<th>來標示,內文則是用<td>,看起來好像很複雜…那就讓我們實際一起來看看吧!Post images
Post images
噹啷!!呈現出來就像這樣!標題列也會比內文還要粗喔~
 
那我再加個兩行給大家看看!
Post images
Post images
 
但大家是不是覺得,雖然都有對齊看起來是一格一格的,可是還是不像是表格啊…🤔沒關係!只要在table標籤後面加上border=”1”來設定邊界,就可以啦!就像這樣
Post images
這樣就是一個完整的表格
Post images
 
那介紹完表格了,來介紹一下iframe吧!
Iframe的全名叫做inline frame,簡單來說就是可以在這網頁另外挖一個洞放其他網頁的東西等等,只要用<iframe>這個標籤就可以囉!因為是連到其他網站,所以也要加上「來源」喔!那我們一樣也延續一開始用的檔案來製作!
Post images
我隨便拿一個入口網站來給大家看(因為Google拒絕連線嗚嗚嗚😢
Post images
 
大家應該可以很明顯了解什麼叫做”在原本的網頁中開一個洞可以放入另一個完整的網頁”了吧,或許會有人想,啊這麼小是要怎麼看😤?別擔心!讓我們一起調整他的大小吧!寬度width=”xxx”高度則是height=”xxx”,如果想佔據版面的幾趴也是可以喔!
Post images
Post images
 
其實如果你今天想在網頁中嵌入youtube影片或是Google map,也都是用這個標籤喔!示範給大家看~
隨便在youtube上找一首歌,按下分享Post images
接著點擊嵌入
Post images
右邊就會出現一連串的程式碼
Post images
按下複製,在你的網站上貼上就完成囉!
Post images
Post images
 
最後也教大家怎麼切換iframe裡面的網頁,第一步很重要的就是要先幫iframe“取名字”,那我就拿左邊的來做示範,只要在剛剛的長寬後面加上 name=”xxx”就可以囉!
Post images
 
接著在下面打上超連結,我們就用剛剛的表格頁來示範
超連結標籤還記得嗎😊?其中有一個屬性叫做target,我們就是用他連到我們的iframe喔,打上target=”iframe1”就可以了,全部合起來長<a href="table.html" target="iframe1">表格</a>
表格點下去就會跳轉到這個表格那一頁囉!Post images
Post images
Post images
 
那今天的分享就到這裡告一個段落啦!
這幾篇下來也介紹了HTML的不少基礎,大家自己有空的時候也都可以利用這些功能去嘗試設計看看一個屬於你的網站喔~~~
 
最後附上原文文章
 
如果想了解更多跟程式有關的資訊也可以來這裡看看!
 
有想多了解哪一方面也都可以在下面留言喔~~~(雖然我也只是初學者啦😅

本文章發表於:課程

加入72

程式海獺

國立臺北大學 企業管理學系

追蹤 84 鼓勵作者

鼓勵作者

目前持有 Blink Coin: Loading..

選擇禮物


愛心

(Coin 10)

幫高調

(Coin 20)

咖啡

(Coin 30)

掌聲鼓勵

(Coin 40)

崇拜眼神

(Coin 50)

驚呆了

(Coin 60)

神人4ni

(Coin 70)

花束

(Coin 100)

鑽石

(Coin 300)

紅寶石

(Coin 500)

藍寶石

(Coin 1000)

黃寶石

(Coin 3000)


送出鼓勵



發表匿名文章不會出現你的大頭圖與名稱,你可暢所欲言,但文章內容務必遵守「佈告欄使用規範」!


回應

送出回應


1 則回應

匿名

2018-11-12 23:38 #1

鼓勵了作者

0

想回應這篇文章嗎?也想發表文章嗎?
馬上登入來發表文章、追蹤作者、收藏文章或回應文章吧!

註冊 登入