วันเสาร์ที่ 2 พฤศจิกายน พ.ศ. 2556

บทความแนะนำเรื่องเริ่มต้น html

บทความแนะนำเรื่องเริ่มต้น html

บทความแนะนำเรื่อง CSS
เริ่มต้นด้วย HTML + CSS

บทความแนะนำสั้นๆนี้ต้องการให้ผู้ที่ต้งอการเริ่มใช้ CSS และไม่เคยเขียน CSS style sheet มาก่อน
บทความนี้ไม่ได้อธิบายถึง CSS มากนักส่วนใหญ่จะอธิบายว่าจะสร้างไฟล์ HTML file และการนำมาใช้งานร่วมกันกับไฟล์ CSS หลังจากนั้นคุณสามารถอ่านข้อแนะนำอื่นได้ เพื่อเพิ่มส่วนอื่นๆให้กับไฟล์ HTML และ CSS ได้ หนือคุณอาจจะเปลี่ยนมาใช้ โปรแกรม ที่ช่วยสร้างและแก้ไขไฟล์ HTML และ CSS ที่จะช่วยให้คุณสามารถสร้างเวบไซด์ที่มีความซับซ้อนได้มากยิ่งขึ้น
และในส่วนท้ายสุดของบทความแนะนำนี้ คุณจะได้ไฟล์ HTML ที่มีหน้าตาเช่นนี้
หน้าตาของ HTML ที่มีการใช้สีและการจัดหน้าโดยใช้ CSS ทั้งหมด
ในที่นี้ผู้เขียนไม่ได้กล่าวอ้างว่าตัวอย่างดังกล่าวมีความสวยงาม ?
เตือน! ล่วงหน้า:ส่วนที่มีหน้าตาดังกล่าวนี้สามารถ เลือก ได้ ซึ่งประกอบไปด้วยคำอธิบายพิเศษเกี่ยวกับโคด HTML และ CSS ในตัวอย่าง เครื่องหมาย "เตือน!" ในส่วนเริ่มต้นนี้แสดงว่าส่วนนี้มีข้อมูลในขั้นที่สูงขึ้นกว่าส่วนอื่นๆในข้อความ

ขั้นที่ 1: การเขียน HTML

สำหรับบทความแนะนำนี้ ขอแนะนำให้ใช้เครื่องมือที่ใช้ง่ายที่สุดเช่น Notepad (สำหรับ Windows) TextEdit (สำหรับ Mac) หรือ KEdit (สำหรับ KDE) เมื่อคุณเข้าใจหลักการแล้วคุณอาจสามารถเปลี่ยนมาใช้เครื่องมือขั้นสูงกว่าได้หรือใช้โปรแกรมที่นิยมใช้กันทั่วไปเช่น Style Master Dreamweaver หรือ GoLive
อย่าใช้โปรแกรมเขียนเช่น Microsoft Word หรือ OpenOffice เนื่องจากโปรแกรมเหล่านี้จะสร้างไฟล์ที่ เวบบราวเซอร์ไม่สามารถอ่านได้ สำหรับ HTML และ CSS นั้นเราต้องการไฟล์ข้อความที่มีความเรียบง่าย
ขั้นแรกก็คือให้เปิดโปรแกรมสร้างข้อความ (Notepad, TextEdit, KEdit, หรืออะไรก็ตามที่คุณชอบใช้) เริ่มจากหน้าที่ว่างและพิมพ์ ข้อความต่อไปนี้ลงไป
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>
ความจริงแล้วคุณไม่จำเป็นต้องพิมพ์เพียงแค่ก๊อปปี้ข้อความบนหน้านี้และนำไปวางไว้ในโปรแกรม
(ถ้าคุณใช้โปรแกรม TextEdit สำหรับ Mac อย่าลืมกำหนดใน TextEdit ให้เป็นแค่ข้อความธรรมดาเท่านั้นโดยไปตรงเมนู Format และ เลือก "สร้างข้อความธรรมดา")
เตือน! ล่วงหน้า:บรรทัดแรกของไฟล์ HTML ข้างต้นเป็นการบอกบราวเซอร์ว่าเป็น HTML ประเภทใด (DOCTYPE หมายถึง DOCument TYPE) ในกรณี นี้คือ HTML version 4.01
คำที่อยู่ภายใน < และ > เรียกว่า tags ดังที่คุณได้เห็นว่า เอกสารจะอยู่ภายใน <html> และ </html> tags ระหว่าง <head>และ </head> จะมีข้อมูลหลายรูปแบบที่ไม่แสดงผลบนหน้าจอ ส่วนใหญ่แล้วจะประกอบไปด้วย title ของเอกสารแต่ภายหลังเราจะเพิ่ม CSS style sheet ลงไปในส่วนนี้เช่นกัน
ส่วน <body>นั้นจะเป็นส่วนที่วางข้อความจริงๆในเอกสาร ตามหลักการแล้วทุกอย่างที่อยู่ใน body tag จะถูกแสดงบนบราวเซอร์ยกเว้น ข้อความที่อยู่ระหว่าง<!-- และ --> ซึ่งไว้ใช้ใส่คอมเมนต์สำหรับเราเอง ซึ่งบราวเซอร์จะไม่อ่านค่าดังกล่าว
จาก tag ในตัวอย่าง <ul>จะใช้สำหรับ "รายการที่ไม่ได้เรียงตามลำดับ" เป็นรายการที่ไม่ได้เรียงตามหมายเลข tag <li>จะเป็นตัว เริ่มต้นสำหรับสิ่งที่อยู่ในรายการ tag <p> ใช้สำหรับ "ย่อหน้า" และ tag <a>ใช้สำหรับ “Anchor” ซึ่งไว้ใช้ในการลิงค์
โปรแกรม KEdit editor ที่แสดงโคด HTML
โปรแกรม KEdit editor ที่แสดงโคด HTML
เตือน! ล่วงหน้า:ถ้าคุณอยากจะรู้ว่าชื่อที่อยู่ใน <…>มีความหมายว่าอะไร ที่ๆเหมาะสำหรับการเริ่มต้นอ่านคือ Getting started with HTML (เริ่มต้นด้วย HTML) แต่ไม่ได้กล่าวถึง โครงสร้างของหน้า HTML มากนัก
  • tag "ul" ใช้แสดงรายการที่เป็น link ต่อรายการหนึ่งซึ่งในที่นี้ก็คือ "เมนู navigation ของเวบไซด์" โดยใช้ลิงค์ไปยังหน้าอื่นๆภายในเวบไซด์ สมมติว่าทุกหน้าของเวบไซด์มีเมนูเหมือนกันหมด
  • element "h1" และ "p" ทำให้เกิดเนื้อหาที่มีลักษณะเด่นภายในหน้านี้ ในขณะที่ ลายเซ็นต์ในส่วนท้าย ("address") จะเหมือนกันในทุกๆหน้า ของเวบไซด์
ข้อสังเกตก็คือไม่ได้มีการปิด tag ของ element “li” และ “p” ใน HTML (แต่ไม่ใช่ใน XHTML) สามารถละ tag ปิด </li> และ </p> ได้ ซึ่งในที่นี้ได้ละไว้เพื่อให้ง่ายต่อการอ่าน แต่คุณอาจจะใส่ tag ปิดก็ได้ถ้าคุณต้องการ
สมมติว่าหน้านี่เป็นหนึ่งหน้าของเวบไซด์ที่มีหน้าอื่นๆที่คลายคลึงกัน ดังเช่นหน้าเวบปัจจุบันทั่วๆไปเวบนี้มีเมนูเพื่อลิงค์ไปยังหน้าอื่นๆในเวบ ที่เราสมมติขึ้นมานี้ซึ่งมีลายเซ็นต์และเนื้อหาที่มีลักษณะเฉพาะ
ทีนี้ลองเลือก “Save As…” จาก เมนู file และเลือกแฟ้มเก็บเอกสารที่คุณต้องการจะเซฟเก็บไว้ (หรือเซฟไว้บน เดสก์ทอปก็ได้) และให้ เซฟไฟล์ดังกล่าวเป็น “mypage.html” แต่อย่าเพิ่งปิดโปรแกรมดังกล่าว เราจะต้องใช้งานมันอีก
(หากคุณใช้โปรแกรม TextEdit สำหรับ Mac OS X ก่อนเวอร์ชั่น 10.4 คุณจะพบว่ามี option ให้เลือกว่า อย่าแนบ .txt ต่อท้ายในการเซฟ ให้เลือก option ดังกล่าว เนื่องจากชื่อ “mypage.html” นั้นมีสกุลต่อท้ายอยู่แล้ว เวอร์ชั่นใหม่ของ TextEdit จะสังเกตเห็นว่ามี .html ต่อท้ายอยู่แล้วโดยอัตโนมัติ)
ต่อไป ให้เปิดไฟล์ใน บราวเซอร์ คุณสามารถเลือกทำได้ดังต่อไปนี้ ค้นหาไฟล์ที่เซฟไว้ด้วย ไฟล์เมเนเจอร์ (Windows Explorer, Finder หรือ Konqueror) และให้คลิกหรือดับเบิ้ลคลิกไฟล์ “mypage.html” ซึ่งน่าที่จะเปิดในบราวเซอร์ที่ตั้งไว้เป็น default (หากไม่เป็นเช่นนั้น ให้เปิดบราวเซอร์และลากไฟล์ดังกล่าวมาใส่ไว้)
คุณจะเห็นดังนี้ ซึ่งหน้าตานั้นดูค่อนข้างที่จะธรรมดาน่าเบื่อ

ขั้นที่2: การใส่สีเพิ่มเติม

คุณอาจจะเห็นว่ามีข้อความสีดำอยู่บนพื้นหลังสีขาวแต่ทั้งนี้ก็ขึ้นอยู่กับการอ่านค่าของบราวเซอร์ ดังนั้นวิธีที่ง่ายวิธีหนึ่งที่เราสามารถสร้างสไตล์ ให้กับหน้าเวบได้คือการใส่สี (ให้เปิดบราวเซอร์ทิ้งไว้เพราะเราจะต้องใช้อีกภายหลัง)
เราจะเริ่มต้นจาการใส่ style sheet ที่อยู่ในไฟล์เดียวกันกับ HTML ก่อน ภายหลังเราจะแยกไฟล์ HTML กับ CSS ออกจากกัน การแยกไฟล์ นั้นมีข้อดีเนื่องจากเราสามารถนำ style sheet เดียวกันมาใช้กับไฟล์ HTML ได้หลายไฟล์ได้ง่ายโดยที่เขียน style sheet เพียงแค่ครั้งเดียว แต่สำหรับขั้นตอนนี้ เราจะเก็บทุกอย่างไว้ในไฟล์เดียวกัน
เราต้องใส่ element <style>ในไฟล์ HTML style sheet style sheet จะอยู่ภายใน element นี้ ดังนั้นให้กลับไปยังหน้าต่างในโปรแกรม แก้ไขและเพิ่มบรรทัดต่อไปนี้ 5 บรรทัดในส่วน head ของไฟล์ HTML บรรทัดที่ใส่เพิ่มจะเป็นตัวสีแดง
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[etc.]
บรรทัดแรกบอกไว้ว่า style sheet ดังกล่าวเขียนขึ้นใน CSS (“text/css”) บรรทัดที่สองบอกว่าเราได้เพิ่ม style ลงไปใน element “body” บรรทัดที่สามเป็นตัวกำหนดสีของข้อความให้เป็นสีม่วงและบรรทัดถัดไปเป็นตัวกำหนดพื้นหลังให้เป็นสีประมาณเหลืองอมเขียว
Style sheets ใน CSS นั้นสร้างขึ้นมาจากกฎ กฏแต่ละกฏประกอบไปด้วยสามส่วนดังนี้
  1. selector (จากตัวอย่างคือ “body”) ซึ่งเป็นตัวบอกบราวเซอร์ว่าส่วนใดของเอกสารที่มีการนำกฏมาใช้
  2. property (จากตัวอย่างคือ 'color' และ 'background-color' ซึ่งเป็น property ทั้งสองตัว) ซึ่งเป็นตัวบอกว่าเราจะกำหนด layout ในรูปแบบไหน
  3. และ value ('purple' and '#d8da3d')ซึ่งเป็นตัวบอกค่า value ของ style property
เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)