357337 – Web Programming and Web Database Introduction to HTML 357337 – Web Programming and Web Database
HTML HyperText Markup Language เป็นภาษาที่ถูกออกแบบมาเพื่อพัฒนา เวปเพจ หรือ ข้อมูลต่างๆ ที่สามารถเรียกดูผ่าน web browser นามสกุลของไฟล์ทั่วไปจะใช้ .htm หรือ .html โครงสร้างพื้นฐานของภาษา HTML จะประกอบด้วย <HTML> <HEAD> <TITLE> Hello </TITLE> </HEAD> <BODY> What’s up </BODY> </HTML>
HTML Header & Body
HTML Tags HTML tags ประกอบไปด้วย Keyword และ < > ปกติจะมีเป็นคู่ เช่น <b> </b> นั่นคือ Tag เปิด และ Tag ปิด HTML documents ประกอบไปด้วย HTML tags และข้อความ <html> <body> <h1>My First Heading</h1> <p>My first paragraph</p> </body> </html>
HTML Headings มีทั้งหมด <h1> ถึง <h6> Hello normal <h1>Hello h1</h1> <h2>Hello h2</h2> <h3>Hello h3</h3>
HTML Headings (2)
HTML Links <a href="http://www.kmutnb.ac.th">This is a link</a>
HTML Images <img src=“fifa2010.jpg" width=“200" height=“200" />
HTML Elements HTML Attributes <font size="2" color="blue">This is some text!</font> <img src="angry.gif" alt="Angry face" />
HTML Paragraphs <p>This is a paragraph</p> <p>This is another paragraph</p>
Tag อื่น ๆ ที่ควรรู้จัก HTML Comments <!-- This is a comment --> Tag อื่น ๆ ที่ควรรู้จัก <br> or <br /> ใช้ในการขึ้นบรรทัดใหม่ <hr> ขีดเส้นขั้นบรรทัด <b> </b> ตัวหนา <i> </i> ตัวเอียง
HTML Styles <html> <body style="background-color:lightblue;"> <h1>Look! Styles and colors</h1> <p style="font-family:verdana;color: #FF0000 "> This text is in Verdana and red</p> <p style="font-family:times;color:green"> This text is in Times and green</p> <p style="font-size:30px">This text is 30 pixels high</p> </body> </html>
HTML Styles (2)
HTML Style Examples style="background-color:yellow“ ตั้งค่าสีของพื้นหลังเป็นสีเหลือง style="font-size:10px“ ตั้งขนาดของตัวอักษรเป็น 10 px style="font-family:Times“ ตั้งชนิดของตัวอักษรเป็นแบบ Times style="text-align:center“ เซตตำแหน่งกึ่งกลาง
รหัสสีใน HTML เราสามารถกำหนดสีของฉากพื้นหลัง รวมถึง สีของตัวอักษรแล้ว link ต่างๆ ใน HTML ได้ ซึ่งรหัสสีจะอยู่ในรูปของเลขฐาน 16 (RGB สีละ 8 bits) แล้วขึ้นต้นด้วยเครื่องหมาย “#” ตัวอย่าง #000000 (Red = 0, Green = 0, Blue = 0) คือ สีดำ #FFFFFF (Red = FF, Green = FF, Blue = FF) คือ สีขาว #FF0000 (Red = FF, Green = 0, Blue = 0) คือ สีแดง #00FF00 สีเขียว #0000FF สีน้ำเงิน
HTML Links <a href="lastpage.htm" target="_blank">Last Page</a> Tag <a> ใช้ในการเพิ่ม Link เพื่อใช้ในการเปิดหน้าเว็บอื่น ๆ ที่ต้องการ โดยมีการเพิ่ม Attribute href เพื่อใส่ชื่อ หรือ URL ของหน้าเวบที่ต้องการ target เพื่อบอกว่าจะเปิด Link นั้นที่ไหน <a name="label">Position1</a> เพื่อกำหนดตำแหน่งของชื่อ label <a href="#label">Jump to Position1</a> เพื่อ Link ไปยังตำแหน่งที่ชื่อ label
HTML Table <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
HTML Table (2) <table border="1"> <tr> <td bgcolor="red">First</td> <td>Row</td> </tr> <td background="bgdesert.jpg"> Second</td> </table>
รายละเอียดเพิ่มเติม ศึกษาเองได้จากเวบ http://www.w3schools.com/html/