web analytics

เขียนเว็บด้วยภาษา php แบบพื้นฐาน ตอนที่ 2 – HTML

cover

สวัสดีครับ มาต่อกับตอนที่สองของ ตอนก่อนหน้านี้เป็นเรื่อง php พื้นฐานครับ บทความนี้ก็ยังพื้นฐานเหมือนเดิม เพิ่มเติมคือเรื่อง HTML ซึ่งผมคิดว่าจำเป็นมากที่ต้องรู้ ดังนั้นบทความนี้จะพาไปเขียน HTML ครับ แล้วเราค่อยเอา HTML + php อีกที

ติดตั้งโปรแกรม WAMP + VS code อยู่ในตอนที่ 1

ตอนก่อนหน้านี้

เขียนเว็บด้วยภาษา php แบบพื้นฐาน ตอนที่ 1 – Basic

 

รู้จัก HTML

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

คำสั่งของมันจะเป็นรูปแบบแท็ก <a> …. </a> คือมี <> เปิด แล้วก็ </> ปิด
โครงสร้างของมันจะเป็นแบบนี้

 

ที่สนใจคือ <body> เราจะเขียนเนื้อหาของเว็บที่นี่นั่นเอง ส่วนหัวเว็บก็เขียนที่ <title>
<h1> คือ การทำหัวข้อ ดังนั้นตัวหนังสือก็จะใหญ่
1

 

เราจะเขียนแค่ แท็กที่เราต้องการก็ได้ เพราะ browser มันฉลาด

ผลลัพธ์ก็ยังแสดงแบบเขียนแบบเต็มตอนแรก

 

รู้จักแท็กที่จำเป็นของ HTML

จะเห็นว่า HTML มันก็เป็นภาษาง่ายๆ แค่เราต้องจำแท็ก กับลูกเล่นของมันนิดหน่อย ที่เรารูก่อนหน้านี้ไปแล้วคือ <br> ขึ้นบรรทัดใหม่ , <h1> คือทำหัวข้อ ต่อไปผมจะแนะนำอันที่ควรรู้ ใช้งานบ่อยๆ

แท็ก <h> ใช้สำหรับทำหัวข้อ

มีตั้งแต่ <h1> ถึง <h6> โดย <h1> จะเป็นหัวข้อใหญ่ที่สุด

ลลองใช้ <h7> ซึ่งมันไม่มีคำสั่งนี้ มันจะแสดงเป็นข้อความธรรมดาแทน

2

 

แท็ก <font> สำหรับใส่สี ขนาดตัวหนังสือ

ใส่สีตัวอักษร กำหนดขนาดได้ โดยใช้คำสั่ง <font>

9

 

แท็ก <a> สำหรับทำข้อความลิงค์

โดยจะเขียน url ไว้ที่ attribute ที่ชื่อว่า href ของ <a>

3

 

การทำตาราง

การทำตารางจะใช้ <table> <th> <tr> <td>
<tr> คือ แถว
<td> คือ คอลัม

ลองรัน

4

 

แท็ก <u> <i> <b>

<u> ขีดเส้นใต้
<i> ตัวเอียง
<b> ตัวหนา

5

 

แท็ก <img> รูปภาพ

ก่อนอื่นหารูปภาพมารูปนึง เอาไปใส่ไว้ในโฟลเดอร์โปรเจคของเรา และเพื่อเป็นสัดส่วน ให้สร้างโฟลเดอร์ชื่อ image เอาไว้เก็บรูปภาพด้วยเลย

6

 

การกำหนดรูปก็คือ ใส่ path ไว้ใน src ของ <img>

7

 

หรือจะกำหนด เป็น URL ก็ได้ กำหนดขนาดเป็น % ก็ได้เช่นกัน

8

 

นอกจากนี้ที่ใช้บ่อยๆก็ยังมีเรื่องของ Form เช่นช่องกรอกข้อความ ปุ่ม Checkbox , Select เดี๋ยวค่อยๆใช้งานกันในตอนถัดๆไปครับ

 

ทำเว็บรายการอาหาร

ลองใช้แท็กที่ได้เรียนมาของ HTML มาสร้างเป็นเว็บง่ายๆดูครับ

10
เฉลยโค้ด

 

การใช้ php + HTML

ทีนี้มาลองใช้ ข้อมูลในตัวแปร php แล้วมาปริ้นแสดงใน Table ของ HTML ครับ

มีตัวแปร data เป็น array เก็บข้อมูลของอาหารอยู่ เราก็สามารถนำมา loop ปริ้นแถวใส่ table ได้
และนี่คือศาสตร์การใช้ php + HTML ครับ คือมันจะมีโค้ดของสองอย่างนี้ปนกันไปมา

 

ลอง refresh

11

ทีนี้จะเห็นว่าตรงเหลือของสปาเก็ตตี้มันเป็น 0 จาน ไม่สวยเลย จะให้ขึ้นคำว่า หมด แทน

ก็แค่เพิ่มเงื่อนไข if ตรงคอลัมของคงเหลือ

12

 

 

มือใหม่จะ งงการใช้ กับปนกันระหว่าง HTML กับ php

คือทั้ง HTML และ php จะใช้ ” หรือ ‘ ก็ได้
แต่พอเอาไปอยู่ใน php echo ตัวของ HTML จะต้องใช้แบบที่ไม่ซ้ำกับ php

คือใช้สลับกันนั่นเอง ใช้อันไหนก็ได้

 

ซึ่ง ตัวแปร array ที่มีการเรียก key จะต้องใช้วิธีต่อ string ไม่สามารถเขียนรวมใน echo ได้
ต้องเขียนแบบนี้

 

จบแล้ว

บทความนี้ต่อยอดจาก php เดิม คือการนำ HTML มาใช้ ดังนั้นเราจึงต้องมีความรู้เรื่อง HTML อยู่บ้าง เช่น การทำตาราง จากนั้นจึงนำความรู้ php มาประยุกต์ใช้กับ HTML ในตัวอย่างที่ผมทำคือการนำข้อมูลที่เก็บในตัวแปร php มาแสดงกับตาราง ซึ่งในอนาคตข้อมูลนี้ก็ดึงจากฐานข้อมูลนั่นเอง เอ้าละ บทความนี้จบเพียงเท่านี้ก่อน ในตอนหน้าจะพาไปทำเรื่องของฟอร์ม (Form) ครับ