องค์ประกอบพื้นฐานของ HTML คือย่อหน้า ใช้แท็ก "<p>" และ "</p>" เพื่อกำหนดย่อหน้า ตัวอย่างเช่น:
<p>นี่คือย่อหน้า </p>
ไฮเปอร์ลิงก์คือลิงก์ไปยังหน้าหรือไซต์อื่น ใช้แท็ก "<a href=''>" และ "</a>" เพื่อสร้างไฮเปอร์ลิงก์ โดยที่แอตทริบิวต์ href ระบุ URL ของลิงก์ ตัวอย่างเช่น:
<a href="https://www.jb51.net">นี่คือลิงค์</a>
รูปภาพสามารถเพิ่มผลกระทบทางภาพของเพจและถ่ายทอดข้อมูลเพิ่มเติมได้ แทรกรูปภาพโดยใช้แท็ก "<img src='' alt=''/>" โดยที่แอตทริบิวต์ src ระบุเส้นทางไปยังไฟล์รูปภาพ และแอตทริบิวต์ alt มีข้อความแสดงแทนที่จะแสดงเมื่อรูปภาพไม่สามารถแสดงได้ ตัวอย่างเช่น:
<img src="image.jpg" alt="ภาพที่สวยงาม">
ตารางเป็นวิธีหลักในการนำเสนอข้อมูลบนหน้าเว็บ ใช้แท็ก "<table>", "<tr>" และ "<td>" เพื่อกำหนดตาราง แถว และเซลล์ตามลำดับ ตัวอย่างเช่น:
<ตาราง> <tr> <td>แถวแรก คอลัมน์แรก</td> <td>แถวแรก คอลัมน์ที่สอง</td> </tr> <tr> <td>แถวที่สอง คอลัมน์แรก</td> <td>แถวที่สอง คอลัมน์ที่สอง</td> </tr> </ตาราง>
ใช้แท็ก "<ul>" หรือ "<ol>" เพื่อสร้างรายการที่ไม่เรียงลำดับหรือเรียงลำดับ จากนั้นใช้แท็ก "<li>" เพื่อกำหนดรายการ ตัวอย่างเช่น:
<ul> <li>รายการ 1</li> <li>รายการ 2</li> </ul> <ol> <li>รายการ 1</li> <li>รายการ 2</li> </ol>
แบบฟอร์มเป็นส่วนประกอบที่ใช้ในการรวบรวมข้อมูลของผู้ใช้ ใช้แท็ก "<form>" เพื่อสร้างแบบฟอร์ม และใช้แท็ก "<input>" เพื่อกำหนดฟิลด์อินพุต ตัวอย่างเช่น:
<แบบฟอร์มการกระทำ = "submit.php" วิธีการ = "โพสต์"> <label for="username">ชื่อผู้ใช้:</label> <input type="text" name="username" id="username"> <label for="password">รหัสผ่าน:</label> <input type="password" name="password" id="password"> <ประเภทอินพุต = "ส่ง" ค่า = "ส่ง"> </แบบฟอร์ม>
CSS สามารถใช้เพื่อควบคุมลักษณะที่ปรากฏและเค้าโครงของหน้าเว็บ คุณสามารถเพิ่มสไตล์ CSS ให้กับเอกสาร HTML ได้โดยใช้แท็ก "<style>" ตัวอย่างเช่น:
<สไตล์>
ร่างกาย {
สีพื้นหลัง: #f2f2f2;
-
h1 {
สี: สีฟ้า;
การจัดแนวข้อความ: กึ่งกลาง;
-
</สไตล์>ข้อมูลโค้ดข้างต้นเป็นเพียงส่วนเล็กๆ ของภาษา HTML อย่างไรก็ตาม สิ่งเหล่านี้สามารถช่วยคุณสร้างโครงสร้างและสไตล์หน้าเว็บขั้นพื้นฐาน และสร้างแรงบันดาลใจในการเรียนรู้เพิ่มเติม ตอนนี้ลองสร้างเว็บไซต์ของคุณเองโดยใช้โค้ด HTML เหล่านี้!
คำชี้แจงเอกสาร HTML5
<!DOCTYPE html>
บล็อกโค้ดข้างต้นเป็นการประกาศเอกสาร HTML5 โดยระบุว่าหน้าเว็บปัจจุบันเขียนตามมาตรฐาน HTML5
เมื่อเขียนเว็บเพจ อย่าลืมเขียนประกาศเอกสาร HTML5 ที่ด้านบนของเว็บเพจ หากคุณไม่ได้เขียนประกาศเอกสาร เบราว์เซอร์บางตัวจะเข้าสู่โหมดแปลก ๆ หลังจากเข้าสู่โหมดแปลก ๆ เบราว์เซอร์จะแยกวิเคราะห์เพจและเพจจะไม่แสดงตามปกติ ดังนั้นเพื่อหลีกเลี่ยงการเข้าสู่โหมดนี้คุณต้องเขียนคำสั่งเอกสาร
คำชี้แจงเอกสารที่ใช้กันทั่วไป
HTML5
<!DOCTYPE html>
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
เอ็กซ์เอชทีเอ็มแอล 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
หมายเหตุ: <!DOCTYPE> ไม่ใช่แท็ก HTML ให้ข้อมูล (คำสั่ง) แก่เบราว์เซอร์เกี่ยวกับเวอร์ชันของ HTML ที่เขียน
เพื่อให้เข้ากันได้กับหน้าเก่าบางหน้า เบราว์เซอร์มีโหมดการแยกวิเคราะห์สองโหมด:
โหมดมาตรฐาน โหมดมาตรฐาน
Quirks Mode โหมดแปลกๆ
โหมดแปลก ๆ จะทำให้เกิดพฤติกรรมที่คาดเดาไม่ได้เมื่อแยกวิเคราะห์หน้าเว็บ และเราควรหลีกเลี่ยงไม่ให้โหมดแปลก ๆ เกิดขึ้น
ประเภทไฟล์ <HTML></HTML> (วางไว้ที่จุดเริ่มต้นและจุดสิ้นสุดของไฟล์)
ชื่อเอกสาร <TITLE></TITLE> (ต้องอยู่ในบล็อก "ส่วนหัว")
ส่วนหัว <HEAD></HEAD> (รายละเอียด เช่น "หัวข้อ")
สไตล์ <BODY></BODY> (เนื้อหาเอกสาร)
หัวข้อ <H?></H?> (ตั้งแต่ 1 ถึง 6 มีให้เลือก 6 ระดับ)
การจัดตำแหน่งหัวข้อ <H?ALIGN=LEFT|CENTER|RIGHT></H?>
แยกแยะ <DIV></DIV>
การจัดตำแหน่งที่แตกต่าง <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
บล็อกการอ้างอิง <BLOCKQUOTE></BLOCKQUOTE> (ปกติจะเยื้อง)
เน้น <EM></EM> (มักจะแสดงเป็นตัวเอียง)
เน้นเป็นพิเศษที่ <strong></strong> (โดยปกติจะแสดงด้วยตัวหนา)
การอ้างอิง <CITE></CITE> (มักจะแสดงเป็นตัวเอียง)
รหัส <CODE></CODE> (สำหรับแสดงซอร์สโค้ด)
ตัวอย่าง<SAMP></SAMP>
อินพุตคีย์บอร์ด<KBD></KBD>
ตัวแปร<VAR></VAR>
กำหนด <DFN></DFN> (ไม่มีให้ในเบราว์เซอร์บางตัว)
ที่อยู่<ที่อยู่></ที่อยู่>
ตัวอักษรขนาดใหญ่<BIG></BIG>
พิมพ์เล็ก<SMALL></SMALL>
ตัวหนา<B></B>
ตัวเอียง<I></I>
บรรทัดล่าง <U></U> (เบราว์เซอร์บางตัวยังไม่มีให้)
Strikethrough <S></S> (บางเบราว์เซอร์ยังไม่มีให้)
ตัวห้อย<SUB></SUB>
ตัวยก <SUP></SUP>
เครื่องพิมพ์ดีด <TT></TT> (แสดงเป็นแบบอักษรช่องเดียว)
รูปแบบที่กำหนดไว้ล่วงหน้า <PRE></PRE> (รักษาขนาดของช่องว่างในไฟล์)
ความกว้างของรูปแบบที่จัดรูปแบบไว้ล่วงหน้า <PRE WIDTH=?></PRE> (เป็นอักขระ)
จัดแนวด้วย <CENTER></CENTER> (ยอมรับทั้งข้อความและรูปภาพ)
Shine <BLINK></BLINK> (แท็กที่ถูกเยาะเย้ยมากที่สุดเท่าที่เคยมีมา)
ขนาดตัวอักษร <FONTSIZE=?></FONT> (ตั้งแต่ 1 ถึง 7)
เปลี่ยนขนาดตัวอักษร <FONTSIZE=+|-?></FONT>
ขนาดแบบอักษรพื้นฐาน <BASEFONTSIZE=?> (ตั้งแต่ 1 ถึง 7; ค่าเริ่มต้นคือ 3)
สีตัวอักษร<FONTCOLOR="#$$"></FONT> ($$ คือรหัสสี)
1) พื้นผิว: <img src="ที่อยู่รูปภาพ">
2) เข้าร่วมลิงก์: <a href="ที่อยู่ที่เกี่ยวข้องที่จะเชื่อมต่อ">เขียนคำที่คุณต้องการเขียน</a>
3) เปิดลิงก์ในหน้าต่างใหม่: <a href="ที่อยู่ที่เกี่ยวข้อง" target="_blank">เขียนคำที่คุณต้องการเขียน</a>
4) แบบอักษรมือถือ (กระโจม): <marquee>เขียนคำที่คุณต้องการเขียน</marquee>
5) ตัวอักษรตัวหนา: <b>เขียนคำที่คุณต้องการเขียน</b>
6) ตัวอักษรตัวเอียง: <i>เขียนคำที่คุณต้องการเขียน</i>
7) ขีดเส้นใต้แบบอักษร: <u>เขียนคำที่คุณต้องการเขียน</u>
8) ขีดทับแบบอักษร: <s>เขียนคำที่คุณต้องการเขียน</s>
9) เพิ่มขนาดตัวอักษร: <big>เขียนคำที่คุณต้องการเขียน</big>
10) การควบคุมขนาดตัวอักษร: <h1>เขียนคำที่คุณต้องการเขียน</h1> (ขนาดตัวอักษรอาจอยู่ระหว่าง h1-h5, h1 ใหญ่ที่สุด, h5 คือเล็กที่สุด)
11) เปลี่ยนสีตัวอักษร: <font color="#value">เขียนคำที่คุณต้องการเขียน</font> (ค่าอยู่ระหว่าง 000000 ถึง ffffff (เลขฐานสิบหก 16 บิต)
12) ขจัดขีดเส้นใต้ของการเชื่อมโยง: <a href="Related address" style="text- decoration:none">เขียนคำที่คุณต้องการเขียน</a>
13) โพสต์เพลง: <embed src="Music address" width="Width" height="Height" autostart=false>
14) วางแฟลช: <embed src="flash address" width="width" height="height">
15) วางไฟล์วิดีโอ: <img dynsrc="file address" width="width" height="height" start=mouseover>
16) ตัวแบ่งบรรทัด:<br>
17) ย่อหน้า: <p>ย่อหน้า</p>
18) รูปแบบข้อความต้นฉบับ: <pre>ข้อความ</pre>
19) เปลี่ยนพื้นหลังของโพสต์: <body background="ที่อยู่รูปภาพพื้นหลัง">
20) แก้ไขพื้นหลังของโพสต์ที่ไม่เลื่อนด้วยแถบเลื่อน: <body background="ที่อยู่รูปภาพพื้นหลัง" bodybgproperties=fixed>
21) ปรับแต่งสีพื้นหลังของโพสต์: <body bgcolor="#value">(ดูค่า 10)
22) โพสต์เพลงพื้นหลัง: <bgsound="ที่อยู่เพลงพื้นหลัง" loop=infinite>
23) โพสต์หน้าเว็บ: <iframe. src="Related Address" width="Width" height="Height"></iframe>