網頁設計教學系列-從基本HTML語法開始!

最近我自己想了一下,因為自己平常都比較再研究HTML和WORDPRESS這一塊,加上時代的趨勢,HTML5的語法學會又是勢在必行,所以之後寫的文章會比較偏向網頁設計和一些網路行銷的東西,CHROME和FB社群教學有一些新的發現還是會陸續的寫,以及一些新的科技快訊等等的,畢竟我們要知道現在時代發生什麼事情,來看看今天最基本的教學。

HTML基本語法

今天分享的東西真得是網頁設計中基本的基本,但是就以網頁設計長久角度來講,這些基本功是要很紮實必須要會的,最後我也會分享一些基本HTML語法的網站,讓比較基礎者的人,可以更快的上手!

HTML文件類型

首先我們看到這張圖,

最上面的文件類型宣告,也就是宣告這是什麼類型的網頁,像HTML就像圖片中的寫法一樣,分享一下HTML5的開頭是怎麼寫的,"<!DOCTYPE HTML>",相當簡短簡單,那你會問DOUBLE冠說,怎麼不分享HTML5語法開始,凡是有循序漸進,另一方面HTML都不懂得話,再學HTML5應該是完全看不懂,因為語法整體都不太一樣!

<head></head>這一段就是要宣告一些動態變數,像有時候CSS也可以寫在這邊,或者是一些javascrip、jquery等等,都可以寫在這邊,之後再寫在<body></body>網頁內容部分去呼叫就可以,所以<body></body>就是指整體網頁呈現出來的感覺!

CSS外部連結

上面這一張圖是WORDPRESS外部連結CSS,通常都是連結到style.css那邊,另外如果像DW用的本機端測試這些,它會像這張圖這樣,

基本語法測試

像我這邊在body裡面打一個<p>開始,如果你要打入一些字,在原始碼你必須打入在<p></p>的中間,或者是像<span></span>這種也可以,我這邊打一些字做測試,

呈現出來的效果就是這樣子,

如果你要讓它有顏色,原本是<p></p>,打成<p style="color:#000″></p>,中間再插入一些文字,文字顏色就會改變了,

呈現出來的效果,

如果最後你要讓它呈現在中間,<p style="text-align:center;color:#000″></p>中間再插入一些文字就可以了,

 

最後講到HTML語法是很基本的功夫,所以這邊我會分享幾個網站讓大家去自學一下,因為之後分享的文章對初學者來說,可能比較難懂,不過我還是會想辦法看怎麼呈現,會讓每一個人容易了解,因為自己現在也正在學,就順便分享給大家,也可以一起討論看有沒有什麼問題,以上的分享希望你會喜歡!

HTML教學

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>