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


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


      โครงสร้างตาราง
<TABLE>
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
</TABLE> 

     คำสั่ง/คุณสมบัตร
<TABLE>...</TABLE> : เป็นคำสั่งเปิดปิดตาราง
<TR>...</TR>  : ตารางตามแนวนอน เป็นการกำหนดแถวในตาราง
<TH>...</TH> : หัวข้อ ของ ตาราง ข้อความ ที่อยู่ใน คำสั่ง จะถูก จัดให้เป็น ตัวหนา และกึ่งกลาง 
<TD>...</TD> : เป็นราย ละเอียด ของตาราง เป็นการ กำหนดจำนวน คอร์ลัม ของตาราง

 *  แต่ตารางนี้ไม่มีความหนา ดังนั้นจึงต้องเพิ่มความหนาให้ โดยการเติม border=x ใน
<TABLE...> (เมื่อ x มีค่าความหนาตั้งแต่ 0 เป็นต้นไป ยิ่งเลขมาก ยิ่งหนามาก)
ตัวอย่าง
ผลลัพธ์



     ถ้าเราอยากให้เส้นขอบตารางมีสีสันขึ้นมา ต้องเพิ่ม bordercolor="x" ใน
<TABLE...> (x เป็นชื่อสี หรือโค้ดสี 6 หลัก)

ตัวอย่าง


ผลลัพธ์



     ถ้าเราต้องการให้ตารางอยู๋ด้านใดด้านหนึ่งของเวพ ต้องเพิ่ม align="x" ใน 
<TABLE...> (ถ้าจะให้อยู่ด้านขวา ก็เปลี่ยน x เป็น right ถ้าจะให้อยู่ตรงกลาง ก็ให้เปลี่ยนเป็น center)
ตัวอย่าง


ผลลัพธ์



     ถ้าเราต้องการเพิ่มขนาดของตารางมี 2 แบบดังนี้
1. เพิ่ม height=x (x เป็นตัวเลข)
       -ใน <TABLE...> เพื่อกำหนดขนาดความสูงทั้งตาราง
       -ใน <TD...> เพื่อกำหนดขนาดความสูงแฉพราะช่องตาราง
2. เพิ่ม width=x (x เป็นตัวเลข)
       -ใน <TABLE...> เพื่อกำหนดขนาดความกว้างทั้งตาราง
       -ใน <TD...> เพื่อกำหนดขนาดความสูงแฉพราะช่องตาราง 
    

ตัวอย่าง การกำหนดใน <TABLE...>


ผลลัพธ์


ตัวอย่าง การกำหนดใน <TD...>


ผลลัพธ์



     ถ้าเราต้องการรวมคอลัมน์เข้าด้วยกันเป็นเซลล์เดียวมี 2 แบบดังนี้
1. เพิ่ม colspan=x (x เป็นตัวเลข) ใน <TD...> เพื่อรวมคอลัมน์ในแนวนอน
2. เพิ่ม rowspan=x (x เป็นตัวเลข) ใน <TD...> เพื่อรวมคอลัมน์ในแนวตั้ง

ตัวอย่าง การกำหนด colspan=x


ผลลัพธ์


ตัวอย่าง การกำหนด rowspan=x



ผลลัพธ์






แหล่งที่มา : http://www.bcoms.net/html/10.asp
ลงวันที่ : 12 กันยายน 2555


ขอบคุณครับ :))

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

วันอังคารที่ 14 สิงหาคม พ.ศ. 2555



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


      ตามปกติภาพที่จะใช้แสดงในเว็บเพจ นิยมใช้ภาพที่มีชื่อสกุลของภาพเป็น .JPG หรือ .GIF เพราะ
เป็นไฟล์ภาพที่มีขนาดเล็ก สามารถแสดงผลได้รวดเร็ว จึงไม่ต้องเสียเวลาในการรอให้ภาพปรากฏนาน
เกินไป การแทรกภาพใช้คำสั่งดังนี้
รูปภาพ



     กรณีที่ต้องการแสดงภาพที่มีขนาดเท่ากับต้นฉบับ ก็จะใช้คำสั่งเพียงสั้น ๆ ดังนี้
<IMG SRC="ชื่อภาพ"> เช่น

 <IMG SRC="boy.jpg">
ตัวอย่าง
ผลลัพธ์

     กรณีที่ต้องการกำหนดขนาดรูปภาพ จะใช้<IMG SRC="ชื่อภาพ" WIDTH=ขนาดความกว้าง HEIGHT=ขนาดความสูง>
เช่นภาพชื่อ girl.jpg มีขนาดความกว้าง 80 และความสูง 100 จะใช้คำสั่งแสดงภาพเป็น

 <IMG SRC="boy.jpg" WIDTH=80 HEIGHT=100> 

ตัวอย่าง


ผลลัพธ์

     กำหนดให้ภาพอยู่ทางซ้าย  เพิ่มคำสั่ง <RIGHT >...</RIGHT>ไว้ในคำสั่งแสดงภาพ เช่น
<RIGHT><IMG SRC="boy.jpg"></RIGHT>

ตัวอย่าง


ผลลัพธ์




     กำหนดให้ภาพอยู่ทางซ้าย  เพิ่มคำสั่ง <CENTER>...</CENTER>ไว้ในคำสั่งแสดงภาพ เช่น
<CENTER><IMG SRC="boy.jpg"></CENTER>

ตัวอย่าง


ผลลัพธ์


     กำหนดให้ภาพเป็นพื้นหลัง เพิ่มคำสั่ง  <BODY BACKGROUND="..."> ไว้ในคำสั่งแสดงภาพ เช่น
<BODY BACKGROUND="boy.jpg">

ตัวอย่าง
ผลลัพธ์


แหล่งที่มา :  http://www.yupparaj.ac.th/CAI/32102/image1.html
                          
ลงวันที่      : 13 สิงหาคม 2555

ขอบคุณครับ :))


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

วันอาทิตย์ที่ 22 กรกฎาคม พ.ศ. 2555


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

การกำหนดแบบอักษร
     รูปแบบแท็ก Code  คือ   

<font face = " รูปแบบตัวอักษรที่ต้องการ "> ข้อความที่ ต้องการ</font>

ตัวอย่าง 

<font  face  = " Cooper Black "> Tongtang </font>





ขนาดตัวอักษร
     รูปแบบแท็ก Code  คือ 

<font size = " ขนาดตัวเลขที่ต้องการ "> ข้อความที่ต้องการ </font>

ตัวอย่าง


<font size = " 5 "> Tongtang </font>
<font size = " 7 "> Tongtang </font>





สีตัวอักษร

     รูปแบบแท็ก Code  คือ 


<font color = " สีที่ต้องการ ">  ข้อความที่ต้องการ </font>
หรือ
<font color = " รหัสสี "> ข้อความที่ต้องการ </font> 

ตัวอย่าง


<font color = " Red "> Tongtang </font> 
<font color= " #48D1CC "> Tongtang </font>







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

     รูปแบบแท็ก Code  คือ 

   -ตัวเอียง
<i> ข้อความที่ต้องการ </i>
   -ตัวหนา
<b> ข้อความที่ต้องการ </b>
   -ตัวขีดเส้นใต้ 
<u> ข้อความที่ต้องการ </u> 

ตัวอย่าง

<i>  Tongtang  </i>
<b>  Tongtang  </b>
<u>  Tongtang  </u> 






ตัวขีดฆ่า ตัวยก ตัวห้อย
     รูปแบบแท็ก Code  คือ 


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


ตัวอย่าง  


<del>  Tongtang  </del> 
2 <sup> 5 </sup>
H <sub> 3 </sub> 





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

     รูปแบบแท็ก Code  คือ 


   -ตัวอักษรวิ่ง
<marquee> ข้อความที่ต้องการ </marquee>
  
  -ตัวอักษรกระพริบ
<blink> ข้อความที่ต้องการ </blink>

ตัวอย่าง


<marquee>  Tongtang  </marquee>
<blink>  Tongtang  </blink>







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

     รูปแบบแท็ก Code  คือ 


   - การจัดย่อหน้าแบบซิดซ้าย
<p align=left> การจัดย่อหน้าแบบชิดซ้าย </p>


   - การจัดย่อหน้าแบบกึ่งกลาง
<p align=center> การจัดย่อหน้าแบบกึ่งกลาง </p>


   - การจัดย่อหน้าแบบชิดขวา
<p align=right> การจัดย่อหน้าแบบชิดขวา </p>

ตัวอย่าง


<p align=left>  Tongtang  </p>
<p align=center>   Tongtang   </p>
<p align=right>   Tongtang   </p>





ที่มา :
                http://wemahidol.mahidol.ac.th/comm/space.php?uid=36&do=blog&id=63
                http://www.thaiall.com/learn/htmchr.htm
                http://www.bkk2.in.th/Topic.aspx?TopicID=7177



ลงวันที่ : 4 กรกฎาคม 2555




ขอบคุณครับ :))
เขียนโดย ที่ ไม่มีความคิดเห็น:

วันอังคารที่ 3 กรกฎาคม พ.ศ. 2555

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

    
   HTML (ชื่อเต็มคือ Hypertext Markup Language ภาษามาร์กอัปข้อความหลายมิติ) คือภาษามาร์กอัปออกแบบมาเพื่อใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์ เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee) สำหรับภาษา SGML ในปัจจุบัน HTML เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C) ในปัจจุบัน ทาง W3C ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่งที่มีหลักเกณฑ์ในการกำหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบัน

ใช้อะไรในการเขียน HTML

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


Text Editor

   

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


การเขียน HTML


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

ส่วนโครงสร้างภายในจะประกอบด้วยส่วนหลักๆดังนี้
   Headers <h1>,<h2>
   Paragraph <p>
   Lists <ul><li>,<ol><li>,<dl><dt><dd>
   Tables <table>
   Media เช่น images <img src=”"? alt=”">
   Links <a href=”"? title=”">
   Form <form>

Header
   คือหัวข้อเรื่องเพื่อบ่งบอกว่า หน้า page นั้น เกี่ยวกับเรื่องอะไร ลำดับความสำคัญสูงสุด คือ <h1> เราควรจะมี <h1> เพียงอันเดียว ต่อ 1 หน้า ส่วน <h2> <h3> มีได้หลายๆอัน เลือกใช้ตามลำดับความสำคัญของหัวเรื่อง
*** ไม่ควรใช้ เกินกว่า <h6>


Paragraph
   ใช้ <p> ครอบส่วนที่เป็นเนื้อหา text ไม่ควรมีสิ่งที่เป็นบล็อกอยู่ภายใน เช่น table, div, header และควรรปิดแท็ก </p> เสมอ

List
   ใช้ในลักษณะที่มี text เป็นข้อๆ เช่น ส่วนเมนู เนวิเกชั่น ต่างๆ มี 3 รูปแบบให้เลือกใช้
Unorder list <ul><li></li></ul>
Order list <ol><li></li></ol>
Definition list <dl><dt></dt><dd></dd></dl>

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

Media
   รูปใน img จะต้องมี alt=”คำบรรยาย” เสมอ ถ้าเป็นไอคอนเล็กๆหรือ ขอบโค้ง หรืออะไรก็ตาม ถ้าไม่มีความหมาย ให้ใส่ alt=”" เปล่าๆไว้

Link
   ลิ้งค์นั้น ให้ใช้ title=”" ในลิ้งค์ ที่อธิบายไม่ชัดเจน

Form
tag ที่จะต้องมี สำหรับ form คือ
  <fieldset> ใช้เพื่อรวมกลุ่ม label ในกลุ่มเดียวกัน
  <legend> ใช้เพื่อบรรยาย fieldset
  <label> ใช้เพื่อบรรยาย input

รูปแบบโค้ด
  <B>WebThaiDD.COM</B> //โค้ดกำหนดตัวอักษรให้หนา
  <I>WebThaiDD.COM</I> //โค้ดกำหนดตัวอักษรให้เอียง
  <U>WebThaiDD.COM</U> //โค้ดกำหนดตัวอักษรให้ขีดเส้นใต้
  <STRIKE>WebThaiDD.COM</STRIKE> //โค้ดกำหนดตัวอักษรให้ขีดฆ่าตัวอักษร

รูปแบบอื่นๆ
  <BLINK>...</BLINK>//กำหนดให้ตัวอักษรกระพริบ
  <BIG>...</BIG>//กำหนดให้ตัวอักษรใหญ่ขึ้นกว่าปกติ
  <SMALL>...</SMALL>//กำหนดให้ตัวอักษรเล็กลงกว่าปกติ 
  <SUB>...</SUB>//กำหนดให้ตัวอักษรเป็นตัวห้อย
  <SUP>...</SUP>//กำหนดให้ตัวอักษรเป็นตัวยกกำลัง


แหล่งอ้างอิง :
http://www.webthaidd.com/html/webthaidd_article_290_.html
http://school.obec.go.th/pp_school/html/editor.html
http://www.divland.com/blog/2007/05/01/html-coding-standards/
http://www.mindphp.com/modules.php?name=News&file=article&sid=84
http://www.xvlnw.com/knowledge-readknowledge-id40.html

ลงวันที่ :
23 มิถุนายน 2555


ขอบคุณครับ!!! :))



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

วันพุธที่ 13 มิถุนายน พ.ศ. 2555


คำศัพท์พื้นฐานเกี่ยวกับการสร้างเว็บ
(Basic Words About Web Creating)


Internet คือ ระบบเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลก เกิดจากการเชื่อมโยงของคอมพิวเตอร์หลายล้านเครื่องที่กระจายอยู่ตามที่ต่างๆ ในโลก อินเตอร์เน็ตเป็นแหล่งที่รวมของข้อมูลมหาศาล และเป็นช่องทาง ติดต่อสื่อสารเพื่อแลกเปลี่ยนข้อมูลที่สะดวกและรวดเร็ว บริการยอด นิยมบนอินเตอร์เน็ต ได้แก่ เว็บเพจ (www) อีเมล์ และInstant Messageing เช่น MSN Messenger, Yahoo Messenger,ICQ เป็นต้น





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






WWW (World Wide Web) เป็นบริการข้อมูล โดยข้อมูลของ www จะอยู่ในรูปเอกสารแบบ Hypertext ซึ่งภายในเอกสารจะมีจุดเชื่อม โยง (link) ไปยังเอกสารอื่นๆ ที่เกี่ยวข้อง เอกสารต่างๆ ที่เชื่อมโยง กันเหมือนใยแมงมุม เป็นที่มาของคำว่า Web.
Website คือ แหล่งความรู้หรือข้อมูลข่าสารที่ถูกเก็บไว้ในระบบ เน็ตเวิร์ก (Network) ออนไลน์ (Online) ที่เรียกว่า อินเตอร์เน็ต (Internet) ไม่ว่าคุณจะอยู๋ที่ไหนบนโลกนี้ถ้า คอมพิวเตอร์ (Computer) ของคุณได้ถูกเชื่อมต่อไว้กับระบบอินเตอร์เน็ต คุณสามารถที่จะเข้าชมเว็บไซต์ผ่านทาง ซอฟต์แวร์ (Sofware) ที่เรียกว่า เว็บบาวเซอร์ (Web Browser)



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




Webpage คือ หน้าเอกสารของบริการ www ที่อยู่ในรูปแบบ HTML ภายในประกอบด้วยข้อความ ภาพ ลิงค์ Web page แต่ละหน้าจะเชื่อมโยงกัน เพื่อให้เราเรียกดูเอกสารหน้าอื่นๆ ที่เกี่ยวข้องได้อย่างสะดวก ไม่ต้องระบุ URL เองทุกครั้ง






HTML คือ ภาษาที่ใช้ในการเขียนเว็บเพจ ย่อมาจากคำว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup หมายถึง วิธีในการเขียนข้อความ language หมายถึงภาษา ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ในการเขียนข้อความ ลงบนเอกสารที่ต่างก็เชื่อมถึงกันใน cyberspace ผ่าน Hyperlink นั่นเอง



Web browser คือ โปรแกรมสำหรับเรียกดูเว็บเพจ โดยจะแปลคำสั่ง HTML แล้วประมวลผลเพื่อแสดงผลออกมาเป็น Web page เช่น Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เป็นต้น




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

http://www.enjoyday.net/build-website-vocab.html

http://website.jajar.com/%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/





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