วันจันทร์ที่ 8 กันยายน พ.ศ. 2557

HTML tag พื้นฐาน

HTML tag พื้นฐาน

HTML        

            HTML ย่อมาจาก Hypertext Markup Language

Text Editor


         Text Editor คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่างๆ ปัจจุบันมีโปรแกรม Text Editor หลายโปรแกรม เช่น NotePad, EditPlus หรือโปรแกรม Dreamweaver ซึ่งมีคุณสมบัติเป็นทั้งโปรแกรมสำเร็จรูปในการสร้างเว็บเพจด้วย

 Web browser

          Web browser  คือ เว็บเบราว์เซอร์ (web browser) เบราว์เซอร์ หรือ โปรแกรมดูเว็บ คือโปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเวบที่สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล (html) ที่จัดเก็บไว้ที่ระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์ หรือระบบคลังข้อมูลอื่น ๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ เช่น Internet Explorer,Mozilla Firefox,Google Chrome,Safari

          องค์ประกอบของเอกสาร html  



       รูปแบบของโครงสร้างพื้นฐานของไฟล์ HTML จะประกอบไปด้วยส่วนที่สำคัญ 2 ส่วนคือ
           1. ส่วนของหัวโปรแกรม (HEAD) เป็นการกำหนดข้อความในส่วนที่เป็นชื่อเรื่องซึ่งจะปรากฎอยู่บนไตเติลบาร์ของโปรแกรมเว็บบราวเซอร์เท่านั้น
           2. ส่วนเนื้อหาของโปรแกรม (BODY) เป็นส่วนที่สำคัญที่สุดในการแสดงผลทั้งหมด ไม่ว่าจะเป็นหัวเรื่อง เนื้อหาต่าง ๆ การนำรูปภาพต่าง ๆ ลงในเว็บเพจ การนำเสียงเพื่อทำให้เว็บเพจที่น่าสนใจยิ่งขึ้น

           <html>  คือ คำสั่ง < HTML > เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง < /HTML > เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บบราวเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML
           <head>  คือ คำสั่ง < HEAD > เป็นคำสั่งที่ใช้กำหนดข้อความในส่วนที่เป็นชื่อเรื่องของไฟล์ HTML 
 
           <title>  คือ  คำสั่ง < TITLE > เป็นคำสั่งที่แสดงชื่อของเอกสาร หรือชื่อเรื่องของไฟล์ HTML ซึ่งข้อความภายในคำสั่งจะปรากฎหรือแสดงผลในส่วนของไตเติลบาร์ (Title Bar) ของโปรแกรมเว็บบราวเซอร์ แต่จะไม่แสดงในส่วนของการแสดงผลในโปรแกรมเว็บบราวเซอร์
           <body>  คือ ส่วนที่มีไว้สำหรับให้ผู้เขียนเว็บเพจใส่คำสั่งหรือแท็กต่าง ๆ บางครั้งอาจเรียกว่า "โค้ด" (Code) เช่น คำสั่งแสดงรูปภาพ, การกำหนดสีตัวอักษร, การทำอักษรวิ่ง, การสร้างตาราง, การทำชุดเชื่อมโยง เป็นต้น
            <BR>  คือ คำสั่ง <BR> เป็นคำสั่งที่ใช้ในการขึ้นบรรทัดใหม่ โดยจะวางคำสั่งนี้ในตำแหน่งสุดท้ายของประโยคที่ต้องการให้แสดงผลในบรรทัดใหม่
            <P>  คือ  คำสั่ง <P> เป็นคำสั่งที่ใช้ในการขึ้นย่อหน้าใหม่ โดยการเว้นบรรทัด 1 บรรทัด แล้วขึ้นบรรทัดใหม่ โดยจะวางคำสั่ง <P> ไว้ข้างหน้าประโยคที่เราต้องการย่อหน้าใหม่ หรือท้ายสุดของประโยคที่เราไม่ต้องการให้อยู่ในบรรทัดเดียวกัน และจะปิดท้ายประโยคด้วยคำสั่ง </P>
เขียนโดย ที่ ไม่มีความคิดเห็น:

การตกแต่งตัวอักษร

การตกแต่งตัวอักษร

 รูปแบบแท็ก Code และการแสดงผล

1.การกำหนดแบบอักษร
        <FONT  FACE = "......."> … </FONT> การกำหนดรูปแบบของตัวอักษรในเว็บเพจที่เราต้องการให้แสดงออกบนเว็บ 
                               ตัวอย่างการใช้คำสั่ง   

<html>
<head>
<title>การกำหนดขนาดตัวอักษร</title>
</head>
<body>
<font face="Cordiaupc">HTML</font><br>
<font face="Ms sans serif">HTML</font><br>
<font face="AngsanaUPC">HTML</font><br>
<font face="arial">HTML</font><br>
</body>
</html>
ผลลัพธ์
HTML
HTML
HTML
HTML



2.ขนาดตัวอักษร


เราสามารถกำหนดขนาดของตัวอักษรได้ 2 วิธี


1. ในกรณีที่เป็นหัวข้อ (Heading) สามารถใช้คำสั่งต่อไปนี้

 <H1>ขนาดใหญ่สุด</H1>
<H2>ขนาดใหญ่</H2>
<H3>ขนาดกลาง</H3>
<H4>ขนาดปกติ</H4>
<H5>ขนาดเล็ก</H5>
<H6>ขนาดเล็กสุด<H6>

 2. ในกรณีทั่วไป จะใช้คำสั่ง <FONT SIZE=ค่าตัวเลข> เช่น

 <FONT SIZE=3>ตัวอักษรขนาด 3</FONT> หรือ
<FONT SIZE=5>ตัวอักษรขนาด 5</FONT>


 ตัวอย่างการใช้คำสั่ง    


<HTML>
<HEAD>
<TITLE>FONT SIZE </TITLE>
</HEAD>
<BODY >
<FONT SIZE="1">Computer</Font>
<FONT SIZE="2">Computer</Font>
<FONT SIZE="3">Computer</Font>
<FONT SIZE="4">Computer</Font>
<FONT SIZE="5">Computer</Font>
<FONT SIZE="6">Computer</Font>
<FONT SIZE="7">Computer</Font>
</BODY>
</HTML>
ผลลัพธ์
Computer Computer Computer Computer Computer
 ComputerComputer



3.สีตัวอักษร


  





สีของตัวอักษร
สีของตัวอักษร สามารถกำหนดได้ 2 แนวทางคือ



1. ใช้คำสั่ง <FONT COLOR=ชื่อสี> เช่น
<FONT COLOR=red>ตัวอักษรสีแดง</FONT> หรือ
<FONT COLOR=green>ตัวอักษรสีเขียว</FONT>
2. ใช้คำสั่ง <FONT COLOR=รหัสสี> เช่น
<FONT COLOR=#FF00FF>ตัวอักษรสีชมพู</FONT> หรือ
<FONT COLOR=#0000FF>ตัวอักษรสีน้ำเงิน</FONT>



         ตัวอย่างการใช้คำสั่ง

  <html>
<head><title> ....การหนดรูปแบบสีข้อความ....</title></head>
<body><font color = "red"> ข้อความนี้กำหนดให้เป็นสีแดง</font> <br>
<font color = "#0000ff"> ข้อความนี้กำหนดให้เป็นสีน้ำเงิน </font> <br>
</body>
</html>

4.ตัวเอียง ตัวหนา ตัวขีดเส้นใต้

 คำสั่งจะแบ่งได้เป็น 2 พวกดังนี้
1.แบ่งตามลักษณะที่ปรากฏ เช่น ตัวเอียง ตัวหนา
<B>         ตัวอักษรแบบตัวหนา (bold)
<I>         ตัวอักษรแบบตัวเอน (italic)
<U>         ตัวอักษรแบบขีดเส้นใต้ (underline)
2.แบ่งตามการใช้งาน เช่น ใช้กับคำพูดหรือวลี ใช้กับข้อความที่สำคัญมาก
<Em> <Stong> <Ins> <Del> <Code> <Address>  ใช้เน้นข้อความ คำพูดหรือวลี (emphasized) ใช้เน้นข้อความที่สำคัญมากๆ (strong) ใช้เน้นข้อความที่แก้ไขเพิ่มเติม (inserted) ใช้บอกว่าข้อความนี้ถูกลบไปแล้ว (deleted) ใช้บอกว่าข้อความที่เป็นโปรแกรม (computer code) ใช้บอกว่าข้อความที่เป็นที่อยู่ (computer code)




5.ตัวขีดฆ่า ตัวยก ตัวห้อย

1.     <s>...</s>     ใช้แสดงข้อความแบบขีดฆ่าตัวอักษร ทั้งนี้เพื่อเน้นข้อความเปรียบเทียบหรือต้องการในประโยคนั้น
          
ตัวอย่างการใช้คำสั่ง
<HTML>
<HEAD>
<TITLE> การกำหนดอักษรขีดเส้นใต้ </TITLE>
</HEAD>
<BODY>
กำหนดอักษรขีดเส้นใต้ <BR>
<S>Microsoft Windows 7</S>
</BODY>
</HTML>
ผลลัพธ์
กำหนดอักษรขีดเส้นใต้
Microsoft Windows 7



 2. <SUP> … </SUP>  และ  <SUB> …</SUB> การกำหนดแบบอักษรตัวห้อยและแบบอักษรตัวยกในเว็บเพจนั้น เราสามารถกำหนดขนาดของตัวอักษรได้ดังนี้ 

ตัวอย่างการใช้คำสั่ง 
   

<HTML>
<HEAD>
<TITLE>แบบอักษรตัวห้อยและแบบอักษรตัวยก </TITLE>
</HEAD>
<BODY >
Computer<SUP>2</SUP> <P>
H<SUB>2</SUB>O<P>
</BODY>
</HTML>
ผลลัพธ์
Computer2
H2O


6.ตัวอักษณวิ่ง ตัวอักษรกระพริบ

1.   <MARQUEE> .......... </MARQUEE>ใช้สำหรับแสดงข้อความแบบเคลื่อนที่ไปยังทิศทางที่เราต้องการ มีรูปแบบการใช้ดังน  <marquee scrolldelay="ความเร็ว" 
direction="ทิศทางวิ่ง">ข้อความ</marquee>    - scrolldelay ให้แทนค่าด้วยความเร็วเป็น ตัวเลข ส่วน direction ใส่ได้เฉพาะ Up,Down,Left และ Right   

ตัวอย่างการใช้คำสั่ง    

<html>
<head>
<title>marque</title>
</head>
<body>
<center>
<marquee scrolldelay="100" direction="Right">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Left">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Up">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Down">WEBTHAIDD</marquee>
</body>
</html>


2.<blink>...</blink> ใช้กำหนดแสดงข้อความแบบกระพริบ จะมีลักษณะการแสดงผลเป็นแบบติด - ดับ สลับกันไป

 ตัวอย่างการใช้คำสั่ง


<HTML>
<HEAD>
<TITLE>กำหนดอักษรตัวกระพริบ </TITLE>
</HEAD>
<BODY>
การกำหนดอักษรตัวกระพริบ <BR>
<Blink>COMPUTER</Blink>
</BODY>
</HTML>

7.การจัดตำแหน่งข้อความ

1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center  <center> ...ข้อความ...</center>
2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้ <p align = "ตำแหน่ง"> ...ข้อความ...</p>
 ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right



เขียนโดย ที่ ไม่มีความคิดเห็น:

วันจันทร์ที่ 1 กันยายน พ.ศ. 2557

ข้อสอบ HTML

เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)