อ่านเจอเว็บไซต์ HTML for People สอนการเขียนโค้ด HTML และมีแนะนำบริการ NeoCities.org ที่อนุญาตให้ฝากไฟล์ HTML เพื่อสร้างเป็นเว็บไซต์ที่ใช้งานได้จริงๆ
การสมัครใช้งาน NeoCities.org ไม่ยาก ไม่กี่ขั้นตอน ก็ได้กะบะทราย เอาไว้ทดลองสร้างเว็บไซต์ด้วย ภาษา HTML
ขั้นตอนการสมัคร NeoCities.org ไม่กี่ขั้นตอน
Username = Sub-domain ที่ต้องการใช้
Tag = อธิบาย เว็บไซต์ของเรา
Password
Email
ก่อนเริ่มใช้งาน จะมีคำแนะนำเกี่ยวกับคำสั่ง HTML ที่จำเป็นในการสร้างเว็บไซต์ เมื่อผ่านขั้นตอน 10/10 แล้ว ก็จะเข้าสู่หน้าเพจ Dashboard ของ NeoCities.org
ให้ Gemini เขียนคำสั่ง HTML และ CSS เพื่อสร้างเว็บเพจแชร์บัญชีโซเชียล
เมื่อ Gemini สร้างไฟล์ index.html และไฟล์ style.css ให้แก้ไขไฟล์ชื่อเดียวกันใน Dashboard ของ Neocities.org ได้เลย
หมายเหตุ 1) ให้แก้ไขคำสั่ง HTML โดยแทนที่ URL ของบัญชีโซเชียลต่างๆ ก่อน
หมายเหตุ 2) ในการแก้ไขไฟล์ index.html แล้ว Save เมื่อเปิดในเบราว์เซอร์ อาจจะไม่เปลี่ยนแปลงในทันที ให้รอประมาณ 10 นาที เพื่อรอให้ระบบแคชต่างๆ แสดงข้อมูลการแก้ไขล่าสุด
ไฟล์ index.html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Social Links</title> <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="YOUR_PROFILE_PICTURE_URL.jpg" alt="รูปโปรไฟล์" class="profile-picture">
<ul class="link-list">
<li>
<a href="YOUR_WEBSITE_URL" target="_blank" class="link-button">เว็บไซต์</a>
</li>
<li>
<a href="YOUR_FACEBOOK_URL" target="_blank" class="link-button">เฟซบุ๊ก</a>
</li>
<li>
<a href="YOUR_TWITTER_URL" target="_blank" class="link-button">ทวิตเตอร์</a>
</li>
<li>
<a href="YOUR_INSTAGRAM_URL" target="_blank" class="link-button">อินสตาแกรม</a>
</li>
<li>
<a href="YOUR_YOUTUBE_URL" target="_blank" class="link-button">ยูทูป</a>
</li>
<li>
<a href="YOUR_TIKTOK_URL" target="_blank" class="link-button">ติ๊กต๊อก</a>
</li>
</ul>
</div>
</body>
</html>ไฟล์ style.css
/* ตั้งค่าพื้นฐาน */
body, html {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif; /* เลือก font ที่ต้องการ */
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* สีพื้นหลังแบบไล่ระดับ */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* ทำให้เนื้อหาอยู่กลางแนวตั้ง */
box-sizing: border-box;
}
/* กล่องหลักที่ครอบเนื้อหา */
.container {
background-color: rgba(255, 255, 255, 0.9); /* สีพื้นหลังกึ่งโปร่งใส */
padding: 40px 30px;
border-radius: 15px; /* ทำให้ขอบมน */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* เพิ่มเงา */
text-align: center;
max-width: 500px; /* กำหนดความกว้างสูงสุด */
width: 90%; /* สำหรับหน้าจอเล็ก */
}
/* รูปโปรไฟล์ */
.profile-picture {
width: 120px; /* ขนาดรูปโปรไฟล์ */
height: 120px;
border-radius: 50%; /* ทำให้รูปเป็นวงกลม */
object-fit: cover; /* ป้องกันรูปบิดเบี้ยว */
margin-bottom: 30px; /* ระยะห่างจากรายการลิงก์ */
border: 4px solid #fff; /* เพิ่มขอบสีขาวให้รูป */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* เพิ่มเงาให้รูป */
}
/* รายการลิงก์ */
.link-list {
list-style: none; /* เอา bullet point ออก */
padding: 0;
margin: 0;
}
.link-list li {
margin-bottom: 15px; /* ระยะห่างระหว่างปุ่มลิงก์ */
}
/* ปุ่มลิงก์ */
.link-button {
display: block; /* ทำให้ปุ่มเต็มความกว้าง */
background-color: #007bff; /* สีพื้นหลังปุ่ม (สีน้ำเงิน) */
color: white; /* สีข้อความ */
padding: 15px 20px; /* ขนาดภายในปุ่ม */
text-decoration: none; /* เอาขีดเส้นใต้ลิงก์ออก */
border-radius: 25px; /* ทำให้ปุ่มขอบมน */
font-size: 1em; /* ขนาดตัวอักษร */
font-weight: bold; /* ตัวหนา */
transition: background-color 0.3s ease, transform 0.2s ease; /* เพิ่ม animation ตอน hover */
}
/* เอฟเฟกต์เมื่อเมาส์ชี้ที่ปุ่ม */
.link-button:hover {
background-color: #0056b3; /* สีพื้นหลังเข้มขึ้น */
transform: scale(1.03); /* ขยายปุ่มเล็กน้อย */
cursor: pointer;
}
/* ทำให้หน้าเว็บดูดีบนมือถือ */
@media (max-width: 600px) {
.container {
padding: 30px 20px;
}
.profile-picture {
width: 100px;
height: 100px;
}
.link-button {
padding: 12px 15px;
font-size: 0.95em;
}
}ผลลัพธ์
- Log in to post comments
