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

วันพฤหัสบดีที่ 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> ไว้ในส่วนบนและส่วนล่างของข้อความ