วันเสาร์ที่ 14 กันยายน พ.ศ. 2556

การแทรกตาราง

การแทรกตาราง

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

                    1.  คำสั่งหลักที่ใช้ในการสร้างตารางของภาษา HTML  มีดังนี้

 <TABLE>...........</TABLE>   

เป็นคำสั่งที่กำหนดให้โปรแกรมเบราว์เซอร์สร้างตาราง

 <CAPTION>...........</CAPTION>   

เป็นคำสั่งที่ใช้ตั้งชื่อหรือหัวข้อเรื่องให้กับตาราง

 <TR>...........</TR>   

เป็นคำสั่งที่ใช้กำหนดแถว (ROW)

 <TH>...........</TH>   

เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลส่วนหัวของตาราง

<TD>...........</TD>   

เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลในแต่ละแถว

 โครงสร้างของตาราง

<TABLE>
            <CAPTION> ชื่อตาราง </CAPTION>
            <TR>
                     <TH> ข้อมูลส่วนหัว </TH>
            </TR> 
            <TR>
                     <TD> ข้อมูล </TD>
             </TR>
             <TR>
                     <TD> ข้อมูล </TD>
             </TR>
</TABLE>   

 ตัวอย่างการสร้างตาราง



 2.  คำสั่งต่างๆ ที่ใช้ในการตกแต่งตารางของภาษา HTML 

                                  2.1 คำสั่ง BORDER   ใช้กำหนดความหนาให้กับเส้นขอบของตาราง มีหน่วยเป็น Pixel ถ้าไม่ใส่คำสั่งนี้ไว้ด้วย  BORDER  ก็จะมีค่าเท่ากับ 1 ซึ่งเป็นค่าปกตอ คือจะไม่เห็นเส้นขอบของตาราง

2.2  คำสั่ง ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ

                                              - LEFT    คือ จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ

                                              - RIGHT  คือ จัดตารางชิดขวาของจอภาพ

                                              - CENTER  คือ จัดตารางไว้กึ่งกลางของจอภาพ

                                           ตัวอย่างการสร้างตารางอยู่กึ่งกลางจอภาพ

2.3 คำสั่ง WIDTH ใช้กำหนดความกว้างของตารางทั้งหมด  มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้

                                    2.4 คำสั่ง HEIGHT  ใช้กำหนดความสูงของตารางทั้งหมด มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้

                                    2.5 คำสั่ง BGCOLOR    เป็นคำสั่งที่ใช้ในการกำหนดสีพื้นหลังของตารางใช้ได้กับเว็บเบราว์เซอร์ Internet Explorer เท่านั้น

 2.6 คำสั่ง  CELLSPACING  ใช้กำหนดระยะห่างระหว่างช่องแต่ละช่องในตาราง โดยการเพิ่มขนาดหรือลดขนาดตามความหนาของเส้นขอบตาราง

 2.7 คำสั่ง CELLPADDING  ใช้กำหนดระยะห่างระหว่างบรรทัดของตาราง โดยการเพิ่มขนาดหรือลดขนาดตามความสูงของเส้นขอบตาราง

2.8 คำสั่ง Colspan และ Rowspan 

       คำสั่ง <TD  COLSPAN> เป็นคำสั่งในการรวมคอลัมน์เข้าด้วยกัน ตามค่าของจำนวนคอลัมน์ที่กำหนดไว้
       รูปแบบคำสั่ง      <TD  COLSPAN = "Number">
       โดยที่           - COLSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมคอลัมน์
                            - Numberคือ ค่าตัวเลขที่ใช้ในการรวมคอลัมน์เข้าเป็นคอลัมน์เดี่ยวกัน

        คำสั่ง <TD  ROWSPAN> เป็นคำสั่งในการรวมแถวเข้าด้วยกัน ตามค่าของจำนวนแถวที่กำหนดไว้
         รูปแบบคำสั่ง     <TD  ROWSPAN = "Number">
         โดยที่         - ROWSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมแถว

                           - Number คือ ค่าตัวเลขที่ใช้ในการรวมแถวเข้าเป็นแถวเดียวกัน

 อ้างอิง
https://sites.google.com/site/cirayus/sux-kar-reiyn-ru/kar-srang-tarang
เขียนโดย ที่ ไม่มีความคิดเห็น:

การแทรกรูปภาพ

การแทรกรูปภาพ




รูปแบบแท็กการใส่รูปภาพ      <img src = "ชื่อภาพ">

รูปแบบการใส่รูปภาพ

  <html>
  <head><title> ....การใส่รูปภาพ....</title></head>
       <body>
               <img src = "lilies.jpg">        
       </body> 
  </html>

*กรณีถ้ารูปอยู่ในโฟล์เดอร์เดียวกับเว็บเพจ ให้ใส่ชื่อไฟล์
สำหรับแท็กการใส่รูปภาพ สามารถมี Attribute กำกับเพิ่มเติมได้้ ไม่ว่าจะเป็นขนาดความกว้าง ความสูงของรูปภาพว่าเราต้องการให้แสดงขนาดกว้างและสูง เท่าไหร่ ซึ่งหากเราไม่ได้ระบุภาพจะมีขนาดเท่าขนาดของภาพต้นฉบับ นอกจากนี้เรายังสามารถใส่ขอบของภาพได้ด้วย ซึ่ง Attribute มีดังนี้

                ความกว้าง    width="ตัวเลขระบุความกว้าง"
                ความสูง       height="ตัวเลขระบุความสูง" 
                เส้นขอบ      border="ตัวเลขระบุความหนาของเส้นขอบ"

ตัวอย่าง    <img src = "lilies.jpg" width="200" height="150" border="1">

จากตัวอย่าง จะแสดงภาพขนาด 200x150 px. (หน่วยการแสดงผลภาพ แสดงเป็น Pixels) และมีขอบ หากไม่ต้องการให้แสดงเส้นขอบให้กำหนด border="0" (หากต้องการใ้ห้ขอบมีความหนามาก ระบุตัวเลขให้มาก

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

วันอังคารที่ 10 กันยายน พ.ศ. 2556

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



1.การกำหนดแบบอักษร

การกำหนดฟอนต์ ก็เหมือน ๆ กับตอนที่เราิพิมพ์งานใน word นั้นละค่ะ ซึ่งเราจะสามารถเลือกได้ว่าเราจะใช้ฟอนต์แบบไหน ซึ่งอาจจะเป็น Arial หรือ Angsana New เป็นต้น ในการเขียน HTML เราก็สามารถกำหนดได้ค่ะ ว่าจะให้ข้อความของเราแสดงผลด้วยรูปแบบของฟอนต์แบบไหน แต่ในการเขียนเว็บเพจนั้น ฟอนต์ที่เป็นที่นิยมจะมีด้วยกัน 2 ชนิดคือ MS Sans Serif และ Tahoma โดยฟอนต์แบบ MS Sans Serif จะนิยมใช้กับเว็บที่มีการแสดงผลข้อความเป็นภาษาไทย และ Tahoma มักใช้การแสดงผลข้อความเป็นภาษาอังกฤษ แต่ก็สามารถใช้กับข้อความภาษาไทยได้เหมือนกัน (อย่าง Nextstepdev ก็ใช้ฟอนต์แบบ Tahoma) รูปแบบการกำหนดชื่อฟอนต์ ก็เป็นตามตัวอย่างด้านล่างค่ะ 

<html>
  <head><title> ....การหนดรูปแบบฟอนต์ของข้อความ....</title></head>
       <body>
               <font face = "MS Sans Serif"> ข้อความนี้กำหนดฟอนต์แบบ MS Sans Serif </font> <br>
               <font face = "Tahoma"> ข้อความนี้กำหนดฟอนต์แบบ Tahoma </font> <br>
       </body> 
  </html>



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

มีอยู่ 6 ระดับ คือ H1, H2, H3, H4, H5 และ H6 โดยจะเรียงจากขนาดใหญ่ไปหาเล็ก



H1   จะมีขนาด 21 pixel และตัวหนา

H2   จะมีขนาด 17 pixel และตัวหนา

H3   จะมีขนาด 14 pixel และตัวหนา

H4   จะมีขนาด 12 pixel และตัวหนา

H5   จะมีขนาด 11 pixel และตัวหนา

H6   จะมีขนาด 9 pixel และตัวหนา

เช่น 
<Html>                                                          
<Body>
<H1> H1 </H1>                                           

<H2> H2 </H2>


<H3> H3 </H3>


<H4> H4 </H4>

<H5> H5 </H5>


<H6> H6 </H6>


</Body>  
</Html>  





3 สีตัวอักษร

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

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


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

           <b> = ตัวหนา
            <i> = ตัวเอียง
           <u> = ตัวขีดเส้นใต้

            <b>HTML</b><br>
            <i>HTML</i><br>
            <u>HTML</u><br>





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


ตัวขีดฆ่า ใช้คำสั่ง <S>...</S>

ตัวอักษรยกขึ้น ใช้คำสั่ง <SUP>...</SUP>

ตัวอักษรห้อยลง ใช้คำสั่ง <SUB>...</SUB>




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

ตัวอักษรกระพริบ ใช้คำสั่ง <BLINK>...</BLINK>
ตัวอักษรวิ่ง        ใช้คำสั่ง 
 1.<marquee direction="left">ข้อความวิ่งจากขวาไปซ้าย</marquee>
 2.<marquee direction="right">ข้อความวิ่งจากซ้ายไปขวา</marquee> 
 3.<marquee direction="up">ข้อความวิ่งจากล่างขึ้นบน</marquee>
 4.<marquee direction="down">ข้อความวิ่งจากบนลงล่าง</marquee>



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

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

อ้างอิง
http://www.nr.ac.th/learning/htmlforweb/learning2.html



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

วันพุธที่ 10 กรกฎาคม พ.ศ. 2556

HTML tag พื้นฐาน



- HTML ย่อมาจาก HyperText Markup Language เป็นภาษาที่ใช้ในการแสดงผลของเอกสารบน website  ใช้โปรเเกรม TEXT Editor ทั่วไป เช่น Notepad เป็นต้น เปิดดูเอกสารโดยInternet Explorer


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

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

<HTML>…</HTML> คือ เป็นแท็กกำหนดถึงจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร HTML

<HEAD>…</HEAD>  คือ เป็นแท็กกำหนดจุดเริ่มต้นและจุดสิ้นสุดของส่วนกำหนดค่าเริ่มต้นของเอกสาร HTML เช่น ชื่อของเอกสาร

<TITLE>…<TITLE> คือ เป็นแท็กกำหนดชื่อของเอกสาร

<BODY>…</BODY> คือ เป็นแท็กกำหนดจุดเริ่มต้นและจุดสิ้นสุดของส่วนแสดงข้อมูลของเอกสาร

<BR> เป็น TAG สำหรับการขึ้นบรรทัดใหม่ของ HTML

<P> คือ การกำหนด Paragraph ของข้อมูลภายในเว็บเพจ




                                                      ตัวอย่างโค้ตการเเสดงผล


ผลจากโค้ต

อ้างอิง : สมุดคอมพิวเตอร์เพิ่มเติมม.6
            http://ultraman081.blogspot.com/ 


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

วันอาทิตย์ที่ 23 มิถุนายน พ.ศ. 2556

คำศัพท์ที่เกี่ยวข้องกับการสร้างเว็บ


1. Internet หมายถึง เครือข่ายของคอมพิวเตอร์ขนาดใหญ่ที่เชื่อมโยงเครือข่ายคอมพิวเตอร์ทั่วโลกเข้าด้วยกัน โดยอาศัยเครือข่ายโทรคมนาคมเป็นตัวเชื่อมเครือข่าย





2. WWW ย่อมาจาก World Wide Web หมายถึง คอมพิวเตอร์ส่วนหนึ่งบนอินเตอร์เน็ต ที่ถูกเชื่อมต่อกันในแบบพิเศษที่ทำให้คอมพิวเตอร์เหล่านั้นสามารถเข้าถึงข้อมูลเนื้อหาที่เก็บไว้ภายในของแต่ละเครื่องได้ 




3. Website หมายถึง แหล่งที่เก็บรวบรวมข้อมูลเอกสารและสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ ของแต่ละบริษัทหรือหน่วยงานต่าง ๆ



4. Webpage หมายถึง  หน้าหนึ่ง ๆ ของเว็บไซต์ ที่เราเปิดขึ้นมาใช้งานโดยทั่วไป เว็บเพจส่วนใหญ่จะอยู่ในรูปของเอกสาร HTML หรือ XHTML (ซึ่งมักมีนามสกุลไฟล์เป็น htm หรือ html) มีลิงก์สำหรับเชื่อมโยงไปยังเว็บเพจหน้าอื่น ๆ สามารถใส่รูปภาพและรูปภาพยังสามารถเป็นลิงก์ กล่าวคือสามารถคลิกบนรูปเพื่อกระโดดไปหน้าอื่นได้ นอกจากนี้ยังสามารถใส่แอปเพล็ต (applet) ซึ่งเป็นโปรแกรมขนาดเล็กแสดงภาพเคลื่อนไหว มีปฏิสัมพันธ์กับผู้ใช้ หรือสร้างเสียง ได้อีกด้วย



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






6. Web browser หมายถึง ซอฟต์แวร์หรือโปรแกรมคอมพิวเตอร์ที่ใช้ในการท่องเว็บหรือใช้ดูข้อมูลที่อยู่ในหน้าเว็บเพจ





7. URL ย่อมาจาก Uniform Resource Locator  หมายถึง ที่อยู่ของไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต

เป็นเสมือนที่อยู่ (Address) เพื่อการระบุตำแหน่งของเอกสารข้อมูลต่างๆ สำหรับเข้าถึงที่ตั้งทรัพยากร ไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต (Internet) เหล่านั้น ซึ่งไฟล์ข้อมูลแต่ละอันจะมี URL เป็นของตัวเอง โดยแต่ละส่วนของ URL จะเป็นสิ่งที่ใช้ระบุข้อมูลเกี่ยวกับที่ตั้งของเอกสารนั้น



8. HTTP ย่อมาจาก  Hypertext Transfer Protocol  หมายถึง  โพรโทคอลสื่อสารสำหรับการแลกเปลี่ยนสารสนเทศผ่านอินเทอร์เน็ต โดยหลักแล้วใช้ในการรับเอกสารข้อความหลายมิติที่นำไปสู่การเชื่อมต่อกับ World Wide Webจะใช้เมื่อเรียกโปรแกรมWeb browser เช่น Firefox, Google Chrome, Safari,Opera และ  Internet Explorer เรียกดูข้อมูลหรือเว็บเพจ
เขียนโดย ที่ ไม่มีความคิดเห็น:

วันพุธที่ 29 พฤษภาคม พ.ศ. 2556

            
                                         ชื่อนางสาวนันทิกานต์  ฉายศิรินันท์
                                         ชื่อเล่น ชมพู่   อายุ 17ปี
                                         โรงเรียนธนบุรีวรเทพีพลารักษ์
                                         เเผนการเรียน คณิต-อังกฤษ
                                         สีที่ชอบ สีฟ้า
                                         กีฬาที่ชอบ ว่ายน้ำ
                                         งานอดิเรก ฟังเพลง ดูทีวี
                                         e-mail my_love_you0610@hotmail.com
                                                
                                             


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