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

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

ภาษา HTML เบื้องต้น เช่น Internet Explorer และ Netscape Navigator

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


งานนำเสนอเรื่อง: "ภาษา HTML เบื้องต้น เช่น Internet Explorer และ Netscape Navigator"— ใบสำเนางานนำเสนอ:

1 ภาษา HTML เบื้องต้น เช่น Internet Explorer และ Netscape Navigator
ภาษา HTML (HyperText Markup Language) เป็นภาษาแรกที่ใช้ในการเขียนโปรแกรม เพื่อให้ข้อมูลที่เขียนไปแสดงผล บนเครือข่ายอินเทอร์เน็ตในลักษณะของข้อความ รูปภาพ เสียง และ ภาพเคลื่อนไหวต่างๆ html สั่งงานผ่านทางโปรแกรม Text Editor เช่น Notepad และ Wordpad Run คำสั่งต่างๆ บนโปรแกรม Web Browser เช่น Internet Explorer และ Netscape Navigator

2 โครงสร้างของภาษา HTML
<html>    <head>        <Title> ชื่อ </Title>    </head>    <body>        <tag คำสั่ง>    </ body> </html>

3 เครื่องหมาย less-than bracket ( < ) greater-than bracket ( > )
slash  (/)

4 คำสั่งพื้นฐานทั่วไปของภาษา html
ความหมาย รูปแบบ <title> กำหนดข้อความบนไตเติลบา เป็นคำสั่งในส่วน<head> <head> <title>ข้อความ</title> </head> <background> ใช้รวมกับ <body> หรือ <table> เพื่อกำหนดพื้นหลังเป็นรูปภาพ <body background="ชื่อ.นามสกุลรูปภาพ">

5 คำสั่ง ความหมาย รูปแบบ
<bgcolor> ใช้รวมกับ <body> หรือ <table> เพื่อกำหนดสีของพื้นหลัง <body bgcolor=ชื่อสี> <font color size> แสดงข้อความ กำหนดสีของข้อความ กำหนดขนาดของข้อความ <font color=ชื่อสี size=“5“> ข้อความ </font>

6 <b> <i> <u>
คำสั่ง ความหมาย รูปแบบ <b> <i> <u> ข้อความหนา ข้อความเอียง ข้อความขีดเส้นใต้ <b>ข้อความ</b> <i>ข้อความ</i> <u>ข้อความ</u> <marquee> <marquee behavior=alternate> ทำให้ข้อความเลื่อนจากซ้ายไปขวา ทำให้ข้อความเลื่อนจากซ้ายไปขวาแล้วย้อนกลับ <marquee>ข้อความ</marquee> <marquee behavior=alternate>ข้อความ</marquee>

7 คำสั่ง ความหมาย รูปแบบ
<br> <hr> ขึ้นบรรทัดใหม่ ขีดเส้น <img src alt width height> แสดงรูปภาพ กำหนดรูปภาพ กำหนดข้อความเมื่อเอาเมาส์วางบนภาพ กำหนดความกว้างของภาพ กำหนดความยาวของภาพ <img src="ชื่อ.นามสกุลของภาพ" width="ความกว้าง" height="ความยาว" alt="ข้อความ"> เช่น <img src="pic1.jpg width="80" height="250" alt=“ข้อความ">

8 คำสั่ง ความหมาย รูปแบบ
<a href target> กำหนดการเชื่อมโยง กำหนดจุดเชื่อมโยง กำหนดการเปิดหน้าต่างใหม่ <a href="จุดเชื่อมโยง" target="ลักษณะการเปิดหน้าต่าง"> ข้อความ </a> เช่น <a href=“ target="_blank"> โฮมเพจโรงเรียนเรา </a>

9 <table width bgcolor border bordercolor>
<tr> <td> สร้างตาราง กำหนดความกว้างของตาราง กำหนดสีพื้นของตาราง กำหนดความหนาของเส้นขอบ กำหนดสีของเส้นขอบ กำหนดจำนวนแถว(แนวนอน) กำหนดจำนวนสดมน์(แนวตั้ง) เช่น <table width="80%" bgcolor=blue border="2" bordercolor=red> <tr> <td>ฟุตบอล</td> <td>เปตอง</td> </tr> จะได้ ตาราง 1 แถว 2 สดมน์ ความยาว 80% ของหน้าจอ สีน้ำเงิน และขอบ 2 pixel สีแดง สดมน์ที่ 1 มีข้อความ ฟุตบอล สดมน์ที่ 2 มีข้อความว่า เปตอง

10 คำสั่ง ความหมาย รูปแบบ rowspan colspan รวมแถว รวมสดมน์ <td rowspan="จำนวน cell ที่จะรวม"> <td colspan="จำนวน cell ที่จะรวม">

11 กำหนดพื้นที่ที่จะใช้จัดเก็บเอกสารทั้งหมด
 สร้างโฟลเดอร์ (folder) ไว้ที่ D:\โดยตั้งชื่อเป็นชื่อของ นักเรียน (เป็นภาษาอังกฤษ) เช่น D:\Navamin  2.   ภายในโฟลเดอร์ Navamin ให้สร้างโฟลเดอร์ย่อย ที่ใช้ในการจัดเก็บภาพต่างๆ ที่จะนำมาแสดงในเว็บเพจ โดยตั้งชื่อว่า images เช่น D:\Navamin/images การเซฟ (Save) ไฟล์ให้เราทำการ Save เป็นไฟล์นามสกุล .htm หรือ .html

12 การบันทึกเอกสาร HTML คลิกที่เมนู File แล้วเลือก save -   ข้อมูลในช่อง Save in : ให้เลือกไปที่โฟลเดอร์ที่เราสร้างไว้ในตอนแรก (Navamin) -   ข้อมูลในช่อง File name:  ให้ตั้งชื่อว่า test.htm -   ข้อมูลในช่อง Save as type :  ให้เลือกเป็น All Files -   จากนั้นให้คลิกที่ปุ่ม Save

13 ทีมงานพัฒนาเว็บไซต์ Web Master คือ ผู้รับผิดชอบและดูแลเว็บไซต์ที่ได้รับมอบหมายในภาพรวม Web Designer เป็นผู้ออกแบบลักษณะหน้าตาทั้งหมดของเว็บไซต์ Web Programmer เป็นนักเขียนโปรแกรมซึ่งสามารถพัฒนาโปรแกรมด้วยภาษาต่างๆ ที่ใช้ในเว็บไซต์ Content Writer/Editer คือ นักเขียนและบรรณาธิการที่ดูแลด้านเนื้อหาของเว็บไซต์


ดาวน์โหลด ppt ภาษา HTML เบื้องต้น เช่น Internet Explorer และ Netscape Navigator

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


Ads by Google