Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 108,819

HOME > กระทู้สำหรับภาษาต่าง ๆ > ตัวอย่าง html5 ทั่วๆไปแบบเต็มครับ (ไม่รวมพวก multi media และพวกเกี่ยวกับฟอร์ม)



ตัวอย่าง html5 ทั่วๆไปแบบเต็มครับ (ไม่รวมพวก multi media และพวกเกี่ยวกับฟอร์ม)

 
Topic : 063621



โพสกระทู้ ( 4,458 )
บทความ ( 8 )



สถานะออฟไลน์



Code (PHP)
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>HTML full sample</title>
	</head>
	<body>
		<header>
			<h1>page's header</h1>
			<nav>
				<ul>
					<li><a href="#">home</a></li>
					<li><a href="#">page</a></li>
					<li><a href="#">this is nav tag</a></li>
				</ul>
			</nav>
		</header>
		
		
		<article>
			<header>
				<hgroup>
					<h2>article heading tag #1</h2>
					<h3>sub heading</h3>
				</hgroup>
				<p><time datetime="2011-06-06">2011 June 06</time></p>
			</header>
			<p>this is a content in article tag.</p>
			<p><mark>Mark tag.</mark> can use in p, h1-6, span too. <br />
				The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. 
				When used in a quotation or other block of text referred to from the prose, 
				it indicates a highlight that was not originally present but which has been added to bring the reader’s attention to a part of the text that might not have been considered important by the original author when the block was originally written, 
				but which is now under previously unexpected scrutiny. 
				When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity.
			</p>
			<p>Your score is: <meter min="0" max="10" value="2">2 out of 10</meter>. (meter tag)</p>
			<p>tag &lt;wbr&gt; defines where in a word it would be ok to add a line-break.<br />
				sample:<br />
				To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
				(wbr at the Http)
			</p>
			
			<figure>
				<img src="kookaburra.jpg" alt="Kooaburra">
				<img src="pelican.jpg" alt="Pelican stood on the beach">
				<img src="lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">
				<figcaption>The &lt;figure&gt; element is intended to be used in conjunction with the &lt;figcaption&gt; element to mark up diagrams, illustrations, photos, and code examples (among other things).</figcaption>
			</figure>
			<figure>
				<blockquote><p><code>&lt;small&gt;&lt;a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"&gt;Creative Commons Attribution Share-alike license&lt;/a&gt;&lt;/small&gt;</code></p></blockquote>
				<figcaption>figure tag for code</figcaption>
			</figure>
			
			<section>
				<h2>section1 in article tag</h2>
				<p>this is section tag in article tag.</p>
				<p>section is a blob of content that you could store as an individual record in a database. 
					It generally looks like this (and note that the heading goes inside the section element, not immediately before it)
				</p>
				<footer>footer tag can be in section tag.</footer>
			</section>
			<section>
				<h2>section2 in article tag</h2>
				<p>this is section tag in article tag.</p>
				<details>
					<summary>summary tag is header of details tag</summary>
					<p>inside details tag.</p>
				</details>
			</section>
			<aside>
				<h1>aside in article tag</h1>
				<p>Since this aside is contained within an article, a parser should understand that the content of this aside is directly related to the article itself.</p>
			</aside>
			
			<footer>This footer tag is in article tag.</footer>
		</article>
		
		<article>
			<header>
				<h1>article tag #2</h1>
				<p>it is possible to contain 2 article tags in 1 html page.</p>
			</header>
		</article>
		
		
		<aside>
			<h1>page's aside tag</h1>
			<p>
				The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, 
				and which could be considered separate from that content. 
				Such sections are often represented as sidebars in printed typography.
			</p>
		</aside>
		<aside>
			<nav>
				<h1>Blog roll</h1>
				<ul>
					<li><a href="#">this aside</a></li>
					<li><a href="#">contain</a></li>
					<li><a href="#">nav tag</a></li>
					<li><a href="#">and links</a></li>
				</ul>
			</nav>
		</aside>
		
		
		<footer>
			<p>page's footer tag. (site wide footer)</p>
			<nav>
				<ul>
					<li><a href="#">this is</a></li>
					<li><a href="#">page footer tag</a></li>
				</ul>
			</nav>
			<section>
				<h1>section tag in footer tag</h1>
				<p>This fragment shows the bottom of a page on a site with a &quot;fat footer&quot;</p>
			</section>
		</footer>
		
		
	</body>
</html>



ลองดูกันครับ
ตัวอย่างนี้แสดงว่าแทก, element อะไรใช้ในอะไรได้บ้างไม่ได้บ้าง ก็ลองเช็คดูครับ
อ่านเพิ่ม http://www.okvee.net/2011/07/22/ตัวอย่างเต็มๆของการใช้-h/



Tag : HTML/CSS




ประวัติการแก้ไข
2011-07-23 00:14:55
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2011-07-23 00:14:11 By : mr.v View : 1227 Reply : 1
 

 

No. 1



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

เดียวจะเข้าไปอ่านดูครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-07-23 08:45:43 By : webmaster
 


   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ตัวอย่าง html5 ทั่วๆไปแบบเต็มครับ (ไม่รวมพวก multi media และพวกเกี่ยวกับฟอร์ม)
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม , pangpond.com , pangpond.co.th , สำนักงานบัญชี.com , รถมือสอง

Load balance : Server 00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2021 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่