HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。 由於結果會跟著瀏覽器顯示出來,相較於其他程式語言,HTML不會很抽象難懂,就算寫錯了,也非常好透過瀏覽器除錯。 什麼是HTML標籤? 每一種程式語言,都會有自己獨特的語法(syntax),藉由熟悉程式的語法我們可以跟不同的載具、軟體及其他程式語言做溝通。 而HTML的語法,主要是由HTML標籤(HTML Tag)所組成,一個標籤通常會由一組小括弧及在小括弧裡頭放入一小段語意單字。 通常標籤都是成對的出現,只要將要呈現在網站上的文字內容,用起始標籤(Opening Tag)及結尾標籤(Closing Tag)包起來,通常結尾標籤會比起始標籤多了一個「/」符號作為區分。 舉例來說,如果我想要建立一個標題我會(請點開程式碼閱讀): 在範例中,我使用了標籤及其結尾標籤,並把我想要的內容放到中間,一個段落就可以很簡單的透過HTML建立出來了。 最常用的這四種標籤 在還沒有打開一個網頁前,我們幾乎可以預測到裡面可能會有怎麼樣的內容,像是宣傳的圖片、文章、文章的標題、文章的段落等,其實這些常見的網頁內容,都可以透過HTML標籤建立出來。 以下我將舉四個常見的HTML標籤做示範,他們分別是: 使用建立網頁標題 建立網站的內容,就跟寫作一樣,需要有起承轉合,也需要能幫助讀者釐清閱讀內容的「標題」。 在HTML中,有一系列專門建立標題的HTML標籤,他們通常以h開頭,從文字大小由大至小分別為 在建立一個標題時,我們可以使用該標籤的起始標籤及結尾標籤將文字包住,就可以建立出我們想要大小的標題了。 使用建立網頁段落 建立好標題後,我們可以使用標籤來建立文章段落,一組就代表完整的一個段落,如果想要另起新的段落的話,我們就會使用第二組的標籤: 使用建立超連結 說完了及標籤,大家現在對於HTML標籤就有了初步的認識,但要靠著這兩個標籤就想要排版出一段文章是不可能,所以接下來我就要介紹另外一個常常在網頁中看到的HTML標籤:a連結。 連結與及標籤一樣,都是成對的出現,並在其中放入我們想要的內容,但我們常見的超連結,除了會顯示連結的名稱外,點擊後來會連到其他網頁,這是怎麼做到的呢? 透過程式碼,我們可以看到標籤與及標籤有些不同,在起始標籤的部分多了一段href=www.google.com的文字。 在這裡只要先知道,在href=” ”的引號中,填入我們想要連結的網址,並一樣將顯呈現的文字內容填入成對的標籤內,就可以打造出超連結的效果。 通常我們並不會單一個標籤自己存在使用,而是有可能與段落混用,在一些特定的文字上加入連結,創造一些行銷的網頁效果。 從範例程式碼當中,我們可以了解到HTML標籤是可以被堆疊的,在一組標籤中,還可以建立出例外一組標籤,但使用時必須注意,這些標籤必須成對出現,不然就會出錯。 使用建立圖片 學習連結標籤後,我們接著要了解一個少數在HTML這個語言中,不成對的HTML標籤。 透過標籤我們可以很輕鬆的建立出一張圖片,從範例中我們可以看到,它只需要自己一個獨立標籤就能創造出效果,而不需要結尾標籤。 除了是不成對的標籤外,他也有與文字標籤或是標籤不同的屬性,分別為及,兩個的意思分別為sourcs及alternative description,代表著圖片的來源及替代敘述。 我們可以在src=” ”中填入圖片網址,或是圖片在本機電腦的位置,就可以在瀏覽器當中呈現圖片了。 而alt=” ”的作用在於,圖片有時候可能會因為各種原因,像是網路不好、圖片連結失效而導致圖片失效,這時候在alt=” ”中填入替代文字,就可以在文字失效時帶入替代圖片出現的文字。 另外一個alt的作用在於,世界上有許多因視障而不良於使用網站的用戶,這些用戶可以使用特別的軟體,將網站內的內容讀出來,但因為圖片並不是文字,沒有辦法被讀取到,我們就必須加上alt裡的替代文字,創造無障礙的網站環境。 在初學網頁開發時,很多人都會偷懶不填alt裡的值,但其實這是網頁開發的大忌,因為沒有人可以完全保證這張圖片可以被另外一端的使用者看到,甚至可能會帶有歧視視障者的意味。 在今天章節當中,主要是要讓大家對於HTML標籤有初步的認識,後續會跟大家分享更多有關HTML標籤的基礎知識,請大家敬請期待! 關於網頁技術的問題,歡迎你下方留言跟我討論與交流:) 希望今天的文章有幫助到正在閱讀的你,如果你喜歡我的文章的話,可以留下你的愛心或是收藏我的文章,也或者可以點選「贊助」,你的一杯咖啡絕對是我持續寫下去的動力!或是透過拍拍手,用你小小的行動支持我的創作! 我是Vivian,我們下次見。 也許你會對這個有興趣: 關於我: 2019年從英文系畢業,2021下定決心開啟轉職工程師的新生活,相信不斷學習會有成長的一天。 |Instagram: Vivian Yeh|vivian_enlife |聯絡我:vivian.enlife@gmail.com