網頁設計教學系列-HTML5語法分享!

今天要介紹的東西,就是最近還滿夯的HTML5,這篇只是從一些基礎的東西開始分享,大概了解基本的觀念而已,之後如果學到更多好玩的東西,再一次分享給大家,不過昨天這樣摸一摸,還滿佩服賈伯斯所帶來當的創意,雖然HTML5還沒有真正完全到答一個標準,不過我想這是遲早的趨勢,一起來看!

比如我們呈現效果像下圖這樣,以前用HTML4語法也很簡單,就很多區塊設DIV就行了,這邊要分享HTML5的寫法,

HTML5文件檔頭簡單設定

以往我們熟悉的HTML語法,剛開始文件一開頭都會這樣寫,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

但HTML5的文件一開頭寫法相當簡單,只要像下圖這樣寫就可以

<!DOCTYPE html>

寫法變得相當簡單,

我們從WORDPRESS預設佈景也看到是這樣子寫的

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

那就開始分享上面那張圖的寫法,

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>HELLO您好</title>

<style type="text/css">

body {

    background: #FFF url(圖片位置);

}

p {
      font-family: "Courier";

    font-size: 12px;

}

section {
      display:block;

    float:left;

    padding:20px;

    background:#F00

}

</style>
  </head>

<body>
  <header>

<h1>HELLO您好</h1>

</header>

<section id="memo">

  <h3>GO</h3>

  <p>這是一篇HTML5教學</p>

  <p><b>教學一</b>b的意思是<br>

  <b>教學二</b>認真教學<br>

  <b>教學三</b>一起加油</p>

</section>

<section id="photo">

  <p><img src="圖片位置"></p>

  <p><img src="圖片位置"></p>

</section>

</body>

</html>

這邊講一下SECTION的意思,因為HTML5的寫法是語意標籤,也就是說,你只要看原始碼,就會很清楚整個鋪陳架構,當然要先懂HTML5語法才清楚,不像以往的HTML4可能要使用DIV來架構,可能整個網頁看完還不知道在寫什麼,當然用FIREBUGLITE我想也會更得心應手,比如寫<section id=memo>,指得就是memo那一段文字,整個鋪陳架構是相當清楚的,以上舊今天分享,要看懂上面語法,也必須要會CSS+HTML的基礎概念,有不懂得再問吧! 

熱門相關文章

網頁設計教學系列-CSS+DIV排版-1
今天要分享的東西,也是網頁設計很基本的排版設計,以WORDPRESS來看,就是一塊header+content+sidebar+footer的一種排版方式居多,所以今天這裡要先介紹基本類似的兩欄式排版方式,先從基礎的學起,以後在用其它東西時,會比較得心應手,話不多說,馬上開始今天的排版教學! CSS排版教學 CSS+DIV排版 首先我們來看我們想要達到的效果,這是預覽CHROME17的畫面, HTML原始碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" ...
繼續閱讀
網頁設計教學系列-從基本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教學導覽:按這裡 飛肯設計:按這裡 HTML:按這裡
繼續閱讀
網頁設計教學系列-CSS+DIV排版-2
今天再度要來分享CSS排版系列,現在CSS+DIV的排版是一定要學會的基本功,這樣你才能靈活用在像是之後HTML5語法上面,或者是WORDPRESS等等,因此這裡的文章都會從一些基本的教起,如果有什麼樣的問題,歡迎大家來提問,這樣大家才會一起進步,話不多說,趕快來看今天的教學吧! CSS排版 我們先來到網站想要變成的雛形,我們很常看到國外網站是這樣子排版的,就像以下這張圖一樣, 發現中間一個大區塊,下面三個小區塊,所以我們可以把構想做成這樣,用顏色來代替, 這是預覽CHROME17的畫面,現在就要分享這個架構的原始碼! HTML原始碼 <body> <div id="total"> <div id="header"> banner區塊</div> <div id="content"> <div class="left"> 內容左區塊</div> <div class="middle">內容中間區塊</div> <div class="right">內容右區塊</div> </div> <div id="footer"> ...
繼續閱讀
網頁設計教學系列-兩款好用的CSS3產生器幫你快速上手CSS3
今天要講的東西,是最近比較流行的CSS3,平常我們會說做一個網頁是透過HTML+CSS來完成,但CSS的部分,它有分成CSS1、CSS2、以及最近流行的CSS3,不過大家也一直很好奇CSS3到底是什麼,所以今天要講兩個網站,可以幫大家快速上手一些CSS3語法,讓你在使用CSS3上面可以更加得心應手! 最近有看DOUBLE冠網站的人應該有發現,我的框框是長這樣子的, 這邊我是用一些CSS3語法去產生出來的,但CSS3的語法能在那些瀏覽器使用又是個問題,所以這邊先介紹第一個超好用的網站, CSS3.0 MAKER 網站名稱:CSS3.0 MAKER 網址:按這裡 這款是我覺得很好用的一個網站,它主要可以透過一些簡單介面來產生CSS3語法以外,還會告訴你這個CSS3語法可以在那些版本以上的瀏覽器使用,左邊區塊介面為調整,右邊就是CSS3語法,中間那一區塊就是產生出來的樣子,讓我們一一用它不同功能做測試! 我們按到上方的”BORDER RADIUS”,這就像DOUBLE冠上面的框框語法一樣,比如我用一個段落來做測試,做得效果像以下這張圖一樣,瀏覽器版本的話,中間產生樣子的下面都是支援的瀏覽器版本喔,IE基本一定要IE9,也就是WIN7才能用IE9,這個要注意一下! 測試用 HELLO 您好 接下來我們用到TEXT-SHADOW那邊,我想要用像下圖這樣的效果,"TEXT SHADOW"代表著是文字陰影,也就是文字會產生陰影的效果,以往都是用PHOTOSHOP產生陰影,不過用圖多少會拖網站速度,所以CSS3有增加這樣的功能! 測試用二 HELLO 您好 我們再移到"BOX-SHADOW"那邊,這是整個區塊產生陰影,就像圖所似一樣, 測試用三 之後再為大家講解所謂的翻轉,這邊為大家介紹第二個網站, border-radius 網站名稱:border-radius 網址:按這裡 這邊介紹詳細的框框語法,像這個是可以快速產生各個框框的部分,原理也很簡單,只要調數字就可以了,比如像下圖這樣, 為大家講一下語法意思, -webkit-border-radius: CHROME能看得圓角框。 -moz-border-radius: 12px;:火狐能看得圓角框格式。 border-radius: 12px;;IE能看到的圓角框模式,通用於CHEOME! 像上圖一樣的效果, 測試用四 以上分享到這邊,有問題再問吧!
繼續閱讀
網頁設計教學系列-CSS+DIV排版-1
網頁設計教學系列-從基本HTML語法開始!
網頁設計教學系列-CSS+DIV排版-2
網頁設計教學系列-兩款好用的CSS3產生器幫你快速上手CSS3

發表迴響

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

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