Intro to html

ทำความเข้าใจ HTML

 HTML เป็น  Script ที่เรียงลำดับ  Tag  (คำสั่ง)  ไว้เป็น  file  ไฟล์หนึ่ง  เพื่อเป็นตัวบอก  Browser  ว่าจะต้องแสดงอะไร  ลักษณะอย่างไร
 Tag  จะประกอบด้วยเครื่องหมาย <  ตามด้วยชื่อ  Tag  และเครื่องหมาย  >  ซึ่งโดยทั่วไป  Tag  จะมีเป็นคู่  เพื่อเปิดและปิดคำสั่งโดย Tag  เปิดจะมีลักษณะดังข้างต้น  แต่  Tag  ปิดจะเพิ่ม Slash (/)  หน้า  Tag  เท่านั้น  ตัวอย่างเช่น  คำสั่ง  Heading

 <HEADING>…………….</HEADIGNG>

 Tag  จะพิมพ์ด้วยตัวอักษรใหญ่ หรือเล็กก็ได้
 (ข้อตกลง : ในเอกสารนี้  Tag  จะใช้ตัวพิมพ์ใหญ่ตลอด)

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

 ลำดับ  Tag  ใน  HTML Document
  <HTML>…………..</HTML>
 คือจุดเริ่มต้นและสิ้นสุดของโปรแกรม และแจ้งแก่ Browser ว่าเป็น  HTML Document
  <HEAD>…………...</HEAD>
 หัวเรื่องแนะนำเรื่องราวของ  Home Page

 ส่วนภายใน  <HEAD>
  <TITLE>…………..</TITLE>
 ข้อความจะปรากฎเป็นชื่อวินโดว์

 ส่วนข้อความอื่น ๆ 
  <BODY>………….</BODY>
 เนื้อความและ Tag  อื่น ๆ อีกมากมายจะอยู่ภายในนี้
 Internet  โลก  Cyberspace  ที่ถูกเชื่อมโยงด้วย  Computer นับร้อยล้านเครื่องและหลายล้ายเครือข่าย  มันถูกเชื่อมโยงกันด้วยอะไร ?
 World Wide Web หรือ  WWW Site  นับล้านรอให้เราแวะไปเยี่ยมชม  ใน Web Site  แต่ละแห่งประกอบไปด้วย  หน้า  Home Page  ซึ่งบรรจุข่าวสาร และสาระบันเทิงที่หลากหลาย  รอให้เราสัมผัสในระบบ  Multimedia Interactive
 Home page เป็นการรวมภาพ  ตัวหนังสือ  เสียง  โปรแกรม และความสามารถในการเชื่อมโยง หรือที่รวมเรียกว่า  Hypermedia  มันถูกสร้างขึ้นมาได้อย่างไร  ต่อไปนี้คือคำตอบ

HTML
 HTML (Hypertext Markup Language) เป็น Script ที่ใช้สร้าง  Home Page  บน  Web เป็น Script  ที่มีความสามารถในการเชื่อมโยงข้อมูลใน Computer  ระหว่าง  Computer  ในเครือข่าย  และระหว่างเครือข่ายใน  Internet  โดยอ้างอิงจาก  URL (Uniform Resource Locators)  ด้วยโปรโตคอล  HTTP ซึ่งเป็นโปรโตคอลของ  WWW

การสร้าง HTML Document ต้องมีอะไรบ้าง

 - Text editor อะไรก็ได้ เช่น  Notepade  เพื่อพิมพ์คำสั่ง (Tag) ของ HTML  ซึ่งเป็น Text File  แล้วจึง  Save  ให้ Extention เป็น  .htm  หรือ .html (สำหรับ os ตัวอื่น ๆ ที่ไม่ใช่ Dos หรือ  Window)
 - Browser ที่นิยมก็คือ Netscape หรือจะเป็นตัวอื่นก็ได้  เพื่อไว้อ่าน HTML Document  แล้วแปลออกมาเป็นหน้าตาของ  Home Page (Browser  คนละบริษัทอาจให้ผลลัพท์แตกต่างกันเล็กน้อย)
 - Server ที่ใช้เก็บ  Home Page ซึ่งต้อง  Support โปรโตคอล  HTTP หรือ Run httpd  แล้วนั่นเอง

Markup Tag

Heading <Hn>  ใช้แสดงข้อความหัวเรื่องหรือข้อเน้นต่าง ๆ มี  6 ระดับ
  <H1>………………………..</H1>  ใหญ่สุด 

<H1></H1>

<H1>HTML <H1>

  <H2>………………………..</H2> รองลงมา
 

<H2>HTML</H2>

  <H6>……………………….</H6> เล็กสุด
 

 <H6>HTML</H6>

 Holizontal Rule  <HR>  ขีดเส้นขั้นหน้า
  <HR>…………………….</HR> เช่น


 Paragraph <P>  ใช้เมื่อขึ้นบรรทัดใหม่ โดยจะเว้นไป  1 บรรทัด
  <P>………………………</P>
 

 Line Break  <BR>  ขึ้นบรรทัดใหม่ โดยไม่เว้นบรรทัด
  <BR>……………………..</BR>

 Tag เกี่ยวกับลักษณะตัวอักษร  (Text Styles)
  ตัวหนา   <B>…………………..</B>
  ตัวเอียง   <I>……………………</I>
  ขีดเส้นใต้ <U>…………………..</U>
  กระพริบ <BLINK>…………………</BLINK>

 กำหนดขนาด  Font
  <FONT SIZE=ตัวเลข>…………………….</FONT>
เช่น
 <FONT SIZE=7>    Html    </FONT>
<FONT SIZE=6>    Html    </FONT>
<FONT SIZE=5>    Html    </FONT>
<FONT SIZE=4>    Html    </FONT>
<FONT SIZE=3>    Html    </FONT>
<FONT SIZE=2>    Html    </FONT>
<FONT SIZE=1>    Html    </FONT>
  ขนาดใหญ่ที่สุดคือ  7  ไล่เล็กลงมาจนถึง  1
  นิยมกำหนดขนาด  Font  ทั้งหมดด้วย  Tag ที่ต้น  Document
  <BASEFONT SIZE=ตัวเลข>
  โดยสั่งต่อจาก  <BODY>

  ตัวอักษรพิเศษ คือเครื่องหมาย   <  , >, &, "  ซึ่งซ้ำกับส่วนหนึ่งของ Tag ถ้าต้องการแสดงบน  Home Page  ต้องแทนด้วยตัวอักษรเหล่านี้  (เรียกว่า Escape Sequence)
  &lt: แทน  <
  &gt: แทน  >
  &amp:   แทน  &
  &quot: แทน  "

การจัดข้อความ
 เพื่อกำหนดกำหนดของตัวหนังสือ  หรือภาพบนหน้า  Home Page HTML  3.0
 <CENTER>……………..</CENTER>  <P ALIGN=CENTER>……</P>
 <LEFT>…………………</LEFT>  <P ALIGN=LEFT>………..</P>
 <RIGHT>……………….</RIGHT>  <P ALIGN=RIGHT>………</P>

TAG  เพิ่มเติม
ภาพ  Background
 <BODY  BACKGROUNG=URL>
กำหนดสีพื้น  (ต้องไว้บนสุด)
 <BODY BGCOLOR=#nnnnnn>
กำหนดสีตัวหนังสือ
 <BODY TEXT=#nnnnnn>

List Tag  ต่าง ๆ ใช้แสดงข้อมูลในรูปแบบของรายการ  เช่น

 Numbered of Orclered List : เป็นตัวเลขนำ List
  <OL>……………………</OL>    <OL>

 Unnumbered List : เป็น  Bullet  นำ  List    <LI> สีดำ
  <UL>……………………</UL>    <UL>

 Directory List : คล้าย UL ยาวไม่เกิน  20  ตัวอักษร   <LI> ดำปี้
  <DIR>…………………..</DIR>    <LI> ดำด่าง ๆ

 Menu List        </UL>
  <MENU>……………….</MENU>   <LI> สีแดง
List Tag ข้างต้นจะมี  <LI> เป็นข้อความหลัง  Tag เพื่อแสดงข้อความที่ <LI> สีเขียว
เราต้องการเป็นรายการตามรูปแบบของ List    </OL>

Image

IMAGE นำรูปมาลงใน Home Page

 รูปแบบคำสั่ง <IMG SRC=URL หรือ ชื่อภาพ>
 ทำความเข้าใจ URL : สำหรับ Home Page แบบ  Local  จะหมายถึง ไดเรคเทอรีที่ File นั้นอยู่  ถ้าอยู่ในไดเรคเทอรีเดียวกับตัว Browser ก็ไม่ต้องใส่  URL ใส่แต่ชื่อ

 สำหรับ Extention  ของรูปภาพที่นิยมใช้บน  Internet คือ
 GIF  สำหรับภาพสี  8 บิต  JPEG  สำหรับ  24 บิต Browser บางตัวรับแต่ GIF
Link  ด้วย Image
 <A HREF=URL><IMG SRC=URL หรือ ชื่อภาพ>………………….</A>

คำสั่งเพิ่มเติมในการจัดรูปแบบ
 WIDTH=
 HEIGHT=
และ  ALIGN=TOP.MIDDLE.BOTTOM  จะทำให้ข้อความอยู่ส่วนบน  กลาง  และล่างของรูปภาพตามลำดับ 
 

Iink การเชื่อมโยงข้อมูล

การเชื่อมโยงข้อมูล  (LINKS)
รูปแบบ    <A HREF=" URL ">………………………………</A>
 URL  Uniform Resource Location  มีรูปแบบดังนี้
  Protocal   http://hostname/filename
 ตัวอย่าง      htp : //www.nectec.or.th/whats  new.html
 เช่น <A HREF="http///www.cnn.com"> CNN News Online  </A>

 นอกจากนี้ยังสามารถ  Link ไปที่ไฟล์  HTML  อื่น  หรือในไฟล์เดียวกันก็ได้  (Local Link)  โดยกำหนด  URL ให้เป็น path  และไดเรคเทอรีที่ไฟล์นั้นอยู่  (กรณี  Link ไปไฟล์อื่น)  เช่น 
  <A HREF="does/magazine.htm">  Magazines </A>

 ในกรณี  Link ไป ไฟล์เดียวกัน  ต้องกำหนดชื่อตำแหน่งในเอกสารก่อนมี  Anchor Tag  ดังนี้
  <A NAME=MARKING>MARKING_POSITION_NAME </A>
  ชื่อตำแหน่ง หัวชื่อในเอกสารที่  Show  ใน  Home Page

การส่ง  E-mail  ตอบรับ
Mail
  <A HREF=":mailto…………….." >ส่ง E-mail  ถึง………………….</A>

Table

Table Tag

  <TABLE>…………………</TABLE>
 โดยมี  Tag  ที่ใช้ประกอบภายในคือ
  <CAPTION>…………………</CAPTION>  ใช้กำหนดชื่อหรือหัวข้อของตาราง
  <TH>…………………………</TH>  เป็นตัวหนาอยู่กลางเพื่อเน้นในหัวตาราง
  <TR>………………………….</TR>  Row  ของตาราง
  <TD>…………………………</TD>  Column ของตาราง

 ลองสร้างตารางโดยใช้ร่วมกับคำสั่ง
  ALIGN  เพื่อจัดวางข้อความ
  WIDTH  เพื่อปรับขนาดตาราง
  COLSPAN เพื่อแบ่งตารางย่อยตามคอลัมน์
  POWSPAN เพื่อแบ่งตารางย่อยตามแถว

Frame

การทำเฟรมบน  Home Page

       <FRAMESET COLS="%ด้านซ้าย%ด้านขวา">
                   <FRAME SRC="ชื่อFile" NAME="LIFT FRAME">
                   <FRAME SRC="ชื่อFile" NAME="RIGHT FRAME">
       </FRAMESET>

Form

 

การทำ  FORM 

รูปแบบคำสั่ง 
<FORM ACTION="URL" METHOD=GET หรือ POST>

          ต่อด้วย <INPUT TYPE=TEXT  NAME=.......(ตัวแปร....> 
                       ผลลัพธ์ที่ได้ 

                      <INPUT TYPE=PASSWORD NAME=.......(ตัวแปร)....>
                       ผลลัพธ์ที่ได้ 

                      <INPUT TYPE=CHECKBOX NAME=.......(ตัวแปร)....>
                       ผลลัพธ์ที่ได้ 

                      <INPUT TYPE=RADIO NAME=.......(ตัวแปร)....>
                       ผลลัพธ์ที่ได้ 

                       <TEXTAREA NAME= .......(ตัวแปร)...>
                       </TEXTAREA>
                        ผลลัพธ์ที่ได้ 
 
                       <SELECT NAME= .......(ชื่อตัวแปร)...>
                                   <OPTION VAVLUE=.......(ค่าตัวแปรที่1)...>ชื่อตัวแปร1
                                   <OPTION VAVLUE=.......(ค่าตัวแปรที่2)...>ชื่อตัวแปร2
                                   <OPTION VAVLUE=.......(ค่าตัวแปรที่3)...>ชื่อตัวแปร3
                       </SELECT >
                        ผลลัพธ์ที่ได้ ชื่อตัวแปร1 ชื่อตัวแปร2 ชื่อตัวแปร3 

                      <INPUT TYPE=SUBMIT>
                       ผลลัพธ์ที่ได้ 

                       <INPUT TYPE=RESET >
                       ผลลัพธ์ที่ได้ 

 </FORM>

Color Code

      ค่าของสีข้างล่างนี้สามารถนำเอาไปใส่ใน Font, Background,Table ได้
 

Dark Slate Blue 
MediumForest Green 
Salmon 
Dark Turquoise 
Aquamarine 
Medium Turquoise 
Medium Slate Blue 
Medium Spring Green 
Firebrick 
Maroon 
Sienna 
Light Steel Blue 
Pale Green 
Medium Orchid 
Green Yellow 
Dark Orchid 
Yellow Green 
Blue Violet 
Khaki 
Brown 
Light Gray 
Turquoise 
Pink 
Light Blue 
Gray 
Orange 
Violet Red 
Gold 
Thistle 
Wheat 
Medium Violet Red 
Orchid 
Tan 
Goldenrod 
Plum 
Medium Goldenrod 
Sandy Brown 
Red 
Orange Red 
Magenta 
Coral 
Yellow 
White 
Black 
Blue 
Slate Blue 
Green 
Spring Green 
Cyan 
Navy 
Steel Blue 
Forest Green 
Sea Green 
Midnight Blue 
Dark Green 
Dark Slate Gray 
Medium Blue 
Sky Blue 
Lime Green 
Medium Aquamarine 
Cornflower Blue 
Medium Sea Green 
Indian Red 
Violet 
Dark Olive Green 
Dim Gray 
Cadet Blue 

#6B238E
#6B8E23
#6F4242
#7093DB
#70DB93
#70DBDB
#7F00FF
#7FFF00
#8E2323
#8E236B
#8E6B23
#8F8FBC
#8FBC8F
#9370DB
#93DB70
#9932CC
#99CC32
#9F5F9F
#9F9F5F
#A52A2A
#A8A8A8
#ADEAEA
#BC8F8F
#BFD8D8
#C0C0C0
#CC3232
#CC3299
#CC7F32
#D8BFD8
#D8D8BF
#DB7093
#DB70DB
#DB9370
#DBDB70
#EAADEA
#EAEAAD
#F4A460
#FF0000
#FF007F
#FF00FF
#FF7F00
#FFFF00
#FFFFFF
#000000
#0000FF
#007FFF
#00FF00
#00FF7F
#00FFFF
#23238E
#236B8E
#238E23
#238E6B
#2F2F4F
#2F4F2F
#2F4F4F
#3232CC
#3299CC
#32CC32
#32CC99
#24226F
#426F42
#4F2F2F
#4F2F4F
#4F4F2F
#545454
#5F9F9F