หลักการสร้างเว็บเพจและภาษา HTML

หลักการสร้างเว็บเพจและภาษา HTML พิเชษฐ คงสตรี สำนักงาน ICT กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยีโรงเรียนจัตุรัสวิทยาคาร

หัวข้อบรรยาย • หลักการสร้างเว็บเพจ • ความรู้เบื้องต้นเกี่ยวกับเว็บเพจ • ภาษา HTML • ความรู้เบื้องต้นเกี่ยวกับ HTML • แนะนำ Tag พื้นฐาน • การออกแบบสไตล์ของเว็บเพจด้วย CCS • การผนวกเว็บเพจเข้าด้วยกันด้วย Include Page

หลักการสร้างเว็บเพจ

ความรู้เบื้องต้นเกี่ยวกับเว็บเพจความรู้เบื้องต้นเกี่ยวกับเว็บเพจ • เว็บเพจคือ • แฟ้มประเภทข้อความ (text file) • ใช้ชุดคำสั่งที่เป็น HTML (HTML tag) เพื่อจัดรูปแบบของเอกสารเว็บเพจ • แสดงผลออกทางโปรแกรมประเภท browser (เช่น Internet Explorer, Netscape Navigator และ Opera เป็นต้น)

ความรู้เบื้องต้นเกี่ยวกับเว็บเพจ(ต่อ)ความรู้เบื้องต้นเกี่ยวกับเว็บเพจ(ต่อ) • ส่วนประกอบของเว็บเพจ • ข้อความ (text) คือข้อความต่างๆ ที่พิมพ์จากแป้นพิมพ์ลงไปในแฟ้มเว็บเพจ • แฟ้มภาพ (image)เป็นส่วนที่ช่วยเสริมเนื้อหาที่เป็นข้อความ ให้เกิดความชัดเจนเข้าใจและน่าสนใจมากขึ้นแบ่งออกเป็น • ภาพนิ่ง • ภาพเคลื่อนไหว

ความรู้เบื้องต้นเกี่ยวกับเว็บเพจ(ต่อ)ความรู้เบื้องต้นเกี่ยวกับเว็บเพจ(ต่อ) • ส่วนประกอบของเว็บเพจ • ลิงค์ (link) / ไฮเปอร์ลิงค์ (hyperlink) • เป็นส่วนที่ช่วยให้ผู้อ่านเชื่อมโยงไปยังตำแหน่งอื่นภายในเว็บเพจนั้น หรือ ไปยังเว็บเพจอื่น หรือ ไปยังแฟ้มอื่น (เช่น Word, PowerPoint, Excel, PDF เป็นต้น) • อาจกำหนดให้ข้อความ หรือ ภาพเป็นตัวลิงค์ก็ได้ • การระบุตำแหน่งที่อยู่รวมทั้งชื่อแฟ้มจะต้องถูกต้อง จึงจะสามารถเปิดเอกสารได้

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

ภาษา HTML

ความรู้เบื้องต้นเกี่ยวกับ HTML • HTML -> Hyper Text Markup Language • HTML รองรับระบบมัลติมีเดีย (Multimedia) ได้ นั่นคือสิ่งที่ ให้เว็บมีความแตกต่างจากสื่ออื่นๆ คุณสมบัติในการเชื่อมโยง (link) ไปยังที่ต่างๆ ได้ เป็นภาษาคอมพิวเตอร์ใช้กำหนดรูปแบบการจัดวางตำแหน่งของสิ่งต่างๆ ที่ปรากฎในเอกสาร

ความรู้เบื้องต้นเกี่ยวกับ HTML (ต่อ) • สามารถที่จะใช้โปรแกรมเท็กซ์เอดิเตอร์เช่น Notepad สร้างหรือแก้ไขได้ และบันทึกเป็น file นามสกุล htm หรือ html

องค์ประกอบของเอกสาร HTML ประกอบด้วย 2 ส่วนใหญ่ๆ คือ • ส่วนที่เป็นคำสั่งในการกำหนดรูปแบบของข้อมูลซึ่งเรียกว่า HTML Tag • ส่วนที่เป็นเนื้อหาของเอกสาร จะอยู่ในเครื่องหมาย “<” และ “>” เช่น <HTML> หรือ <BODY> ซึ่งโดยมากแล้วจะมี Tag ปิด “</…>” ตามท้ายเช่น <HTML>...</HTML> และ <BODY>…</BODY> เป็นต้น

รูปแบบของเอกสาร HTML <html>  <head> <title>เอกสาร HTML </title> </head>  <body> </body> </html> แจ้งให้บราวเซอร์รู้ว่า เอกสารนี้เป็นเอกสาร HTML ซึ่งจะอยู่ในบรรทัดแรกของเอกสารเสมอ และมี Tag </HTML> หรือ Tag ปิด อยู่ที่ท้ายเอกสารเสมอเช่นกัน บอกคุณสมบัติโดยทั่วๆ ไปของเอกสารนี้ เช่นเอกสารนี้มีชื่อเอกสาร (title) ว่าอะไร เป็นต้น Note การเขียนคำสั่ง HTML สามารถเขียนเป็นตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ก็ได้ (Not Case Sensitive) บอกกับบราวเซอร์ว่า ข้อมูลหรือ Tag ที่อยู่ระหว่าง <BODY>และ </BODY> จะเป็นส่วนที่แสดงต่อผู้ชมเว็บเพจ

แนะนำ Tag พื้นฐาน

รูปแบบโดยทั่วไปของ Tag • Tag ระบุลักษณะการแสดงผลบนบราวเซอร์ เช่น ต.ย. <HR> เป็นการตีเส้นแนวนอนบนเว็บเพจ • Attribute ระบุคุณลักษณะต่างๆของการแสดงผลนั้น ต.ย. <HR WIDTH= “80%”> <Tag Attribute=”value”> … </Tag>

การจัดรูปแบบย่อหน้า

การขี้นบรรทัดใหม่: <BR> ในการเขียน HTML การกดปุ่ม Enter เพื่อขึ้นบรรทัดใหม่นั้น จะไม่มีผลใดๆกับข้อมูลที่แสดงต่อผู้ชมเว็บเพจ ถ้าต้องการให้ข้อความขื้นบรรทัดใหม่ให้ใช้ <BR> แทนที่การกดปุ่ม Enter รูปแบบคำสั่ง ข้อความ.... <BR> ข้อความ

การขึ้นย่อหน้าใหม่: <P> ถ้าต้องการให้ขื้นย่อหน้าใหม่ใช้ <P> ผลลัพธ์ที่ได้จากการใช้ <P> นั้นเสมือนการกดปุ่ม Enter 2 ครั้ง รูปแบบคำสั่ง ข้อความใน Paragraph… <P> ข้อความใน Paragraph...

<html> <head> <title>My first page...</title> </head> <body> This is the first paragraph. It will show up in the first paragraph..... It will show up in the first paragraph.....It will show up in the first paragraph <p>This is the second paragraph. Does it show in the second paragraph?.... Does it show in the second paragraph?.... Does it show in the second paragraph? </body> </html>

การจัดรูปแบบย่อหน้าในลักษณะของหัวข้อ (Heading) • การจัดรูปแบบให้กับหัวเรื่องจะมีทั้งหมด 6 รูปแบบด้วยกันเรียงตามลำดับขนาดใหญ่ไปหาเล็กดังนี้ • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6 รูปแบบ <H1>ข้อความ</H1>

<html> <head> <title>Heading</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>

การจัดรูปแบบย่อหน้าในลักษณะ List รูปแบบของ List นั้นแบ่งออกเป็น 3 ประเภท • Unordered List • Ordered List • Definition List

การจัดรูปแบบย่อหน้าในลักษณะ List (ต่อ) • Unordered List Unordered List เป็นการแบ่งหัวข้อต่างๆด้วยปุ่มกลมๆเล็กๆหน้าหัวข้อย่อโดย • <UL> เป็นตัวระบุว่ารายการต่างๆต่อไปนี้จะแสดงผลเป็นแบบ Unordered List และ • <LI> เป็นตัวระบุหัวข้อย่อยแต่ละหัวข้อ รูปแบบ <UL> <Li>ข้อความ </Li> </UL>

<html> <head> <title>Unnumbered List</title> </head> <body> <p>List of Fruits:</p> <ul> <li>Apple</li> <li>Banana</li> <li>Mango</li> </ul> </body> </html>

การจัดรูปแบบย่อหน้าในลักษณะ List (ต่อ) • Ordered List Ordered List เป็นการแบ่งหัวข้อต่างๆด้วยลำดับของตัวเลขหน้าหัวข้อย่อยโดย • <OL> เป็นตัวระบุว่ารายการต่างๆต่อไปนี้จะแสดงผลเป็นแบบ Ordered List • <LI> เป็นตัวระบุหัวข้อย่อยแต่ละหัวข้อ รูปแบบ <OL> <Li>ข้อความ </Li> </OL>

<html> <head> <title>Unnumbered List</title> </head> <body> <p>List of Fruits:</p> <ol> <li>Apple</li> <li>Banana</li> <li>Mango</li> </ol> </body> </html>

การจัดรูปแบบย่อหน้าในลักษณะ List (ต่อ) • Definition List Definition List เป็นการบอกแสดงหัวข้อและคำจำกัดความของหัวข้อเหล่านั้นโดย • <DL> เป็นตัวระบุว่ารายการต่างๆต่อไปนี้จะแสดงหัวข้อและคำจำกัดความ • <DT> เป็นตัวระบุหัวข้อต่างๆ • <DD> เป็นตัวระบุคำจำกัดความของหัวข้อนั้นๆ รูปแบบ <DL> <DT>หัวข้อ</DT> <DD>คำจำกัดความ</DD> </DL>

<html> <head> <title>Definition List</title> </head> <body> <dl> <dt>HTML:</dt> <dd>HyperText Markup Language</dd> <dt>HTTP:</dt> <dd>HyperText Transfer Protocol</dd> <dt>WWW:</dt> <dd>World Wide Web</dd> </dl> </body> </html>

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

การกำหนด font, ขนาดและสีของตัวอักษร • ระบุด้วย Tag font<font>...ข้อความ...</font> • ปรับรูปแบบ font โดยการระบุ attribute ดังนี้ • face =“x”โดย x คือรูปแบบ font ที่ต้องการเช่น “Tahoma” • color = “x”โดย x คือสีที่ต้องการ สามารถระบุได้ 2 แบบคือระบุด้วยชื่อสี เช่น “red” หรือระบุด้วย RGB color เช่น “#c41200” • size =“x”โดย x คือขนาดตัวอักษรที่ต้องการ สามารถกำหนดขนาดตัวอักษรได้ 7 ระดับ (ตั้งแต่ 1 ถึง 7)เพิ่ม / ลดขนาดได้ ตั้งแต่ -4 ถึง + 4

Tag อื่นๆ ที่ใช้ปรับแต่งตัวอักษร • ตัวเอียง (italic) • <I> ตัวเอียง (Italic) </I> • ตัวหนา (Bold) • <B> ตัวหนา (Bold)</B> • ขีดเส้นใต้ • <U> ขีดเส้นใต้ตัวอักษร (Underline)</U>

Tag อื่นๆ ที่ใช้ปรับแต่งตัวอักษร • ตัวอักษรกระพริบ(Blink) ->ใช้ได้เฉพาะ Netscape Navigator • <BLINK> ตัวอักษรกะพริบ(Blink)</BLINK> • ตัวอักษรวิ่ง (Marquee) -> ใช้ได้เฉพาะ Internet Explorer เท่านั้น • <MARQUEE> ตัวอักษรวิ่ง(Marquee)</MARQUEE>

<html> <head> <title>Font</title> </head> <body> <FONTFACE=“Tahoma”COLOR="Red" SIZE=“5”>อักษรสีแดงขนาด 5</FONT><br> <b><u><i><FONTFACE=“Tahoma” COLOR="Red" SIZE=“5” >อักษรขีดเส้นใต้ ตัวหนา, เอียง</FONT></i></u></b> <MARQUEE>ตัวอักษรวิ่ง(Marquee)</MARQUEE> </body> </html>

การใส่รูปภาพ (image)

การใส่รูปภาพ • ระบุด้วย Tag img<img scr=“x”> โดยที่ x คือไฟล์รูปภาพที่ต้องการแสดง เช่น <img scr=“mypic01.jpg”> • หากไฟล์รูปภาพไม่ได้เก็บไว้ที่ path (ตำแหน่ง)เดียวกับเอกสาร html จะต้องระบุ path ของรูปภาพไว้หน้าไฟล์ด้วยเช่น <img scr=“http://facstaff.swu.ac.th/sasivimo/images/mypic01.jpg”>

<html> <head> <title>Font</title> </head> <body> รูปกระต่าย <br> <img src="rabbit.jpg"><br> Banner มศว <br> <img src="http://www/images/head_title.gif"> </body> </html>

การปรับพื้นหลัง (background)

การปรับพื้นหลัง (background) • สามารถกำหนดพื้นหลังได้ 2 รูปแบบ • กำหนดด้วยสี • กำหนดด้วยรูปซึ่งเป็น image ไฟล์ (gif,jpg) • รูปแบบของ Tag <body bgcolor=“x”> โดยที่ x คือไฟล์รูปภาพ, ชื่อสี หรือ RGB color เช่น<body bgcolor=“myBG.gif"><body bgcolor=“pink"><body bgcolor="#008000">

การปรับพื้นหลัง (background)

การสร้างลิงค์ (link)

การสร้างลิงค์ (link) • รูปแบบของตำแหน่งที่จะใช้เป็นไฮเปอร์ลิงค์นั้นจะเป็นไปได้ 2 ลักษณะคือ • ใช้รูปภาพเป็นไฮเปอร์ลิงค์ • ใช้ข้อความเป็นไฮเปอร์ลิงค์

การเชื่อมโยงลิงค์ • การเชื่อมโยงระหว่าง Web Page หรือ ระหว่าง Web Site รูปแบบ <a href="ชื่อแฟ้มที่ต้องการอ้างถึง">คำที่แสดงให้ผู้ชมเห็นและปรากฏของลิงค์</a> <a href="URL ที่ต้องการอ้างถึง">คำที่แสดงให้ผู้ชมเห็นและปรากฏของลิงค์</a>

หลักการสร้างเว็บเพจและภาษา HTML