ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล
2
What is HTML? HTML ย่อมาจาก Hypertext Markup Language
HTML เป็นภาษาที่ใช้ในการเขียน Web Page ซึ่งสามารถสร้างให้แสดงผลให้อยู่ในรูปของตัวอักษร ภาพนิ่ง ภาพเคลื่อนไหว เสียง และยังสามารถเชื่อมโยงไปยังเว็บไซต์ อื่นๆในระบบ Internet เอกสาร HTML สามารถตั้งนามสกุลเป็น .htm หรือ .html
3
การสร้างเอกสาร HTML การสร้างเอกสาร HTML ประกอบไปด้วยโปรแกรม 2 ส่วน
1. Text Editor เป็นโปรแกรมที่ใช้ในการเขียนภาษา HTML เพื่อสร้าง Web Page ตัวอย่่างเช่่น Note Pad 2. Web browser เป็นโปรแกรมที่ใช้เรียกเอกสาร HTML ออกมาแสดงผลบนจอภาพ ในระบบ Internet ตัวอย่างเช่น Internet Explorer
4
การเขียนภาษา HTML การเขียนภาษา HTML ประกอบด้วย 2 ส่วน คือ
1. ส่วนของคำสั่ง เขียนอยู่ภายในเครื่องหมาย < > เรียกว่า Tag เช่น <br> 2. ส่วนของข้อความที่ต้องการ
5
การเขียนภาษา HTML (ต่่อ)
Tag มี 2 แบบ 1. Tag เดี่ยว Tag ที่มีคำสั่งเดียว สามารถใช้งานคำสั่งได้ ณ ตำแหน่งที่ เราระบุ เช่น <br> 2. Tag คู่ Tag ที่มี 2 ส่วน คือ Tag เปิด และ Tag ปิด โดย Tag ปิดมีรูปแบบเหมือน Tag เปิด แต่มีเครื่องหมาย / นำหน้า <ชื่อคำสั่ง> ข้อความที่ต้องการแสดง </ชื่อคำสั่ง> เช่น <HTML>… ข้อความที่ต้องการ... </HTML>
6
โครงสร้างภาษา HTML ในการเขียนภาษา HTML 1 หน้า จะต้องประกอบไปด้วยคำสั่งหลักอยู่ 4 คำสั่ง 1. <HTML>…</HTML> เป็นคำสั่งที่ทำหน้าที่บอกจุดเริ่มต้น และจุดสิ้นสุด ของเอกสาร HTML 2. <HEAD>…</HEAD> เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง 3. <TITLE>…<TITLE> เป็นคำสั่งที่กำหนดข้อความที่ต้องการ แสดงผล บนแถบชื่อเรื่อง 4. <BODY>…</BODY> เป็นคำสั่งที่ทำหน้าที่กำหนดข้อความและรูปแบบ คำสั่งใดๆ ที่ต้องการปรับแต่งเอกสารบนส่วนของจอภาพ และจะแสดงผล บนจอภาพเมื่อถูกเรียกใช้จาก Web Browser
7
รูปแบบมาตรฐานในการเขียนเว็บเพจ
8
คำาสั่งที่ใช้ในการกำหนดเอกสาร
การกำหนดหัวเรื่อง (Heading Tag หรือ <Hn>) รูปแบบ <Hn ALIGN=“ตำแหน่งการจัดวาง”> ข้อความหัวเรื่อง </Hn> โดยที่ n เป็นหมายเลขกำหนดระดับของหัวเรื่อง มีค่าตั้งแต 1 ถึง 6 <H1>…</H1> หัวเรื่องมีขนาดใหญ่ที่สุด <H4>…</H4> หัวเรื่องมีขนาดปกติ <H6>…</H6> หัวเรื่องมีขนาดเล็กที่สุด
9
การกำหนดหัวเรื่อง <Hn> (ต่อ)
ALIGN การกำหนดตำแหน่งการจัดวางหัวเรื่อง left กำหนดการจัดวางชิดซ้ายของบรรทัด (ค่าปกติ) center กำหนดการจัดวางกึ่งกลางของบรรทัด right กำาหนดการจัดวางชิดขวาของบรรทัด
10
การขีดเส้นแนวนอน <HR> (Horizontal line)
<HR SIZE=“ความหนาของเส้น” WIDTH=“ความยาวของเส้น” ALIGN=“ตำแหน่งการวาง” COLOR=“สีของเส้น” NOSHADE> SIZE เป็นการกำหนดความหนาให้กับเส้น มีหน่วยเป็นพิกเซล WIDTH เป็นการกำหนดความยาวให้กับเส้น สามารถกำหนดเป็นเปอร์เซ็นต์ หรือ พิกเซลถ้าไม่ระบุตัวเลขใดๆ จะได้ความยาวเต็มจอภาพ
11
การขีดเส้นแนวนอน <HR> (Horizontal line) (ต่่อ)
ALIGN การกำหนดตำแหน่งการจัดวางของเส้น left กำหนดการจัดวางชิดซ้ายของบรรทัด center กำหนดการจัดวางกึ่งกลางของบรรทัด right กำาหนดการจัดวางชิดขวาของบรรทัด COLOR สีของเส้น สามารถกำหนดสีมาตรฐาน และสีจากรหัสเลขฐาน 16 เช่น สีดำ สีมาตรฐานคือ BLACK สีจากเลขฐาน 16 คือ #000000 NOSHADE เป็นการกำหนดแสดงเส้นทึบไม่มีการแรเงาของเส้น
12
คำสั่งขึ้นบรรทัดใหม่่ <BR> (Break)
13
คำสั่งควบคุมการแสดงผลข้อความ <NOBR> (No Break)
คำสั่งนี้ควบคุมการแสดงผลข้อความใน web browser เป็นบรรทัดเดียวโดยไม่มีการตัดข้อความให้ขึ้นบรรทัดใหม่ ซึ่งข้อความจะยาวเกินหน้าต่างของ web browser ผู้ใช้สามารถใช้ Scroll Bar ในการเรียกดูข้้อความที่ยาวเกินจากหน้าต่างได้้ รูปแบบ: <NOBR>ข้อความ</NOBR>
14
การกำหนดย่อหน้า <P> (Paragraph)
<P ALIGN=“ตำแหน่งการวาง”> ข้อความ </P> ALIGN การกำหนดตำแหน่งการจัดวางย่อหน้า left กำหนดการจัดวางชิดซ้ายของบรรทัด center กำหนดการจัดวางกึ่งกลางของบรรทัด right กำหนดการจัดวางชิดขวาของบรรทัด
15
การจัดวางข้อ ความกึ่งกลางบรรทัด <CENTER>
รูปแบบ <CENTER> ข้อความ </CENTER>
16
การจัดรูปแบบเอกสารตามทีผู้ใช้กำหนด<PRE>
คำสั่งนี้ใช้ในการกำหนดการแสดงข้อความ และ ช่องว่างในเอกสารโดยที่บราวเซอร์จะแสดงผลตามตำแหน่งที่เราจัดวางไว้ที่เอกสารต้นฉบับ (Source Document) รูปแบบ <PRE> ข้อความ </ PRE >
งานนำเสนอที่คล้ายกัน
