content หน้าเว็บไซต์
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
.navbar {
width: 100%;
height: 60px;
background: linear-gradient(to right, red, yellow);
/* ตัวอย่าง linear-gradient สีเขียว red, yellow */
display: flex;
justify-content: space-between;
align-items: center;
color: white;
padding: 0 20px;
box-sizing: border-box; /* เพื่อให้ padding ไม่ดัน navbar กว้างเกิน 100% */
}
.left-section,
.center-section{
display: flex;
align-items: center;
color:blueyellow;
}
.right-section {
display: flex;
align-items: center;
padding:0px;
border-redius:50%;
}
.left-section {
gap: 15px;
}
.right-section img {
height: 90px; /* ปรับขนาดโลโก้ตามต้องการ */
}
.slideshow-container {
position: relative;
max-width: 95%;
margin-top:20px;
margin-left:20px;
overflow: hidden;
}
.slideshow .slide {
display: flex;
justify-content:spece-between;
</style>
</head>
<body>
<div class="navbar">
<div class="left-section">
<span>📞 0946702121</span>
<span>📱 Line: @yourshop</span>
<span>🎵 TikTok: @yourshop</span>
</div>
<div class="center-section">
<h1>peemon shop</h1>
</div>
<div class="right-section">
<img src="https://lh5.googleusercontent.com/d/1HGT09dXtaPF0nOLL4I6_vv0YzzZZJZVZ"
alt="โลโก้ร้านค้า" width="90px" height="100%" >
</div>
</div>
<div class="slideshow-container">
<div class="slideshow">
<div class="slide slide">
<img src="https://lh5.googleusercontent.com/d/1Yk3vcuMLAE_z4PvjWG-RCEU43yQjb646"
width="300px"height="450px" alt="Image 1">
<div class="detail">
<h1 style="color:violet;"> กางเกงสแล็คทรงกระบอก: เรียบง่ายแต่มีสไตล์เหนือกาลเวลา</h1>
<h2 style="margin-top:0; color:green;" >ราคา 299 บาท ไม่รวมค่าขนส่ง<h2>
<h4>ในโลกของแฟชั่นที่หมุนไปอย่างรวดเร็ว มีเสื้อผ้าไม่กี่ชิ้นที่สามารถยืนหยัดอยู่ได้ทุกยุคทุกสมัย และกางเกงสแล็คคือหนึ่งในนั้น โดยเฉพาะ กางเกงสแล็คทรงกระบอกเล็ก ที่นอกจากจะสวมใส่ง่ายแล้ว ยังสามารถหยิบมาใส่ได้ทุกโอกาส ไม่ว่าจะไปทำงาน ไปเที่ยว หรือไปงานสำคัญ กางเกงทรงนี้ยังช่วยเสริมบุคลิกให้ดูดีและมีความเป็นมืออาชีพมากขึ้นอีกด้วย....</h4>
<p style="font-size:20px; color:red; margin-bottom:10px;"> แต่ทำไมกางเกงสแล็คทรงกระบอกเล็กถึงได้รับความนิยมตลอดมา?</p>
</div>
</div>
</div>
</div>
</body>
</html>
นอกจากโค้ดตัวอย่าง navbar และ slideshow ที่แสดงไว้ในบทความนี้แล้ว ยังมีเคล็ดลับสำคัญที่ช่วยให้การพัฒนาเว็บไซต์ด้วย HTML และ CSS มีประสิทธิภาพมากขึ้นโดยเฉพาะสำหรับผู้เริ่มต้น เช่น 1. การกำหนดโครงสร้างโค้ด HTML อย่างถูกต้องตามมาตรฐาน DOCTYPE และใช้แท็ก semantic เช่น <header>, <nav>, <section>, และ <footer> ช่วยให้โค้ดอ่านง่ายและส่งผลดีต่อ SEO 2. การใช้ CSS flexbox อย่างเหมาะสม เพื่อจัดวางองค์ประกอบในเว็บให้ตอบสนองกับหน้าจอทุกขนาด โดยควรตรวจสอบคุณสมบัติเช่น justify-content, align-items อย่างละเอียดและใช้กลเม็ดต่างๆ เช่น gap เพื่อเว้นระยะห่างระหว่างองค์ประกอบ 3. การเพิ่มความสามารถในการตอบสนองต่อหน้าจอขนาดเล็ก (responsive design) โดยใช้ media queries เพื่อปรับรูปแบบ navbar และ slideshow ให้เหมาะสมกับมือถือ แท็บเล็ต และหน้าจอคอมพิวเตอร์ 4. การเพิ่ม metadata ที่เหมาะสมในส่วน <head> เช่น charset UTF-8 เพื่อรองรับภาษาไทย และ viewport เพื่อให้หน้าเว็บแสดงผลดีในอุปกรณ์พกพา 5. สำหรับผู้สนใจผสานการทำเว็บเข้ากับ Google Apps Script และ API ต่างๆ เช่น การใช้ข้อมูลจาก Google Sheets เพื่อแสดงข้อมูลสินค้าและรายละเอียดร้านค้า สามารถสร้างระบบเว็บไซต์ที่ทันสมัยและเชื่อมต่อกับฐานข้อมูลได้สะดวก โดยรวมแล้ว การสร้างไฟล์หน้าเว็บไซต์อย่างที่แสดงในบทความเป็นพื้นฐานที่ดีสำหรับการเรียนรู้ ซึ่งจะช่วยให้ผู้ใช้เข้าใจโครงสร้างและหลักการออกแบบเว็บเบื้องต้น พร้อมทั้งสามารถพัฒนาต่อให้เหมาะกับความต้องการงานจริงมากขึ้นได้อย่างต่อเนื่อง
🥰🤩🥰🥰