imkopkap

#3 สร้างเว็บไซต์ภาษา html : Image และ Table

ใช้เวลา 12 นาที 05/08/2014

คลิปที่สามของวันนี้คือ เป็นการแทรกรูปภาพและตารางในเว็บไซต์ ( insert image and table in your website ) และมีการใส่ Style ในตารางครับ (  and have style in table ) ซึ่งถือเป็นเรื่องง่ายมากสำหรับคนเริ่มต้น แก๊ปก็พยายามทำให้ทุกคนที่เข้ามาเรียนในส่วนนี้เข้าใจตามกันไปด้วยครับ

 

 

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

 

ทำไมเราต้องรู้จักโค้ด Image ?

เนื่องจากเราต้องจำเป็นต้องรู้ครับ 555 สำหรับการทำเว็บไซต์แล้วถ้าเว็บไซต์ไม่มีรูปภาพประกอบก็จะดูจืดกันเลยทีเดียว ถ้าเว็บที่มีรูปภาพดูซ้ายเอย ขวาเอย ดูทางไหนก็สวยครับ เหมือนกับผู้หญิง คุณจะชอบคนไหนหละระหว่าง ขี้เหร่ นิสัยดี กับ หน้าตาดี นิสัยดี ใช่ๆครับ ทุกคนมีโครงสร้าง html แต่ต่างกันตรงที่นี้เลย รูปภาพ หรือหน้าตานั่นเอง จะไม่มีใครอยากรู้จักเราเลยถ้าข้างนอกมอมแมม จะไม่มีใครรู้จักเว็บเราเช่นกัน ถ้าเว็บเราไม่มีอะไรเลย !

 

ทำไมเราต้องร้จัก Table ?

เจ้าตัวนี้คนไทยเรียกมันว่า “ตาราง” ไม่ใช่คุกนะครับ 5555 เข้าตารางมีบทบาทสำคัญมากสำหรับคนที่เป็นมือใหม่สามารถใช้ ตารางในการกำหนดหน้าเว็บได้เลย เราสามารถกำหนดโดยใช้ตารางว่า Header ต้องอยู่บนนะ Sidebar ต้องอยู่ข้างนะ Footer ต้องอยู่ล่างสุดนะอะไรแบบนี้ครับ ใช่! ตารางทำได้ แต่ถ้าเก่งขึ้นมาอีกหน่อยพวกเขาจะใช้แท็ก <div> หรือ <article> , <aside> , <header> , <footer> ซึ่งเป็นของภาษา html5 นั่นเอง เดี๋ยวเรื่องนี้ไว้ทีหลังแล้วกัน เราต้องมาทำความรู้จักกับตารางเสียก่อน ( you must know about table now! ) ถ้าตารางไม่ได้ค่อนข้างแย่หน่อยครับ ตารางมีความสำคัญกับ แบบ Form ด้วยช่วยในการจัดหน้าเอกสารและอื่นๆ ซึ่งถือว่ายังมีความสำคัญครับ รู้ไว้ไม่เสียหายอะไรเลย ( Just make something and you will be fun )

<!DOCTYPE html>
<html>
<head>
    <title>Images and Table</title>
    <style type="text/css">
        table , tr , td ,th {
            border:1px solid black; border-collapse: collapse; width:300px;
        }
        td {
            text-align: center;
        }
    </style>
</head>
<body>
    <img src="http://apod.nasa.gov/apod/image/0801/CielHiverPic_sallez.jpg" alt="Star">
    <img src="1.jpg" alt="mypic">

    <table>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Saryut</td>
            <td>Lawilai</td>
            <td>17</td>
        </tr>
        <tr>
            <td>Dog</td>
            <td>Cat</td>
            <td>Bat</td>
        </tr>
    </table>
</body>
</html>

บันทึกแนะนำ