งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

– Web Programming and Web Database

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "– Web Programming and Web Database"— ใบสำเนางานนำเสนอ:

1 357337 – Web Programming and Web Database
Introduction to HTML – Web Programming and Web Database

2 HTML HyperText Markup Language
เป็นภาษาที่ถูกออกแบบมาเพื่อพัฒนา เวปเพจ หรือ ข้อมูลต่างๆ ที่สามารถเรียกดูผ่าน web browser นามสกุลของไฟล์ทั่วไปจะใช้ .htm หรือ .html โครงสร้างพื้นฐานของภาษา HTML จะประกอบด้วย <HTML> <HEAD> <TITLE> Hello </TITLE> </HEAD> <BODY> What’s up </BODY> </HTML>

3 HTML Header & Body

4 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>

5 HTML Headings มีทั้งหมด <h1> ถึง <h6> Hello normal
<h1>Hello h1</h1> <h2>Hello h2</h2> <h3>Hello h3</h3>

6 HTML Headings (2)

7 HTML Links <a href="http://www.kmutnb.ac.th">This is a link</a>

8 HTML Images <img src=“fifa2010.jpg" width=“200" height=“200" />

9 HTML Elements HTML Attributes
<font size="2" color="blue">This is some text!</font> <img src="angry.gif" alt="Angry face" />

10 HTML Paragraphs <p>This is a paragraph</p> <p>This is another paragraph</p>

11 Tag อื่น ๆ ที่ควรรู้จัก
HTML Comments <!-- This is a comment --> Tag อื่น ๆ ที่ควรรู้จัก <br> or <br /> ใช้ในการขึ้นบรรทัดใหม่ <hr> ขีดเส้นขั้นบรรทัด <b> </b> ตัวหนา <i> </i> ตัวเอียง

12 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>

13 HTML Styles (2)

14 HTML Style Examples style="background-color:yellow“
ตั้งค่าสีของพื้นหลังเป็นสีเหลือง style="font-size:10px“ ตั้งขนาดของตัวอักษรเป็น 10 px style="font-family:Times“ ตั้งชนิดของตัวอักษรเป็นแบบ Times style="text-align:center“ เซตตำแหน่งกึ่งกลาง

15 รหัสสีใน HTML เราสามารถกำหนดสีของฉากพื้นหลัง รวมถึง สีของตัวอักษรแล้ว link ต่างๆ ใน HTML ได้ ซึ่งรหัสสีจะอยู่ในรูปของเลขฐาน 16 (RGB สีละ 8 bits) แล้วขึ้นต้นด้วยเครื่องหมาย “#” ตัวอย่าง # (Red = 0, Green = 0, Blue = 0) คือ สีดำ #FFFFFF (Red = FF, Green = FF, Blue = FF) คือ สีขาว #FF0000 (Red = FF, Green = 0, Blue = 0) คือ สีแดง #00FF00 สีเขียว #0000FF สีน้ำเงิน

16 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

17 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>

18 HTML Table (2) <table border="1"> <tr>
<td bgcolor="red">First</td> <td>Row</td> </tr> <td background="bgdesert.jpg"> Second</td> </table>

19 รายละเอียดเพิ่มเติม ศึกษาเองได้จากเวบ


ดาวน์โหลด ppt – Web Programming and Web Database

งานนำเสนอที่คล้ายกัน


Ads by Google