HTML สี

ใน HTML, สีสามารถระบุได้โดยใช้ชื่อสีค่า RGB หรือค่าฐานสิบหก

ชื่อสี

ใน HTML, สีสามารถระบุได้โดยใช้ชื่อสี:

ตัวอย่าง

Color	Name
	Red
	Orange
	Yellow
	Cyan
	Blue

ลองตัวเอง

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 ด้านล่าง:

สีแดง	สีเขียว	สีน้ำเงิน
255	0	0

rgb (255, 0, 0)

ตัวอย่าง

Color	RGB
	rgb(255,0,0)
	rgb(255,255,0)
	rgb(0,255,0)
	rgb(0,255,255)
	rgb(0,0,255)

ลองตัวเอง

เฉดสีเทามักจะถูกกำหนดโดยใช้ค่าเท่าเทียมกันสำหรับทุก 3 แหล่งกำเนิดแสง:

ตัวอย่าง

Color	RGB
	rgb(0,0,0)
	rgb(90,90,90)
	rgb(128,128,128)
	rgb(200,200,200)
	rgb(255,255,255)

ลองตัวเอง

ราคา HEX

ใน HTML, สีนอกจากนี้ยังสามารถระบุโดยใช้ค่าฐานสิบหกในรูปแบบ: # RRGGBB ที่ RR (สีแดง), GG (สีเขียว) และบีบี (สีฟ้า) เป็นค่าเลขฐานสิบหกระหว่าง 00 และ FF (เช่นเดียวกับทศนิยม 0-255) .
ยกตัวอย่างเช่น # FF0000 จะปรากฏเป็นสีแดงเพราะสีแดงถูกตั้งค่าสูงสุด (FF) และอื่น ๆ ที่มีการตั้งค่าต่ำสุด (00)

ตัวอย่าง

Color	HEX
	#FF0000
	#FFFF00
	#00FF00
	#00FFFF
	#0000FF

ลองตัวเอง

เฉดสีเทามักจะถูกกำหนดโดยใช้ค่าเท่าเทียมกันสำหรับทุก 3 แหล่งกำเนิดแสง:

ตัวอย่าง

Color	HEX
	#000000
	#404040
	#808080
	#CCCCCC
	#FFFFFF

ลองตัวเอง

HTML ลักษณะ - CSS

CSS = รูปแบบและสี

จัดการกับข้อความ

สี กล่อง

จัดแต่งทรงผม HTML กับ CSS

CSSย่อมาจากC ascading S Tyle S heets
CSS อธิบายวิธีองค์ประกอบ HTML จะแสดงบนหน้าจอกระดาษหรือในสื่ออื่น
CSS บันทึกจำนวนมากของการทำงาน มันสามารถควบคุมรูปแบบของเว็บเพจได้หลายหน้าทั้งหมดในครั้งเดียว
CSS สามารถเพิ่มไปยังองค์ประกอบ HTML ใน 3 วิธี:

Inline - โดยใช้แอตทริบิวต์สไตล์ในองค์ประกอบ HTML
ภายใน - โดยใช้ element <style> ในส่วน <head>
ภายนอก - โดยใช้ไฟล์ CSS ภายนอก

วิธีที่ใช้กันมากที่สุดในการเพิ่ม CSS, คือการรักษารูปแบบในไฟล์ CSS แยกต่างหาก แต่ที่นี่เราจะใช้แบบอินไลน์และจัดแต่งทรงผมภายในเพราะนี้เป็นเรื่องง่ายที่จะแสดงให้เห็นถึงและง่ายขึ้นสำหรับคุณที่จะลองด้วยตัวคุณเอง

เคล็ดลับ:คุณสามารถเรียนรู้มากขึ้นเกี่ยวกับ CSS ของเราสอน CSS

inline CSS

CSS แบบอินไลน์จะใช้ในการใช้รูปแบบที่ไม่ซ้ำกับองค์ประกอบ HTML ที่เดียว
CSS แบบอินไลน์ใช้แอตทริบิวต์รูปแบบขององค์ประกอบ HTML
ตัวอย่างนี้ชุดสีข้อความของ <h1> องค์ประกอบสีน้ำเงิน:

ตัวอย่าง

<h1 style="color:blue;">This is a Blue Heading</h1>
ลองตัวเอง

CSS ภายใน

CSS ภายในจะใช้ในการกำหนดรูปแบบสำหรับหน้าเว็บ HTML เดียว
CSS ภายในกำหนดไว้ในส่วน <head> ของหน้าเว็บ HTML ภายใน element <style>:

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

ลองตัวเอง

CSS ภายนอก

สไตล์ชีตภายนอกจะใช้ในการกำหนดรูปแบบสำหรับหน้าเว็บ HTML หลาย
ด้วยแผ่นลักษณะภายนอกคุณสามารถเปลี่ยนรูปลักษณ์ของเว็บไซต์ทั้งหมดโดยเปลี่ยนไฟล์เดียว!
การใช้แผ่นลักษณะภายนอกเพิ่มลิงค์ไปยังในส่วน <head> ของหน้า HTML:

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

ลองตัวเอง

สไตล์ชีตภายนอกสามารถเขียนได้ในโปรแกรมแก้ไขข้อความใด ๆ ไฟล์ที่ไม่ต้องมีโค้ด HTML ใด ๆ และต้องถูกบันทึกไว้ด้วยนามสกุล .css
นี่คือวิธีการที่ "styles.css" ดู:

body {
    background-color: powderblue;}
h1 {
    color: blue;}
p {
    color: red;}

CSS แบบอักษร

ซีเอสเอสีคุณสมบัติกำหนดสีของตัวอักษรที่จะใช้
ซีเอสเอfont-familyคุณสมบัติกำหนดตัวอักษรที่จะใช้
ซีเอสเอfont-sizeคุณสมบัติกำหนดขนาดตัวอักษรที่จะใช้

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;}
p {
    color: red;
    font-family: courier;
    font-size: 160%;}</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

ลองตัวเอง

CSS ชายแดน

ซีเอสเอชายแดนคุณสมบัติกำหนดเส้นขอบรอบ ๆ องค์ประกอบ HTML นี้:

ตัวอย่าง

p {
border: 1px solid powderblue;}

ลองตัวเอง

Padding CSS

ซีเอสเอpaddingคุณสมบัติกำหนด padding (เว้นวรรค) ระหว่างข้อความและเส้นขอบ:

ตัวอย่าง

p {
border: 1px solid powderblue;
padding: 30px;}

ลองตัวเอง

Margin CSS

ซีเอสเอขอบคุณสมบัติกำหนดอัตรากำไรขั้นต้น (เว้นวรรค) นอกพรมแดน:

ตัวอย่าง

p {
border: 1px solid powderblue;
margin: 50px;
}

ลองตัวเอง

รหัสแอตทริบิวต์

เพื่อกำหนดรูปแบบที่เฉพาะเจาะจงสำหรับองค์ประกอบพิเศษเพิ่มแอตทริบิวต์ id ขององค์ประกอบนี้:

<p id="p01">I am different</p>

แล้วกำหนดรูปแบบสำหรับองค์ประกอบที่มีรหัสที่เฉพาะเจาะจง:

ตัวอย่าง

#p01 {
color: blue;}

ลองตัวเอง

หมายเหตุ: id ของขององค์ประกอบต้องไม่ซ้ำกันภายในหน้าเพื่อเลือก ID ที่ใช้ในการเลือกองค์ประกอบที่ไม่ซ้ำกันหนึ่ง!

แอตทริบิวต์ระดับ

การกำหนดรูปแบบสำหรับชนิดพิเศษองค์ประกอบเพิ่มแอตทริบิวต์ระดับให้องค์ประกอบ:

<p class="error">I am different</p>

แล้วกำหนดรูปแบบสำหรับองค์ประกอบที่มีระดับที่เฉพาะเจาะจง:

ตัวอย่าง

p.error {
color: red;}
ลองตัวเอง

ภายนอกอ้างอิง

แผ่นลักษณะภายนอกสามารถอ้างอิงกับ URL แบบเต็มหรือมีเส้นทางที่สัมพันธ์กับหน้าเว็บปัจจุบัน
ตัวอย่างนี้ใช้ URL แบบเต็มไปเชื่อมโยงไปยังแผ่นรูปแบบ:

ตัวอย่าง

ตัวอย่างนี้เชื่อมโยงไปยังแผ่นลักษณะที่ตั้งอยู่ในโฟลเดอร์ HTML บนเว็บไซต์ปัจจุบัน:

ตัวอย่าง

ตัวอย่างนี้เชื่อมโยงไปยังแผ่นลักษณะที่ตั้งอยู่ในโฟลเดอร์เดียวกันกับหน้าปัจจุบัน:

ตัวอย่าง

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเส้นทางแฟ้มในบทHTML เส้นทางแฟ้ม

บทสรุป

ใช้ HTML รูปแบบแอตทริบิวต์สำหรับจัดแต่งทรงผมแบบอินไลน์
ใช้ HTML <style>องค์ประกอบในการกำหนด CSS ภายใน
ใช้แบบ HTML <link>องค์ประกอบในการอ้างถึงไฟล์ CSS ภายนอก
ใช้แบบ HTML <head>องค์ประกอบในการจัดเก็บ <style> และ <link> องค์ประกอบ
ใช้แบบ CSS สีอสังหาริมทรัพย์สำหรับสีข้อความ
ใช้แบบ CSS font-familyอสังหาริมทรัพย์สำหรับอักษรข้อความ
ใช้ CSS font-sizeคุณสมบัติสำหรับขนาดข้อความ
ใช้แบบ CSS ชายแดนอสังหาริมทรัพย์สำหรับเส้นขอบ
ใช้แบบ CSS paddingอสังหาริมทรัพย์สำหรับพื้นที่ภายในชายแดน
ใช้แบบ CSS ขอบอสังหาริมทรัพย์สำหรับพื้นที่นอกชายแดน

HTML ลิงก์

ลิงค์ที่จะพบได้ในเกือบทุกหน้าเว็บ ลิงค์ที่ให้ผู้ใช้สามารถคลิกที่วิธีการของพวกเขาจากหน้าไปยังหน้า

ลิงค์ HTML - เชื่อมโยงหลายมิติ

ลิงก์ HTML มีความเชื่อมโยงหลายมิติ
คุณสามารถคลิกที่ลิงค์และข้ามไปยังเอกสารอื่น
เมื่อคุณเลื่อนเมาส์ไปเชื่อมโยงลูกศรของเมาส์จะกลายเป็นมือเล็ก ๆ น้อย ๆ

หมายเหตุ:การเชื่อมโยงไม่จำเป็นต้องเป็นข้อความ มันอาจจะเป็นภาพหรือองค์ประกอบ HTML อื่น ๆ

ลิงค์ HTML - ไวยากรณ์

ใน HTML, การเชื่อมโยงจะกำหนดด้วย<a>แท็ก:

ตัวอย่าง

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
ลองตัวเอง

hrefแอตทริบิวต์ระบุที่อยู่ปลายทาง (https://www.w3schools.com/html/) ของการเชื่อมโยง
ข้อความลิงค์เป็นส่วนที่มองเห็น (การเข้าชมการกวดวิชา HTML ของเรา)
คลิกที่การเชื่อมโยงข้อความจะส่งไปยังที่อยู่ที่ระบุ

หมายเหตุ:โดยไม่ต้องทับโฟลเดอร์ย่อยที่อยู่คุณอาจสร้างสองร้องขอไปยังเซิร์ฟเวอร์ หลายเซิร์ฟเวอร์โดยอัตโนมัติจะเพิ่มทับไปยังที่อยู่และสร้างคำขอใหม่

ลิงก์ท้องถิ่น

ตัวอย่างข้างต้นใช้ URL แบบเต็ม (ที่อยู่เว็บเต็ม)
การเชื่อมโยงท้องถิ่น (เชื่อมโยงไปยังเว็บไซต์เดียวกัน) ถูกระบุด้วย URL ที่เกี่ยวข้อง (โดย http: // www .... )

ตัวอย่าง

<a href="html_images.asp">HTML Images</a>
ลองตัวเอง

สี HTML การเชื่อมโยง

โดยค่าเริ่มต้นการเชื่อมโยงจะปรากฏเช่นนี้ (ในเบราว์เซอร์ทั้งหมด):

การเชื่อมโยง unvisited เป็นขีดเส้นใต้และสีฟ้า
การเชื่อมโยงเข้าเยี่ยมชมเป็นขีดเส้นใต้และสีม่วง
ลิงค์ที่ใช้งานเป็นที่ขีดเส้นใต้และสีแดง

คุณสามารถเปลี่ยนสีเริ่มต้นโดยใช้รูปแบบ:

ตัวอย่าง

ลิงค์ HTML - แอตทริบิวต์เป้าหมาย

เป้าหมายแอตทริบิวต์ระบุตำแหน่งที่จะเปิดเอกสารที่เชื่อมโยง
แอตทริบิวต์เป้าหมายสามารถมีค่าใดค่าหนึ่งต่อไปนี้:

_ blank - เปิดเอกสารที่เชื่อมโยงในหน้าต่างใหม่หรือแท็บ
_self - เปิดเอกสารที่เชื่อมโยงในหน้าต่างเดียวกัน / แท็บในขณะที่มันถูกคลิก (นี้เป็นค่าเริ่มต้น)
_parent - เปิดเอกสารที่เชื่อมโยงในกรอบแม่
_top - เปิดเอกสารที่เชื่อมโยงในร่างกายเต็มรูปแบบของหน้าต่าง
framename - เปิดเอกสารที่เชื่อมโยงอยู่ในกรอบที่ชื่อ

ตัวอย่างนี้จะเปิดเอกสารที่เชื่อมโยงในหน้าต่างใหม่เบราว์เซอร์ / แท็บ:

ตัวอย่าง

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
ลองตัวเอง

เคล็ดลับ:หากหน้าเว็บของคุณถูกขังอยู่ในกรอบที่คุณสามารถใช้ target = "_ top" เพื่อแยกออกจากกรอบ:

ตัวอย่าง

<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>
ลองตัวเอง

ลิงค์ HTML - รูปที่เชื่อมโยง

มันเป็นเรื่องธรรมดาที่จะใช้ภาพการเชื่อมโยง:

ตัวอย่าง

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
ลองตัวเอง

หมายเหตุ:ชายแดน: 0; จะมีการเพิ่มการป้องกันไม่ให้ IE9 (และก่อนหน้า) จากการแสดงขอบรอบภาพ (เมื่อภาพการเชื่อมโยง)

ลิงค์ HTML - สร้าง Bookmark

บุ๊ก HTML จะใช้ในการช่วยให้ผู้อ่านข้ามไปยังส่วนที่เฉพาะเจาะจงของเว็บเพจ
บุ๊กจะมีประโยชน์ถ้าหน้าเว็บของคุณมีความยาวมาก
ที่จะทำให้บุ๊กก่อนอื่นคุณต้องสร้างบุ๊กและจากนั้นเพิ่มการเชื่อมโยงกับมัน
เมื่อการคลิกลิงก์หน้าจะเลื่อนไปยังสถานที่ที่มีบุ๊ก

ตัวอย่าง

ครั้งแรกที่สร้างบุ๊กที่มีแอตทริบิวต์ ID ไปนี้:

<h2 id="C4">Chapter 4</h2>

จากนั้นให้เพิ่มการเชื่อมโยงไปยังบุ๊ก ( "ข้ามไปยังบทที่ 4") จากภายในหน้าเดียวกัน:

<a href="#C4">Jump to Chapter 4</a>

หรือเพิ่มการเชื่อมโยงไปยังบุ๊ก ( "ข้ามไปยังบทที่ 4") จากหน้าอื่น:

ตัวอย่าง

<a href="html_demo.html#C4">Jump to Chapter 4</a>
ลองตัวเอง

เส้นทางภายนอก

หน้าเว็บภายนอกสามารถอ้างอิงกับ URL แบบเต็มหรือมีเส้นทางที่สัมพันธ์กับหน้าเว็บปัจจุบัน
ตัวอย่างนี้ใช้ URL แบบเต็มไปเชื่อมโยงไปยังหน้าเว็บ:

ตัวอย่าง

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
ลองตัวเอง

ตัวอย่างนี้เชื่อมโยงไปยังหน้าเว็บที่อยู่ในโฟลเดอร์ HTML บนเว็บไซต์ปัจจุบัน:

ตัวอย่าง

<a href="/html/default.asp">HTML tutorial</a>
ลองตัวเอง

ตัวอย่างนี้เชื่อมโยงไปยังหน้าเว็บที่อยู่ในโฟลเดอร์เดียวกับหน้าปัจจุบัน:

ตัวอย่าง

<a href="default.asp">HTML tutorial</a>
ลองตัวเอง

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเส้นทางแฟ้มในบทHTML เส้นทางแฟ้ม

บทสรุป

ใช้<a>องค์ประกอบในการกำหนดลิงค์
ใช้hrefแอตทริบิวต์การกำหนดที่อยู่การเชื่อมโยง
ใช้เป้าหมายแอตทริบิวต์การกำหนดสถานที่ที่จะเปิดเอกสารที่เชื่อมโยง
ใช้<img>องค์ประกอบ (ภายใน <a>) เพื่อใช้ภาพเป็นลิงค์
ใช้รหัสแอตทริบิวต์ (id = " คุ้มค่า ") เพื่อกำหนดบุ๊กในหน้าเว็บ
ใช้hrefแอตทริบิวต์ (href = "# คุ้มค่า ") เพื่อเชื่อมโยงไปยังบุ๊ก

HTML แสดงสินค้า

ภาพ JPG

ภาพ gif

PNG รูปภาพ

ตัวอย่าง

<!DOCTYPE html>

<html>

<body>

<h2>Spectacular Mountain</h2>

<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>

</html>

ลองตัวเอง»

HTML แสดงไวยากรณ์

ใน HTML, ภาพจะถูกกำหนดด้วย<img>แท็ก

<img> แท็กเป็นที่ว่างเปล่ามันมีคุณลักษณะเฉพาะและไม่ได้มีแท็กปิด

แอตทริบิวต์ src ระบุ URL (ที่อยู่เว็บ) ของภาพ:

<img src="url" alt="some_text" style="width:width;height:height;">

แอตทริบิวต์ Alt

แอตทริบิวต์ Alt ให้ข้อความสำรองสำหรับภาพถ้าใช้เหตุผลบางอย่างที่ไม่สามารถดูได้ (เพราะการเชื่อมต่อช้าข้อผิดพลาดในคุณลักษณะ src หรือถ้าผู้ใช้ใช้โปรแกรมอ่านหน้าจอ)

หากเบราว์เซอร์ไม่สามารถหาภาพก็จะแสดงค่าของแอตทริบิวต์ Alt นี้:

ตัวอย่าง

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
ลองตัวเอง»

แอตทริบิวต์ alt จำเป็น หน้าเว็บจะไม่ตรวจสอบอย่างถูกต้องโดยไม่ได้

HTML โปรแกรมอ่านหน้าจอ

อ่านหน้าจอเป็นโปรแกรมซอฟต์แวร์ที่อ่านรหัส HTML, แปลงข้อความและช่วยให้ผู้ใช้ในการ "ฟัง" เนื้อหา โปรแกรมอ่านหน้าจอจะมีประโยชน์สำหรับผู้ที่มีคนตาบอดพิการทางสายตาหรือการเรียนรู้คนพิการ

ขนาดภาพ - ความกว้างและความสูง

คุณสามารถใช้รูปแบบแอตทริบิวต์ที่จะระบุความกว้างและความสูงของภาพ

ค่าที่ระบุไว้ในพิกเซล (ใช้ px หลังจากค่า):

ตัวอย่าง

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
ลองตัวเอง»

หรือคุณสามารถใช้ความกว้างและความสูงแอตทริบิวต์ นี่คือค่าที่ระบุไว้ในพิกเซลโดยค่าเริ่มต้น:

ตัวอย่าง

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
ลองตัวเอง»

หมายเหตุ:เสมอระบุความกว้างและความสูงของภาพ ถ้ากว้างและความสูงไม่ได้ระบุไว้หน้าจะสั่นไหวขณะโหลดภาพ

ความกว้างและความสูงหรือรูปแบบ?

ทั้งความกว้างความสูงและคุณลักษณะรูปแบบที่ถูกต้องใน HTML5

อย่างไรก็ตามเราขอแนะนำให้ใช้แอตทริบิวต์สไตล์ จะป้องกันไม่ให้แผ่นรูปแบบภายในหรือภายนอกจากการเปลี่ยนขนาดของภาพเดิม:

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%; }</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>
ลองตัวเอง»

ภาพในโฟลเดอร์อื่น

ถ้าไม่ได้ระบุเบราว์เซอร์คาดว่าจะพบภาพในโฟลเดอร์เดียวกันกับหน้าเว็บ

แต่ก็เป็นเรื่องธรรมดาที่จะเก็บภาพในโฟลเดอร์ย่อย จากนั้นคุณต้องมีชื่อโฟลเดอร์ src แอตทริบิวต์:

ตัวอย่าง

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
ลองตัวเอง»

ภาพบนเซิร์ฟเวอร์อื่น

บางเว็บไซต์เก็บภาพของพวกเขาบนเซิร์ฟเวอร์ภาพ

ที่จริงแล้วคุณสามารถเข้าถึงภาพจากที่อยู่เว็บใด ๆ ในโลก:

ตัวอย่าง

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
ลองตัวเอง»

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเส้นทางแฟ้มในบทHTML เส้นทางแฟ้ม

ภาพเคลื่อนไหว

มาตรฐาน GIF ช่วยให้ภาพเคลื่อนไหว:

ตัวอย่าง

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
ลองตัวเอง»

โปรดทราบว่าไวยากรณ์ของการใส่ภาพเคลื่อนไหวไม่แตกต่างจากภาพไม่ใช่ภาพเคลื่อนไหว

การใช้ภาพเป็นลิงค์

การใช้ภาพเป็นลิงค์เพียงรัง <img> แท็กภายในแท็ก <a>:

ตัวอย่าง

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
ลองตัวเอง»

หมายเหตุ:ชายแดน: 0; จะมีการเพิ่มการป้องกันไม่ให้ IE9 (และก่อนหน้า) จากการแสดงขอบรอบภาพ (เมื่อภาพการเชื่อมโยง)

Floating ภาพ

ใช้แบบ CSS ลอยคุณสมบัติที่จะปล่อยให้ลอยภาพไปทางขวาหรือทางซ้ายของข้อความนี้:

ตัวอย่าง

<p><img src="smiley.gif" alt="Smiley face"style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face"style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
ลองตัวเอง»

ภาพแผนที่

ใช้ <แผนที่> แท็กเพื่อกำหนดภาพแผนที่ ภาพแผนที่เป็นภาพที่มีพื้นที่ที่สามารถคลิก

แอตทริบิวต์ชื่อของ <แผนที่> แท็กที่เกี่ยวข้องกับ <img> 's แอตทริบิวต์ usemap และสร้างความสัมพันธ์ระหว่างภาพและแผนที่

แท็ก <แผนที่> มีจำนวนของ <พื้นที่> แท็กที่กำหนดพื้นที่ที่สามารถคลิกได้ในภาพแผนที่:

ตัวอย่าง

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
ลองตัวเอง»

บทสรุป

ใช้ HTML <img>องค์ประกอบในการกำหนดภาพ

ใช้ HTML จะsrcแอตทริบิวต์การกำหนด URL ของภาพ

ใช้แบบ HTML Altแอตทริบิวต์การกำหนดข้อความอื่นสำหรับภาพถ้ามันไม่สามารถแสดงได้

ใช้ HTML โดยความกว้างและความสูงแอตทริบิวต์การกำหนดขนาดของภาพ

ใช้ CSS ความกว้างและความสูงคุณสมบัติเพื่อกำหนดขนาดของภาพ (อีก)

ใช้แบบ CSS ลอยคุณสมบัติที่จะปล่อยให้ลอยภาพ

ใช้แบบ HTML <แผนที่>องค์ประกอบในการกำหนดภาพแผนที่

ใช้ HTML <พื้นที่>องค์ประกอบในการกำหนดพื้นที่ที่สามารถคลิกได้ในภาพแผนที่

ใช้องค์ประกอบ HTML <img> 's usemapแอตทริบิวต์ให้ชี้ไปที่ภาพแผนที่

หมายเหตุ:โหลดภาพต้องใช้เวลา รูปภาพขนาดใหญ่สามารถชะลอหน้าเว็บของคุณ ใช้ภาพอย่างระมัดระวัง

HTML ตาราง

HTML ตัวอย่างตาราง

Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Magazzini Alimentari Riuniti Giovanni Rovelli Italy

ลองตัวเอง»

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

การกำหนดตาราง HTML

ตาราง HTML จะกำหนดด้วย<table>แท็ก

แถวของตารางแต่ละครั้งจะถูกกำหนดด้วย<tr>แท็ก ส่วนหัวตารางจะถูกกำหนดด้วย<TH>แท็ก โดยค่าเริ่มต้นหัวตารางเป็นตัวหนาและเป็นศูนย์กลาง ข้อมูลตาราง / มือถือจะถูกกำหนดด้วย <td>แท็ก

ตัวอย่าง

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
  <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
ลองตัวเอง»

หมายเหตุ:ก <td> องค์ประกอบภาชนะบรรจุข้อมูลของตาราง
พวกเขาสามารถมีทุกประเภทขององค์ประกอบ HTML; ข้อความ, ภาพ, รายการ, ตารางอื่น ๆ ฯลฯ

ตาราง HTML - เพิ่มชายแดน

ถ้าคุณไม่ได้ระบุชายแดนสำหรับโต๊ะก็จะปรากฏไม่มีพรมแดน

ชายแดนมีการตั้งค่าโดยใช้แบบ CSS ชายแดนทรัพย์สิน:

ตัวอย่าง

table, th, td {
border: 1px solid black;}
ลองตัวเอง»

โปรดจำไว้ว่าการกำหนดเส้นเขตแดนทั้งตารางและเซลล์ตาราง

ตาราง HTML - พรมแดนยุบ

ถ้าคุณต้องการเส้นขอบจะยุบเป็นหนึ่งชายแดนเพิ่มแบบ CSS ชายแดนยุบ ทรัพย์สิน:

ตัวอย่าง

table, th, td {
border: 1px solid black;
border-collapse: collapse;}
ลองตัวเอง»

HTML ตาราง - เพิ่ม Padding มือถือ

padding มือถือระบุช่องว่างระหว่างเนื้อหามือถือและพรมแดนของตน

ถ้าคุณไม่ได้ระบุช่องว่างภายในเซลล์ตารางจะปรากฏโดยไม่ต้องขยาย

ในการตั้งค่า padding ใช้แบบ CSS paddingทรัพย์สิน:

ตัวอย่าง

th, td {
padding: 15px;}
ลองตัวเอง»

ตาราง HTML - หัวซ้ายจัด

โดยค่าเริ่มต้นหัวตารางเป็นตัวหนาและเป็นศูนย์กลาง

การจัดซ้ายหัวตารางให้ใช้แบบ CSS text-alignทรัพย์สิน:

ตัวอย่าง

th {
text-align: left;}
ลองตัวเอง»

HTML ตาราง - เพิ่มการเว้นพื้นที่ชายแดน

ระยะห่างชายแดนระบุช่องว่างระหว่างเซลล์

ในการตั้งระยะห่างชายแดนสำหรับตารางให้ใช้แบบ CSS ชายแดนระยะห่างทรัพย์สิน:

ตัวอย่าง

table {
border-spacing: 5px;}
ลองตัวเอง»

หมายเหตุ:ถ้าตารางมีการยุบพรมแดนชายแดนระยะห่างจะไม่มีผล

ตาราง HTML - เซลล์ที่ครอบคลุมหลายคอลัมน์

ที่จะทำให้ช่วงเซลล์มากกว่าหนึ่งคอลัมน์ใช้colspanแอตทริบิวต์:

ตัวอย่าง

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
ลองตัวเอง»

ตาราง HTML - เซลล์ที่ครอบคลุมหลายแถว

ที่จะทำให้ช่วงเซลล์มากกว่าหนึ่งแถวใช้rowspanแอตทริบิวต์:

ตัวอย่าง

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>
ลองตัวเอง»

HTML ตาราง - การเพิ่มคำอธิบายภาพ

เพื่อเพิ่มคำอธิบายในตารางให้ใช้<คำบรรยายใต้ภาพ>แท็ก:

ตัวอย่าง

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
ลองตัวเอง»

หมายเหตุ:ก <คำบรรยายใต้ภาพ> แท็กจะต้องแทรกทันทีหลังจากที่ <table> แท็ก

A รูปแบบพิเศษสำหรับตารางหนึ่ง

เพื่อกำหนดรูปแบบพิเศษสำหรับตารางพิเศษเพิ่มID แอตทริบิวต์ตาราง:

ตัวอย่าง

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

ตอนนี้คุณสามารถกำหนดรูปแบบพิเศษสำหรับตารางนี้:

table#t01 {
width: 100%;
background-color: #f1f1c1;}
ลองตัวเอง»

และเพิ่มรูปแบบมากขึ้น:

table#t01 tr:nth-child(even) {
    background-color: #eee;}
table#t01 tr:nth-child(odd) {
    background-color: #fff;}
table#t01 th {
    color: white;
    background-color: black;}
ลองตัวเอง»

บทสรุป

ใช้ HTML <table>องค์ประกอบในการกำหนดตาราง

ใช้ HTML <tr>องค์ประกอบในการกำหนดแถวของตาราง

ใช้ HTML <td>องค์ประกอบในการกำหนดข้อมูลตาราง

ใช้แบบ HTML <TH>องค์ประกอบในการกำหนดตารางหัวเรื่อง

ใช้ HTML <คำบรรยายใต้ภาพ>องค์ประกอบในการกำหนดตารางคำบรรยายใต้ภาพ

ใช้แบบ CSS ชายแดนคุณสมบัติการกำหนดเส้นขอบ

ใช้แบบ CSS ชายแดนยุบคุณสมบัติการยุบพรมแดนมือถือ

ใช้แบบ CSS paddingคุณสมบัติการเพิ่มขยายไปยังเซลล์

ใช้แบบ CSS text-alignคุณสมบัติการจัดตำแหน่งข้อความมือถือ

ใช้แบบ CSS ชายแดนระยะห่างคุณสมบัติการกำหนดระยะห่างระหว่างเซลล์

ใช้colspanแอตทริบิวต์ที่จะทำให้ช่วงเซลล์หลายคอลัมน์

ใช้rowspanแอตทริบิวต์ที่จะทำให้ช่วงเซลล์หลายแถว

ใช้รหัสแอตทริบิวต์ไม่ซ้ำกันกำหนดตารางหนึ่ง

HTML รายการ

HTML ตัวอย่างรายการ

รายการเรียงลำดับ:

ชิ้น

ชิ้น

ชิ้น

ชิ้น

รายการสั่งซื้อ:

รายการแรก

รายการที่สอง

รายการที่สาม

รายการที่สี่

ลองตัวเอง»

รายการ HTML เรียงลำดับ

รายการเรียงลำดับเริ่มต้นด้วย<ul>แท็ก รายการแต่ละรายการจะเริ่มต้นด้วย <li>แท็ก

รายการจะถูกทำเครื่องหมายด้วยกระสุน (วงกลมสีดำขนาดเล็ก) โดยค่าเริ่มต้น:

ตัวอย่าง

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

ลองตัวเอง»

รายการ HTML เรียงลำดับ - เลือกรายการตัวมาร์กเกอร์

CSS ที่รูปแบบรายการประเภททรัพย์สินที่ใช้ในการกำหนดรูปแบบของเครื่องหมายรายการรายการ:

Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Value	Description
disc	Sets the list item marker to a bullet (default)
circle	Sets the list item marker to a circle
square	Sets the list item marker to a square
none	The list items will not be marked

ตัวอย่าง - จาน

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
ลองตัวเอง»

ตัวอย่าง - วงกลม

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
ลองตัวเอง»

ตัวอย่าง - สแควร์

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
ลองตัวเอง»

ตัวอย่าง - ไม่มี

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
ลองตัวเอง»

รายการ HTML ได้รับคำสั่ง

รายการสั่งซื้อเริ่มต้นด้วย<ol>แท็ก รายการแต่ละรายการจะเริ่มต้นด้วย<li>แท็ก

รายการจะถูกทำเครื่องหมายกับตัวเลขตามค่าเริ่มต้น:

ตัวอย่าง

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
ลองตัวเอง»

รายการ HTML สั่งซื้อ - แอตทริบิวต์ type

ประเภทแอตทริบิวต์ของแท็ก <ol> กำหนดประเภทของเครื่องหมายรายการรายการ:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Type	Description
type="1"	The list items will be numbered with numbers (default)
type="A"	The list items will be numbered with uppercase letters
type="a"	The list items will be numbered with lowercase letters
type="I"	The list items will be numbered with uppercase roman numbers
type="i"	The list items will be numbered with lowercase roman numbers

เบอร์:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
ลองตัวเอง»

ตัวอักษรตัวพิมพ์ใหญ่:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
ลองตัวเอง»

ตัวอักษรตัวพิมพ์เล็ก:

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
ลองตัวเอง»

ตัวพิมพ์ใหญ่โรมันเบอร์:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
ลองตัวเอง»

ตัวพิมพ์เล็กตัวเลขโรมัน:

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
ลองตัวเอง»

HTML คำอธิบายรายการ

HTML นอกจากนี้ยังสนับสนุนรายการคำอธิบาย

รายการคำอธิบายเป็นรายการคำศัพท์ที่มีคำอธิบายของแต่ละคำ

<DL>แท็กกำหนดรายการคำอธิบายที่<dt>แท็กคำนิยาม (ชื่อ) และ<dd> ขึ้น แท็กอธิบายแต่ละเทอม:

ตัวอย่าง

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
ลองตัวเอง»

รายการ HTML ซ้อน

รายการสามารถซ้อนกัน (รายการภายในรายการ):

ตัวอย่าง

<ul>
  <li>Coffee</li>
  <li>Tea
  <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
ลองตัวเอง»

หมายเหตุ:รายการรายการสามารถมีรายการใหม่และองค์ประกอบ HTML อื่น ๆ เช่นภาพและการเชื่อมโยงอื่น ๆ

รายการแนวนอน

รายการ HTML สามารถสไตล์ในรูปแบบที่แตกต่างกันมากกับ CSS

วิธีการหนึ่งที่นิยมคือการรูปแบบรายการในแนวนอนเพื่อสร้างเมนู:

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;}

li {
    float: left;}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;}

li a:hover {
    background-color: #111111;}</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
ลองตัวเอง»

บทสรุป

ใช้ HTML <ul>องค์ประกอบในการกำหนดรายการเรียงลำดับ

ใช้แบบ CSS รูปแบบรายการประเภทสถานที่ให้บริการในการกำหนดเครื่องหมายรายการสินค้า

ใช้ HTML <ol>องค์ประกอบในการกำหนดรายการสั่งซื้อ

ใช้แบบ HTML ประเภทแอตทริบิวต์การกำหนดประเภทหมายเลข

ใช้ HTML <li>องค์ประกอบในการกำหนดรายการสินค้า

ใช้ HTML <DL>องค์ประกอบกำหนดรายการคำอธิบาย

ใช้ HTML <dt>องค์ประกอบในการกำหนดระยะคำอธิบาย

ใช้ HTML <dd> ขึ้นองค์ประกอบที่จะอธิบายคำในรายการคำอธิบาย

รายการสามารถซ้อนกันภายในรายการ

รายการสามารถมีองค์ประกอบ HTML อื่น ๆ

ใช้คุณสมบัติ CSS ลอย: ซ้ายหรือจอแสดงผล: อินไลน์เพื่อแสดงรายการแนวนอน

HTML ที่ถูกบล็อกและ Inline องค์ประกอบ

องค์ประกอบ HTML ทุกคนมีค่าการแสดงเริ่มต้นขึ้นอยู่กับชนิดขององค์ประกอบมันเป็น ค่าการแสดงผลเริ่มต้นสำหรับองค์ประกอบส่วนใหญ่เป็นบล็อกหรือแบบอินไลน์

องค์ประกอบระดับบล็อก

องค์ประกอบระดับบล็อกจะเริ่มต้นในบรรทัดใหม่และจะขึ้นเต็มความกว้างใช้ได้ (เหยียดออกไปทางซ้ายและขวาเท่าที่จะสามารถทำได้)

ก <div> เป็นองค์ประกอบระดับบล็อก

ตัวอย่างขององค์ประกอบระดับบล็อก:

<div>

<h1> - <h6>

<p>

<form>

องค์ประกอบแบบอินไลน์

องค์ประกอบแบบอินไลน์ไม่ได้เริ่มต้นในบรรทัดใหม่และใช้เวลาเพียงไม่เกินความกว้างมากที่สุดเท่าที่จำเป็น

นี่คืออินไลน์ <span> องค์ประกอบภายในย่อหน้า

ตัวอย่างขององค์ประกอบแบบอินไลน์:

<span>

<a>

<img>

ก <div>

ก <div> มักจะใช้เป็นภาชนะสำหรับองค์ประกอบ HTML อื่น ๆ

ก <div> ไม่มีแอตทริบิวต์ที่จำเป็น แต่ทั้งสองรูปแบบและระดับเป็นเรื่องธรรมดา

เมื่อนำมาใช้ร่วมกันกับ CSS ที่ <div> สามารถใช้ในการบล็อกรูปแบบของเนื้อหา:

ตัวอย่าง

<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
ลองตัวเอง»

ก <span> ธาตุ

ก <span> องค์ประกอบที่มักจะใช้เป็นภาชนะสำหรับข้อความบางส่วน

ก <span> องค์ประกอบที่ไม่มีคุณลักษณะที่จำเป็น แต่ทั้งสองรูปแบบและ ระดับเป็นเรื่องธรรมดา

เมื่อนำมาใช้ร่วมกันกับ CSS ที่ <span> องค์ประกอบที่สามารถนำมาใช้กับส่วนรูปแบบของข้อความ:

ตัวอย่าง

<h1>My <span style="color:red">Important</span> Heading</h1>
ลองตัวเอง»

HTML การจัดกลุ่มแท็ก

Tag Description

<div> Defines a section in a document (block-level)

<span> Defines a section in a document (inline)

Tag	Description
<div>	Defines a section in a document (block-level)
<span>	Defines a section in a document (inline)

HTML ชั้นแอตทริบิวต์

ใช้คลาสแอตทริบิวต์

แอตทริบิวต์ชั้น HTML ทำให้มันเป็นไปได้ที่จะกำหนดรูปแบบที่เท่าเทียมกันสำหรับองค์ประกอบที่มีชื่อชั้นเดียวกัน

ที่นี่เรามีสาม <div> องค์ประกอบที่ชี้ไปที่ชื่อชั้นเดียวกัน

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;} </style>
</head>
<body>

<div class="cities">
<h2>London</h2>
<p>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.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>
ลองตัวเอง»

กรุงลอนดอน

ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักรมีพื้นที่เมืองหลวงของกว่า 13 ล้านคนอาศัยอยู่

ยืนอยู่บนแม่น้ำเทมส์ในกรุงลอนดอนได้รับการตั้งถิ่นฐานที่สำคัญสำหรับสองพันปีประวัติศาสตร์จะกลับไปที่ก่อตั้งโดยชาวโรมันที่ตั้งชื่อมัน Londinium

ปารีส

ปารีสเป็นเมืองหลวงและมีประชากรมากที่สุดเมืองของฝรั่งเศส

ตั้งอยู่บนแม่น้ำแซนก็เป็นหัวใจสำคัญของภูมิภาค Ile-de-France ยังเป็นที่รู้จัก Parisienne ภูมิภาค

ภายในพื้นที่นครบาลเป็นหนึ่งในที่ใหญ่ที่สุดศูนย์ประชากรในยุโรปที่มีมากกว่า 12 ล้านคนที่อาศัยอยู่

โตเกียว

โตเกียวเป็นเมืองหลวงของประเทศญี่ปุ่นซึ่งเป็นศูนย์กลางของมหานครโตเกียวพื้นที่และพื้นที่มหานครที่มีประชากรมากที่สุดในโลก

มันเป็นที่นั่งของรัฐบาลญี่ปุ่นและพระราชวังอิมพีเรียลและบ้านของราชวงศ์ญี่ปุ่น

จังหวัดโตเกียวเป็นส่วนหนึ่งของเขตเมืองที่มีประชากรมากที่สุดในโลก 38 ล้านคนและเศรษฐกิจเมืองที่ใหญ่ที่สุดของโลก

การใช้แอตทริบิวต์ชั้นบน Inline องค์ประกอบ

แอตทริบิวต์ชั้น HTML นอกจากนี้ยังสามารถนำมาใช้สำหรับองค์ประกอบแบบอินไลน์:

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;}</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>
ลองตัวเอง»

HTML Iframes

iframe ที่จะใช้ในการแสดงหน้าเว็บภายในหน้าเว็ป

iframe ไวยากรณ์

ใน iframe HTML จะกำหนดด้วย<iframe>แท็ก:

<iframe src="URL"></iframe>

srcแอตทริบิวต์ระบุ URL (ที่อยู่เว็บ) ของหน้ากรอบแบบอินไลน์

iframe - ตั้งสูงและความกว้าง

ใช้ความสูงและความกว้างแอตทริบิวต์เพื่อระบุขนาดของ iframe

ค่าแอตทริบิวต์ที่ระบุไว้ในพิกเซลโดยเริ่มต้น แต่พวกเขายังสามารถอยู่ในเปอร์เซ็นต์ (เช่น "80%")

ตัวอย่าง

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
ลองตัวเอง»

iframe - ลบชายแดน

โดยค่าเริ่มต้น iframe มีเส้นขอบรอบ ๆ มัน

ในการลบชายแดนเพิ่มรูปแบบแอตทริบิวต์และใช้แบบ CSS ชายแดนทรัพย์สิน:

ตัวอย่าง

<iframe src="demo_iframe.htm" style="border:none;"></iframe>
ลองตัวเอง»

ด้วย CSS คุณยังสามารถเปลี่ยนขนาดรูปแบบและสีของเส้นขอบ iframe ที่:

ตัวอย่าง

<iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>
ลองตัวเอง»

iframe - เป้าหมายสำหรับการเชื่อมโยง

iframe ที่สามารถนำมาใช้เป็นกรอบเป้าหมายสำหรับการเชื่อมโยง

เป้าหมายแอตทริบิวต์ของการเชื่อมโยงต้องดูที่ชื่อแอตทริบิวต์ของ iframe:

ตัวอย่าง

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
ลองตัวเอง»

แท็ก HTML iframe

Tag Description

<iframe> Defines an inline frame

Tag	Description
<iframe>	Defines an inline frame

HTML JavaScript

JavaScript ทำให้หน้าเว็บ HTML แบบไดนามิกมากขึ้นและการโต้ตอบ

ตัวอย่าง

My First JavaScript

ลองตัวเอง»

ใช้ HTML <script> Tag

<script>แท็กที่ใช้ในการกำหนดสคริปต์ฝั่งไคลเอ็นต์ (จาวาสคริปต์)

ก <script> องค์ประกอบทั้งมีงบสคริปต์หรือมันชี้ไปยังไฟล์สคริปต์ภายนอกผ่านsrcแอตทริบิวต์

การใช้งานทั่วไปสำหรับ JavaScript มีการจัดการภาพ, ตรวจสอบรูปแบบและการเปลี่ยนแปลงแบบไดนามิกของเนื้อหา

ในการเลือกองค์ประกอบ HTML, JavaScript มากมักจะใช้ document.getElementById (ID) วิธีการ

ตัวอย่างเช่น JavaScript นี้เขียน "สวัสดี JavaScript!" เป็นองค์ประกอบ HTML มี id = "สาธิต":

ตัวอย่าง

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";</script>
ลองตัวเอง»

เคล็ดลับ:คุณสามารถเรียนรู้มากขึ้นเกี่ยวกับ JavaScript ในของเราสอน JavaScript

รสชาติของ JavaScript

นี่คือตัวอย่างของสิ่งที่ JavaScript สามารถทำคือ:

JavaScript สามารถเปลี่ยนเนื้อหา HTML

document.getElementById("demo").innerHTML = "Hello JavaScript!";
ลองตัวเอง»

JavaScript สามารถเปลี่ยนรูปแบบ HTML

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
ลองตัวเอง»

JavaScript สามารถเปลี่ยนแอตทริบิวต์ HTML

document.getElementById("image").src = "picture.gif";
ลองตัวเอง»

ใช้ HTML <noscript> Tag

<noscript>แท็กจะใช้เพื่อให้เนื้อหาทางเลือกสำหรับผู้ใช้ที่มีสคริปปิดใช้งานในเบราว์เซอร์ของพวกเขาหรือมีเบราว์เซอร์ที่ไม่สนับสนุนสคริปต์ฝั่งไคลเอ็นต์:

ตัวอย่าง

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>
ลองตัวเอง»

HTML เส้นทางแฟ้ม

เส้นทาง ลักษณะ

<img src = "picture.jpg"> picture.jpg จะอยู่ในโฟลเดอร์เดียวกันกับหน้าปัจจุบัน

<img src = "images / picture.jpg"> picture.jpg ตั้งอยู่ในโฟลเดอร์ภาพที่อยู่ในโฟลเดอร์ปัจจุบัน

<img src = "/ images / picture.jpg"> picture.jpg ตั้งอยู่ในโฟลเดอร์ภาพอยู่ที่รากของเว็บปัจจุบัน

<img src = "../ picture.jpg"> picture.jpg ตั้งอยู่ในระดับโฟลเดอร์จากโฟลเดอร์ปัจจุบัน

เส้นทาง	ลักษณะ
<img src = "picture.jpg">	picture.jpg จะอยู่ในโฟลเดอร์เดียวกันกับหน้าปัจจุบัน
<img src = "images / picture.jpg">	picture.jpg ตั้งอยู่ในโฟลเดอร์ภาพที่อยู่ในโฟลเดอร์ปัจจุบัน
<img src = "/ images / picture.jpg">	picture.jpg ตั้งอยู่ในโฟลเดอร์ภาพอยู่ที่รากของเว็บปัจจุบัน
<img src = "../ picture.jpg">	picture.jpg ตั้งอยู่ในระดับโฟลเดอร์จากโฟลเดอร์ปัจจุบัน

เส้นทางไฟล์ HTML

เส้นทางไฟล์อธิบายสถานที่ตั้งของไฟล์ในโฟลเดอร์โครงสร้างของเว็บไซต์

เส้นทางแฟ้มจะใช้เมื่อเชื่อมโยงไปยังไฟล์ภายนอกเช่น:

หน้าเว็บ

ภาพ

แผ่นสไตล์

JavaScripts

เส้นทางแฟ้มแอบโซลูท

เส้นทางไฟล์แน่นอนเป็น URL แบบเต็มไปยังแฟ้มอินเทอร์เน็ต:

ตัวอย่าง

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

ลองตัวเอง»

<img> แท็กและแอตทริบิวต์ src และ Alt มีการอธิบายในบทที่เกี่ยวกับการแสดง HTML

เส้นทางแฟ้มญาติ

เส้นทางไฟล์ญาติชี้ไปยังไฟล์ที่สัมพันธ์กับหน้าปัจจุบัน

ในตัวอย่างนี้เส้นทางของแฟ้มชี้ไปยังไฟล์ในโฟลเดอร์ภาพอยู่ที่รากของเว็บปัจจุบันไปนี้:

ตัวอย่าง

<img src="/images/picture.jpg" alt="Mountain">

ลองตัวเอง»

ในตัวอย่างนี้เส้นทางของแฟ้มชี้ไปยังไฟล์ในโฟลเดอร์ภาพที่อยู่ในโฟลเดอร์ปัจจุบัน:

ตัวอย่าง

<img src="images/picture.jpg" alt="Mountain">

ลองตัวเอง»

ในตัวอย่างนี้เส้นทางของแฟ้มชี้ไปยังไฟล์ในโฟลเดอร์ภาพอยู่ในโฟลเดอร์หนึ่งระดับดังกล่าวข้างต้นโฟลเดอร์ปัจจุบันนี้:

ตัวอย่าง

<img src="../images/picture.jpg" alt="Mountain">

ลองตัวเอง»

ปฏิบัติที่ดีที่สุด

มันเป็นวิธีที่ดีที่สุดที่จะใช้เส้นทางแฟ้มญาติ (ถ้าเป็นไปได้)

เมื่อใช้เส้นทางแฟ้มญาติหน้าเว็บของคุณจะไม่ถูกผูกไว้กับ URL พื้นฐานปัจจุบันของคุณ การเชื่อมโยงทั้งหมดจะทำงานบนคอมพิวเตอร์ของคุณเอง (localhost) เช่นเดียวกับในโดเมนสาธารณะของคุณในปัจจุบันและในโดเมนสาธารณะในอนาคตของคุณ

HTML หัวหน้า

❮ก่อนหน้า ถัดไป❯

ใช้ HTML <head> องค์ประกอบ

<head>องค์ประกอบเป็นภาชนะสำหรับข้อมูลเมตา (ข้อมูลเกี่ยวกับข้อมูล) และจะอยู่ระหว่างการ <html> แท็กและ <body>

เมตาดาต้า HTML ที่เป็นข้อมูลเกี่ยวกับเอกสาร HTML เมตาดาต้าจะไม่ปรากฏ

เมตาดาต้ามักจะกำหนดชื่อเอกสารชุดอักขระรูปแบบการเชื่อมโยงสคริปต์และข้อมูลเมตาอื่น ๆ

แท็กต่อไปนี้อธิบายเมตา <title> <style> <meta> <ลิงก์> <script> และ <ฐาน>

ใช้ HTML <title> ธาตุ

<title>องค์ประกอบที่กำหนดชื่อเรื่องของเอกสารและเป็นสิ่งจำเป็นใน HTML / XHTML เอกสารทั้งหมด

ก <title> องค์ประกอบ:

กำหนดชื่อในเบราว์เซอร์แท็บ

ให้ชื่อหน้าเมื่อมีการเพิ่มในรายการโปรด

แสดงชื่อหน้าในผลลัพธ์ของเครื่องมือค้นหา

เอกสาร HTML ง่ายๆ:

ตัวอย่าง

<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
</head>

<body>
The content of the document......
</body>

</html>
ลองตัวเอง»

ใช้ HTML element <style>

<style>องค์ประกอบที่จะใช้ในการกำหนดข้อมูลสไตล์สำหรับหน้า HTML เดียว:

ตัวอย่าง

<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}</style>
ลองตัวเอง»

ใช้ HTML <link> ธาตุ

<link>องค์ประกอบที่จะใช้ในการเชื่อมโยงไปยังแผ่นลักษณะภายนอก:

ตัวอย่าง

<link rel="stylesheet" href="mystyle.css">
ลองตัวเอง»

เคล็ดลับ:การเรียนรู้เกี่ยวกับ CSS, เยี่ยมชมการสอน CSS

ใช้ HTML <meta> ธาตุ

<meta>องค์ประกอบที่จะใช้ในการระบุว่าชุดตัวอักษรที่ใช้อธิบายหน้าคำหลักผู้เขียนและข้อมูลอื่น ๆ

เมตาดาต้าจะใช้เบราว์เซอร์ (วิธีการแสดงเนื้อหา) โดยเครื่องมือค้นหา (คำหลัก) และบริการเว็บอื่น ๆ

กำหนดชุดตัวอักษรที่ใช้:

<meta charset="UTF-8">

กำหนดรายละเอียดของหน้าเว็บของคุณ:

<meta name="description" content="Free Web tutorials">

กำหนดคำหลักสำหรับเครื่องมือค้นหา:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

กำหนดผู้เขียนหน้า:

<meta name="author" content="John Doe">

รีเฟรชเอกสารทุก 30 วินาที:

<meta http-equiv="refresh" content="30">

ตัวอย่างของแท็ก <meta>:

ตัวอย่าง

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
ลองตัวเอง»

การตั้ง Viewport

HTML5 แนะนำวิธีการที่จะช่วยให้นักออกแบบเว็บใช้ควบคุมวิวพอร์ตผ่าน <meta> แท็ก

วิวพอร์ตพื้นที่ที่มองเห็นของผู้ใช้ของหน้าเว็บ มันขึ้นอยู่กับอุปกรณ์และจะมีขนาดเล็กบนโทรศัพท์มือถือกว่าบนหน้าจอคอมพิวเตอร์

คุณควรมีดังต่อไป <meta> องค์ประกอบวิวพอร์ตในทุกหน้าเว็บของคุณ:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta> องค์ประกอบวิวพอร์ตให้คำแนะนำในเบราว์เซอร์ในการควบคุมขนาดของหน้าเว็บและปรับ

ความกว้าง = ส่วนกว้างของอุปกรณ์ชุดความกว้างของหน้าไปตามหน้าจอที่มีความกว้างของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์)

เริ่มต้นขนาด = 1.0 ส่วนกำหนดระดับการซูมเริ่มต้นเมื่อโหลดหน้าเว็บแล้วเป็นครั้งแรกโดยเบราว์เซอร์

นี่คือตัวอย่างของเว็บเพจโดยไม่ต้องเมตาแท็กวิวพอร์ตและหน้าเว็บเดียวกันกับเมตาแท็กวิวพอร์ต:

เคล็ดลับ:หากคุณกำลังดูหน้านี้ให้กับโทรศัพท์หรือแท็บเล็ต, คุณสามารถคลิกที่สองลิงค์ด้านล่างเพื่อดูความแตกต่าง

กับเมตาแท็กวิวพอร์ต

โดยไม่ต้องเมตาแท็กวิวพอร์ต

ใช้ HTML <script> ธาตุ

ก <script> องค์ประกอบที่จะใช้ในการกำหนด JavaScripts ฝั่งไคลเอ็นต์

JavaScript นี้เขียน "สวัสดี JavaScript!" เป็นองค์ประกอบ HTML มี id = "สาธิต":

ตัวอย่าง

<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}</script>
ลองตัวเอง»

เคล็ดลับ:การเรียนรู้เกี่ยวกับ JavaScript, เยี่ยมชมการสอน JavaScript

ใช้ HTML <ฐาน> ธาตุ

ก <ฐาน> องค์ประกอบที่ระบุ URL ฐานและเป้าหมายฐานสำหรับ URL ญาติทั้งหมดในหน้าเว็บ:

ตัวอย่าง

<base href="https://www.w3schools.com/images/" target="_blank">
ลองตัวเอง»

ถนัด <html> <head> และ <body>?

ตามมาตรฐาน HTML5; ก <html>, <body> และ <head> สามารถละเว้น

รหัสต่อไปนี้จะตรวจสอบเป็น HTML5:

ตัวอย่าง

<!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
ลองตัวเอง»

บันทึก:

W3Schools ไม่แนะนำให้ถนัดและแท็ก <html> <body> ไม่ใส่แท็กเหล่านี้สามารถผิดพลาด DOM หรือซอฟต์แวร์ XML และผลิตข้อผิดพลาดในเบราว์เซอร์รุ่นเก่า (IE9)

แต่ถนัด <head> แท็กได้รับการปฏิบัติร่วมกันสำหรับค่อนข้างบางเวลาขณะนี้

องค์ประกอบหัว HTML

Tag Description

<head> Defines information about the document

<title> Defines the title of a document

<base> Defines a default address or a default target for all links on a page

<link> Defines the relationship between a document and an external resource

<meta> Defines metadata about an HTML document

<script> Defines a client-side script

<style> Defines style information for a document

Tag	Description
<head>	Defines information about the document
<title>	Defines the title of a document
<base>	Defines a default address or a default target for all links on a page
<link>	Defines the relationship between a document and an external resource
<meta>	Defines metadata about an HTML document
<script>	Defines a client-side script
<style>	Defines style information for a document

วันอังคารที่ 27 มิถุนายน พ.ศ. 2560

ตอนที่2

HTML สี

ชื่อสี

ตัวอย่าง

ค่า RGB

ตัวอย่าง

ตัวอย่าง

ราคา HEX

ตัวอย่าง

ตัวอย่าง

HTML ลักษณะ - CSS

CSS = รูปแบบและสี

จัดแต่งทรงผม HTML กับ CSS

inline CSS

ตัวอย่าง

CSS ภายใน

ตัวอย่าง

CSS ภายนอก

ตัวอย่าง

CSS แบบอักษร

ตัวอย่าง

CSS ชายแดน

ตัวอย่าง

Padding CSS

ตัวอย่าง

Margin CSS

ตัวอย่าง

รหัสแอตทริบิวต์

ตัวอย่าง

แอตทริบิวต์ระดับ

ตัวอย่าง

ภายนอกอ้างอิง

ตัวอย่าง

ตัวอย่าง

ตัวอย่าง

บทสรุป

HTML ลิงก์

ลิงค์ HTML - เชื่อมโยงหลายมิติ

ลิงค์ HTML - ไวยากรณ์

ตัวอย่าง

ลิงก์ท้องถิ่น

ตัวอย่าง

สี HTML การเชื่อมโยง

ตัวอย่าง

ลิงค์ HTML - แอตทริบิวต์เป้าหมาย

ตัวอย่าง

ตัวอย่าง

ลิงค์ HTML - รูปที่เชื่อมโยง

ตัวอย่าง

ลิงค์ HTML - สร้าง Bookmark

ตัวอย่าง

ตัวอย่าง

เส้นทางภายนอก

ตัวอย่าง

ตัวอย่าง

ตัวอย่าง

บทสรุป

HTML แสดงสินค้า

ภาพ JPG

ภาพ gif

PNG รูปภาพ

ตัวอย่าง

HTML แสดงไวยากรณ์

แอตทริบิวต์ Alt

ตัวอย่าง

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> ลองตัวเอง» แอตทริบิวต์ alt จำเป็น หน้าเว็บจะไม่ตรวจสอบอย่างถูกต้องโดยไม่ได้

HTML โปรแกรมอ่านหน้าจอ

ขนาดภาพ - ความกว้างและความสูง

ตัวอย่าง

ตัวอย่าง

ความกว้างและความสูงหรือรูปแบบ?

ตัวอย่าง

<!DOCTYPE html> <html> <head> <style>img { width:100%; }</style> </head> <body> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> </body> </html> ลองตัวเอง»

ภาพในโฟลเดอร์อื่น

ตัวอย่าง

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> ลองตัวเอง»

ภาพบนเซิร์ฟเวอร์อื่น

บางเว็บไซต์เก็บภาพของพวกเขาบนเซิร์ฟเวอร์ภาพ ที่จริงแล้วคุณสามารถเข้าถึงภาพจากที่อยู่เว็บใด ๆ ในโลก:

ตัวอย่าง

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
ลองตัวเอง»

แอตทริบิวต์ alt จำเป็น หน้าเว็บจะไม่ตรวจสอบอย่างถูกต้องโดยไม่ได้

<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%; }</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>
ลองตัวเอง»

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
ลองตัวเอง»

บางเว็บไซต์เก็บภาพของพวกเขาบนเซิร์ฟเวอร์ภาพ

ที่จริงแล้วคุณสามารถเข้าถึงภาพจากที่อยู่เว็บใด ๆ ในโลก:

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
ลองตัวเอง»

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเส้นทางแฟ้มในบทHTML เส้นทางแฟ้ม

ถ้าคุณไม่ได้ระบุชายแดนสำหรับโต๊ะก็จะปรากฏไม่มีพรมแดน

ชายแดนมีการตั้งค่าโดยใช้แบบ CSS ชายแดนทรัพย์สิน:

table, th, td {
border: 1px solid black;}
ลองตัวเอง»

โปรดจำไว้ว่าการกำหนดเส้นเขตแดนทั้งตารางและเซลล์ตาราง

table, th, td {
border: 1px solid black;
border-collapse: collapse;}
ลองตัวเอง»

th, td {
padding: 15px;}
ลองตัวเอง»

โดยค่าเริ่มต้นหัวตารางเป็นตัวหนาและเป็นศูนย์กลาง

การจัดซ้ายหัวตารางให้ใช้แบบ CSS text-alignทรัพย์สิน:

th {
text-align: left;}
ลองตัวเอง»

table {
border-spacing: 5px;}
ลองตัวเอง»

หมายเหตุ:ถ้าตารางมีการยุบพรมแดนชายแดนระยะห่างจะไม่มีผล

<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
ลองตัวเอง»

<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
ลองตัวเอง»