ดาวน์โหลดบทความดาวน์โหลดบทความX
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้
มีการอ้างอิง 10 ข้อที่อ้างอิงอยู่ในบทความ ซึ่งสามารถพบได้ทางด้านล่างของบทความ
บทความนี้ถูกเข้าชม 10,963 ครั้ง
HTML (HyperText Markup Language)เป็นภาษาพื้นฐานที่ใช้ในการพัฒนาหน้าเว็บไซต์ ถูกคิดค้นมาให้เป็นภาษาที่ใช้และปรับแต่งโค้ดได้ง่าย แต่ละหน้าเว็บที่คุณเห็นในอินเทอร์เน็ตก็มาจากโค้ดนี้กันทั้งนั้นแหละ (ColdFusion, XML, XSLT) HTML นั้นไม่ยากเกินจะเรียน แต่ถ้าจะให้แอดวานซ์ถึงขั้นใช้ได้ครบถ้วนกระบวนความ ก็ต้องใช้เวลากันสักหน่อย อย่างถ้าอยากจะใส่สีหรือแต่งหน้าเว็บให้ตื่นตาตื่นใจมากยิ่งขึ้น ก็ต้องหัดใช้ CSS ขั้นพื้นฐาน แต่นั่นคือหลังจากคุณคุ้นเคยกับหน้าเว็บแบบ HTML เรียบร้อยแล้วนะ
ขั้นตอน
เปิดโปรแกรมจัดทำไฟล์ text อันไหนก็ได้ขึ้นมา. NotePad ก็ได้ เพราะดาวน์โหลดมาใช้ได้ฟรี คุณเขียนภาษา HTML ได้ด้วยแทบจะทุกโปรแกรมจัดทำและแก้ไขไฟล์ text แต่โปรแกรมไหนยิ่งแอดวานซ์ ปรับฟอร์แมตอัตโนมัติ ก็ยิ่งไม่สะดวกต่อการเขียนหน้าเว็บ HTML[1]- เราไม่แนะนำให้ใช้ TextEdit เพราะโปรแกรมนี้ชอบเซฟไฟล์เป็นฟอร์แมตที่เบราว์เซอร์ไม่ค่อยจะตรวจจับได้ว่าเป็นภาษา HTML
- หรือจะใช้ online HTML editor ก็ได้ แต่พวกโปรแกรมที่เน้นแก้ไขภาษา HTML โดยเฉพาะมักจะยากไปสักหน่อยสำหรับมือใหม่[2]
เซฟไฟล์เป็น web page. เลือก File → Save As ในเมนูด้านบนสุด แล้วเปลี่ยนฟอร์แมตของไฟล์ไปเป็น "Web Page," ".html" หรือ ".htm" จากนั้นเซฟไว้ในที่ที่คุณหาเจอได้ง่ายๆ- จริงๆ แล้ว 3 ฟอร์แมตนี้ก็ใช้แทนกันได้หมดแหละ
เปิดไฟล์ในเบราว์เซอร์. พอดับเบิลคลิกแล้ว ไฟล์ก็จะเปิดขึ้นมาอัตโนมัติเป็นหน้าเว็บว่างๆ ในเบราว์เซอร์ หรือจะเปิดเบราว์เซอร์ขึ้นมาก่อนก็ได้ ไม่ว่าจะเป็น Firefox หรือ Internet Explorer ก็ตาม แล้วคลิก File → Open File เพื่อเลือกไฟล์ text นั้น- หน้าเว็บนี้ยังไม่ออนไลน์นะ ดูได้แค่ในคอมของคุณเท่านั้นแหละ
รีเฟรชหน้าเว็บดูว่าที่แก้ไขอะไรไปใช้ได้หรือยัง. พิมพ์ข้อความนี้ในเอกสารโล่งๆ ของคุณ: <strong>Hello</strong> จากนั้นเซฟเลย แล้วรีเฟรชหน้าเว็บโล่งๆ ในเบราว์เซอร์ดูอีกที ควรจะมีคำว่า "Hello" โผล่ขึ้นมาด้านบนของหน้า เป็นตัวหนาด้วยนะ ระหว่างขั้นตอนต่างๆ ข้างล่าง ถ้าตอนไหนเกิดอยากทดสอบ HTML ใหม่ของคุณขึ้นมา ก็ให้เซฟเอกสาร .html แล้วรีเฟรชหน้าเบราว์เซอร์ว่าภาษา HTML ที่ใช้ไปนั้นได้ผลออกมาเป็นยังไง- ถ้าเห็นคำว่า "<strong>" กับ "</strong>'' โผล่ขึ้นมาในเบราว์เซอร์ด้วย แปลว่าไฟล์ไม่ถูกอ่านเป็น HTML ได้ถูกต้อง ให้ลองเปลี่ยนไปใช้โปรแกรม text ตัวอื่น หรือลองเปลี่ยนเบราว์เซอร์ดู
ต้องเข้าใจ tag ต่างๆ ซะก่อน. คำสั่ง HTML นั้นจะอยู่ในรูปของ "tag" ที่คอยบอกเบราว์เซอร์ว่าต้องแปลแล้วแสดงหน้าเว็บออกมายังไง ทุก tag จะอยู่ในวงเล็บเหลี่ยม <แบบนี้> ซึ่งจะไม่แสดงในหน้าเว็บ แบบที่คุณได้ลองใช้ไปแล้วในตัวอย่างด้านบน:- <strong> ถือเป็น "tag เริ่มต้น" หรือ "tag เปิด" อะไรที่ตามหลัง tag นี้จะกลายเป็น "strong text" ทั้งหมด (พูดง่ายๆ คือกลายเป็นตัวหนาในหน้าเว็บ)
- </strong> ถือเป็น "tag จบ" หรือ "tag ปิด" ดูได้จากสัญลักษณ์ / ที่จะบอกว่า strong text นั้นจบแค่ตรงไหน tag ส่วนใหญ่ (ไม่ใช่ทั้งหมด) ต้องมี tag ปิด ถึงจะใช้งานได้ ห้ามลืมเชียวล่ะ
มาเริ่มเขียนของจริงกัน. ลบทุกข้อความในไฟล์ text HTML ของคุณทิ้งก่อน แล้วเริ่มพิมพ์ใหม่ให้เป๊ะทุกตัวอักษรตามนี้ (ไม่ต้องใส่จุด bullet points ไปด้วยนะ) โค้ด HTML นี้จะบอกเบราว์เซอร์ว่าคุณจะใช้ HTML ชนิดไหน และบอกว่า HTML ของคุณจะอยู่ระหว่าง tag <html> กับ </html>[3]- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- </html>
ใส่ head กับ body tag. เอกสาร HTML ของคุณจะแบ่งออกเป็น 2 ส่วนด้วยกัน ส่วน "head" นั้นสำหรับข้อมูลพิเศษ อย่างชื่อของหน้าเว็บนั้น ในขณะที่ส่วน "body" จะเป็นเนื้อหาหลักของหน้าเว็บ ให้ใส่ลงไปทั้งคู่ อย่าลืม end tag เด็ดขาด ข้อความที่คุณต้องเพิ่มเข้าไปในขั้นตอนนี้เราทำไว้เป็นตัวหนาให้เห็นกันเลยชัดๆ:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- </head>
- <body>
- </body>
- </html>
ตั้งชื่อหน้าเว็บ. tag ส่วนใหญ่ในส่วนของ head นั้น ถ้าคุณเป็นมือใหม่ยังไม่ต้องรู้ไว้ก็ได้ แต่ title tag นี่สิที่ง่ายหน่อย จะเป็นตัวกำหนดชื่อที่แสดงในหน้าต่างเบราว์เซอร์หรือแถบเบราว์เซอร์นั้น ให้ใส่ start แล้วก็ end tag ของ title ลงใน head tag แล้วตั้งชื่อ title ไว้ตรงกลางตามต้องการ- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>หน้าเว็บ HTML แรกของฉัน</title>
- </head>
- <body>
- </body>
- </html>
โฆษณา
พิมพ์เนื้อหาในส่วนของ body. ตรงนี้เราจะบอกคุณแค่ข้อความที่คุณต้องใส่ใน body tag เท่านั้น ข้อความอื่นก็เหมือนเดิมแหละ แต่เพื่อไม่ให้เสียเวลา เราจะไม่มานั่งทวนกันทุกครั้งที่ขึ้นขั้นตอนใหม่ ให้พิมพ์อะไรที่จะใส่ลงไประหว่าง tag <body> กับ </body> แล้วจะกลายเป็นเนื้อหาแรกในหน้าเว็บของคุณ เช่น- <body>
- ฉันกำลังเรียนรู้วิธีการสร้างหน้าเว็บด้วยภาษา HTML จากบทความของ How.com.vn
- </body>
ใส่ headers ลงในเอกสาร. คุณจัดระเบียบหน้าเว็บได้ง่ายๆ ด้วย header tag ซึ่งจะเป็นตัวบอกเบราว์เซอร์ให้แสดงข้อความที่อยู่ระหว่างกลางเป็นตัวอักษรที่ใหญ่กว่า เป็นตัวที่เครื่องมือต่างๆ และ bots ของ search engine ใช้ค้นหาว่าหน้าเว็บของคุณนั้นเกี่ยวกับเรื่องอะไร และมีการจัดการอย่างไร <h1> </h1> จะเป็น header ที่ใหญ่ที่สุด แต่ถ้าจะเอาเล็กกว่านี้ก็ปรับได้ โดยขนาดเล็กที่สุดคือ <h6> </h6>. ลองเอาไปใช้ในหน้าเว็บของคุณดูได้เลย- <body>
- <h1>ยินดีต้อนรับสู่หน้าเว็บของฉัน</h1>
- ฉันกำลังเรียนรู้วิธีการสร้างหน้าเว็บด้วยภาษา HTML จากบทความของ How.com.vn
- <h3>เป้าหมายของฉันในวันนี้:</h3>
- <h5>เป้าหมายที่ทำสำเร็จ:</h5>
- เรียนรู้วิธีใช้ headers
- <h5>เป้าหมายที่ทำไม่สำเร็จ:</h5>
- เรียนรู้วิธีใช้ tag ฟอร์แมตข้อความ
- </body>
เรียนรู้วิธีใช้ tag ฟอร์แมตข้อความ. ตอนนี้คุณรู้จัก "strong" tag แล้ว แต่ยังมีอีกหลายวิธีที่ใช้ฟอร์แมตข้อความของคุณได้ ให้ลองใช้ tag ข้างล่างนี่ดู หรือใช้ร่วมกันหลายๆ tag ในชุดข้อความเดียวกัน แต่ที่สำคัญที่สุดคือห้ามลืมปิดท้ายด้วย end tag เด็ดขาด!- <strong>ข้อความสำคัญ จะขึ้นเป็นตัวหนาในเบราว์เซอร์</strong>
- <em>เน้นข้อความเป็นตัวเอียงในเบราว์เซอร์</em>
- <small>ข้อความขนาดเล็กกว่าปกติ แต่จะปรับขนาดอัตโนมัติถ้าใช้เป็น heading[4]</small>
- <del>ข้อความที่ไม่ใช้แล้ว ข้อความจะถูกขีดฆ่าไว้</del>
- <ins>ข้อความที่เพิ่มเข้ามาทีหลัง ข้อความจะถูกขีดเส้นใต้ไว้</ins>
จัดวางข้อความในหน้าเว็บ. คุณอาจสังเกตเห็นว่า ถึงกด "enter" แล้ว ข้อความก็ยังไม่ยอมลงมาที่อีกบรรทัดนึง tag ข้างล่างนี่เอาไว้แบ่งย่อหน้าและขึ้นบรรทัดใหม่ได้ หรือจะจัดวางข้อความแบบอื่นก็ได้- <p> ย่อมาจาก "paragraph" หรือย่อหน้านั่นเอง ข้อความไหนที่อยู่ระหว่าง tag นี้ จะอยู่ในย่อหน้าเดียวกัน แยกจากข้อความด้านบนและด้านล่าง </p>
- <br> จะเป็นการขึ้นบรรทัดใหม่ ห้าม ใส่ end tag ไปด้วยเด็ดขาด เพราะจะไม่ส่งผลต่อเนื้อหาอื่นๆ เอาไว้ใช้เวลาจะใส่กลอนหรือที่อยู่เป็นต้น อย่าใช้แบ่งย่อหน้า[5]
- <pre>ถ้าอยากกำหนดการแสดงข้อความแบบเฉพาะเจาะจง tag นี้จะกำหนดข้อความด้านในเป็นฟอนต์แบบ fixed-width (ความกว้างของแต่ละตัวอักษรจะเท่ากัน) ให้คุณสามารถแบ่งวรรคหรือขึ้นบรรทัดใหม่ได้เหมือนเวลาคุณพิมพ์ข้อความตามปกติที่ไม่ได้ใช้ tag[6]</pre>
- <blockquote>ใช้แสดงข้อความที่ยกมาอ้างอิงจากแหล่งอื่น</blockquote> จะแนบแหล่งที่มาด้วยก็ได้โดยใช้ <cite>cite tag</cite>
ใส่ Comment tag ที่จะไม่แสดงในหน้าเว็บ. Comment tag เป็นส่วนที่จะไม่ปรากฏในหน้าเว็บ คุณสามารถใช้จดโน้ตเตือนตัวเองในเอกสาร HTML ได้โดยไม่ไปพัวพันกับตัวเนื้อหา <!--- ให้พิมพ์ความคิดเห็นของคุณใน tag นี้ ---> โดยไม่ต้องใส่ end tag- Tag ที่เราใช้ได้โดยไม่ต้องมี end tag นั้นเรียกว่า "empty tags"
ได้เวลารวมร่าง. วิธีเดียวที่จะทำให้คุณคุ้นเคยกับ tag พวกนี้ได้เร็วที่สุดก็คือการใช้งานจริงในหน้าเว็บของคุณ เราได้รวบรวมตัวอย่าง tag ต่างๆ ที่คุณได้ทำความรู้จักในแต่ละขั้นตอนที่ผ่านมาไว้ข้างล่างนี้แล้ว ลองคิดดูว่าจะออกมาหน้าตาเป็นยังไงในเบราว์เซอร์ ว่าแล้วก็ copy-paste ใส่เอกสารของคุณแล้วไปดูกันเลย- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>หน้าเว็บ HTML แรกของฉัน</title>
- </head>
- <body>
- <h1>ยินดีต้อนรับสู่หน้าเว็บของฉัน</h1>
- ขอให้สนุกกับเว็บไซต์นี้!<p><strong>เว็บนี้เพื่อคุณโดยเฉพาะเลยนะเนี่ย</strong>
- <h2>ตอนที่ 1: ฉันรู้จัก HTML ได้ยังไง</h2>
- <!---เตือนตัวเอง: จำไว้ "h1" คือ header ที่ใหญ่กว่า "h2"--->
- ตอนนี้เรียนเรื่อง HTML มา <del>หนึ่ง</del> <ins>สอง</ins>ชั่วโมงแล้ว ชักเชี่ยวแล้วสิ
- </body>
- </html>
โฆษณา
มารู้จัก attribute กัน. คุณใส่ข้อมูลเพิ่มเติมเข้าไปใน Tag ได้ เรียกว่า "attributes" ในรูปของคำที่คุณเพิ่มเข้าไปในตัว tag เป็น attribute-name="specific value" พูดง่ายๆ ว่า แทบจะทุก tag ของ HTML สามารถใส่ title attribute เข้าไปได้- <p title="คำนำ">ใส่ย่อหน้าคำนำตรงนี้</p> ตั้งชื่อให้ย่อหน้านั้นว่า "คำนำ" ซึ่งจะโผล่ขึ้นมาเวลาคุณเลื่อนเมาส์ไปเหนือย่อหน้านั้นของหน้าเว็บ
ลิงค์ไปที่หน้าอื่น. ให้ใช้ tag <a> </a> สร้าง hyperlink ไปยังหน้าอื่นของเว็บ ใส่ URL ของหน้าเว็บนั้นในลิงค์เพื่อใช้ href attribute ข้างล่างคือตัวอย่างสำหรับลิงค์ไปยังหน้าที่คุณกำลังอ่านอยู่นี่แหละ- <a href="http://www.wikihow.com/Write-an-HTML-Page">คนที่เข้าชมเว็บไซต์ของคุณสามารถคลิกที่ข้อความนี้เพื่อไปยังลิงค์</a>
เพิ่ม id attribute เข้าไปใน tag. อีก attribute ที่ใช้ได้กับแทบทุก tag ของ HTML ก็คือ "id" ให้พิมพ์ id="example" ใน tag ไหนก็ได้ หรือใช้ชื่ออะไรที่ไม่มีเว้นวรรค[7] ตอนนี้จะยังไม่เห็นผลอะไร แต่เราจะมาใช้งานกันต่อไปในขั้นตอนข้างล่าง- เช่น ถ้าลองใส่ <p id="example"> ลงในเอกสารของคุณ ย่อหน้านี้ก็จะกลายเป็นตัวอย่างอธิบายวิธีใช้ id attribute ให้คุณ</p>
ลิงค์ไปยังส่วนประกอบอื่นด้วย id เฉพาะเจาะจง. ตอนนี้คุณสามารถใช้ hyperlink tag <a> </a> เพื่อลิงค์ไปยังจุดอื่นในหน้าเดียวกันได้อีกด้วย แทนที่จะใช้ URL ให้คุณใช้สัญลักษณ์ # ตามด้วยค่า id ที่จะลิงค์ไป เช่น <a href="#example">ข้อความนี้จะลิงค์ไปที่ย่อหน้าที่มี id "example"</a>- ทุกค่าของ HTML นั้นคุณจะพิมพ์ตัวเล็กหรือตัวใหญ่ก็ได้ทั้งนั้น[8] ไม่ว่าจะ "#EXAMPLE" หรือ "#example" ก็ลิงค์ไปที่เดียวกันนั่นแหละ
- ถ้าหน้าเว็บนั้นสั้นจนไม่ต้องเลื่อนลงไป คุณอาจไม่ทันสังเกตว่ามันเกิดอะไรขึ้นตอนคุณคลิกลิงค์ในเบราว์เซอร์ ให้ลองย่อหน้าต่างจนมี scroll bar โผล่ขึ้นมานั่นแหละ แล้วลองดูใหม่อีกรอบ
ใส่รูป. Tag <img> นั้นเป็น empty tag แปลว่าไม่จำเป็นต้องใช้ closing tag ทุกข้อมูลที่เบราว์เซอร์ต้องใช้แสดงรูปจะถูกเพิ่มในรูปของ attribute แทน[9] ข้างล่างคือตัวอย่างสำหรับแสดงโลโก้ของ How.com.vn ตามด้วยคำอธิบายของแต่ละ attribute- <img src="http://pad2.whstatic.com/skins/owl/images/wikihow_logo.png" style="width:324px;height:84px" alt="How.com.vn ไท: How.com.vn logo">
- Attribute src=" " จะบอกเบราว์เซอร์ว่าต้องหารูปจากตรงไหน (บอกไว้ก่อนเลยว่าเสียมารยาทมากถ้าเที่ยวไปแอบหยิบยืมรูปมาจากเว็บของคนอื่น แถมถ้าวันดีคืนดีเว็บนั้นเกิดล่มหรือเจ๊งไป รูปที่มาโผล่ในเว็บคุณก็จะพลอยอันตรธานหายไปด้วย)
- Attribute style=" " ทำได้หลายอย่าง แต่ที่เด่นสุดคือใช้กำหนด pixel ความกว้างความสูงของรูป (หรือจะใช้ attribute width=" " กับ height=" " แยกกันก็ได้ แต่ระวังจะเจอปัญหาเรื่องปรับขนาดรูปถ้าใช้ CSS[10])
- Attribute alt="How.com.vn ไท: " คือคำบรรยายรูปสั้นๆ ที่คนเข้าเว็บจะเห็นเวลารูปไม่ขึ้น อันนี้บังคับใส่เลย เลือกไม่ได้ เพราะต้องใช้กับ screen reader สำหรับผู้พิการทางสายตาที่แวะมาเยี่ยมชมเว็บของคุณ[11]
โฆษณา
ตรวจสอบ HTML ของคุณกันอีกรอบ. การตรวจสอบ HTML จะหา error ในโค้ดที่รอดสายตาคุณไปได้ ถ้าหน้าเว็บคุณแสดงไม่ครบถ้วนสมบูรณ์ การตรวจทานในขั้นตอนนี้จะช่วยให้คุณเจอสาเหตุของข้อผิดพลาดที่เกิดขึ้น แถมคุณยังได้เรียนรู้เพิ่มเติมเรื่อง HTML เพราะต้องหาโค้ดที่ดูปกติดีในหน้าจอของคุณแต่กลับใช้ไม่ได้เพราะมาตรฐานของ HTML มีการอัพเดท เวลามี HTML ที่ใช้การไม่ได้ ไม่ได้แปลว่าเว็บของคุณจะเข้าไม่ได้ แต่จะเป็นปัญหาอื่นหรือหน้าเว็บนั้นออกมาไม่ครบถ้วนสมบูรณ์เวลาเปิดในเบราว์เซอร์ที่แตกต่างออกไป- ลองใช้เว็บตรวจสอบฟรีอย่าง W3C ดู หรือจะใช้เว็บตรวจสอบ HTML 5 เว็บอื่นก็ได้
ศึกษาพวก tag กับ attribute ไว้ให้คล่องๆ. ยังมี tag กับ attribute ของ HTML อีกเยอะ และคุณก็ศึกษาหาความรู้เพิ่มเติมได้มากมายหลายที่เช่นกัน- ลองเข้าไปที่ w3schools กับ HTML Dog จะเจอ tutorial กับรายการ tag ต่างๆ เต็มไปหมด
- ลองหาเว็บไหนที่หน้าตาถูกใจคุณ แล้วใช้ฟังก์ชั่น "View Page Source" ในเบราว์เซอร์ส่องโค้ด HTML ของเขาเป็นตัวอย่างก็ได้ จากนั้น Copy-paste มาลองปรับนู่นแต่งนี่ดูซิว่าจะออกมาเป็นยังไง
- หาบทความอื่นๆ มาอ่านเพิ่มเติมด้วย เช่น การสร้างตาราง HTML การใช้ meta tag ให้เว็บคุณโผล่มาต้นๆ ใน search engine หรือการใช้ div กับ span ช่วยแต่ง css
ได้เวลาเปิดตัวเว็บของคุณ. พอหาบริการ web hosting ได้แล้ว คราวนี้จะอัพโหลดหน้าเว็บ HTML สักกี่หน้าลงใน web domain ของคุณเองก็ไม่มีใครว่า แต่ก่อนจะทำแบบนั้นได้คุณต้องมีโปรแกรมอัพโหลด FTP ซะก่อน ปกติก็มากับบริการของ web host นั่นแหละ- เวลาลิงค์ไปที่หน้ากับรูปต่างๆ ในเว็บของคุณ ไม่ต้องใช้ address เต็มๆ ก็ได้ เช่น ถ้า domain name ของคุณคือ www.superskilledhtmlcoder.com <a href="/journal/monday.html">ข้อความใน tag นี้</a> ก็จะลิงค์ไปยัง address "www.superskilledhtmlcoder.com/journal/monday.html" เอง
เพิ่มลูกเล่นด้วย CSS. ถ้าหน้าเว็บ HTML ของคุณดูโล้นเลี่ยนไปหน่อย ให้ไปศึกษา CSS พื้นฐานดู จะได้หัดใส่สี เปลี่ยนฟอนต์ ใช้งานส่วนประกอบต่างๆ ได้ดีกว่าเดิม การลิงค์ "stylesheet" ของ CSS ไปยังหน้าเว็บ HTML ให้คุณยกเครื่องส่วนต่างๆ อย่างรวดเร็ว ทันใจ เปลี่ยนรูปแบบข้อความอัตโนมัติโดยใช้ tag ต่างๆ ให้ลองปรับ stylesheet ดูเอง หรือจะศึกษาจาก tutorial ละเอียดๆ อย่าง คู่มือ CSS ของ HTML Dog ดูก็ได้
ใช้ JavaScript ในหน้าเว็บของคุณ. JavaScript เป็นภาษาสำหรับเขียนโปรแกรมที่ใช้ในการเพิ่มเติมฟังก์ชั่นให้หน้าเว็บ HTML ของคุณ คุณต้องใส่คำสั่ง JavaScript ไว้ระหว่าง start กับ end tag <script> </script> โดยใช้ได้ทั้งการเพิ่มปุ่มแบบ interactive การคำนวณโจทย์เลข และอื่นๆ อีกมากมาย อยากรู้ไปดูที่ ตัวอย่างของ w3c ได้เลยโฆษณา
เคล็ดลับ
- doctype ที่ใช้ใน tutorial นี้คือ "loose HTML 4.0.1 transitional" เป็นฟอร์แมตง่ายๆ สำหรับมือใหม่หัดใช้ HTML[12] ถ้าจะให้เบราว์เซอร์อ่านเป็นฟอร์แมต HTML 5 แบบเป๊ะๆ ให้ใช้ (<!DOCTYPE html>) แทน ซึ่งเป็นมาตรฐานที่แนะนำ (ถึงคนจะไม่ค่อยนิยมใช้กันก็เถอะ)
โฆษณา
คำเตือน
- HTML ออกแบบมาเพื่อให้ใช้เนื้อหาได้ทุกรูปแบบ ไม่ใช่เพื่อกำหนดหน้าตาของหน้าเว็บคุณ อย่างสีพื้นหลังและส่วนประกอบอื่นๆ ถึงจะมี tag เฉพาะเจาะจงมากมายสำหรับแต่ละส่วน แต่เราแนะนำให้ใช้ CSS สร้างหน้าเว็บเพราะจะเสถียรและควบคุมปรับแต่งได้มากกว่า
โฆษณา
สิ่งของที่ใช้
- โปรแกรมแก้ไขไฟล์ text ทั่วไป อย่าง NotePad หรือ TextEdit
- เบราว์เซอร์ อย่าง Internet Explorer หรือ Mozilla Firefox
- (ไม่จำเป็น) HTML editor อย่าง Adobe Dreamweaver, Aptana Studio หรือ Microsoft Expression Web
ข้อมูลอ้างอิง
- ↑ http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html
- ↑ http://htmldog.com/guides/html/beginner/gettingstarted/
- ↑ http://www.w3.org/QA/Tips/Doctype
- ↑ HTML Tutorials
- ↑ http://www.w3schools.com/tags/tag_br.asp
- ↑ http://www.w3schools.com/tags/tag_pre.asp
- ↑ http://www.w3schools.com/tags/att_global_id.asp
- ↑ http://www.w3schools.com/tags/att_global_id.asp
- ↑ http://htmldog.com/guides/html/beginner/images/
เกี่ยวกับวิกิฮาวนี้
นักเขียนในทีมวิกิฮาว
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 10,963 ครั้ง
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 10,963 ครั้ง
หมวดหมู่: อินเทอร์เน็ต
มีการเข้าถึงหน้านี้ 10,963 ครั้ง
บทความนี้เป็นประโยชน์กับคุณไหม
⚠️ Disclaimer:
Content from Wiki How ไท language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
โฆษณา
