การเขียนโค้ด HTML มือใหม่: 2014

วันพฤหัสบดีที่ 13 กุมภาพันธ์ พ.ศ. 2557

การจัดการกับ background html

การจัดการกับ background ด้วยคำสั่ง html.

ใส่สีปกติทั่วไปให้ background

style="background-color:#FAF8CC;"

คำสั่งการใส่ภาพพื้นหลัง
style="background-image:url('bg3.jpg')"

คำสั่งการวางภาพซ้ำต่อ แนวนอน (กรณี ข้อความยาวเกินพื้นหลัง)
style="background-image:url('bg3.jpg'); background-repeat:repeat-x;"

คำสั่งการวางภาพซ้ำต่อ แนวนอน (กรณี ข้อความยาวเกินพื้นหลัง)
style="background-image:url('bg3.jpg'); background-repeat:repeat-y;"

คำสั่ง fix ให้ภาพอยู่ที่เดิม ขยับเฉพาะตัวหนังสือ
style="background-image:url('bg3.jpg');background-attachment: fixed;"

วันอาทิตย์ที่ 26 มกราคม พ.ศ. 2557

การกำหนด Background

การใส่ Background มี 2 แบบ คือ แบบสี, แบบรูปภาพ

รูปแบบโค้ด

// Background แบบสี
<html>
<head>
<title>Un title page</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
</head>
<body bgcolor="#FFFF00"> //นี่เป็นส่วนของโค้ด</body>
</html>

// Background แบบรูปภาพ
<html>
<head>
<title>Un title page</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
</head>
<body background="bg_test.gif"> //นี่เป็นส่วนของโค้ด ใส่ไฟล์รูปภาพลงไป</body>
</html>

ทำ effect ตอนเปลี่ยนหน้า

Effect คล้ายๆ PowerPoint เวลาเปลี่ยนหน้าเว็บ ใส่ชุดคำสั่งนี้ในส่วน Head Section

ค่าตัวเลขของ Duration และ Transition

<META http-equiv="Page-Enter" content="RevealTrans (Duration=3, Transition=23)">
<META http-equiv="Page-Exit" content="RevealTrans (Duration=2, Transition=23)">

ข้อมูลจาก http://www.nectec.or.th

ความเป็นมาของ HTML

ความเป็นมาของ HTML

HTML คืออะไร?
เอาล่ะครับ ต่อไปนี้เราจะมารู้จักภาษา HTML กันว่ามันคืออะไร มีที่มาที่ไปอย่างไร ใครเป็นคนกำหนดมาตราฐานนี้ และมีประโยชน์อย่างไร

HTML ย่อมาจากอะไร?
เชื่อว่าหลาย ๆ คนคงอย่างจะทราบว่าหมายกันแล้วนะครับ ว่าไอ้เจ้า HTML ที่เราพูดถึงกันอยู่เนี่ย มันย่อมาจากอะไรกันน้า.... HTML ย่อมาจาก HyperText Makeup Language ครับ ถ้าจะให้แปลตรง ๆ ตัวก็ ภาษาที่ใช้สำหรับการสร้างเอกสารแบบ HyperText ไงล่ะครับ

HTML มาจากที่ไหน และใครเป็นคนสร้างมันขึ้นมา?
ภาษา HTML ถือกำเนิดขึ้นมาจากความพยายามที่จะแลกเปลี่ยนข้อมูลข่าวสารต่าง ๆ ในโลกของ Internet นี่แหล่ะครับ ซึ่งก็เป็น ที่ทราบกันอยู่แล้วนะครับว่า ในโลกของ Internet นั้นมันกว้างใหญ่ไพศาลนัก เราไม่สามารถที่จะรู้ได้เลยว่า ใครใช้ระบบปฏิบัติการอะไรกันบ้าง บางคนอาจจะใช้ระบบปฏิบัติการ Windows บนเครื่อง PC ธรรมดา ๆ อย่างเรา ๆ ท่าน ๆ ทั้งหลาย แต่นักวิจัยบางคนอาจจะให้ระบบปฏิบัติการ Unix บนเครื่อง Mainframe ในการเชื่อมต่อเข้าสู่ Internet ก็ได้ ซึ่งจากความ แตกต่างกันทั้งทางต้าน Software และ Hardware นี่เอง ที่เป็นจุดกำเนิด ของ HTML ซึ่งเป็นมาตราฐานที่ทำให้สามารถทำให้ ผู้ที่ใช้ระบบปฏิบัติการทั้งหลายแหล่ที่มีอยู่บนโลกของ Internet สามารถแลกเปลี่ยนข้อมูลข่าวสารกันได้อย่างสะดวกและรวดเร็ว สำหรับหน่วยงาเป็นคนกำหนดมาตราฐาน HTML คือ W3C นะครับ สำหรับ version ปัจจุบันนี้ก็เป็น version 4.0 เข้าไปแล้วครับ)

ประโยชน์ของ HTML
สำหรับประโยชน์ของ HTML นี่ก็มีประโยชน์มากมายนะครับ สำหรับประโยชนหลัก ๆ เลยก็คือ การที่มันช่วยให้เราสามารถ เผยแพร่เอกสารต่าง ๆ ของเราให้คนทั้งโลกได้อ่านอย่างไม่จำกัดในระบบของเครื่องหรือว่าระบบของ OS เลยครับ ไม่ว่าใครจะใช้ ระบบปฏิบัติการอะไรก็ตาม ที่มี broswer ที่สามารถอ่าน file format HTML ได้ล่ะก็ ก็จะสามารถเปิดไฟล์เอกสารที่เราต้องการ เผยแพร่อ่านได้ทันทีครับ ไม่เว้นแม้แต่ระบบปฏิบัติการ Unix ที่ run ใน Text Mode ก็สามารถอ่านได้ครับ (ใครที่เคยเล่น Linux คงเคยได้ใช้คำสั่ง Lynx นะครับ

ที่มา : http://www.yimwhan.com/

การกำหนดลักษณะตัวอักษร แบบLogical

เป็นการกำหนดรูปแบบอักษรที่ผู้ใช้สามารถกำหนดได้ด้วยตนเอง ซึ่งจะกำหนดรูปแบบตามลักษณะข้อความ เช่น ข้อความสำคัญ หรือ คำนิยาม

มีรูปแบบโค้ดดังนี้

Emphasis ใช้เน้นข้อความคำพูดหรือวลี
ใช้คำสั่ง <EM>...</EM>

Strong ใช้กับข้อความที่มีความสำคัญมาก
ใช้คำสั่ง <STRONG>...</STRONG>

Computer Code ใช้กับข้อความที่เป็นโปรแกรม
ใช้คำสั่ง <CODE>...</CODE>

Citations ใช้กับข้อความที่อ้างอิงถึงแหล่งที่มาของเนื้อหา
ใช้คำสั่ง <CITE>...</CITE>

Definition ใช้กับข้อความที่เป็นคำนิยาม
ใช้คำสั่ง <DFN>...</DFN>

Keyboard ใช้กับข้อความที่เหมือนแป้นพิมพ์
ใช้คำสั่ง <KBD>...</KBD>

Samples ใช้กับข้อความที่เป็นตัวอย่าง
ใช้คำสั่ง <SAMP>...</SAMP>

Variable Name ใช้เน้นข้อความที่ถูกเปลี่ยนแปลง
ใช้คำสั่ง <VAR>...</VAR>

ตัวอย่างโค้ด

<html>
<head><title>webthaidd</title></head>
<body>
แสดงการกำหนดตัวอักษรแบบ Logical<p>
<EM> ข้อความที่มีความสำคัญ </EM><p>
<STRONG> ข้อความที่มีความสำคัญมาก </STRONG><p>
ข้อความที่เป็นตัวอย่างของโปรแกรม<br>
<CODE> printf("Hello"); </CODE><p>
การใช้ข้อความอ้างอิงแหล่งที่มาของเนื้อหา<br>
<CITE>(www.webthaidd.com)</CITE><p>
<DFN>คำนิยาม</DFN> มีไว้เพื่อแยกคำหลักออกจากเนื้อความ<p>
<KBD>ข้อความที่เหมือนแป้นพิมพ์</KBD><p>
ข้อความที่เป็นตัวอย่าง เช่น<SAMP> ตัวอย่างที่1 , ตัวอย่างที่2</SAMP><p>
ข้อความที่มี<VAR> การเปลี่ยนแปลง </VAR><p>
</body>
</html>

ผลที่ได้

จาก : http://www.webthaidd.com/html/webthaidd_article_322_.html

การกำหนด ขนาดหัวข้อ

คำสั่ง <Hn> สามารถแบ่งได้ 6 ระดับ

มีรูปแบบดังนี้

<Hn>...</Hn> โดยที่ n แทนค่าได้ตั้งแต่ 1 ถึง 6
ซึ่งค่า 1 จะมีขนาดใหญ่ที่สุด และค่า 6 มีขนาดเล็กที่สุด

ตัวอย่างโค้ด

<html>
<head><title>webthaidd</title></head>
<body>
<h1>หัวเรื่อง ที่มีค่า n เป็น 1</h1>
<h2>หัวเรื่อง ที่มีค่า n เป็น 2</h2>
<h3>หัวเรื่อง ที่มีค่า n เป็น 3</h3>
<h4>หัวเรื่อง ที่มีค่า n เป็น 4</h4>
<h5>หัวเรื่อง ที่มีค่า n เป็น 5</h5>
<h6>หัวเรื่อง ที่มีค่า n เป็น 6</h6>
</body>
</html>

ผลที่ได้

จาก : http://www.webthaidd.com/html/webthaidd_article_319_.html

การใช้คำสั่ง pre

การใช้คำสั่ง <pre>

1.คำสั่ง <pre> เป็นคำสั่งจัดรูปแบบข้อความตามที่เราต้องการ ใช้ภายในคำสั่ง <body> ในบางครั้งการใช้คำสั่ง <br> และ <p> ในข้อความหลายๆ จุด อาจทำให้สับสนได้ ควรใช้คำสั่ง <pre> แทน ซึ่งมีรูปแบการเขียนดังนี้

2.ตามตัวอย่าง code ดังนี้

3.จะได้ผลดังนี้

4.เห็นได้ว่าผลลัพธ์ที่ได้จะเหมือนที่เราได้จัดรูปแบบไว้ โดยจะแทรกคำสั่ง <pre> ไว้ในส่วนบนและส่วนล่างของข้อความ

ขั้นตอนการกำหนดรูปแบบตัวอักษร HTML

ตัวอย่างข้อความ

WebThaiDD.COM  //กำหนดตัวอักษรให้หนา
WebThaiDD.COM    //กำหนดตัวอักษรให้เอียง
WebThaiDD.COM   //กำหนดตัวอักษรให้ขีดเส้นใต้
~~WebThaiDD.COM~~    //กำหนดตัวอักษรให้ขีดฆ่าตัวอักษร
รูปแบบโค้ด

<B>WebThaiDD.COM</B>   //โค้ดกำหนดตัวอักษรให้หนา
<I>WebThaiDD.COM</I> //โค้ดกำหนดตัวอักษรให้เอียง
<U>WebThaiDD.COM</U>   //โค้ดกำหนดตัวอักษรให้ขีดเส้นใต้
<STRIKE>WebThaiDD.COM</STRIKE> //โค้ดกำหนดตัวอักษรให้ขีดฆ่าตัวอักษร

รูปแบบอื่นๆ

<BLINK>...</BLINK>   //กำหนดให้ตัวอักษรกระพริบ<BIG>...</BIG> //กำหนดให้ตัวอักษรใหญ่ขึ้นกว่าปกติ<SMALL>...</SMALL> //กำหนดให้ตัวอักษรเล็กลงกว่าปกติ
<SUB>...</SUB> //กำหนดให้ตัวอักษรเป็นตัวห้อย<SUP>...</SUP>   //กำหนดให้ตัวอักษรเป็นตัวยกกำลัง

จาก :http://www.webthaidd.com/html/webthaidd_article_290_.html

ขั้นตอนการสร้างตาราง

ตัวอย่างตาราง

1	2.
3	4

ค่าตัวแปลต่างๆ

1.	WIDTH WIDTH สำหรับAttributeนี้ ใช้สำหรับ กำหนดขนาดความกว้างของตาราง โดยจะมีการกำหนดค่าเป็นหน่วยของPixel หรือเป็นเปอร์เซ็นต์ มีรูปแบบการใช้งานคือ <TABLE WIDTH="200"> หรือ <TABLE WIDTH="80%"> เป็นต้น
2.	HEIGHT สำหรับAttributeนี้ ใช้สำหรับ กำหนดขนาดความสูงของตาราง โดยจะมีการกำหนดค่าเป็นหน่วยของPixel หรือเป็นเปอร์เซ็นต์ มีรูปแบบการใช้งานคือ <TABLE HEIGHT=400"> หรือ<TABLE HEIGHT="60%"> เป็นต้น
3.	ALIGN เป็นAttributeที่ใช้กำหนดลักษณะการวางตาราง บนหน้าจอ โดยจะมีค่าที่ใช้คือ LEFT(วางแบบชิดซ้าย), RIGHT(วางแบบชิดขวา), CENTER(วางแบบกึ่งกลาง) มีรูปแบบการใช้งานคือ <TABLE ALIGN="LEFT"> ,<TABLE ALIGN="RIGHT">, <TABLE ALIGN="CENTER">
4.	BORDER เป็นAttributeที่ใช้กำหนดขนาดของกรอบของตาราง โดยจะมีการกำหนดค่าเป็นหน่วยของPixel มีรูปแบบการใช้งานคือ <TABLE ฺBORDER="0">(เมื่อไม่ต้องการกรอบ) ,<TABLE BORDER="2">
5.	CELLSPACING เป็นAttributeที่ใช้กำหนดระยะห่างระหว่างคอลัมน์ต่างๆของตาราง โดยจะมีการกำหนดค่าเป็นหน่วยของPixel มีรูปแบบการใช้งานคือ <TABLE CELLSPACING="0"> ,<TABLE CELLSPACING="3">
6.	BACKGROUND เป็นAttributeที่ใช้กำหนดรูปพื้นหลังให้กับตาราง เมื่อต้องการให้มีรูปพื้นหลังที่แตกต่างกับพื้นหลังของเอกสาร มีรูปแบบการใช้งานคือ <TABLE BACKGROUND="YourImage.gif">(สามารถใช้นามสกุลของรูปเป็นนามสกุลที่สามารถแสดงผลบนบราว์เซอร์ได้ เช่น.jpg , .jpe ) เป็นต้น
7.	BGCOLOR เป็นAttribute ที่ใช้กำหนดสีพื้นให้กับตาราง โดยสามารถ ใส่เป็นรหัสสี เช่น#FF0000 หรือชื่อของสี เช่น REDก็ได้ มีรูปแบบการใช้งานคือ <TABLE BGCOLOR="#FF0000"> หรือ <TABLE BGCOLOR="RED">
8.	BORDERCOLOR เป็นAttribute ที่ใช้กำหนดสีของกรอบทั้งหมด โดยสามารถ ใส่เป็นรหัสสี เช่น#FF0000 หรือชื่อของสี เช่น REDก็ได้ มีรูปแบบการใช้งานคือ <TABLE BORDERCOLOR="#00FF00">
9.	BORDERCOLORLIGHT เป็นAttribute ที่ใช้กำหนดสีของกรอบในส่วนด้านหน้าของตาราง มีรูปแบบการใช้งานคือ <TABLE BORDERCOLORLIGHT ="#00FF00">
10.	BORDERCOLORDRAK เป็นAttribute ที่ใช้กำหนดสีของกรอบในส่วนด้านหลังที่เป็นเงา มีรูปแบบการใช้งานคือ <TABLE BORDERCOLORDRAK="#00FF00">

รูปแบบโค้ด

<TABLE>//TAG เริ่มต้น
<TR>//แถว
<TD>....</TD><TD>....</TD> //Column ของตาราง
</TR>
</TABLE> //TAG สิ้นสุดตาราง

รูปแบบโค้ดดังตัวอย่าง

<TABLE WIDTH="400" ALIGN ="center" BORDER="3" BORDERCOLORLIGHT ="#0000FF" BORDERCOLORDRAK="#000080">
<TR bgcolor="#FFFF33">
<TD>1</TD>
<TD>2.</TD>
</TR>
<TR bgcolor="#FFFF33">
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>

จาก :http://www.webthaidd.com/html/webthaidd_article_291_.html

รูปแบบโค้ด

รูปแบบโค้ด

<html>//TAG เปิดภาษา HTML
<head>
<title>::WebThaiDD.COM</title>
</head>//ส่วนหัวของ HTML
<body bgcolor="#FFFFFF">

//ตรงนี้คือส่วนที่คุณจะใส่รายละเอียดของโฮมเพจ
//และเรายังสามารถนำ Code PHP มาแทรกในนี้ได้ด้วย

</body>
</html>//TAG ปิด HTML

จาก : http://www.webthaidd.com/html/webthaidd_article_285_.html