คู่มือเริ่มต้นของการสร้างเว็บเพจ HTML5 / CSS3

บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน.

HTML5 และ CSS3 กวาดล้างเว็บโดยพายุในเวลาเพียง 2 ปี ก่อนที่พวกเขาจะมีความหมายที่เปลี่ยนแปลงไปมากมายในแบบที่นักออกแบบเว็บคาดว่าจะสร้างหน้าเว็บและด้วยการมาถึงของพวกเขาได้รับการสนับสนุนที่ยอดเยี่ยมเช่นสื่อทางเลือกแท็ก XML สไตล์และคุณสมบัติอินพุตแบบก้าวหน้าสำหรับนักออกแบบเว็บ คุณสมบัติเช่นภาพเคลื่อนไหว.

แม้ว่านักพัฒนาซอฟต์แวร์ส่วนใหญ่จะแสดงศักยภาพที่มีความซับซ้อน แต่การสาธิต HTML5 / CSS3 ไม่ใช่วิทยาศาสตร์จรวดจริง ๆ และฉันจะแนะนำคุณผ่านขั้นตอนการผ่อนคลายเพื่อสร้างเว็บเพจ HTML5 / CSS3 มาตรฐานพร้อมคำอธิบายเชิงลึก โบนัสเช่นทรัพยากรการเรียนรู้และเทมเพลต HTML5 ฟรีมีให้บริการสำหรับคุณดังนั้นโอกาสนี้ที่จะเริ่มต้นการเดินทาง HTML5 ของคุณ!

การเปลี่ยนแปลงระหว่าง HTML4 และ HTML5

คุณอาจสงสัยว่าทำไมการเปลี่ยนเป็น HTML5 ถึงสำคัญ มีเหตุผลมากมาย แต่ส่วนใหญ่เป็นเพราะคุณจะ ทำงานกับมาตรฐานอินเทอร์เน็ตทั่วโลก เหมือนนักออกแบบคนอื่น ๆ ด้วยวิธีนี้คุณจะพบการสนับสนุนเพิ่มเติมทางออนไลน์และของคุณ เว็บไซต์จะแสดงผลอย่างถูกต้องในเบราว์เซอร์ที่ทันสมัย ซึ่งมีการปรับปรุงอย่างต่อเนื่อง.

(ที่มาของภาพ: W3C)

การเปรียบเทียบระหว่าง HTML4 และ HTML5 นั้นยากที่จะมองเห็นที่ระดับพื้นผิว จากการดูแบบร่าง HTML5 ใหม่คุณสามารถดูองค์ประกอบที่โดดเด่นและขั้นตอนการจัดการข้อผิดพลาดที่ถูกต้อง นักพัฒนาเบราว์เซอร์มีความสุขกับข้อกำหนดใหม่สำหรับการแสดงผลหน้าเว็บเริ่มต้นโดยเฉพาะ.

มีอะไรมากกว่าจาก HTML5 คือการแปลงเว็บเบราว์เซอร์ที่ทันสมัยของเรา ด้วยข้อกำหนดใหม่เหล่านี้ทำให้เว็บโดยรวมถูกมองว่าเป็น แพลตฟอร์มแอปพลิเคชัน สำหรับ HTML (โดยเฉพาะ HTML5), CSS และ JavaScript ที่จะสร้างขึ้น นอกจากนี้ระบบนี้อย่างหรูหรา สร้างความสามัคคีระหว่างนักออกแบบเว็บไซต์และนักพัฒนา โดยการตั้งค่ามาตรฐานทั่วไปที่เบราว์เซอร์ทั้งหมดควรปฏิบัติตาม.

นอกจากนี้องค์ประกอบจำนวนมากได้ถูกสร้างขึ้นเพื่อ แสดงสื่อดิจิตอลยุคใหม่. เหล่านี้ ได้แก่ และ ซึ่งมีขนาดใหญ่สำหรับการสนับสนุนมัลติมีเดีย ในบางเบราว์เซอร์คุณสามารถตรวจสอบความถูกต้องของฟอร์มได้โดยตรงใน HTML ได้รับยังมีความต้องการหนักสำหรับ jQuery เนื่องจากมีนักพัฒนาซอฟต์แวร์จำนวนมากที่ยังไม่รู้จักคุณสมบัติ หากคุณต้องการรายการแท็กตรวจสอบตาราง W3Schools นี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับพวกเขา.

Bare HTML5 Skeleton

ฉันพบวิธีที่ง่ายที่สุดในการทำความเข้าใจกับหัวข้อใด ๆ ดำดิ่งลงไป. ดังนั้นฉันจะสร้างเทมเพลตโครงกระดูก HTML5 พื้นฐานมากสำหรับหน้าเว็บ ฉันรวมองค์ประกอบใหม่บางส่วนซึ่งฉันหวังว่าจะจัดหมวดหมู่อีกเล็กน้อยในภายหลัง.

   หน้า HTML5 แรกของเรา       ยินดีต้อนรับทุกท่านและท่าน!
   บ้าน
 เกี่ยวกับเรา
 รายชื่อผู้ติดต่อ
 
 
 
   เนื้อหาบางส่วนที่นี่.
 
  แต่บางที่นี่เช่นกัน!
 
 
  ประกาศเกี่ยวกับลิขสิทธิ์และกฎหมายบางส่วนที่นี่ อาจใช้สัญลักษณ์©เล็กน้อย.

ทันทีนี้ไม่แตกต่างจากหน้าเว็บมาตรฐาน HTML4 สิ่งที่คุณอาจสังเกตเห็นคือพวกเรา ไม่จำเป็นต้องรวมแท็กปิดตัวเองอีกต่อไป. นี่เป็นข่าวที่ยอดเยี่ยมอย่างแท้จริงเพราะจะช่วยประหยัดเวลามากมายในการพัฒนาโครงการของคุณ.

สำหรับผู้ที่ไม่ทราบว่าใน XHTML ร่างมีองค์ประกอบหลายอย่างที่มีข้อความ ปิดตัวเอง. สิ่งเหล่านี้จะจบลงด้วยเครื่องหมายสแลชก่อนตัวดำเนินการ 'มากกว่า' เพื่อบ่งบอกว่าคุณไม่จำเป็นต้องรวมแท็กปิดอื่นที่อื่น ตัวอย่างเช่นในการสร้างเมตาแท็กคำหลักที่คุณจะใช้ โดยไม่จำเป็นต้องปิด ที่อื่น ๆ.

กฎนี้ยังคงใช้ใน HTML5 แต่ตอนนี้คุณ ไม่จำเป็นต้องใช้สแลชพิเศษอีกต่อไป! สมบูรณ์ ถูกต้อง, แม้ว่าคุณจะได้รับอนุญาตให้ใช้งานมาตรฐาน XHTML / XML ต่อไป สำหรับเบราว์เซอร์ที่เป็นไปตามมาตรฐานทั้งหมดองค์ประกอบทั้งสองจะแสดงผลในลักษณะเดียวกัน.

การกำหนดพื้นที่หน้าของเรา

รหัสใหม่ส่วนใหญ่ของเราไม่น่าตกใจเกินไป ของเรา doctype ง่ายขึ้นอย่างสนุกสนาน มากขึ้นกว่าเดิม, ไม่จำเป็นต้องมีคุณสมบัติของร่างกายมากเกินไป, และข้อมูลในส่วนหัวของเรามีป้ายกำกับชัดเจน การย้ายที่ฉันต้องการที่จะมุ่งเน้นความสนใจของคุณในเนื้อหาภายในของเรา แท็ก ซึ่งรวมถึงโครงสร้างทั้งหมดของหน้าหลัก ฉันตั้งใจใช้แท็ก HTML5 ที่ดีสักสองสามจุดเพื่อแสดงว่าคุณอาจรวมไว้ในงานของคุณเองได้อย่างไร.

ก่อนอื่นคุณจะเห็นทั้งหน้าคือ ห่อหุ้มภายใน div แท็ก. ฉันติดป้ายกำกับนี้ด้วย ID ของ เสื้อคลุม, ความหมายมันล้อมรอบเนื้อหาเว็บไซต์ทั้งหมดของเรา นี่คือ มีประโยชน์ในการตั้งค่าความกว้างสูงสุดหรือเนื้อหาตำแหน่ง รอบ ๆ หน้าจอ ต่อไปฉันได้แยกหน้าออกเป็น 3 องค์ประกอบหลัก - หนึ่ง

, หลัก

, และสั้น

. ภายในพื้นที่ส่วนหัวที่กำหนดเองของฉันฉันได้เพิ่มการแสดงผลที่เรียบง่ายของชื่อหน้าและรายการการนำทางโดยใช้

แท็กเป็นเสื้อคลุม.

ตอนนี้สำหรับ

ด้วย ID ของ แกน ฉันได้สมัครรอง clearfix. คุณลักษณะนี้ทำให้เราสามารถ ลอยได้อย่างอิสระ 2 คอลัมน์ภายใน และเราจะไม่พบเนื้อหาที่ถูกทิ้งหรือปรากฏการณ์แปลก ๆ และอย่างถูกต้องดังนั้นภายในฉันมีสอง

แท็กซึ่งจะรวมพื้นที่เนื้อหาหลักและแถบข้างของเราตามลำดับ เราจะใช้สไตล์ CSS เพื่อแยกพวกมันออกจากกัน.

ในทำนองเดียวกันความเงียบสงบ ฟุตบอล แท็ก ทำงานได้ดีเพื่อแยกความแตกต่างของเนื้อหาระหว่างหน้า ข้างในฉันได้วางย่อหน้าเคร่งขรึมซึ่งอาจมีข้อมูลลิขสิทธิ์และความเป็นเจ้าของบางส่วน แต่โอกาสที่ดีคุณจะต้องเพิ่มเนื้อหาอีกเล็กน้อยเช่นลิงก์รองไปยังหน้าเว็บของคุณ.

ตัวช่วยสร้าง CSS3 ที่สร้างสรรค์

เพื่อทำให้โครงร่าง stencil พื้นฐานนี้สิ้นสุดลงเราสามารถใช้สไตล์ CSS ได้สองสามแบบ ในเทมเพลต HTML5 พื้นฐานฉันเพิ่ม สไตล์ชีท CSS ภายนอก เพื่อให้เราสามารถแยกส่วนรหัสของเรา นี่จะ กำจัดความสับสนมากมาย ในระยะยาวเมื่อหน้าและสไตล์ของคุณเริ่มทำงานสำหรับหน้าต่างๆ.

(ที่มาของภาพ: W3C)

ดังนั้นฉันจึงไม่ได้ใช้เวลากับ CSS เป็นจำนวนมาก แต่เพียงพอที่จะแสดงเอฟเฟ็กต์เรียบร้อย ก่อนอื่นฉันใช้บางอย่าง การตั้งค่ารัศมีเส้นขอบ เพื่อสร้างเอฟเฟ็กต์โฮเวอร์ลิงก์ลิงก์ที่ยอดเยี่ยม คุณสามารถกำหนดเป้าหมายเอฟเฟกต์เดียวกันนี้ได้ในโค้ดเทมเพลตเพียงเพิ่มบรรทัดต่อไปนี้ลงในเอกสาร CSS.

 nav display: block; ระยะขอบล่าง: 10px;  nav ul list-style: none; ขนาดตัวอักษร: 14px;  nav ul li display: inline;  nav ul li a display: block; ลอย: ซ้าย; การขยาย: 3px 6px; สี: # 575c7d; การตกแต่งข้อความ: ไม่มี; น้ำหนักตัวอักษร: ตัวหนา;  nav ul li a: hover background: # deff90; สี: # 485e0f; -webkit-border-radius: 3px; -moz-border-radius: 3px; รัศมี - ชายแดน: 3px; การขยาย: 3px 6px; กำไรขั้นต้น: 0; การตกแต่งข้อความ: ไม่มี;

ผลกระทบที่เรียบร้อยก็คือ รูปแบบที่ชัดเจน. นี่ไม่ใช่แนวคิดใหม่ทั้งหมดด้วย CSS3 แต่เป็นสิ่งสำคัญสำหรับการสร้างหน้าเว็บที่ได้มาตรฐาน บ่อยครั้งที่คุณกำลังมองหาเนื้อหาที่ลอยอยู่ติดกันคุณจะพบกับความผิดพลาดของตำแหน่งบั๊กกี้ สิ่งนี้เกิดจากระยะเยื้องและข้อผิดพลาดในการตั้งค่าความกว้างสัมบูรณ์สำหรับเนื้อหาที่ลอยอยู่ของคุณ.

แนวคิดนี้อาจดูสับสนเล็กน้อยและฉันได้เพิ่มโค้ดเล็กน้อยด้านล่างเพื่อช่วย โดยพื้นฐานแล้วเรากำหนดเป้าหมายสองประการ

องค์ประกอบ, #ซ้าย และ #ขวา เพื่อให้สอดคล้องกับด้านข้างของหน้า ฉันตั้งค่าแต่ละอันด้วยความกว้างแน่นอนและปล่อยทางซ้ายดังนั้นพวกมันจะสแต็คขวาถัดจากกันและกัน เนื่องจากภาชนะของเรา div # หลัก มี clearfix คลาสซึ่งหมายความว่าเนื้อหาภายในทั้งหมดสามารถ จะย้ายไปรอบ ๆ ได้อย่างอิสระ และจะล้างพื้นที่เพิ่มเติมในภายหลังโดยอัตโนมัติ.

/ * page core * / div # core display: block; ชัดเจน: ทั้งสอง; ระยะขอบล่าง: 20px;  ส่วน # left width: 550px; ลอย: ซ้าย; มาร์จิ้น: 0 15px;  ส่วน # right float: left; ความกว้าง: 300px;  / * clearfix * / .clearfix: หลัง content: "."; จอแสดงผล: บล็อก; ชัดเจน: ทั้งสอง; ทัศนวิสัย: ซ่อนอยู่; ความสูงบรรทัด: 0; ความสูง: 0;  .clearfix display: inline-block;  html [xmlns] .clearfix display: block;  * html .clearfix height: 1%;

บิตของรหัสเหล่านี้ง่ายสำหรับการเริ่มต้น พวกเขายังเกี่ยวข้องกับรหัสเทมเพลต HTML5 ของเราที่สร้างขึ้นก่อนหน้านี้ดังนั้นนี่จึงเป็นวิธีปฏิบัติง่ายๆ แต่เมื่อพูดถึงเว็บขยะจริงคุณจะต้องมองหาฟังก์ชั่น CSS3 เพิ่มเติม.

ไวยากรณ์ CSS3 ที่รู้จักกันน้อยกว่า

ในการสร้างเว็บเพจ HTML5 / CSS3 แบบเต็มคุณจะเริ่มใช้สไตล์ชีตที่ซับซ้อนมากขึ้น นักออกแบบหลายคนรู้ว่ารหัสชวเลข (เช่น แบบอักษร: คุณสมบัติ) เนื่องจากสิ่งเหล่านี้เป็นมาตรฐานมาก่อน CSS2.

แต่มีคุณสมบัติใหม่บางอย่างใน CSS3 ที่นักออกแบบหลายคนไม่ได้คิด สิ่งเหล่านี้ส่วนใหญ่ไม่ได้มีไว้เพื่อความสวยงามเท่านั้น แต่ยังรวมถึงเอฟเฟ็กต์ภาพเคลื่อนไหว ด้านล่างนี้เป็นรายการสั้น ๆ ที่อธิบายคุณสมบัติบางประการที่คุณอาจพิจารณาเล่นด้วย ลอง googling เพื่อดูตัวอย่างไวยากรณ์หากคุณรู้สึกว่าหายไป.

กล่องเงา: เพิ่มเอฟเฟกต์เงาที่เรียบร้อยให้กับองค์ประกอบหน้าเว็บของคุณ คุณจะได้รับ 4 พารามิเตอร์ซึ่งกำหนดตำแหน่งซ้าย / ขวาขึ้น / ลงเงาเบลอและสี โปรดทราบว่าเงาของกล่องจะไม่ถือว่าพื้นที่เพิ่มเติมเป็นความกว้าง / ความสูงเดิม.
ข้อความเงา: สร้างเงาที่สวยงามด้านหลังข้อความหน้าเว็บของคุณ ด้วยเอฟเฟ็กต์ที่ถูกต้องตัวอักษรของคุณอาจปรากฏขึ้นเพื่อออกหน้า.
border-radius: มุมโค้งมนใช้เวลานานกว่าจะเป็นมาตรฐานที่ยอมรับได้ ไม่กี่ปีที่ผ่านมานักออกแบบเว็บ 2.0 หลายคนกำลังสร้างภาพพื้นหลังเพื่อให้พอดีกับมุมที่โค้งมนด้วย CSS แต่การใช้รัศมีชายแดน CSS3 คุณสามารถจัดการโค้งของแต่ละเส้นขอบบนองค์ประกอบใด ๆ.
ความทึบแสง: ดูเหมือนว่าเป็นอสังหาริมทรัพย์ที่นักออกแบบไม่ควรพิจารณา ความทึบคาดว่าอินพุตตัวเลขจะมีค่าตั้งแต่ 0 ถึง 1.0 (0% - 100%) เอฟเฟกต์นี้ใช้งานได้ดีเหมือนภาพเคลื่อนไหวโฮเวอร์.
@ font-face: อีกตัวอย่างที่สวยงามของสไตล์ CSS และการพิมพ์ที่ซับซ้อน ขณะนี้นักออกแบบเว็บไซต์สามารถทำงานกับแบบอักษรที่กำหนดเองโดยกำหนดให้เป็นตัวแปรในเอกสาร CSS ของคุณ.
กล่องขนาด: โดยขนาดกล่องเริ่มต้นจะตั้งองค์ประกอบทั้งหมดของคุณเป็น เนื้อหากล่อง. ซึ่งหมายถึงความกว้างการขยายและขอบทั้งหมดรวมอยู่ในความกว้างสูงสุด แต่กำหนดให้ ชายแดนกล่อง คุณสามารถกำหนดความกว้างสูงสุด (พูด 20px) และเพิ่มช่องว่างภายใน / ขอบจะรวมตัวเองเข้าไปในนี้จึงลบพื้นที่ภายในวัตถุ มันเป็นคุณสมบัติที่ยอดเยี่ยมเมื่อคุณเชี่ยวชาญความชำนาญ.

คุณสมบัติเหล่านี้ล้วนมีข้อดีและข้อเสีย ฉันจะไม่แนะนำให้พยายามยัดพวกเขาทั้งหมดในหน้าเว็บของคุณ แต่ การฝึกฝนจะทำให้คุณมีความคิดที่ชัดเจน เพื่อเข้าสู่การพัฒนาเว็บไซต์เพิ่มเติมได้อย่างง่ายดาย.

ส่วนหลักเพิ่มเติมของไวยากรณ์เพิ่มเติมที่ควรค่าแก่การกล่าวถึงคือ ตัวเลือกคุณสมบัติ. ด้วย CSS3 คุณสามารถทำได้ตอนนี้ กำหนดสไตล์ขึ้นอยู่กับคุณสมบัติ HTML (เช่นประเภท href ชื่อเรื่อง) และแม้กระทั่งให้ค่าที่เฉพาะเจาะจง ตัวอย่างเช่นเราสามารถกำหนดเป้าหมายลิงก์ด้วยแอตทริบิวต์หัวเรื่องที่กำหนดและให้ไอคอนชุดพื้นหลังแก่พวกเขา.

 ul li [title ^ = "ico"] background: url ('my-icon.gif');

หากคุณสังเกตเห็นว่าฉันได้รวม สัญลักษณ์รูปหมวก ก่อนเครื่องหมายเท่ากับ นี่คือผู้ประกอบการซึ่ง กำหนดรายการทั้งหมดที่ถือคำนำหน้า, ICO. หรือคุณสามารถแทนที่เครื่องหมายรูปหมวก (^) ด้วยเครื่องหมายดอลลาร์ ($) เพื่อกำหนดเป้าหมายพื้นที่ส่วนต่อท้ายของชื่อเรื่องของคุณ ด้วยวิธีนี้ CSS3 รู้วิธีเพิ่มภาพพื้นหลังที่คุณสามารถตั้งชื่อเป็น 'แรก ico' หรือ 'book ico' อ่านเพิ่มเติมเกี่ยวกับตัวเลือกคุณลักษณะหากคุณสนใจ.

วางมันทั้งหมดเข้าด้วยกัน

ที่เป็นแกนหลักของหน้าเว็บ HTML5 และ CSS3 คือ ความง่าย. นักพัฒนาเว็บพยายามสร้างเว็บไซต์ที่มีความคิดสร้างสรรค์สูงโดยใช้เวลาน้อยลงและมีความเครียดน้อยลง คุณสมบัติใหม่ใน HTML5 อนุญาตให้มีพื้นที่ห้องเลื้อยมากมาย และการใช้ตัวเลือกและคุณสมบัติ CSS3 ใหม่บางอย่างจะทำให้คุณได้เปรียบในระยะยาว.

(ที่มาของภาพ: W3C)

แต่คุณควรจะเป็นเช่นนั้น พิจารณาจากผู้ใช้. กระบวนการสร้างหน้าเว็บจะสิ้นสุดลงในที่สุดหลังจากเปิดตัวเว็บไซต์สาธารณะ เป้าหมายของคุณคือ โปรดผู้ชมด้วยข้อมูลที่เข้าถึงได้ง่าย, และไม่เพียง แต่เป็นมนุษย์ผู้อ่าน แต่ ซอฟต์แวร์รวบรวมข้อมูลของเครื่องมือค้นหาและบอทการจัดทำดัชนี. ซีแมนทิกส์มีการพัฒนาอย่างมากเพื่อรวมองค์ประกอบเลย์เอาต์ HTML5 ใหม่โดยแยกเลย์เอาต์ของหน้าอย่างสม่ำเสมอ มันง่ายกว่าที่เคยในการสร้างส่วนการนำทางและส่วนท้ายเล็ก ๆ ที่สอดคล้องกับเว็บเบราว์เซอร์ที่ทันสมัยทั้งหมด.

เมื่อคุณสร้างเว็บเพจ HTML5 ที่สะดวกสบายแล้วคุณน่าจะเริ่มดูภาพเคลื่อนไหวของหน้าเว็บ แม้แต่เอฟเฟกต์เล็กน้อยกับ JavaScript และ AJAX ก็สามารถทำได้ ปรับปรุงประสบการณ์การใช้งานและประสิทธิภาพของไซต์. แม้ว่านี่จะไม่ใช่ส่วนหนึ่งของขอบเขตบทความ แต่ฉันขอแนะนำให้คุณลองเล่นกับ jQuery หากคุณมีเวลา ห้องสมุดโอเพ่นซอร์สนั้นน่าประหลาดใจและช่วยให้สามารถสร้างต้นแบบได้อย่างรวดเร็วบนองค์ประกอบของหน้า HTML5.

แหล่งข้อมูลเพิ่มเติม

นักเขียนบล็อกทั่วโลกกำลังพูดคุยถึงแนวโน้มใหม่ใน HTML5 และ CSS3 และแบ่งปันทรัพยากรกับสาธารณะ เวลากำลังเปลี่ยนแปลงและชุมชนเว็บกำลังเปลี่ยนแปลงไปด้วย คุณควรพิจารณาเรื่องเฉพาะบางประการเพื่อศึกษาและสร้างความสนใจเล็กน้อย.

ด้านล่างนี้เป็นรายการบทความและแบบฝึกหัดเพิ่มเติมที่คุณอาจชอบ ฉันใช้เสรีภาพในการแบ่งรายการเป็นทรัพยากร HTML5 และ CSS3 จากสิ่งที่คุณกำลังมองหาควรมีบางหัวข้อที่นี่สำหรับทุกคน เพลิดเพลินไปกับแกลเลอรีสั้น ๆ ของธีม HTML ฟรีสำหรับดาวน์โหลดออนไลน์!

HTML5

HTML5: 15 การทดสอบที่สร้างแรงบันดาลใจ
HTML5: 19 แอปพลิเคชันบนเว็บ
HTML5: 48 การสาธิตการสังหารด้วยแฟลชที่มีศักยภาพ
สร้างแบบฟอร์มติดต่อ Ajax HTML5 / CSS3

CSS3

CSS3: คู่มือสำหรับผู้เริ่มต้น
CSS3: การสร้างช่องค้นหา
CSS3: การใช้คลาส Pseudo
CSS3: 30+ บทแนะนำที่เป็นประโยชน์

โบนัส: เทมเพลตและธีม HTML5

บริษัท ออกแบบ

พร้อมที่จะก้าวเข้าสู่โลกมหัศจรรย์ของ HTML5 แล้วหรือยัง? นี่คือเทมเพลต HTML5 ที่ไม่เสียค่าใช้จ่ายใด ๆ พร้อมด้วยสคริปต์ jQuery และแบบอักษรที่กำหนดเองซึ่งให้คุณทดสอบได้อย่างอิสระ!

ธีม HTML5 / CSS3

ชุดรูปแบบที่ขับเคลื่อนด้วย HTML5 / CSS3 นี้มีการออกแบบเลย์เอาต์ทั่วไปสำหรับคุณในการสร้างบล็อก HTML5 ของคุณเองพร้อมคุณสมบัติมากมายหรือเพียงแค่ขุดลงในโค้ดและเรียนรู้บางสิ่งเกี่ยวกับมัน.

โยโกะ

โยโกะเป็นธีมเวิร์ดเพรสที่ทันสมัยที่พูดถึงความยืดหยุ่นด้วยเลย์เอาท์ที่ตอบสนองตามการสืบค้นสื่อ CSS3 ซึ่งเป็นความสามารถในการปรับขนาดหน้าจอที่แตกต่างกันทำความรู้จักกับมัน!

สีเทา

ถ้าคุณชอบสไตล์ของบล็อก WordPress คลาสสิกสีเทาน่าจะเหมาะกับคุณด้วยคุณสมบัติ CSS3 ในตัวเช่นเส้นขอบรัศมีพื้นหลังหลากหลายเงาข้อความ ฯลฯ.

คู่มือสำหรับผู้เริ่มต้นสู่ Flock ซึ่งเป็น Social Media Browser

คู่มือสำหรับผู้เริ่มต้นในการพัฒนา iOS ส่วนต่อประสาน - ส่วนที่ 1

คู่มือเริ่มต้นสำหรับการตั้งค่า Windows 7 Media Center