ข้ามไปที่เนื้อหาหลัก

ทำความรู้จักกับ HTML

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






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


ตัวอย่างโค๊ด HTML






โค๊ด HTML ที่เห็นด้านบนนี้เป็นตัวอย่างโค๊ดที่เป็นเพียงส่วนหนึ่งเท่านั้น เพราะยังมีเรื่องของการจัดวางด้านซ้าน กลาง ขวา การเปลี่ยนขนาดตัวอักษร การใส่สี ใส่ภาพ ใส่ลิงค์ แทรกตาราง ซึ่งมีรายละเอียดการใช้งานที่ต่างกัน


แต่หลักการเขียนจะเหมือนกันก็คือ เมื่อมีแท็กเปิด <html> ก็จะต้องมีแท็กปิด </html> เพื่อครอบส่วนที่เราต้องการให้มีผลตามที่เราต้องการ


แต่ก็มีบางส่วนที่เป็นแท็กเดี่ยวที่ไม่ต้องตามด้วยแท็กปิด เช่น <br/> , <hr/> , <input type="text" /> นี่คือแท็กตัวอย่างที่ไม่จำเป็นต้องมีแท็กปิด แต่จะมีการเพิ่มตัว / ไว้ก่อนวงเล็บเสมอ


โครงสร้างบังคับที่ต้องมีในการสร้างหน้าเว็บหนึ่งหน้าก็คือ <html></html> จะครอบทุกแท็กที่เราจะเขียนในส่วนต่อไปทั้งหมด

แท็ก <head></head> จะช่วยกำหนด Title ของหน้าเว็บที่แสดงด้านบนสุดของเว็บบราวเซอร์ และยังกำหนดภาษา อธิบายรายละเอียดของเว็บ เพื่อช่วยให้ค้นหาได้ดียิ่งขึ้น และยังนิยมแทรกโค๊ดปรับแต่งเว็บไซต์ให้สวยงามด้วย CSS ไว้ในส่วนนี้ด้วย

แท็ก <body></body> จะใช้แสดงผลข้อมูลบนหน้าเว็บ เช่นข้อความ 3 บรรทัดที่แสดงในตัวอย่างผลลัพธ์ที่แสดงด้านบน



ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

แจกฟรี!! ระบบต่างๆที่พัฒนาด้วย PHP สำหรับนำไปใช้ในงานต่างๆ

       สำหรับหลายท่านที่ขอโค้ดเข้ามาทาง Inbox ของเฟซบุ๊กแฟนเพจ หรือถามถึงระบบต่างๆหลังไมค์มานั้น ส่วนใหญ่ก็มีแจกอยู่แล้วในเว็บบอร์ด ThaiCreate.Com นะครับ และด้านล่างนี้ก็เป็นระบบต่างๆที่แจกให้นำไปลองใช้ลองศึกษากันครับ

สอนเขียน PHP แสดงการจองห้องประชุมแบบไฮไลท์ตามช่วงเวลา (แบบเชื่อมต่อฐานข้อมูล MySQL)

ตัวอย่าง ผลลัพธ์ที่ได้จากการจองในฐานข้อมูล ตาราง tb_room สร้างตารางรายชื่อห้องประชุม สำหรับ id นั้นเป็น Primarykey จะกำหนดให้สร้างอัตโนมัติ ทุกครั้งที่เราเพิ่มชื่อห้องประชุมใหม่ -- -- Database: `tobedev_example` -- -- -------------------------------------------------------- -- -- Table structure for table `tb_room` -- CREATE TABLE IF NOT EXISTS `tb_room` (   `id` int(11) NOT NULL,   `name` varchar(30) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8; -- -- Dumping data for table `tb_room` -- INSERT INTO `tb_room` (`id`, `name`) VALUES (1, 'ห้องประชุม 1'), (2, 'ห้องประชุม 2'), (3, 'ห้องประชุม 3'), (4, 'ห้องประชุม 4'), (5, 'ห้องประชุม 5'); -- -- Indexes for dumped tables -- -- -- Indexes for table `tb_room` -- ALTER TABLE `tb_room`   ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tb_room` -- ALTER TABLE `tb_room`   MODIFY `i...

การนำไอคอน มาแสดงบน Fullcalendar

เนื่องจากมีน้องคนหนึ่งให้ช่วยดูโค้ดเกี่ยวกับ Fullcalendar ให้หน่อย แล้วพอดีช่วงนี้ผมก็กำลังสนใจปฏิทิน Fullcalendar อยู่พอดี จึงลองหาสาเหตุที่ไม่สามารถแสดงข้อมูลจาก MySQL และไม่สามารถแทรก icon เข้าไปใน Fullcalendar ได้ จากที่สังเกตุได้ครั้งแรกคือ Error ที่ Console ของ Firefox เกี่ยวกับฟังก์ชั่นที่เขียนผิด และก็มีการ echo ค้างไว้ในส่วนของไฟล์ getCalendar.php ก็เลยจัดการทดสอบแล้วลบ echo ออกให้เหลือแค่ echo json_encode($event_array); ที่ได้ใช้งานจริงเท่านั้น ขั้นตอนการตรวจสอบความถูกต้องของโค้ด PHP 1) ต้องแน่ใจว่าคำสั่งที่เขียนไว้ สามารถดึงข้อมูลมาแสดงผลได้ด้วยการ echo $sql; 2) นำคำสั่งที่ได้ไปรันในโปรแกรมจัดการฐานข้อมูล ในที่นี้คือ phpMyAdmin 3) เมื่อตรวจสอบดูผลลัพธ์ที่ได้ หากถูกต้องมีข้อมูลก็แสดงว่าการ Query ทำงานได้ 4) มาดูการทำงานของ JavaScript ในส่วนของ jQuery มีการแจ้งเตือนที่ฟังก์ชั่น .on() ซึ่งจะใช้กับ jQuery เวอร์ชั่นใหม่เท่านั้น นั่นหมายถึงเวอร์ชั่น jQuery ที่มากับ Fullcalendar เป็นเวอร์ชั่นเก่า ก็ให้เปลี่ยนไปใช้ .live() แทน ก็จะทำงานได้ปกติ 5) ม...