2

分享

自主學習課:HTML基本概念-可能創學台南-2021春學W5D2

HTML

HTML(Hypertext Markup Language),中文全名叫「超文字標示語言」,是一種標記語言(markup language),不是我們一般熟知的程式語言,它會告訴瀏覽器該如何呈現你的網頁,單純、簡易或是超複雜的頁面都沒問題。
HTML 包含了一系列的元素,元素包含了標籤內容,標籤用來控制內容的呈現樣貌,例如字體大小、斜體粗體、在文字或圖片設置超連結。網頁內容的組成,包含了段落、清單、圖片或表格等。

舉例來說

My cat is very fat.
如果我要它自成一個段落,就需要幫它前後分別加上段落標籤,讓它成為一個段落元素。
<p>My cat is very fat</p>
上面的段落元素,就是一個非常簡單的基本架構,<p>跟</p>就是起始標籤結束標籤,中間的句子就是內容,而整個段落就是元素

巢狀元素

元素中加入元素,就是巢狀元素(nesting element),以上面的句子為例:「我的貓有夠胖」,如果我想強調「有夠」,那我就可以讓這兩個字成為顯示粗體的元素。
<p>My cat is <strong>very</strong> fat</p>  -->My cat is very fat

HTML 文件的架構

一個完整的HTML頁面它所需要包含的要素有:
  • <html> 元素,又被視為根元素(root element),包含了所有顯示在這個頁面上的內容。
  • <head> 元素,這裡面放的是你想涵蓋的重要資訊,但不會顯示在網頁上。
  • <body> 元素,包含了所有會顯示於網頁上的內容。 無論是文字、圖片、影面、互動遊戲等。
  • <title> 元素,網頁標題。

其他

除了上面所說,還有像是...
  • 圖片
  • 標記文字(標題、段落、清單)
  • 連結
等其他元素的運用。

練習

以下是今天練習html所製作的簡單網頁,包含標題、圖片嵌入、清單、超連結...等運用。

頁面樣貌

程式碼

分類:日記

*゚▽゚*

評論
上一篇
  • 美學課:參加多媒材競賽的創作歷程-可能創學台南-2021春學W5D1
  • 下一篇
  • 美學課:『賴上藝術』造形與控制-可能創學台南-2021春學W5D2
  • 更多文章
    載入中... 沒有更多了