สี HTML
ใน HTML คุณสามารถระบุสีได้โดยใช้ชื่อสีค่า RGB หรือค่า HEX
ชื่อสี
ใน HTML คุณสามารถระบุสีได้โดยใช้ชื่อสี:
HTML รองรับชื่อสีมาตรฐาน 140 สี
ค่า RGB
ใน HTML สีสามารถระบุเป็นค่า RGB โดยใช้สูตรนี้: rgb (สีแดงเขียวและน้ำเงิน)
พารามิเตอร์แต่ละตัว (สีแดงเขียวและน้ำเงิน) กำหนดความเข้มของสีระหว่าง 0 ถึง 255
ตัวอย่างเช่น rgb (255,0,0) จะแสดงเป็นสีแดงเนื่องจากค่าสีแดงถูกตั้งค่าเป็นค่าสูงสุด (255) และค่าอื่น ๆ จะถูกกำหนดเป็น 0
หากต้องการแสดงสีดำค่าพารามิเตอร์สีทั้งหมดจะต้องตั้งค่าเป็น 0 เช่นนี้ rgb (0,0,0)
หากต้องการแสดงสีขาวพารามิเตอร์สีทั้งหมดจะต้องตั้งค่าเป็น 255 เช่น: rgb (255,255,255)
ทดลองโดยการผสมค่า RGB ด้านล่าง:
เฉดสีเทามักถูกกำหนดโดยใช้ค่าเท่ากันสำหรับแหล่งกำเนิดแสงทั้งหมด 3 แห่ง:
สไตล์ HTML - CSS
จัดรูปแบบ HTML ด้วย CSS
CSS ย่อมาจาก Cascading Style Sheets
CSS อธิบายถึงองค์ประกอบ HTML ที่จะปรากฏบนหน้าจอกระดาษหรือในสื่ออื่น ๆ
CSS ช่วยประหยัดงานได้มาก สามารถควบคุมการจัดวางหน้าเว็บหลายหน้าพร้อมกันได้
CSS สามารถเพิ่มลงในองค์ประกอบ HTML ได้ 3 วิธีดังนี้
อินไลน์ - โดยใช้แอตทริบิวต์ style ในองค์ประกอบ HTML
ภายใน - โดยใช้ <style> element ในส่วน <head>
ภายนอก - โดยใช้ไฟล์ CSS ภายนอก
วิธีที่นิยมใช้กันมากที่สุดในการเพิ่ม
CSS คือการเก็บสไตล์ไว้ในไฟล์ CSS แยกต่างหาก
อย่างไรก็ตามในที่นี้เราจะใช้รูปแบบอินไลน์และภายในเพราะนี่เป็นการสาธิตได้ง่ายและง่ายกว่าที่คุณจะลองใช้เอง
เคล็ดลับ: คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ CSS ใน CSS Tutorial ของเรา
CSS แบบอินไลน์
CSS แบบอินไลน์ถูกใช้เพื่อใช้สไตล์ที่ไม่ซ้ำกับองค์ประกอบ HTML เดียว
CSS แบบอินไลน์ใช้แอตทริบิวต์ style ขององค์ประกอบ HTML
ตัวอย่างนี้ตั้งค่าสีข้อความขององค์ประกอบ <h1> เป็นสีน้ำเงิน:
CSS ภายใน
CSS ภายในถูกใช้เพื่อกำหนดสไตล์สำหรับหน้า HTML เดียว
CSS ภายในกำหนดไว้ในส่วน <head> ของหน้า HTML ภายในองค์ประกอบ <style>:
CSS ภายนอก
สไตล์ชีตภายนอกถูกใช้เพื่อกำหนดสไตล์สำหรับหน้า HTML จำนวนมาก
ด้วยสไตล์ชีตภายนอกคุณสามารถเปลี่ยนรูปลักษณ์ของเว็บไซต์ทั้งหมดได้โดยการเปลี่ยนไฟล์!
หากต้องการใช้สไตล์ชีตภายนอกให้เพิ่มลิงก์ลงในส่วน <head> ของหน้า HTML:
แผ่นงานสไตล์ภายนอกสามารถเขียนได้ในโปรแกรมแก้ไขข้อความใด ๆ ไฟล์ต้องไม่มีรหัส HTML และต้องมีการบันทึกด้วยนามสกุล. css
ต่อไปนี้เป็นลักษณะ "styles.css":
แบบอักษร CSS
คุณสมบัติ CSS color กำหนดสีข้อความที่จะใช้
คุณสมบัติแบบอักษรของครอบครัว CSS กำหนดแบบอักษรที่จะใช้
คุณสมบัติแบบอักษร CSS กำหนดขนาดข้อความที่จะใช้
ขอบ CSS
พร็อพเพอร์ตี้ CSS กำหนดเส้นขอบรอบ ๆ องค์ประกอบ HTML:
การขยายความ CSS
พร็อพเพอร์ตี้ CSS กำหนดช่องว่าง (ช่องว่าง) ระหว่างข้อความและเส้นขอบ:
ขอบนอก CSS
พร็อพเพอร์ตี้ CSS กำหนดขอบ (ช่องว่าง) นอกเส้นขอบ:
แอ็ตทริบิวต์ id
หากต้องการกำหนดสไตล์เฉพาะสำหรับองค์ประกอบพิเศษให้เพิ่มแอตทริบิวต์ id ไปยังองค์ประกอบ:
<p id="p01">I am different</p>
จากนั้นกำหนดสไตล์สำหรับองค์ประกอบที่มีรหัสเฉพาะ:
หมายเหตุ: รหัสขององค์ประกอบควรมีเอกลักษณ์เฉพาะภายในหน้าดังนั้นตัวเลือก id จะถูกใช้เพื่อเลือกองค์ประกอบที่ไม่เหมือนใคร!
แอตทริบิวต์คลาส
ในการกำหนดสไตล์สำหรับออบเจ็กต์ชนิดพิเศษให้เพิ่มแอ็ตทริบิวต์ class ไปยังอิลิเมนต์:
<p class="error">I am different</p>
จากนั้นกำหนดสไตล์สำหรับองค์ประกอบที่มีคลาสเฉพาะ:
การอ้างอิงภายนอก
สไตล์ชีตภายนอกสามารถอ้างอิงได้ด้วย URL แบบเต็มหรือมีเส้นทางสัมพันธ์กับหน้าเว็บปัจจุบัน
ตัวอย่างนี้ใช้ URL แบบเต็มเพื่อเชื่อมโยงไปยังสไตล์ชีต:
ตัวอย่างนี้เชื่อมโยงกับสไตล์ชีตที่อยู่ในโฟลเดอร์ html บนเว็บไซต์ปัจจุบัน:
ตัวอย่างนี้เชื่อมโยงไปยังสไตล์ชีตที่อยู่ในโฟลเดอร์เดียวกันกับหน้าปัจจุบัน:
คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเส้นทางของไฟล์ในบทเส้นทางไฟล์ HTML
บทสรุปบท
- ใช้แอตทริบิวต์ HTML style สำหรับการจัดรูปแบบอินไลน์
- ใช้อิลิเมนต์ HTML <style> เพื่อกำหนด CSS ภายใน
- ใช้องค์ประกอบ HTML <link> เพื่ออ้างถึงไฟล์ CSS ภายนอก
- ใช้อิลิเมนต์ HTML <head> เพื่อเก็บอิลิเมนต์ <style> และ <link>
- ใช้คุณสมบัติสี CSS สำหรับสีข้อความ
- ใช้คุณสมบัติแบบอักษรของตระกูล CSS สำหรับแบบอักษรข้อความ
- ใช้คุณสมบัติแบบอักษร CSS สำหรับขนาดของข้อความ
- ใช้คุณสมบัติชายแดน CSS สำหรับเส้นขอบ
- ใช้ CSS padding property สำหรับพื้นที่ภายในเส้นขอบ
- ใช้พร็อพเพอร์ตี้ CSS สำหรับช่องว่างนอกเขตแดน
ลิงก์ HTML
ลิงก์พบได้ในเกือบทุกหน้าเว็บ ลิงก์ช่วยให้ผู้ใช้สามารถคลิกจากหน้าหนึ่ง ๆ
ลิงก์ HTML - การเชื่อมโยงหลายมิติ
ลิงก์ HTML เชื่อมโยงหลายมิติ
คุณสามารถคลิกลิงก์และข้ามไปที่เอกสารอื่นได้
เมื่อคุณเลื่อนเมาส์ไปที่ลิงก์ลูกศรเมาส์จะกลายเป็นมือเล็ก ๆ
หมายเหตุ: ลิงค์ไม่จำเป็นต้องเป็นข้อความ อาจเป็นภาพหรือองค์ประกอบ HTML อื่น ๆ
ลิงก์ HTML - ไวยากรณ์
ใน HTML ลิงก์จะถูกกำหนดด้วยแท็ก <a>:
<a href="url">link text</a>
แอตทริบิวต์ href ระบุที่อยู่ปลายทาง (https://www.w3schools.com/html/) ของลิงก์
ข้อความลิงก์เป็นส่วนที่มองเห็นได้ (ไปที่บทแนะนำ HTML ของเรา)
การคลิกลิงก์ข้อความจะส่งไปยังที่อยู่ที่ระบุ
หมายเหตุ:
หากไม่มีเครื่องหมายทับที่อยู่ย่อยคุณอาจสร้างสองคำขอไปยังเซิร์ฟเวอร์
เซิร์ฟเวอร์จำนวนมากจะเพิ่มเครื่องหมายทับไปที่ที่อยู่โดยอัตโนมัติจากนั้นจึงสร้างคำขอใหม่
การเชื่อนต่อท้องถิ่น
ตัวอย่างข้างต้นใช้ URL แบบสัมบูรณ์ (ที่อยู่เว็บแบบเต็ม)
ลิงก์ท้องถิ่น (ลิงก์ไปยังเว็บไซต์เดียวกัน) จะถูกระบุด้วย URL สัมพัทธ์ (ไม่มี http: // www .... )
สีลิงก์ HTML
โดยค่าเริ่มต้นลิงก์จะปรากฏเช่นนี้ (ในเบราว์เซอร์ทั้งหมด):
- ลิงก์ที่ไม่ได้ตรวจพบมีขีดเส้นใต้และมีสีฟ้า
- ลิงก์ที่เข้าชมมีขีดเส้นใต้และม่วง
- ลิงก์ที่ใช้งานอยู่มีขีดเส้นใต้และมีสีแดง
คุณสามารถเปลี่ยนสีเริ่มต้นโดยใช้สไตล์:
ลิงก์ HTML - แอตทริบิวต์เป้าหมาย
แอตทริบิวต์ target ระบุตำแหน่งที่จะเปิดเอกสารที่เชื่อมโยง
แอตทริบิวต์เป้าหมายสามารถมีค่าใดค่าหนึ่งต่อไปนี้:
_blank - เปิดเอกสารที่เชื่อมโยงไว้ในหน้าต่างหรือแท็บใหม่
_self - เปิดเอกสารที่เชื่อมโยงไว้ในหน้าต่าง / แท็บเดียวกันเมื่อมีการคลิก (นี่คือค่าเริ่มต้น)
_parent - เปิดเอกสารที่เชื่อมโยงไว้ในเฟรมหลัก
_top - เปิดเอกสารที่เชื่อมโยงไว้ในเนื้อหาแบบเต็มรูปแบบของหน้าต่าง
framename - เปิดเอกสารที่เชื่อมโยงไว้ในเฟรมที่มีชื่อ
ตัวอย่างนี้จะเปิดเอกสารที่เชื่อมโยงไว้ในหน้าต่าง / แท็บเบราเซอร์ใหม่:
เคล็ดลับ: หากหน้าเว็บของคุณถูกล็อคในเฟรมคุณสามารถใช้ target = "_ top" เพื่อแยกออกจากเฟรม:
ลิงก์ HTML - ภาพเป็นลิงก์
เป็นเรื่องปกติที่จะใช้รูปภาพเป็นลิงก์:
หมายเหตุ: เส้นขอบ: 0; ถูกเพิ่มเพื่อป้องกันไม่ให้ IE9 (และก่อนหน้า) แสดงเส้นขอบรอบภาพ (เมื่อรูปภาพเป็นลิงค์)
ลิงก์ HTML - สร้างบุ๊กมาร์ก
บุ๊กมาร์ก HTML ใช้เพื่อให้ผู้อ่านสามารถข้ามไปยังบางส่วนของเว็บเพจได้
บุ๊กมาร์กจะมีประโยชน์หากเว็บเพจของคุณยาวมาก
หากต้องการสร้างบุ๊กมาร์กคุณต้องสร้างบุ๊กมาร์กก่อนและเพิ่มลิงก์ไปที่บุ๊กมาร์ก
เมื่อมีการคลิกลิงก์หน้าเว็บจะเลื่อนไปยังตำแหน่งที่มีบุ๊กมาร์ก
ตัวอย่าง
ขั้นแรกให้สร้างบุ๊กมาร์กที่มีแอตทริบิวต์ id:
<h2 id="C4">Chapter 4</h2>
จากนั้นเพิ่มลิงก์ไปยังบุ๊กมาร์ก ("ข้ามไปที่บทที่ 4") จากภายในหน้าเดียวกัน:
<a href="#C4">Jump to Chapter 4</a>
หรือเพิ่มลิงก์ไปยังบุ๊กมาร์ก ("ข้ามไปที่บทที่ 4") จากหน้าอื่น:
เส้นทางภายนอก
หน้าเว็บภายนอกสามารถอ้างอิงได้ด้วย URL แบบเต็มหรือมีเส้นทางสัมพันธ์กับหน้าเว็บปัจจุบัน
ตัวอย่างนี้ใช้ URL แบบเต็มเพื่อเชื่อมโยงไปยังหน้าเว็บ:
ตัวอย่างนี้เชื่อมโยงไปยังหน้าเว็บที่อยู่ในโฟลเดอร์ html บนเว็บไซต์ปัจจุบัน:
ตัวอย่างนี้เชื่อมโยงไปยังหน้าเว็บที่อยู่ในโฟลเดอร์เดียวกับหน้าปัจจุบัน:
คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเส้นทางของไฟล์ในบทเส้นทางไฟล์ HTML
บทสรุปบท
- ใช้ <a> องค์ประกอบเพื่อกำหนดลิงก์
- ใช้แอตทริบิวต์ href เพื่อกำหนดที่อยู่ link
- ใช้แอตทริบิวต์ target เพื่อกำหนดตำแหน่งที่จะเปิดเอกสารที่เชื่อมโยง
- ใช้ <img> องค์ประกอบ (ภายใน <a>) เพื่อใช้รูปภาพเป็นลิงค์
- ใช้แอตทริบิวต์ id (id = "value") เพื่อกำหนดบุ๊กมาร์กในหน้าเว็บ
- ใช้แอตทริบิวต์ href (href = "# value") เพื่อเชื่อมโยงไปยังบุ๊กมาร์ก
รูปภาพ HTML
JPG Images
GIF Images
PNG Images
ไวยากรณ์ภาพ HTML
ใน HTML ภาพจะถูกกำหนดด้วยแท็ก <img>แท็ก <img> ว่างเปล่าจะมีเฉพาะแอตทริบิวต์เท่านั้นและไม่มีแท็กปิดแอตทริบิวต์ src ระบุ URL (ที่อยู่เว็บ) ของรูปภาพ:<img src="url" alt="some_text" style="width:width;height:height;">แอ็ตทริบิวต์ alt
แอ็ตทริบิวต์ alt จะแสดงข้อความสำรองสำหรับรูปภาพหากผู้ใช้ไม่สามารถดูข้อมูลได้ (เนื่องจากการเชื่อมต่อช้าข้อผิดพลาดในแอตทริบิวต์ src หรือถ้าผู้ใช้ใช้โปรแกรมอ่านหน้าจอ)หากเบราเซอร์ไม่สามารถหารูปภาพได้จะแสดงค่าของแอตทริบิวต์ alt:
ผู้อ่านหน้าจอ HTML
อ่านหน้าจอเป็นโปรแกรมซอฟต์แวร์ที่อ่านรหัส HTML, แปลงข้อความและช่วยให้ผู้ใช้ในการ "ฟัง" เนื้อหา โปรแกรมอ่านหน้าจอจะมีประโยชน์สำหรับผู้ที่มีคนตาบอดพิการทางสายตาหรือการเรียนรู้คนพิการขนาดภาพ - ความกว้างและความสูง
คุณสามารถใช้แอตทริบิวต์สไตล์เพื่อระบุความกว้างและความสูงของภาพค่าที่ระบุเป็นพิกเซล (ใช้ px หลังจากค่า):หรือคุณสามารถใช้แอตทริบิวต์ความกว้างและความสูงได้ ที่นี่ค่าถูกระบุเป็นพิกเซลโดยค่าเริ่มต้น:หมายเหตุ: ระบุความกว้างและความสูงของภาพเสมอ หากไม่ได้ระบุความกว้างและความสูงหน้าเว็บจะกะพริบขณะที่โหลดภาพความกว้างและความสูงหรือสไตล์?
แอตทริบิวต์ทั้งความกว้างความสูงและลักษณะถูกต้องใน HTML5อย่างไรก็ตามเราขอแนะนำให้ใช้แอตทริบิวต์ style จะช่วยป้องกันแผ่นงานสไตล์ภายในและภายนอกจากการเปลี่ยนขนาดภาพต้นฉบับ:
ภาพในโฟลเดอร์อื่นหากไม่ได้ระบุเบราเซอร์คาดว่าจะพบภาพในโฟลเดอร์เดียวกับเว็บเพจอย่างไรก็ตามการจัดเก็บภาพในโฟลเดอร์ย่อยเป็นเรื่องปกติ จากนั้นคุณต้องใส่ชื่อโฟลเดอร์ในแอตทริบิวต์ src:รูปภาพบนเซิร์ฟเวอร์อื่น
เว็บไซต์บางแห่งเก็บภาพไว้ในเซิร์ฟเวอร์ภาพจริงๆแล้วคุณสามารถเข้าถึงรูปภาพจากที่อยู่เว็บใดก็ได้ในโลก:คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเส้นทางของไฟล์ในบทเส้นทางไฟล์ HTMLภาพเคลื่อนไหว
มาตรฐาน GIF อนุญาตให้ภาพเคลื่อนไหว:โปรดสังเกตว่าไวยากรณ์ของการแทรกภาพเคลื่อนไหวไม่แตกต่างจากภาพที่ไม่เคลื่อนไหวการใช้รูปภาพเป็นลิงก์
หากต้องการใช้รูปภาพเป็นลิงก์เพียงแค่วางแท็ก <img> ภายในแท็ก <a>:หมายเหตุ: เส้นขอบ: 0; ถูกเพิ่มเพื่อป้องกันไม่ให้ IE9 (และก่อนหน้า) แสดงเส้นขอบรอบภาพ (เมื่อรูปภาพเป็นลิงค์)รูปภาพลอย
ใช้คุณสมบัติ CSS float เพื่อให้ภาพลอยไปทางขวาหรือทางซ้ายของข้อความ:แผนที่รูปภาพ
ใช้แท็ก <map> เพื่อกำหนดภาพแผนที่ ภาพแผนที่คือภาพที่มีพื้นที่คลิกได้แอตทริบิวต์ name ของแท็ก <map> เชื่อมโยงกับ </ img> 's usemap attribute และสร้างความสัมพันธ์ระหว่างภาพกับแผนที่แท็ก <map> มีแท็ก <area> จำนวนหนึ่งซึ่งกำหนดพื้นที่ที่สามารถคลิกได้ในแผนที่ภาพ:บทสรุปบท
- ใช้อิลิเมนต์ HTML <img> เพื่อกำหนดรูปภาพ
- ใช้แอตทริบิวต์ src HTML เพื่อกำหนด URL ของรูปภาพ
- ใช้แอตทริบิวต์ alt HTML เพื่อกำหนดข้อความสำรองสำหรับรูปภาพหากไม่สามารถแสดงได้
- ใช้ความกว้างและความสูงของ HTML เพื่อกำหนดขนาดของรูปภาพ
- ใช้ความกว้างและความสูงของ CSS เพื่อกำหนดขนาดของรูปภาพ (หรือ)
- ใช้คุณสมบัติ CSS float เพื่อให้ภาพลอยขึ้น
- ใช้อิลิเมนต์ HTML <map> เพื่อกำหนดภาพแผนที่
- ใช้องค์ประกอบ HTML <area> เพื่อกำหนดพื้นที่ที่สามารถคลิกได้ในแผนที่ภาพ
- ใช้แอตทริบิวต์ "usemap" ของ HTML <img> เพื่อชี้ไปยังแผนที่รูปภาพ
หมายเหตุ: การโหลดภาพต้องใช้เวลา ภาพขนาดใหญ่อาจทำให้หน้าเว็บของคุณช้าลง ใช้ภาพอย่างระมัดระวัง
ตาราง HTML
ตัวอย่างตาราง HTMLการกำหนดตาราง HTML
ตาราง HTML ถูกกำหนดด้วยแท็ก <table>แต่ละแถวของตารางถูกกำหนดด้วยแท็ก <tr> ส่วนหัวของตารางถูกกำหนดด้วยแท็ก <th> โดยค่าเริ่มต้นส่วนหัวของตารางจะเป็นตัวหนาและกึ่งกลาง ข้อมูลตาราง / เซลล์ถูกกำหนดด้วยแท็ก <td>หมายเหตุ: องค์ประกอบ <td> คือคอนเทนเนอร์ข้อมูลของตารางพวกเขาสามารถมีทุกประเภทขององค์ประกอบ HTML; ข้อความ, ภาพ, รายการ, ตารางอื่น ๆ ฯลฯ
ตาราง HTML - การเพิ่มเส้นขอบหากคุณไม่ได้กำหนดเส้นขอบสำหรับตารางระบบจะแสดงโดยไม่มีเส้นขอบกำหนดขอบเขตโดยใช้คุณสมบัติชายแดน CSS:อย่าลืมกำหนดเส้นขอบสำหรับทั้งตารางและเซลล์ตารางตาราง HTML - เส้นขอบยุบ
ถ้าคุณต้องการให้เส้นขอบยุบลงเป็นเส้นขอบหนึ่งให้เพิ่มคุณสมบัติ CSS border-collapse:ตาราง HTML - การเพิ่มเซลล์แพ็ดดิ้ง
การขยายช่องเซลล์ระบุช่องว่างระหว่างเนื้อหาเซลล์และเส้นขอบหากคุณไม่ระบุการเบาะช่องเซลล์จะปรากฏขึ้นโดยไม่มีการเบาะเมื่อต้องการตั้งค่าการ padding ให้ใช้ CSS padding property:ตาราง HTML - ส่วนหัวด้านซ้าย
โดยค่าเริ่มต้นส่วนหัวของตารางจะเป็นตัวหนาและกึ่งกลางเมื่อต้องการจัดตำแหน่งส่วนหัวของตารางให้ใช้คุณสมบัติ CSS align-align:
ตาราง HTML - การเพิ่มระยะห่างของเส้นขอบการเว้นวรรคระหว่างชายแดนระบุช่องว่างระหว่างเซลล์เมื่อต้องการกำหนดระยะห่างของเส้นขอบสำหรับตารางให้ใช้ CSS border-spacing property:หมายเหตุ: ถ้าตารางยุบเส้นขอบการเว้นระยะห่างจะไม่มีผล
ตาราง HTML - เซลล์ที่มีหลายคอลัมน์หากต้องการให้เซลล์มีช่วงมากกว่าหนึ่งคอลัมน์ให้ใช้แอตทริบิวต์ colspan:ตาราง HTML - เซลล์ที่มีหลายแถว
หากต้องการให้เซลล์มีช่วงมากกว่าหนึ่งแถวให้ใช้แอตทริบิวต์ rowspan:ตาราง HTML - การเพิ่มคำอธิบายภาพ
หากต้องการเพิ่มคำอธิบายภาพลงในตารางให้ใช้แท็ก <caption>:หมายเหตุ: แท็ก <caption> ต้องแทรกทันทีหลังจากแท็ก <table>สไตล์พิเศษสำหรับหนึ่งตาราง
ในการกำหนดสไตล์พิเศษสำหรับตารางพิเศษให้เพิ่มแอตทริบิวต์ id ลงในตาราง:และเพิ่มรูปแบบมากขึ้น:บทสรุปบท
- ใช้องค์ประกอบ HTML <table> เพื่อกำหนดตาราง
- ใช้องค์ประกอบ HTML <tr> เพื่อกำหนดแถวของตาราง
- ใช้องค์ประกอบ HTML <td> เพื่อกำหนดข้อมูลตาราง
- ใช้อิลิเมนต์ HTML <th> เพื่อกำหนดหัวเรื่องตาราง
- ใช้องค์ประกอบ HTML <caption> เพื่อกำหนดคำอธิบายตาราง
- ใช้คุณสมบัติชายแดน CSS เพื่อกำหนดเส้นขอบ
- ใช้คุณสมบัติพังทลายของ CSS เพื่อยุบขอบเขตของเซลล์
- ใช้ CSS padding property เพื่อเพิ่ม padding ลงในเซลล์
- ใช้คุณสมบัติ CSS text-align เพื่อจัดตำแหน่งข้อความของเซลล์
- ใช้คุณสมบัติ CSS border-spacing เพื่อกำหนดระยะห่างระหว่างเซลล์
- ใช้แอตทริบิวต์ colspan เพื่อให้เซลล์มีหลายคอลัมน์
- ใช้แอตทริบิวต์ rowspan เพื่อให้เซลล์มีหลายแถว
- ใช้แอตทริบิวต์ id เพื่อกำหนดตารางที่ไม่ซ้ำกัน
รายการ HTML
ทดลองกดตรงนี้
รายการ HTML ที่ไม่เรียงตามลำดับ
รายการที่เรียงลำดับจะขึ้นต้นด้วยแท็ก <ul> รายการแต่ละรายการจะขึ้นต้นด้วยแท็ก <li>
รายการจะถูกทำเครื่องหมายด้วยสัญลักษณ์แสดงหัวข้อย่อย (วงกลมสีดำขนาดเล็ก) โดยค่าเริ่มต้น:
ทดลองกดตรงนี้
รายการลำดับ HTML ที่ไม่เรียงตามลำดับ - เลือก Marker รายการของรายการ
คุณสมบัติ CSS list-style-type ถูกใช้เพื่อกำหนดลักษณะของเครื่องหมายรายการ:
ตัวอย่าง - ดิสก์ทดลองกดตรงนี้
ตัวอย่าง - วงกลม
ตัวอย่าง - สแควร์
ตัวอย่าง - ไม่มี
รายการ HTML ที่สั่งซื้อ
รายการที่เรียงลำดับจะขึ้นต้นด้วยแท็ก <ol> รายการแต่ละรายการจะขึ้นต้นด้วยแท็ก <li>รายการจะถูกทำเครื่องหมายด้วยตัวเลขโดยค่าเริ่มต้น:รายการ HTML ที่สั่งซื้อ - แอ็ตทริบิวต์ Type
แอตทริบิวต์ type ของแท็ก <ol> กำหนดชนิดของเครื่องหมายรายการ:
เบอร์:ตัวพิมพ์ใหญ่:ตัวพิมพ์เล็ก:ตัวเลขโรมันตัวพิมพ์ใหญ่:ตัวพิมพ์เล็กตัวเลขโรมัน:
รายการคำอธิบาย HTMLHTML ยังรองรับรายการคำอธิบายรายการคำอธิบายคือรายการคำที่มีคำอธิบายของแต่ละคำแท็ก <dl> กำหนดรายการคำอธิบายแท็ก <dt> กำหนดคำ (ชื่อ) และแท็ก <dd> อธิบายแต่ละคำ:รายการ HTML ที่ซ้อนกัน
รายการสามารถซ้อนกัน (รายการในรายการ):หมายเหตุ: รายการอาจมีรายการใหม่และองค์ประกอบ HTML อื่น ๆ เช่นรูปภาพและลิงก์เป็นต้นรายการแนวนอน
รายการ HTML สามารถจัดรูปแบบได้หลายวิธีด้วย CSSหนึ่งวิธีที่นิยมคือการจัดเรียงรายการในแนวนอนเพื่อสร้างเมนู:บทสรุปบท
- ใช้อิลิเมนต์ HTML <ul> เพื่อกำหนดรายการที่ไม่มีการจัดเรียง
- ใช้คุณสมบัติประเภทรายการสไตล์ CSS เพื่อกำหนดเครื่องหมายรายการ
- ใช้องค์ประกอบ HTML <ol> เพื่อกำหนดรายการที่เรียงลำดับ
- ใช้แอตทริบิวต์ประเภท HTML เพื่อกำหนดประเภทการพิมพ์เลขที่
- ใช้อิลิเมนต์ HTML <li> เพื่อกำหนดรายการ
- ใช้องค์ประกอบ HTML <dl> เพื่อกำหนดรายการคำอธิบาย
- ใช้องค์ประกอบ HTML <dt> เพื่อกำหนดคำอธิบาย
- ใช้องค์ประกอบ HTML <dd> เพื่ออธิบายคำในรายการคำอธิบาย
- รายการสามารถซ้อนกันภายในรายการได้
- รายการอาจมีองค์ประกอบ HTML อื่น ๆ
- ใช้ CSS property float: ซ้ายหรือ display: inline เพื่อแสดงรายการตามแนวนอน
HTML Block และ Inline Elements
❮ก่อนหน้าต่อไป❯ทุกองค์ประกอบ HTML มีค่าการแสดงผลเริ่มต้นขึ้นอยู่กับประเภทขององค์ประกอบ ค่าการแสดงผลดีฟอลต์สำหรับองค์ประกอบส่วนใหญ่จะเป็นบล็อกหรือแบบอินไลน์
องค์ประกอบระดับบล็อกองค์ประกอบระดับบล็อกเริ่มต้นในบรรทัดใหม่เสมอและใช้ความกว้างเต็มที่ (เหยียดออกไปทางซ้ายและขวาเท่าที่จะสามารถทำได้)องค์ประกอบ <div> เป็นองค์ประกอบระดับบล็อกตัวอย่างขององค์ประกอบระดับบล็อก:<div><h1> - <h6><p><form>องค์ประกอบแบบอินไลน์
องค์ประกอบแบบอินไลน์ไม่ได้เริ่มต้นในบรรทัดใหม่และใช้เวลาเท่าที่ความกว้างเท่าที่จำเป็นเท่านั้นนี่คือองค์ประกอบแบบอินไลน์ภายในย่อหน้าตัวอย่างขององค์ประกอบแบบอินไลน์:<span><a><img>องค์ประกอบ <div>
องค์ประกอบ <div> มักใช้เป็นคอนเทนเนอร์สำหรับองค์ประกอบ HTML อื่น ๆองค์ประกอบ <div> ไม่มีแอตทริบิวต์ที่ต้องการ แต่ทั้งสไตล์และชั้นเรียนเป็นเรื่องปกติเมื่อใช้ร่วมกับ CSS องค์ประกอบ <div> สามารถใช้เพื่อกำหนดลักษณะของเนื้อหา:
องค์ประกอบ <span>
องค์ประกอบ <span> มักใช้เป็นที่เก็บสำหรับข้อความบางส่วนองค์ประกอบ <span> ไม่มีแอตทริบิวต์ที่ต้องการ แต่ทั้งสไตล์และชั้นเรียนเป็นเรื่องปกติเมื่อใช้ร่วมกับ CSS องค์ประกอบ <span> สามารถใช้เพื่อจัดรูปแบบส่วนต่างๆของข้อความได้:HTML แอ็ตทริบิวต์คลาส
ใช้แอ็ตทริบิวต์คลาส
แอตทริบิวต์ HTML class ทำให้สามารถกำหนดรูปแบบที่เหมือนกันสำหรับองค์ประกอบที่มีชื่อชั้นเดียวกันได้
ที่นี่เรามีสามองค์ประกอบ <div> ที่ชี้ไปที่ชื่อชั้นเดียวกัน:
ทดลองกดตรงนี้
London
London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.Paris
Paris is the capital and most populous city of France.Situated on the Seine River, it is at the heart of the Ĩle-de-France region, also known as the région parisienne.Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.การใช้แอ็ตทริบิวต์คลาสในองค์ประกอบแบบอินไลน์
แอตทริบิวต์คลาส HTML สามารถใช้ได้กับองค์ประกอบแบบอินไลน์ดังนี้
ทดลองกดตรงนี้
HTML Iframes
iframe ใช้เพื่อแสดงหน้าเว็บภายในเว็บเพจ
ไวยากรณ์ Iframe
กำหนดเฟรม iframe HTML ด้วยแท็ก <iframe>:
<iframe src="URL"></iframe>
แอตทริบิวต์ src ระบุ URL (ที่อยู่เว็บ) ของหน้าเว็บแบบอินไลน์
Iframe - ตั้งค่าความสูงและความกว้าง
ใช้แอตทริบิวต์ height และ width เพื่อระบุขนาดของ iframe
ค่าแอตทริบิวต์จะถูกระบุเป็นพิกเซลตามค่าเริ่มต้น แต่สามารถเป็นเปอร์เซ็นต์ (เช่น "80%") ได้
ทดลองกดตรงนี้
Iframe - ลบเส้นขอบ
โดยค่าเริ่มต้น iframe จะมีเส้นขอบล้อมรอบ
เมื่อต้องการลบเส้นขอบให้เพิ่มแอตทริบิวต์ style และใช้คุณสมบัติชายแดน CSS:
ทดลองกดตรงนี้
ด้วย CSS คุณสามารถเปลี่ยนขนาดสไตล์และสีของเส้นขอบ iframe ได้เช่นกัน
ทดลองกดตรงนี้
Iframe - เป้าหมายสำหรับลิงก์
iframe สามารถใช้เป็นกรอบเป้าหมายสำหรับลิงก์ได้
แอตทริบิวต์เป้าหมายของลิงก์ต้องอ้างอิงถึงแอ็ตทริบิวต์ name ของ iframe:
ทดลองกดตรงนี้
JavaScript HTMLJavaScript ทำให้หน้าเว็บ HTML มีรูปแบบไดนามิกและโต้ตอบมากยิ่งขึ้น
ทดลองกดตรงนี้
แท็ก <script> ใช้เพื่อกำหนดสคริปต์ฝั่งไคลเอ็นต์ (JavaScript)
HTML <script> แท็ก
คอมโพเนนต์ <script> มีคำสั่งสคริปต์หรือชี้ไปยังไฟล์สคริปต์ภายนอกผ่านแอตทริบิวต์ src
การใช้งานร่วมกันของ JavaScript คือการจัดการรูปภาพการตรวจสอบรูปแบบและการเปลี่ยนแปลงเนื้อหาแบบไดนามิก
ในการเลือกองค์ประกอบ HTML JavaScript มักใช้เมธอด document.getElementById (id)
ตัวอย่าง JavaScript นี้เขียนว่า "Hello JavaScript!" ลงในองค์ประกอบ HTML ที่มี id = "demo":
ทดลองกดตรงนี้
เคล็ดลับ: คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ JavaScript ในการสอน JavaScript ของเรา
รสชาติของ JavaScript
นี่คือตัวอย่างของสิ่งที่ JavaScript สามารถทำได้:
JavaScript สามารถเปลี่ยนเนื้อหา HTML
ทดลองกดตรงนี้
JavaScript สามารถเปลี่ยนรูปแบบ HTML ได้
ทดลองกดตรงนี้
JavaScript สามารถเปลี่ยนแอตทริบิวต์ HTML ได้
ทดลองกดตรงนี้
เส้นทางไฟล์ HTML
เส้นทางไฟล์ HTML
พา ธ ไฟล์อธิบายตำแหน่งของไฟล์ในโครงสร้างโฟลเดอร์ของเว็บไซต์
พา ธ ไฟล์ใช้เมื่อเชื่อมโยงไปยังไฟล์ภายนอกเช่น:
- หน้าเว็บ
- ภาพ
- แผ่นสไตล์
- JavaScripts
เส้นทางไฟล์สัมบูรณ์
เส้นทางของไฟล์ที่แน่นอนคือ URL แบบเต็มไปยังไฟล์อินเทอร์เน็ต:
ทดลองกดตรงนี้
แท็ก <img> และแอตทริบิวต์ src และ alt จะอธิบายไว้ในบทเกี่ยวกับ HTML รูปภาพ
เส้นทางไฟล์สัมพัทธ์ชี้ไปที่ไฟล์ที่สัมพันธ์กับหน้าปัจจุบัน
เส้นทางไฟล์สัมพัทธ์
ในตัวอย่างนี้เส้นทางของไฟล์ชี้ไปที่ไฟล์ในโฟลเดอร์ภาพที่อยู่ที่รากของเว็บปัจจุบัน:
ทดลองกดตรงนี้
ในตัวอย่างนี้เส้นทางของแฟ้มชี้ไปที่แฟ้มในโฟลเดอร์รูปที่อยู่ในโฟลเดอร์ปัจจุบัน:
ทดลองกดตรงนี้
ในตัวอย่างนี้เส้นทางของไฟล์ชี้ไปที่ไฟล์ในโฟลเดอร์ภาพที่อยู่ในโฟลเดอร์หนึ่งระดับเหนือโฟลเดอร์ปัจจุบัน:
ทดลองกดตรงนี้
ปฏิบัติที่ดีที่สุด
เป็นแนวทางที่ดีที่สุดในการใช้เส้นทางไฟล์สัมพัทธ์ (ถ้าเป็นไปได้)
เมื่อใช้เส้นทางไฟล์สัมพัทธ์หน้าเว็บของคุณจะไม่ถูกผูกมัดกับ URL พื้นฐานปัจจุบันของคุณ ลิงก์ทั้งหมดจะทำงานบนคอมพิวเตอร์ของคุณ (localhost) ตลอดจนโดเมนสาธารณะในปัจจุบันของคุณและโดเมนสาธารณะในอนาคตของคุณ
หัว HTML
องค์ประกอบ HTML <head>
องค์ประกอบ <head> เป็นคอนเทนเนอร์สำหรับข้อมูลเมตา (ข้อมูลเกี่ยวกับข้อมูล) และอยู่ระหว่างแท็ก <html> และ <body>
ข้อมูลเมตา HTML เป็นข้อมูลเกี่ยวกับเอกสาร HTML ข้อมูลเมตาไม่ปรากฏขึ้น
ข้อมูลเมตามักกำหนดชื่อเอกสารชุดอักขระรูปแบบลิงก์สคริปต์และข้อมูลเมตาอื่น ๆ
แท็กต่อไปนี้อธิบาย metadata: <title>, <style>, <meta>, <link>, <script> และ <base>
องค์ประกอบ HTML <title>
องค์ประกอบ <title> กำหนดชื่อของเอกสารและจำเป็นต้องใช้ในเอกสาร HTML / XHTML ทั้งหมด
องค์ประกอบ <title>:
กำหนดชื่อในแท็บเบราว์เซอร์
ระบุหัวเรื่องของเพจเมื่อเพิ่มลงในรายการโปรด
แสดงชื่อเรื่องของหน้าเว็บในผลลัพธ์ของเครื่องมือค้นหา
เอกสาร HTML ง่ายๆ:
ทดลองกดตรงนี้
อิลิเมนต์ <style> ถูกใช้เพื่อกำหนดข้อมูลสไตล์สำหรับหน้า HTML เดียว:
องค์ประกอบ HTML <style>
ทดลองกดตรงนี้
เค้าโครง HTML
ทดลองกดตรงนี้
องค์ประกอบเค้าโครง HTML
เว็บไซต์มักจะแสดงเนื้อหาในหลายคอลัมน์ (เช่นนิตยสารหรือหนังสือพิมพ์)
HTML5 มีองค์ประกอบความหมายใหม่ที่กำหนดส่วนต่างๆของหน้าเว็บ:
องค์ประกอบความหมาย HTML5
<header> - กำหนดส่วนหัวของเอกสารหรือส่วน
<nav> - กำหนดคอนเทนเนอร์สำหรับลิงก์การนำทาง
<section> - กำหนดส่วนในเอกสาร
<article> - กำหนดบทความอิสระที่มีเนื้อหาอิสระ
<aside> - กำหนดเนื้อหานอกเหนือจากเนื้อหา (เช่นแถบด้านข้าง)
<footer> - กำหนดส่วนท้ายสำหรับเอกสารหรือส่วน
<รายละเอียด> - กำหนดรายละเอียดเพิ่มเติม
<summary> - กำหนดหัวเรื่องสำหรับอิลิเมนต์ <details>
เทคนิคการจัดวาง HTML
มีสี่วิธีในการสร้างเค้าโครงแบบหลายสี แต่ละวิธีมีข้อดีและข้อเสีย:
- ตาราง HTML
- คุณสมบัติ CSS float
- กรอบ CSS
- CSS flexbox
หนึ่งที่จะเลือก?
ตาราง HTML
องค์ประกอบ <table> ไม่ได้ถูกออกแบบให้เป็นเครื่องมือจัดโครงแบบ! วัตถุประสงค์ของอิลิเมนต์ <table> คือการแสดงข้อมูลแบบตาราง ดังนั้นอย่าใช้ตารางสำหรับเค้าโครงหน้าเว็บของคุณ! พวกเขาจะนำมาเลอะในรหัสของคุณ และจินตนาการว่าจะออกแบบเว็บไซต์ของคุณให้หนักหลังจากผ่านไปกี่เดือน
เคล็ดลับ: อย่าใช้ตารางสำหรับการจัดวางหน้าเว็บของคุณ!
กรอบ CSS
หากต้องการสร้างการจัดวางอย่างรวดเร็วคุณสามารถใช้กรอบงานเช่น W3.CSS หรือ Bootstrap
ลอยตัว CSS
เป็นเรื่องปกติที่จะทำเค้าโครงเว็บทั้งหมดโดยใช้คุณสมบัติ CSS float การลอยตัวเป็นเรื่องง่ายในการเรียนรู้ - คุณต้องจำไว้ว่าการทำงานของวัสดุลอยตัวและคุณสมบัติที่ชัดเจนนั้นเป็นอย่างไร ข้อเสีย: องค์ประกอบลอยจะเชื่อมโยงกับการไหลของเอกสารซึ่งอาจเป็นอันตรายต่อความยืดหยุ่น เรียนรู้เพิ่มเติมเกี่ยวกับ float ใน CSS Float and Clear chapter ของเรา
ทดลองกดตรงนี้
CSS Flexbox
Flexbox เป็นรูปแบบใหม่ใน CSS3
การใช้ flexbox ช่วยให้มั่นใจได้ว่าองค์ประกอบต่างๆสามารถคาดการณ์ได้เมื่อเค้าโครงหน้าเว็บต้องรองรับขนาดหน้าจอและอุปกรณ์แสดงผลที่แตกต่างกัน ข้อเสีย: ไม่ทำงานใน IE10 และก่อนหน้านี้
เรียนรู้เพิ่มเติมเกี่ยวกับ flexbox ในบท CSS Flexbox ของเรา
ทดลองกดตรงนี้
การออกแบบเว็บ HTML ตอบสนอง
การออกแบบเว็บแบบโต้ตอบทำให้หน้าเว็บของคุณดูดีในทุกอุปกรณ์ (เดสก์ท็อปแท็บเล็ตและโทรศัพท์)
การออกแบบเว็บตอบสนองคืออะไร?
การออกแบบเว็บตอบสนองคือการใช้ CSS และ HTML เพื่อปรับขนาดซ่อนหดขยายหรือย้ายเนื้อหาเพื่อให้ดูดีบนหน้าจอใดก็ได้:
หมายเหตุ: หน้าเว็บควรมีรูปลักษณ์ที่ดีและใช้งานง่ายโดยไม่คำนึงถึงอุปกรณ์!
สร้างการออกแบบที่ตอบสนองได้ด้วยตัวคุณเอง
วิธีหนึ่งในการสร้างการออกแบบที่ตอบสนองต่อคือการสร้างตัวคุณเอง:
ทดลองกดตรงนี้
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Responsive Web Design โปรดอ่านคู่มือการใช้ RWD ของเรา
ใช้ W3.CSS
อีกวิธีหนึ่งในการสร้างการออกแบบที่ตอบสนองคือการใช้สไตล์ชีตที่ตอบสนองอย่าง W3.CSS
W3.CSS ช่วยให้สามารถพัฒนาไซต์ที่ดูดีได้ทุกขนาด เดสก์ท็อปแล็ปท็อปแท็บเล็ตหรือโทรศัพท์:
W3.CSS Demo
Resize this responsive page!London
London is the capital of England.It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.Paris
Paris is the capital of France.The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.Tokyo
Tokyo is the capital of Japan.It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
ทดลองกดตรงนี้
องค์ประกอบรหัสคอมพิวเตอร์ HTML
ทดลองกดตรงนี้
องค์ประกอบ HTML <kbd> แสดงถึงการป้อนข้อมูลของผู้ใช้เช่นคำสั่งป้อนข้อมูลด้วยแป้นพิมพ์หรือคำสั่งเสียง
HTML <kbd> สำหรับการป้อนข้อมูลด้วยแป้นพิมพ์
ข้อความล้อมรอบด้วยแท็ก <kbd> มักจะปรากฏในแบบอักษร monospace เริ่มต้นของเบราเซอร์:
ทดลองกดตรงนี้
HTML <samp> สำหรับเอาท์พุทของโปรแกรม
องค์ประกอบ HTML <samp> แสดงถึงผลลัพธ์จากโปรแกรมหรือระบบคอมพิวเตอร์
ข้อความล้อมรอบด้วยแท็ก <samp> มักจะปรากฏในแบบอักษร monospace เริ่มต้นของเบราเซอร์:
ทดลองกดตรงนี้
HTML <code> สำหรับรหัสคอมพิวเตอร์
องค์ประกอบ HTML <code> กำหนดส่วนของรหัสคอมพิวเตอร์
ข้อความล้อมรอบด้วยแท็ก <code> มักจะปรากฏในแบบอักษร monospace เริ่มต้นของเบราเซอร์:
ทดลองกดตรงนี้
โปรดสังเกตว่าองค์ประกอบ <code> ไม่ได้รักษาช่องว่างและเส้นแบ่งไว้เป็นพิเศษ
ในการแก้ไขปัญหานี้คุณสามารถใส่อิลิเมนต์ <code> ภายในองค์ประกอบ <pre>:
ทดลองกดตรงนี้
HTML <var> สำหรับตัวแปร
องค์ประกอบ HTML <var> กำหนดตัวแปร
ตัวแปรอาจเป็นตัวแปรในนิพจน์ทางคณิตศาสตร์หรือตัวแปรในบริบทของการเขียนโปรแกรม:
ทดลองกดตรงนี้
เอนทิตี HTML
อักขระที่สงวนไว้ใน HTML ต้องถูกแทนที่ด้วยเอนทิตีอักขระ
อักขระที่ไม่อยู่บนแป้นพิมพ์ของคุณสามารถแทนที่ด้วยเอนทิตีได้เช่นกัน
เอนทิตี HTML
อักขระบางตัวถูกสงวนไว้ใน HTML
หากคุณใช้สัญลักษณ์น้อยกว่า (<) หรือมากกว่า (>) ในข้อความเบราว์เซอร์อาจผสมกับแท็ก
หน่วยอักขระถูกใช้เพื่อแสดงอักขระสงวนไว้ใน HTML
เอนทิตีอักขระมีลักษณะดังนี้:
&entity_name;
OR&#entity_number;
ในการแสดงเครื่องหมายน้อยกว่า (<) เราต้องเขียน: & lt; หรือ <
ข้อดีของการใช้ชื่อนิติบุคคล: ชื่อหน่วยงานง่ายต่อการจดจำ
ข้อเสียของการใช้ชื่อเอนทิตี: เบราว์เซอร์อาจไม่สนับสนุนชื่อเอนทิตีทั้งหมด แต่การสนับสนุนตัวเลขเป็นสิ่งที่ดี
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น