ความรู้พื้นฐานด้านภาษา
- มีความรู้ HTML
- มีความรู้ CSS
- มีความรู้ javascript
เริ่มต้นสร้าง Web แรกของคุณ
ให้คุณสร้าง เอกสาร HTML5 ขึ้นมาดังนี้ ตั้งชื่อไฟล์ว่า page1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New</title>
</head>
<body>
</body>
</html>
และทาการ Save ใว้ที่เดียวกับ ไฟล์ jQuery Mobile ที่คุณโหลด มา
กลับมาที่โค้ดไฟล์ page1.html ที่คุณได้สร้างใว้
ต่อไปเราจะเพิ่มคาสั่งเรียกไฟล์ js และ css เข้ามา โดยให้คุณใส่โค้ดด้านล่างนี้
ใว้ในส่วน <head>….</head>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
</body>
</html>
หมายเหตุ ชื่อไฟล์ต้องกำหนดให้ตรงกับรุ่น jQuery Mobile ที่คุณโหลดมาด้วยนะครับ และถ้าคุณไม่มีไฟล์ jquery-1.7.1.min.js อาจจะไม่ต้องกัน แต่หาที่เป็น XXX.min.js ก็ได้ครับ ให้คุณไปดาวห์โหดลได้ที่เว็บนี้ครับ
http://docs.jquery.com/Downloading_jQueryจากนั้น คำสั่งที่สาคัญ ก็คือคาสั่งที่บอกให้ เว็บคุณยืดหยุนตามอุปกรณที่เข้ามาได้ ให้พิมพ์โค้ดนี้ในแท็ก <head>…</head> ดังนี้ครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
</body>
</html>
ต่อไปจะสร้างหน้าเพจแบบนี้กันครับ
ซึ่งโค้ดจะเป็นแบบนี้ครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Header (ส่วนหัวเว็บ) </h1>
</div>
<div data-role="content">
<p>My Name is Weratad. (ส่วนกลางเว็บ)</p>
</div>
<div data-role="footer">
<h4>CS-Developer (ส่วนท้ายเว็บ)</h4>
</div>
</div>
</body>
</html>
0 comments:
Post a Comment