RSS

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

17 มี.ค.

Intro to htm

ทำความเข้าใจ 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  BACKGROUND=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 BlueMediumForest 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

 

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

 
%d bloggers like this: