วันพฤหัสบดีที่ 18 กันยายน พ.ศ. 2557

ข้อสอบ HTML

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

การแต่งตัวอักษร
 การแต่งตัวอักษร
1.การกำหนดแบบอักษร 

รูปแบบ tag code คือ
<font face="รูปแบบตัวอักษร">ข้อความ</font>
code ที่เขียนใน Notepad 





ผลที่แสดงได้
Panisara 
Earng


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


รูปแบบ tag code คือ
<font size="ตัวเลข">ข้อความ</font>
code ที่เขียนใน Notepad 


ผลที่แสดงได้
Panisara
Earng


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

รูปแบบ tag code คือ
<font  color="สี/โค้ดสี">ข้อความ</font>
code ที่เขียนใน Notepad 




ผลที่แสดงได้
Panisara
Earng 


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

รูปแบบคำสั่ง :<B>...ข้อความ..... </B> :คำสั่งตัวหนา
<I>...ข้อความ..... </I> :คำสั่งตัวเอียง<U>...ข้อความ..... </U> :คำสั่งขีดเส้นใต้
ตัวอย่างแสดง
ข้อความตัวหนา
ข้อความตัวไม่หนา


ตัวอย่างแสดง
จะเห็นว่า<B></B>ค่อม"ข้อความตัวหนา" อยู่ นั้นคือหากเราให้ข้อความใดมีตัวหนาเราก็นำแทค B ไปใส่ค่อมไว้นั้นเอง


ทำตัวเอียงด้วยแทค i


<HTML>
<Head>
<Title> ดูผลลัพท์ตัวอย่าง </Title>
</Head>
<Body>
<i>ข้อความตัวเอียง</i> ข้อความตัวไม่เอียง
</Body>
</HTML>


ตัวอย่างแสดง
ข้อความตัวเอียง
ข้อความตัวไม่เอียง




จากตัวอย่างจะเห็นว่า<i></i>ค่อม"ข้อความตัวเอียง" อยู่ นั้นคือหากเราให้ข้อความใดมีตัวเอียงเราก็นำแทค i ไปใส่ค่อมไว้นั้นเอง


ทำตัวขีดเส้นใต้ด้วยแทค U


<HTML>
<Head>
<Title> ดูผลลัพท์ตัวอย่าง</Title>
</Head>
<Body>
<U>ข้อความตัวขีดเส้นใต้</U> ข้อความตัวไม่ขีดเส้นใต้
</Body>
</HTML>


ตัวอย่างแสดง
ข้อความตัวขีดเส้นใต้
ข้อความตัวไม่ขีดเส้นใต้


จากตัวอย่างจะเห็นว่า<U></U>ค่อม"ข้อความตัวขีดเส้นใต้" อยู่ นั้นคือหากเราให้ข้อความใดมีตัวขีดเส้นใต้เราก็นำแทค U ไปใส่ค่อมไว้นั้นเอง


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

รูปแบบ tag code คือ

ตัวขีดฆ่า<del> ข้อความที่ต้องการขีดฆ่า </del>                                                                                                 
ตัวยก       <sup> ข้อความหรือตัวเลข<sup>ข้อความหรือตัวเลขที่ต้องการยก</sup>                       
  
ตัวห้อย    <sub> ตัวอักษร,ตัวเลข,ข้อความ<sub>ตัวอักษร,ตัวเลขที่ต้องการห้อย</sub>

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

รูปแบบ tag code คือ

<BLINK></BLINK>


code ที่เขียนใน Notepad
<HTML>
<HEAD>
<TITLE>การกำหนดตัวอักษรกระพริบ</TITLE>
</HEAD>
<BODY> <BLINK>KENG.</BLINK>
</BODY>
</HTML>


ผลที่แสดง







6.ตัวอักษรวิ่่ง

          
นอกจากเราจะใช้ตัวอักษรปกติที่กำหนดให้วางไว้ตำแหน่งใด ๆ ของเว็บเพจ 
ซึ่งก็อยู่ตรงนั้นตลอดเวลา เราสามารถกำหนดให้ตัวอักษรเคลื่อนที่ได้
อีกด้วย ทั้งเคลื่อนจากซ้ายไปขวา เคลื่อนที่จากขวาไปซ้าย เคลื่อนที่จากข้างล่างขึ้นข้างบน หรือเคลื่อนที่จากข้างบนลงข้างล่าง ซึ่งเทคนิคนี้มีหลาย ๆ เว็บไซต์
นำไปใช้ในการตกแต่งเวบเพจ
นำไปใช้ในการตกแต่งเวบเพจ
รูปแบบคำสั่ง HTML ที่ใช้ในการทำตัวอักษรวิ่ง
          <MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง"   height="ความสูง"
          scrollamount=ความเร็วในการวิ่ง  scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>
ทิศทางการวิ่ง

ทิศทาง
คำอธิบาย
UP
วิ่งจากด้านล่างขึ้นด้านบน
DOWN
วิ่งจากด้านบนลงด้านล่าง
LEFT
วิ่งจากด้านขวาไปด้านซ้าย
RIGHT
วิ่งจากด้านซ้ายไปด้านขวา


ตัวอย่างโปรแกรม <HTML>
<HEAD>
<TITLE>การทำตัวอักษรวิ่ง</TITLE>
</HEAD>
<BODY>
      <marquee><font size=4 color="red">ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์์กวี คนดีศรีอยุธยา </marquee>
</BODY>
</HTML>

ผลที่แสดงได้

ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์กวี คนดีศรีอยุธยา



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


ในการกำหนดตำแหน่งในภาษา HTML สามารถกำหนดได้หลายรูปแบบค่ะ ทั้งแบบกำหนดเป็นแท็ก และการกำหนดเป็น Attribute ของแท็กค่ะ โดยมีรูปแบบดังนี้ค่ะ

1..การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center  <center> ...ข้อความ...</center>
           

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


รูปแบบการจัดตำแหน่งข้อความ


  <html>
  <head><title>   <head><title>   <head><title>   <head><title>   <head><title> ....การจัดตำแหน่งข้อความ....</title></head>
       <body>
               <center><font size = "2"> ข้อความนี้อยู่กึ่งกลาง</font></center><br>
               <p align = "left"><font size = "2"> ข้อความชิดซ้าย </font></p><br>
               <p align = "center"><font size = "2"> ข้อความนี้อยู่กึ่งกลาง </font></p><br>
               <p align = "right"><font size = "2"> ข้อความนี้ชิดขวา </font></p><br>
        </body>
         <body>               <center><font size = "2"> ข้อความนี้อยู่กึ่งกลาง</font></center><br>               <p align = "left"><font size = "2"> ข้อความชิดซ้าย </font></p><br>               <p align = "center"><font size = "2"> ข้อความนี้อยู่กึ่งกลาง </font></p><br>               <p align = "right"><font size = "2"> ข้อความนี้ชิดขวา </font></p><br>        </body>  
  
ที่มา

http://www.twebmaster.com/
http://www.thainextstep.com/

HTML Tag พื้นฐาน

HTML Tag พื้นฐาน

HTML Tag พื้นฐาน



HTML

- ย่อมาจากคำว่า Hyper Text Markup Language 

- ใช้โปรแกรม Notepad สร้าง




- เปิดด้วยโปรแกรม Web Browser เช่น Google Chrome / Internet Explorer / Mozilla Firefox





Text Editor

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



 ข้อควรจำ

          โปรแกรม Text Editor ใช้สำหรับสร้างเว็บเพจ แต่โปรแกรม Web Browser ใช้สำหรับแสดงผลการทำงานของคำสั่งต่าง ๆ ที่สร้างจากโปรแกรม Text Editor นั่นหมายความว่าการจะสร้างเว็บเพจ ต้องมีเครื่องมือหรือโปรแกรมทั้ง 2 ประเภท คือ Text Editor และ Web Browser




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

ประกอบด้วย 2 ส่วนใหญ่ๆ คือ

- ข้อความที่ต้องการให้แสดงบนจอภาพ
- ข้อความที่เป็นคำสั่ง

HTML พื้นฐาน

คำสั่งเริ่มต้น
        รูปแบบคำสั่ง <HTML>........</HTML> คำสั่ง <HTML> ซี่งจะถือเป็นคำสั่งเริ่มต้นของการเขียน HTML และคำสั่ง </HTML> จะเป็นส่วนของการจบ

การเขียน HTML
        รูปแบบคำสั่ง <HEAD>..........</HEAD> คำสั่ง <HEAD> เป็นคำสั่งที่ใช้ในการกำหนดข้อความส่วนที่เป็นชื่อเรื่องซึ่งภายใต้ของคำสั่งนี้จะมีคำสั่งย่อย อีกคำสั่งหนึ่งคือ คำสั่ง <TITLE>........</TITLE>
รูปแบบคำสั่ง
        <TITLE>.........</TITLE>
        คำสั่ง <TITLE>.....</TITLE> จะเป็นส่วนของการแสดงชื่อของเอกสาร จะปรากฎในขณะที่ไฟล์ HTML ทำงานการแสดงผลจะแสดงในส่วนของไตเติลบาร์ ( Title Bar )
        <body>...</body> คำสั่ง <BODY> คือคำสั่งบอกส่วนเนื้อเรื่อง ที่จะถูกแสดงผลในเวปบราวเซอร์ ประกอบด้วยรูปภาพ ตัวอักษร ตาราง เป็นต้น
         <BR> มาจากคำว่า BREAK ซึ่งหมายถึง การขึ้นบรรทัดใหม่
         <P> มาจากคำว่า Paragraph ซึ่งหมายถึง การขึ้นย่อหน้าใหม่

ตัวอย่าง



แหล่งอ้างอิง

คำศัพท์

internet
อินเทอร์เน็ต (อังกฤษ: Internet) หมายถึง เครือข่ายคอมพิวเตอร์ขนาดใหญ่ ที่มีการเชื่อมต่อระหว่างเครือข่ายหลายๆ เครือข่ายทั่วโลก โดยใช้ภาษาที่ใช้สื่อสารกันระหว่างคอมพิวเตอร์ที่เรียกว่า โพรโทคอล (Protocol) ผู้ใช้เครือข่ายนี้สามารถสื่อสารถึงกันได้ในหลายๆ ทาง อาทิเช่น อีเมล เว็บบอร์ด และสามารถสืบค้นข้อมูลและข่าวสารต่างๆ รวมทั้งคัดลอกแฟ้มข้อมูลและโปรแกรมมาใช้ได้



WWW
เวิลด์ไวด์เว็บ (World Wide Web หรือ WWW หรือ W3 หรือ Web) 
คือ บริการค้นหรือเรียกดู ข้อมูลแบบหนึ่ง ในอินเทอร์เน็ต ข้อมูลในเวิลด์ไวด์เว็บ 
จะอยู่ในแบบสื่อผสม หรือมัลติมีเดีย (multimedia) ที่มีทั้งตัวอักษร รูปภาพ เสียง ภาพเคลื่อนไหวแบบวิดีโอข้อมูลจะถูกแบ่งเป็นหน้า ๆ แต่ละหน้าสามารถ เชื่อมโยงถึงกันได้เป็นแบบเครือข่ายคล้ายใยแมงมุม จากแหล่งต่าง ๆ ที่กระจายอยู่ทั่วโลก



Webpage
เว็บเพจ (อังกฤษ: webpage, web page) หรือ หน้าเว็บ หมายถึง หน้าหนึ่ง ๆ ของเว็บไซต์ ที่เราเปิดขึ้นมาใช้งานโดยทั่วไป เว็บเพจส่วนใหญ่จะอยู่ในรูปของเอกสาร HTML หรือ XHTML (ซึ่งมักมีนามสกุลไฟล์เป็น htm หรือ html) มีลิงก์สำหรับเชื่อมโยงไปยังเว็บเพจหน้าอื่น ๆ สามารถใส่รูปภาพและรูปภาพยังสามารถเป็นลิงก์ กล่าวคือสามารถคลิกบนรูปเพื่อกระโดดไปหน้าอื่นได้ นอกจากนี้ยังสามารถใส่แอปเพล็ต (applet) ซึ่งเป็นโปรแกรมขนาดเล็กแสดงภาพเคลื่อนไหว มีปฏิสัมพันธ์กับผู้ใช้ หรือสร้างเสียง ได้อีกด้วย
โปรแกรมที่ใช้เปิดดูเว็บเพจ เรียกว่า เว็บเบราว์เซอร์ ตัวอย่างเว็บเบราว์เซอร์ที่เป็นที่นิยม เช่น อินเทอร์เน็ตเอกซ์พลอเรอร์, Netscape, มอซิลลา ไฟร์ฟอกซ์, และ ซาฟารี เป็นต้น
โปรแกรมสำหรับสร้างเว็บเพจ เช่น โปรแกรม Macromedia Dreamweaver , PHP & MySQL , Flash Professional เป็นต้น

Website

เว็บไซต์ (อังกฤษ: Website, Web site หรือ Site) หมายถึง หน้าเว็บเพจหลายหน้า 
ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ ส่วนใหญ่จัดทำขึ้นเพื่อนำเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หน้าแรกของเว็บไซต์ที่เก็บไว้ที่ชื่อหลักจะเรียกว่า โฮมเพจ เว็บไซต์โดยทั่วไปจะให้บริการต่อผู้ใช้ฟรี แต่ในขณะเดียวกันบางเว็บไซต์จำเป็นต้องมีการสมัครสมาชิกและเสียค่าบริการเพื่อที่จะดูข้อมูล ในเว็บไซต์นั้น ซึ่งได้แก่ข้อมูลทางวิชาการ 
ข้อมูลตลาดหลักทรัพย์ หรือข้อมูลสื่อต่างๆ ผู้ทำเว็บไซต์มีหลากหลายระดับ ตั้งแต่สร้างเว็บไซต์ส่วนตัว จนถึงระดับเว็บไซต์สำหรับธุรกิจหรือองค์กรต่างๆ การเรียกดูเว็บไซต์โดยทั่วไปนิยมเรียกดูผ่านซอฟต์แวร์ในลักษณะของ เว็บเบราว์เซอร์

Homepage

โฮมเพจ คือคำที่ใช้เรียกหน้าแรกของเว็บไซต์ โดยเป็นทางเข้าหลักของเว็บไซต์ เมื่อเปิดเว็บไซต์นั้นขึ้นมา โฮมเพจ ก็จะเปรียบเสมือนกับเป็นสารบัญและคำนำที่เจ้าของเว็บไซต์นั้นได้สร้างขึ้น เพื่อใช้ประชาสัมพันธ์องค์กรของตน นอกจากนี้ ภายในโฮมเพจก็อาจมีเอกสารหรือข้อความที่เชื่อมโยงต่อไปยังเว็บเพจอื่นๆอีก ด้วย


Web Browser
เว็บเบราว์เซอร์ (web browser) เบราว์เซอร์ หรือ โปรแกรมดูเว็บ คือโปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเวบที่ สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล (html) ที่จัดเก็บไว้ที่ระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์ หรือระบบคลังข้อมูลอื่น ๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่าย คอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ
ประโยชน์ของ Web Browser
สามารถดูเอกสารภายในเว็บเซิร์ฟเวอร์ได้ อย่างสวยงามมีการแสดงข้อมูลในรูปของ ข้อความ ภาพ และระบบมัลติมีเดียต่างๆ ทำให้การดูเอกสารบนเว็บมีความน่าสนใจมากขึ้น ส่งผลให้อินเตอร์เน็ตได้รับความนิยมเป็นอย่างมากเช่นในปัจจุบัน ปัจจุบัน web browser ส่วนใหญ่จะรองรับ html 5 และ อ่าน css เพื่อความสวยงามของหน้า web page

รายชื่อเว็บเบราว์เซอร์ (web browser) ที่เป็นที่นิยมอย่างแพร่หลาย

Internet Explorer
Mozilla Firefox
Google Chrome
Safari 


    HTML

      HTML ย่อมาจากคำว่า Hyper Text Markup Language เป็นภาษาหลักที่ใช้ในการสร้างโฮมเพจ

    ใช้อะไรในการเขียน HTML      การสร้างไฟล์   HTML  เราสามารถสร้างจาก Text  Editor เช่นจาก Notepad หรือ  Wordpad ก็ได้แต่สำหรับการ Save ไฟล์ เราจำเป็นต้องใส่  " ชื่อไฟล์ . html "   ซึ่งถ้าหากคุณไม่ใส่  " " จะ กลายเป็นไฟล์   .TXT แทน  ในปัจจุบัน มีโปรแกรมต่าง ๆ มากมายที่พัฒนาขึ้นมาเพื่อช่วยอำนวยความสะดวกในหารเขียนโค้ด html เช่นโปรแกรม Macromedia Dreamweaver ปัจจุบันเวอร์ชั่น CS4 แล้ว มีความง่ายและสะดวกในการสร้าง html ขึ้นมา ด้วย Tool ต่าง ๆ ของโปรแกรมครับ


    โครงสร้างพื้นฐาน HTML

            โครงสร้าง HTML ประกอบด้วย 2 ส่วนสำคัญคือ
                    1. ส่วนหัว ( Head )
                    2. ส่วนเนื้อหา ( Body )
    โดย CODE จะเป็นแบบนี้ครับ
    1.<HTML>
    2.<HEAD>
    3.</HEAD>
    4.<BODY>
    5.</BODY>

    6.</HTML>

    URL
    URL (ยูอาร์แอล) ย่อมาจากคำว่า Uniform Resource Locator หมายถึง ตัวบ่งบอกข้อมูล หรือ ที่อยู่ (Address) ของไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต เช่น  URL ของกูเกิลประเทศไทย  คือ http://www.google.co.th


    แหล่งอ้างอิง

    http://th.wikipedia.org/wiki/%E0%B8%AD%E0%B8%B4%E0%B8%99%E0%B9%80%E0%B8%97%E0%B8%AD%E0%B8%A3%E0%B9%8C%E0%B9%80%E0%B8%99%E0%B9%87%E0%B8%95

    http://th.wikipedia.org/wiki/%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%80%E0%B8%9E%E0%B8%88

    http://th.wikipedia.org/wiki/%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C

    http://www.google.co.th/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&sqi=2&ved=0CHAQFjAA&url=http%3A%2F%2Fwww.mindphp.com%2F%25E0%25B8%2584%25E0%25B8%25B9%25E0%25B9%2588%25E0%25B8%25A1%25E0%25B8%25B7%25E0%25B8%25AD%2F73-%25E0%25B8%2584%25E0%25B8%25B7%25E0%25B8%25AD%25E0%25B8%25AD%25E0%25B8%25B0%25E0%25B9%2584%25E0%25B8%25A3%2F2089-home-page-%25E0%25B8%2584%25E0%25B8%25B7%25E0%25B8%25AD%25E0%25B8%25AD%25E0%25B8%25B0%25E0%25B9%2584%25E0%25B8%25A3.html&ei=jWvRT9m5JYTJmAXE6uWFAw&usg=AFQjCNFHRQoXz6HZc9410zp2q2Brf3ECiw&sig2=5EEY-P4H70D_5Nhqga965Q 

    http://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/66-server-hosting/1849-web-browser-%E0%B8%AB%E0%B8%A1%E0%B8%B2%E0%B8%A2%E0%B8%96%E0%B8%B6%E0%B8%87%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-web-browser-%E0%B8%84%E0%B8%B7%E0%B8%AD.html 

    http://www.xvlnw.com/knowledge-readknowledge-id40.html 

    http://guru.google.co.th/guru/thread?tid=068037b012a3d15b&pli=1

    ประวัติส่วนตัว

    ชื่อ นิโรบล ทองดี อายุ 17ปี
    อยู่โรงเรียนธนบุรีวรเทพีพลารักษ์
    เป็นคนนิสัย สนุกสนาน ไม่เครียด
    ชอบกินข้าวผัดปลาหมึก
    ขอบคุณค่ะ