บทเรียน HTML และ CSS สำหรับผู้เริ่มต้น

บทเรียนง่าย ๆ เกี่ยวกับการสร้างเว็บเพจด้วยภาษา HTML และ CSS สำหรับผู้เริ่มต้น พร้อมทฤษฎีโดยละเอียดและชุดแบบฝึกหัด

พื้นฐาน HTML

001

ภาษาสำหรับการสร้างเว็บไซต์

002

ภาษา HTML

003

แท็ก HTML

004

คุณลักษณะในแท็ก HTML

005

สไตล์ของแท็ก HTML

006

โครงสร้างหลักของหน้า HTML

007

การทำงานกับแท็ก HTML พื้นฐาน

008

แท็กสำหรับย่อหน้า

009

แท็กสำหรับหัวข้อหน้า

010

แท็กสำหรับเน้นข้อความด้วยตัวหนา

011

แท็กสำหรับเน้นข้อความแบบตัวเอียง

012

รายการแบบไม่มีลำดับใน HTML

013

รายการลำดับใน HTML

014

การทำงานกับลิงก์ใน HTML

015

ลิงก์ภายในใน HTML

016

การทำงานกับรูปภาพใน HTML

017

ความกว้างของรูปภาพใน HTML

018

ความสูงของรูปภาพใน HTML

019

ความกว้างและความสูงของรูปภาพใน HTML

020

ทำงานกับตารางใน HTML

021

ความกว้างและความสูงของตารางใน HTML

022

เซลล์ส่วนหัวในตาราง HTML

023

ฝึกปฏิบัติเกี่ยวกับแท็ก HTML พื้นฐาน

พื้นฐาน CSS

024

พื้นฐานการทำงานกับภาษา CSS

025

วิธีการทำงานกับ CSS

026

คีย์เวิร์ดสำหรับสีใน CSS

027

สีใด ๆ ใน CSS

028

ความกว้างและความสูงขององค์ประกอบใน CSS

029

การจัดแนวข้อความใน CSS

030

การจัดตำแหน่งข้อความชิดขวาใน CSS

031

การจัดข้อความให้อยู่กึ่งกลางใน CSS

032

การจัดข้อความชิดซ้ายใน CSS

033

การจัดข้อความให้ชิดขวาและชิดซ้ายพร้อมกันใน CSS

034

ฝึกปฏิบัติการจัดตำแหน่งข้อความใน CSS

035

ความหนาของข้อความใน CSS

036

ตัวเอียงใน CSS

037

ขนาดฟอนต์ใน CSS

038

ประเภทฟอนต์ใน CSS

039

การเว้นระยะระหว่างบรรทัดใน CSS

040

ความหมายของ line-height ที่ไม่มีหน่วยใน CSS

041

คุณสมบัติแบบย่อ font ใน CSS

042

การย่อหน้าแรกของข้อความใน CSS

043

เอฟเฟกต์ข้อความใน CSS

044

การขีดเส้นใต้ข้อความใน CSS

045

การขีดเส้นข้อความด้านบนใน CSS

046

ขีดฆ่าข้อความใน CSS

047

การยกเลิกเอฟเฟกต์สำหรับข้อความใน CSS

048

แบบฝึกหัดคุณสมบัติ CSS พื้นฐาน

ตัวเลือก

049

ความสัมพันธ์แบบเครือญาติระหว่างแท็กใน HTML

050

การสืบทอดคุณสมบัติ CSS

051

การจัดกลุ่มตัวเลือกใน CSS

052

คุณสมบัติทั่วไปเมื่อจัดกลุ่มตัวเลือกใน CSS

053

ตัวเลือก (Selector) ขององค์ประกอบลูกใน CSS

054

ซีเล็คเตอร์ลูกใน CSS

055

คลาสขององค์ประกอบใน CSS

056

แท็ก span สำหรับส่วนข้อความใน HTML

057

แท็ก div สำหรับการจัดกลุ่มแท็กใน HTML

058

การจัดกลุ่มคลาสใน CSS

059

แท็กที่มีคลาสที่กำหนดใน CSS

060

CSS Selector ลูกหลานและคลาส

061

การรวมกันที่ซับซ้อนของซีเลกเตอร์แบบลูกหลานและคลาสใน CSS

062

ข้อผิดพลาดของมือใหม่ในตัวเลือกเซเลคเตอร์ของลูกหลาน

063

องค์ประกอบที่มีหลายคลาส CSS

064

การเลือกองค์ประกอบด้วย id ที่ไม่ซ้ำใน CSS

065

ตัวเลือกตาม id และคลาส CSS

066

การใช้งาน id ใน CSS

067

การเลือกองค์ประกอบโดยใช้หลายคลาสใน CSS

068

การเขียนหลายซีเล็กเตอร์ติดกันใน CSS

069

ข้อผิดพลาดเมื่อใช้ตัวเลือก CSS หลายตัว

070

การจัดกลุ่มซีเล็กเตอร์ที่ซับซ้อนใน CSS

071

ข้อผิดพลาดในการจัดกลุ่มตัวเลือก CSS ที่ซับซ้อน

072

ฝึกฝนการผสมซีเล็กเตอร์ CSS

073

ลำดับความสำคัญของซีเลกเตอร์ CSS

074

หมายเหตุเกี่ยวกับความขัดแย้งของคุณสมบัติ CSS

075

กฎความเฉพาะเจาะจงใน CSS

076

ลำดับความสำคัญของตัวเลือก CSS ที่เป็นลูกหลาน

077

ซีเลกเตอร์เพื่อนบ้านใน CSS

078

ซีเลกเตอร์พี่น้องใน CSS

079

ซีเล็กเตอร์สากลใน CSS

080

ตัวเลือกแอตทริบิวต์ใน CSS

081

สถานะของลิงก์ใน CSS

082

ความละเอียดอ่อนของลำดับสถานะลิงก์ใน CSS

083

สถานะลิงก์ link และ visited ใน CSS

084

การใช้งานปกติของสถานะลิงก์ใน CSS

085

ตัวเลือก CSS ที่ซับซ้อนพร้อมสถานะของลิงก์

086

ลิงก์ที่มีคลาสใน CSS

087

การเลือกองค์ประกอบปลายใน CSS

088

การเลือกองค์ประกอบตามตำแหน่งใน CSS

089

การเลือกเอลิเมนต์ลูกเพียงตัวเดียวใน CSS

090

การเลือกองค์ประกอบที่ว่างเปล่าใน CSS

091

การเลือกตามตำแหน่งและประเภทขององค์ประกอบใน CSS

092

ซีเลคเตอร์การปฏิเสธใน CSS

การตกแต่ง

093

การตั้งค่าสีพื้นหลังใน CSS

094

พื้นฐานการทำงานกับเส้นขอบใน CSS

095

เส้นขอบแบบทึบใน CSS

096

เส้นขอบแบบจุดใน CSS

097

เส้นขอบแบบประใน CSS

098

เส้นขอบนูนใน CSS

099

เส้นขอบสองชั้นใน CSS

100

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

101

กรอบสำหรับแต่ละด้านใน CSS

102

การทำให้ขอบบล็อกโค้งมนใน CSS

103

การกำหนดขอบโค้งมนให้กับพื้นหลังใน CSS

104

การสร้างวงกลมด้วย CSS

105

การกำหนดความโค้งมนให้กับมุมต่างๆ ใน CSS

106

ค่าสี่ค่าสำหรับการกำหนดความโค้งมนของมุมต่าง ๆ ใน CSS

107

CSS: ค่ามุมโค้งมนสองค่าสำหรับมุมที่ต่างกัน

108

ค่าสำหรับมุมสามมุมที่แตกต่างกันใน CSS

109

มุมโค้งมนเป็นเปอร์เซ็นต์ใน CSS

110

การสร้างวงกลมด้วยการกำหนดความโค้งมนเป็นเปอร์เซ็นต์ใน CSS

111

รูปภาพพื้นหลังใน CSS

112

การทำซ้ำภาพพื้นหลังใน CSS

113

คุณสมบัติอื่นๆ สำหรับพื้นหลังใน CSS

114

การทำงานกับมาร์กเกอร์รายการ ul ใน CSS

115

เครื่องหมายรายการแบบสี่เหลี่ยมสำหรับ ul ใน CSS

116

การกำหนดมาร์กเกอร์รายการ ul เป็นวงกลมใน CSS

117

การทำงานกับเครื่องหมายรายการ ul ใน CSS

118

การไม่มีเครื่องหมายรายการ ul ใน CSS

119

การทำงานกับเครื่องหมายรายการ ol ใน CSS

120

กำหนดเลขโรมันตัวพิมพ์เล็กสำหรับรายการ ol ใน CSS

121

ตัวเลขโรมันพิมพ์ใหญ่สำหรับรายการ ol ใน CSS

122

ตัวอักษรละตินแบบตัวพิมพ์เล็กสำหรับรายการ ol ใน CSS

123

ตัวอักษรละตินพิมพ์ใหญ่สำหรับรายการ ol ใน CSS

124

ตัวอักษรกรีกตัวพิมพ์เล็กสำหรับรายการ ol ใน CSS

125

ตัวเลขนำหน้าด้วยศูนย์สำหรับรายการ ol ใน CSS

แบบจำลองกล่อง

126

การทำงานกับ margin ใน CSS

127

การเยื้อง margin สำหรับด้านต่างๆ ใน CSS

128

ค่าหลายค่าในคุณสมบัติ margin ใน CSS

129

ความหมายสี่ค่าของคุณสมบัติ margin ใน CSS

130

ค่าสองค่าในคุณสมบัติ margin ใน CSS

131

สามค่าในคุณสมบัติ margin ใน CSS

132

การทำงานกับ padding ใน CSS

133

การเยื้อง padding สำหรับด้านต่างๆ ใน CSS

134

ค่าหลายค่าในคุณสมบัติ padding ใน CSS

135

การทำงานกับ padding ใน CSS

136

อิทธิพลของเส้นขอบต่อการขยายตัวขององค์ประกอบใน CSS

137

อิทธิพลของ padding และเส้นขอบที่มีต่อการขยายองค์ประกอบใน CSS

138

การยกเลิกการขยายองค์ประกอบใน CSS

139

ลักษณะเฉพาะขององค์ประกอบแบบบล็อกใน CSS

140

ความกว้างและความสูงขององค์ประกอบบล็อกใน CSS

141

ความกว้างขององค์ประกอบบล็อกใน CSS

142

ความสูงขององค์ประกอบบล็อกใน CSS

143

ความสูงขององค์ประกอบบล็อกที่ไม่มีเนื้อหาใน CSS

144

องค์ประกอบบล็อกหลายตัวเรียงกันใน CSS

145

คุณสมบัติขององค์ประกอบแบบอินไลน์ใน CSS

146

ความกว้างและความสูงขององค์ประกอบอินไลน์ใน CSS

147

องค์ประกอบอินไลน์หลายรายการเรียงกันใน CSS

148

การเยื้องระหว่างองค์ประกอบอินไลน์ใน CSS

149

การกำหนดบล็อกโมเดลของแท็ก HTML

150

ทำงานกับคุณสมบัติ display ใน CSS

151

ลักษณะพิเศษของอินไลน์-บล็อกเอเลเมนต์ใน CSS

152

ความกว้างและความสูงขององค์ประกอบบล็อกแบบอินไลน์ใน CSS

153

ความกว้างขององค์ประกอบแบบอินไลน์-บล็อกใน CSS

154

ความสูงขององค์ประกอบอินไลน์-บล็อกใน CSS

155

การจัดวางองค์ประกอบแบบ inline-block หลายอันติดกันใน CSS

156

การจัดวางบล็อกองค์ประกอบใน CSS

157

การจัดวางองค์ประกอบแบบบล็อกโดยมีระยะห่างด้านซ้ายใน CSS

158

การจัดวางองค์ประกอบบล็อกด้วยการเยื้องขวาใน CSS

159

การจัดตำแหน่งองค์ประกอบอินไลน์ใน CSS

160

การจัดองค์ประกอบ inline ให้อยู่กึ่งกลางใน CSS

161

การจัดกึ่งกลางองค์ประกอบอินไลน์หลายอัน

162

การจัดตำแหน่งองค์ประกอบ inline ตามขอบขวาใน CSS

163

การจัดวางองค์ประกอบแบบอินไลน์บล็อกใน CSS

164

การจัดกึ่งกลางองค์ประกอบแบบ Inline-block ใน CSS

165

การจัดตำแหน่งอินไลน์บล็อกเอลิเมนต์ชิดขวาใน CSS

166

องค์ประกอบ Flex ใน CSS

167

ความสูงของ parent ขององค์ประกอบ flex ใน CSS

168

ความกว้างขององค์ประกอบแม่แบบเฟล็กซ์ใน CSS

169

พ่อแม่ขององค์ประกอบ Flex แบบอินไลน์-บล็อกใน CSS

170

การเยื้อง padding ของผู้ปกครองขององค์ประกอบ flex ใน CSS

171

การเยื้อง margin ให้กับองค์ประกอบลูกใน CSS

172

การจัดตำแหน่งองค์ประกอบ flex ใน CSS

173

การจัดตัวฟลเลกซ์เอลิเมนต์ให้อยู่กึ่งกลางใน CSS

174

การจัดเรียงองค์ประกอบ flex ตามคอนเทนเนอร์หลักใน CSS

175

การจัดเรียงองค์ประกอบเฟล็กซ์ตามผู้ปกครองโดยมีระยะห่าง

176

การจัดตำแหน่งองค์ประกอบ flex ตาม parent พร้อมระยะห่างเท่ากัน

การจัดตำแหน่ง

การลอย

เฟล็กซ์

204

การจัดวางองค์ประกอบฟล็กซ์เป็นแถวหรือคอลัมน์ใน CSS

205

การจัดวางองค์ประกอบแบบ Flex ในแถวที่กลับด้านใน CSS

206

การจัดวางองค์ประกอบแบบ Flex ในคอลัมน์ด้วย CSS

207

การพลิกคอลัมน์ด้วยองค์ประกอบ Flex ใน CSS

208

แกนหลักและแกนตัดใน Flexbox ของ CSS

209

การจัดตำแหน่งองค์ประกอบ Flex ตามแกนหลักใน CSS

210

การจัดเรียงบล็อกแบบ Flex ตามแกนขวางใน CSS

211

ความหมายของค่า center ในคุณสมบัติ align-items ของ CSS

212

การจัดกึ่งกลางโดยไม่มีความสูงของบล็อกใน CSS

213

การจัดองค์ประกอบที่มีความสูงต่างกันใน CSS

214

ความหมายของค่า stretch ในคุณสมบัติ align-items ใน CSS

215

การฝึกฝนเรื่องการจัดแนวตามแกนใน CSS

216

การจัดตำแหน่งองค์ประกอบแต่ละชิ้นในโมเดล Flex ของ CSS

217

ลำดับของบล็อก flex ใน CSS

กริด

218

ความรู้เบื้องต้นเกี่ยวกับ CSS Grid

219

แทร็กและเส้นใน CSS Grid

220

การแสดงผลกริดในตัวดีบักเบราว์เซอร์

221

จำนวนและความกว้างของคอลัมน์ใน CSS Grid

222

หน่วย fr ใน CSS Grid

223

หน่วยเศษส่วน fr ใน CSS Grid

224

พิกเซลและหน่วย fr ใน CSS Grid

225

เปอร์เซ็นต์และหน่วย fr ใน CSS Grid

226

ฟังก์ชัน repeat ใน CSS Grid

227

ค่าของ auto ใน CSS Grid

228

ความหมายของ auto-fill ใน CSS Grid

229

ฟังก์ชัน minmax ใน CSS Grid

230

ความหมายของ auto-fit ใน CSS Grid

231

จำนวนและความกว้างของแถวใน CSS Grid

232

การเขียนแบบย่อสำหรับแถวและคอลัมน์ใน CSS Grid

233

การรวมแถวใน CSS Grid

234

การรวมคอลัมน์ใน CSS Grid

235

การรวมคอลัมน์และแถวแบบผสมผสานใน CSS Grid

236

การวางซ้อนคอลัมน์ใน CSS Grid

237

ระยะห่างระหว่างคอลัมน์ใน CSS Grid

238

ระยะห่างระหว่างแถวใน CSS Grid

239

ระยะห่างระหว่างคอลัมน์และแถวใน CSS Grid

240

การสร้างตารางกริดใน CSS

เลย์เอาต์