1.14k likes | 1.38k Views
HTML. (Hypertext Markup Language). รูปแบบของ HTML. 1. Text หมายถึงข้อความทั่วไป 2. Tag , Element หรือ คำสั่ง หมายถึงคำสั่งที่ใช้ใน การกำหนดรูปแบบของ Text 3. Attribute หมายถึงตัวเลือกที่คำสั่งของ HTML สามารถใช้ได้. กฏในการใช้งาน HTML.
E N D
HTML (Hypertext Markup Language)
รูปแบบของ HTML 1. Text หมายถึงข้อความทั่วไป2.Tag , Element หรือ คำสั่ง หมายถึงคำสั่งที่ใช้ใน การกำหนดรูปแบบของ Text3.Attribute หมายถึงตัวเลือกที่คำสั่งของ HTML สามารถใช้ได้
กฏในการใช้งาน HTML • แต่ละคำสั่ง จะต้องอยู่ในเครื่องหมาย < และ > เท่านั้น • สามารถใช้ตัวอักษรพิมพ์เล็ก หรือ ใหญ่ ก็ได้เพราะได้ความหมายเหมือนกัน • สามารถพิมพ์เอกสาร HTML จัพิมพ์ติดต่อกัน หรือ พิมพ์แยกบันทัดกันก็ได้
การใส่คำอธิบาย(Comment) การใส่คำอธิบายบางส่วนของ HTML ที่เราเขียนมาเพื่อจะได้สะดวกในการติดตามในภายหลัง Comment จะไม่แสดงผลบน Browser รูปแบบของคำสั่งจะแตกต่างจาก HTML ทั่วไป คือเริ่มต้นด้วยคำสั่ง <!- และ ปิดด้วยคำสั่ง->
เริ่มต้นกับการสร้าง Web Page!!! ในเอกสาร HTML นั้นจะต้องขึ้นต้นด้วยคำสั่ง(Tags.) <HTML> และปิดท้ายด้วย </HTML> ดังนี้<HTML> ……….. </HTML>
ทุกเอกสาร HTML จะต้องมี HEAD tag ซึ่งบอกว่าส่วนนี้เป็น Head ของเอกสารนี้ <HTML><HEAD> …………………... </HEAD></HTML>
ใน HEAD tags เราจะบอกหน้าปัจจุบันของ Home Page ของเราด้วย TITLE tag <HTML><HEAD><TITLE>……………….</TITLE></HEAD></HTML>
ส่วนรายละเอียดของหน้าเอกสารจะอยู่ในส่วนของ BODY tags. ซึ่งจะเป็นส่วนที่อยู่ถัดไปจาก HEAD tags.<HTML><HEAD><TITLE> ……… </TITLE></HEAD><BODY> ……………. </BODY></HTML>
เริ่มเขียน Page แรกกัน <HTML><HEAD><TITLE>My First Page.</TITLE></HEAD><BODY>Hello.........World.</BODY></HTML>
พิมพ์ข้อความ ทดสอบการแสดงผล <BODY> ทดสอบการแสดงผล</BODY>
เปลี่ยนสีพื้นหลังของหน้าต่างได้โดยใช้คำสั่ง <BODY BGCOLOR="#FF0000"> ทดสอบการแสดงผล </BODY>
ใช้รูปภาพมาเป็น Background ได้ด้วย <BODY BACKGROUND=”bgg.gif"> ทดสอบการแสดงผล </BODY>
กลับสู่หน้าจอสีขาวตามเดิม <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล </BODY>
การกำหนดหัวข้อด้วย Tag <Hn> รูปแบบ <Hn> ………………… </Hn> n = ค่าของขนาดเป็นตัวเลข เช่น <h1>…….</h1> โดยค่าของ n จะมีค่าตั้งแต่ 1- 6 เรียงจากมากไปน้อย
<h1> ข้อความ </h1> <h2> ข้อความ </h2> <h3> ข้อความ </h3> <h4> ข้อความ </h4> <h5> ข้อความ </h5> <h6> ข้อความ </h6>
การจัดรูปแบบของตัวอักษรการจัดรูปแบบของตัวอักษร
การทำตัวอักษรหนา (Bold) <BODY BGCOLOR="#FFFFFF"> ตัวปกติ <B>ตัวหนา</B></BODY>
การทำตัวอักษรเอียง (Italics)<BODY BGCOLOR="#FFFFFF"> ตัวปกติ <I>ตัวเอียง</I></BODY>
การทำตัวอักษรขีดเส้นใต้ (Underlining)<BODY BGCOLOR="#FFFFFF"> ตัวปกติ <U>ตัวขีดเส้นใต้</U></BODY>
เราสามารถใช้ Tags หลายอย่างปนกันได้ตามต้องการ <BODY BGCOLOR="#FFFFFF"> ตัวปกติ <I><B>ตัวเอียงและหนา</B></I></BODY>
ในการใช้ Tags หลายอันปนกันจะต้องจัดเรียงลำดับโดยตัวที่ใช้ก่อนจะต้องถูกปิดทีหลังและตัวอยู่ทีหลังจะต้องปิดก่อน <ก่อน><หลัง></ก่อน></หลัง> ผิดหลักการ<ก่อน><หลัง></หลัง></ก่อน> ถูกหลักการ
เปลี่ยนขนาดของอักษร(Font) ได้ด้วยวิธีการง่ายๆ อันดับแรกต้องเพิ่ม <FONT> tags... <BODY BGCOLOR="#FFFFFF"> ทดสอบขนาดตัวอักษร <FONT>ขนาด</FONT></BODY> จากนั้นจึงกำหนดค่าของขนาดด้วย SIZE <BODY BGCOLOR="#FFFFFF"> ทดสอบขนาดตัวอักษร<FONT SIZE=6>ขนาด</FONT> </BODY>
ขนาดของอักษรทั้งหมด 7 ขนาด 1-teeny tiny 2-small3-regular4-extra medium5-large 6-real big7-yelling!
การกำหนดชื่อ Font ที่ใช้แสดงผล <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <FONT FACE="ARIAL">ARIAL</FONT> </BODY>
เราสามารถที่จะใส่ชื่อ Font มากกว่า 1 ชื่อได้ลงไปใน Tags ของ <FONT> ได้เพื่อที่เราจะใช้ Font ตัวที่สองหรือสามแทนเมื่อ ใน Browser ไม่มี Font ตัวแรกๆ ถ้ารายชื่อ Font ที่เราใส่ไว้ไม่มีเลย Browser จะใช้ Default Font แทน <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">ชื่อ Font </FONT>
เปลี่ยนสีอักษรเป็นสีที่เราชอบ <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <FONT COLOR="#FFOOOO">สีแดง</FONT> </BODY>
เราสามารถใช้หลายๆ ATTRIBUTE ใน <TAG>... <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Font</FONT> </BODY>
<BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Font</FONT></B></I></U> </BODY>
การทำงานของ Browser <BODY BGCOLOR="#FFFFFF"> สวัสดีลองดูซิว่ามีการจัดเรียงบรรทัดเป็นอย่างไร ?</BODY>
จะขึ้นบรรทัดใหม่จะต้องเพิ่ม Tags <BR> ลงไปเพื่อเป็นการบอกให้ขึ้นบรรทัดใหม่ <BODY BGCOLOR="#FFFFFF"> สวัสดี <BR>ลองดูซิ <BR>ว่ามีการจัดเรียงบรรทัด <BR>เป็นอย่างไร ?</BODY>
<BODY BGCOLOR="#FFFFFF"> ทดสอบ การแสดงผล ของ Browser.</BODY>
จะต้องใส่รหัสช่องว่าง(Space) ใช้ <BODY BGCOLOR="#FFFFFF"> ทดสอบ การแสดงผล ของ Browser.</BODY>
Special Character ที่มี ; ปิดท้าย ( non-breaking space) < (< less-than symbol) > (> greater-than symbol) & (& ampersand) " (" quotation mark)
การสั่งให้เว้นบรรทัดที่ละหลายๆบรรทัดกัน <BODY BGCOLOR="#FFFFFF"> ทดสอบ <BR> <BR> <BR> <BR>การแสดงผล</BODY>
เรื่องของเส้นกั้น หรือ "Horizontal Rule." <BODY BGCOLOR="#FFFFFF"> <HR></BODY>
การกำหนดความกว้าง WIDTH - กำหนดเป็น % ของ Windows - กำหนดเป็น Pixel ของจอภาพ
<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=20%><HR WIDTH=50%><HR WIDTH=100%><HR WIDTH=20><HR WIDTH=50><HR WIDTH=100></BODY>
การกำหนดตำแหน่งของเส้น <BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% ALIGN=LEFT> <HR WIDTH=60% ALIGN=RIGHT> <HR WIDTH=60% ALIGN=CENTER> </BODY>
สามารถที่จะกำหนด Thickness... ได้ <BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% SIZE=1> <HR WIDTH=60% SIZE=3> <HR WIDTH=60% SIZE=8> <HR WIDTH=60% SIZE=15> </BODY>
สามารถกำหนดให้เป็น Solid Line. ได้ด้วย <BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% SIZE=1 NOSHADE> <HR WIDTH=60% SIZE=3 NOSHADE> <HR WIDTH=60% SIZE=8 NOSHADE> <HR WIDTH=60% SIZE=15 NOSHADE> </BODY>
การจัดเอกสาร ด้วย tag <p> และ <pre> รูปแบบ <p>………..</p> ใช้ในการจัดย่อหน้าของข้อความ รูปแบบ <pre>……………</pre> ใช้ในการรูปแบบของข้อความให้อยู่ในรูปแบบที่พิมพ์
<HTML> <HEAD> <TITLE>Testing Tag</TITLE> </HEAD> <BODY> <p> การเขียนโฮมเพจ<br> ด้วยภาษา html </p> <p> เรื่อง <br> การทดสอบการใช้<br> คำสั่งจัดย่อหน้า </p> </BODY> </HTML> ตัวอย่างการจัดย่อหน้าด้วย <p>
<HTML> <HEAD> <TITLE>Testing Tag</TITLE> </HEAD> <BODY> <p align=center> การเขียนโฮมเพจ<br> ด้วยภาษา html </p> <p align=right> เรื่อง <br> การทดสอบการใช้<br> คำสั่งจัดย่อหน้า </p> </BODY> </HTML> ตัวอย่างการใช้คำสั่ง จัดย่อหน้าและวางตำแหน่ง
<HTML> <HEAD> <TITLE>Testing Tag</TITLE> </HEAD> <BODY> <p > การเขียนโฮมเพจ ด้วยภาษา html </p> <pre > เรื่อง การทดสอบการใช้ คำสั่งจัดย่อหน้า </pre> </BODY> </HTML> ตัวอย่างการจัดรูปแบบข้อความด้วย<pre>