วันอังคารที่ 21 กันยายน พ.ศ. 2553

ขั้นที่ 1: การเขียน HTML
สำหรับบทความแนะนำนี้ ขอแนะนำให้ใช้เครื่องมือที่ใช้ง่ายที่สุดเช่น Notepad (สำหรับ Windows) TextEdit (สำหรับ Mac) หรือ KEdit (สำหรับ KDE) เมื่อคุณเข้าใจหลักการแล้วคุณอาจสามารถเปลี่ยนมาใช้เครื่องมือขั้นสูงกว่าได้หรือใช้โปรแกรมที่นิยมใช้กันทั่วไปเช่น Style Master Dreamweaver หรือ GoLive

อย่าใช้โปรแกรมเขียนเช่น Microsoft Word หรือ OpenOffice เนื่องจากโปรแกรมเหล่านี้จะสร้างไฟล์ที่ เวบบราวเซอร์ไม่สามารถอ่านได้ สำหรับ HTML และ CSS นั้นเราต้องการไฟล์ข้อความที่มีความเรียบง่าย

ขั้นแรกก็คือให้เปิดโปรแกรมสร้างข้อความ (Notepad, TextEdit, KEdit, หรืออะไรก็ตามที่คุณชอบใช้) เริ่มจากหน้าที่ว่างและพิมพ์ ข้อความต่อไปนี้ลงไป




My first styled page








My first styled page



Welcome to my styled page!

It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere…

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


Made 5 April 2004

by myself.




ความจริงแล้วคุณไม่จำเป็นต้องพิมพ์เพียงแค่ก๊อปปี้ข้อความบนหน้านี้และนำไปวางไว้ในโปรแกรม

(ถ้าคุณใช้โปรแกรม TextEdit สำหรับ Mac อย่าลืมกำหนดใน TextEdit ให้เป็นแค่ข้อความธรรมดาเท่านั้นโดยไปตรงเมนู Format และ เลือก "สร้างข้อความธรรมดา")

บรรทัดแรกของไฟล์ HTML ข้างต้นเป็นการบอกบราวเซอร์ว่าเป็น HTML ประเภทใด (DOCTYPE หมายถึง DOCument TYPE) ในกรณี นี้คือ HTML version 4.01

คำที่อยู่ภายใน < และ > เรียกว่า tags ดังที่คุณได้เห็นว่า เอกสารจะอยู่ภายใน และ tags ระหว่าง และ จะมีข้อมูลหลายรูปแบบที่ไม่แสดงผลบนหน้าจอ ส่วนใหญ่แล้วจะประกอบไปด้วย title ของเอกสารแต่ภายหลังเราจะเพิ่ม CSS style sheet ลงไปในส่วนนี้เช่นกัน

ส่วน นั้นจะเป็นส่วนที่วางข้อความจริงๆในเอกสาร ตามหลักการแล้วทุกอย่างที่อยู่ใน body tag จะถูกแสดงบนบราวเซอร์ยกเว้น ข้อความที่อยู่ระหว่าง ซึ่งไว้ใช้ใส่คอมเมนต์สำหรับเราเอง ซึ่งบราวเซอร์จะไม่อ่านค่าดังกล่าว

จาก tag ในตัวอย่าง

แนะนำการเขียน html

ขั้นที่4: การเพิ่ม navigation bar
รายชื่อในส่วนบนของหน้า HTML ตั้งใจจะใช้เป็นเมนู navigation เวบไซด์หลายเวบมีการใช้เมนูวางเรียงไว้ด้านบนหรือไว้ด้านข้างของ หน้าและหน้านี้ก็ควรมีเช่นกันซึ่งเราจะวางไว้ด้านซ้ายเนื่องจากดูแล้วน่าแล้วน่าสนใจกว่าวางไว้ด้านบน

เมนูดังกล่าวนี้มีอยู่ในหน้า HTML แล้วโดยใช้
    แสดงรายการไว้ด้านบนลิงค์ยังไม่สามารถใช้ได้เนื่องเวบไซด์ของเราในขณะนี้มี เพียงหน้าเดียวแต่ในขณะนี้เรื่องนั้นไม่สำคัญ แต่แน่นอนว่าสำหรับเวบไซด์จริงๆแล้วไม่ควรจะมีลิงค์ที่ใช้งานไม่ได้


    ดังนั้นเราจะต้องย้ายรายชื่อลงมาอยู่ด้านซ้ายและย้ายข้อความที่เหลือทั้งหมดมาทางด้านขวาเล็กน้อยเพื่อให้มีพื้นที่ CSS property ที่เราใช้คือ 'padding-left' (สำหรับย้ายข้อความในส่วน body) และ 'position' 'left' และ 'top' (เพื่อย้ายเมนู)

    ยังมีวิธีอื่นๆที่สามารถทำได้หากคุณดูในส่วน “column” หรือ “layout” ในหน้า Learning CSS (เรียนรู้ CSS)คุณจะเจอเทมเพลตที่ใช้ได้เลยหลายอันแต่ อันนี้ก็ใช้ได้เหมาะสมกับจุดประสงค์ของเรา

    ในหน้าโปรแกรมแก้ไข ให้เพิ่มบรรทัดต่อไปนี้เขาไปในไฟล์ HTML (lines 7 and 12-16)




    My first styled page




    [etc.]
    หากคุณเซฟไฟล์อีกครั้งและ reload ในบราวเซอร์ทีนี้คุณก็จะได้รายชื่อลิงค์ที่อยู่ทางด้านซ้ายของข้อความหลัก ซึ่งตอนนี้หน้าเวบนี้ก็ ดูน่าสนใจขึ้น



    ข้อความหลักย้ายไปอยู่ที่ด้านขวาและตอนนี้รายชื่อลิงค์ย้ายไปอยู่ที่ด้านซ้ายแล้วแทนที่จะอยู่ด้านบน

    การใส่ 'position: absolute' เป็นการบอกว่า element ul ถูกวางไว้แยกออกจากข้อความที่มาก่อนหรือหลังภายในเอกสารและการใช้ 'left' และ 'top' ก็เพื่อแสดงให้รู้ว่าอยู่ในตำแหน่งใด ในกรณีนี้ คือ 2em จากด้านบนและ 1em จากด้านซ้ายของหน้าต่าง

    '2em' หมายถึง 2 เท่าของขนาดฟอนท์ปัจจุบันเช่น ถ้าเมนูใช้ฟอนท์ขนาด 12 point ดังนั้น '2em' จะเท่ากับ 24 point 'em' เป็นหน่วย การวัดประเภทหนึ่งที่มีประโยชน์ในการใช้ CSS เนื่องจากสามารถนำมาใช้กับฟอนท์ที่ผู่อ่านมักจะใช้ได้โดยอัตโนมัติ บราวเซอร์ส่วนใหญ่ มีเมนูที่ไว้เพิ่มหรือลดขนาดของฟอนท์คุณจะเห็นได้ว่าขนาดของเมนูจะเพิ่มเมื่อขนาดของฟอนท์เพิ่มซึ่งจะไม่เป็นไปตามนั้นหากในกรณี ที่เราใช้หน่วยเป็นพิกเซลแทน

    ขั้นที่ 5: การใส่สไตล์ให้กับลิงค์
    navigation เมนูนั้นยังดูหน้าตาเหมือนรายการมากกว่าเมนู ดังนั้นเราจะใส่สไตล์เพิ่มเข้าไป เราจะเอาจุด(bullet)ที่ใช้แสดงรายการออกไปก่อน และย้ายรายการแต่ละรายการออกไปทางด้านซ้ายในตำแหน่งเดิมที่ใช้แสดงจุดในแต่ละรายการ นอกจากนั้นเราก็จะใส่พื้นหลังสีขาวและสี่เหลี่ยมสีดำ ให้แต่ละรายการ (ทำไมน่ะหรือ ไม่มีเหตุผลเฉพาะหรอกเพียงแต่ว่าเราสามารถทำได้)

    นอกจากนี้เรายังไม่ได้ระบุวว่าสีที่ใช้ลิงค์เป็นสีอะไร ดังนั้นให้เพิ่มลงไปด้วยสีฟ้าใช้สำหรับลิงค์ที่ผู้อ่านยังมองไม่เห็นส่วนสีม่วงใช้สำหรับลิงค์ ที่ผู้อ่านคลิกเข้าไปดูแล้ว (lines 13-15 and 23-33)




    My first styled page




    [etc.]
    โดยทั่วไปแล้ว บราวเซอร์จะแสดงลิงค์ด้วยการขีดเส้นใต้และใส่สี โดยปกติสีที่ใช้จะเหมือนกับสีที่ระบุไว้ในที่นี้ คือ สีฟ้าไว้สำหรับลิงค์ไปยังหน้า ที่คุณยังไม่ได้เข้าไปดู (หรือที่เคยเข้าไปดูเมื่อนานมาแล้ว) สีม่วงไว้ใช้สำหรับหน้าที่เข้าไปดูมาแล้ว

    ใน HTML การสร้างลิงค์ทำได้โดยใช้ element ดังนั้นเวลาที่เรระบุสีเราจะต้องใส่สไตล์ให้กับ “a” เพื่อแยกความแตกต่างระหว่างลิงค์ที่เยี่ยม ชมแล้วกับลิงค์ที่ยังไม่ได้เยี่ยมชม CSS ได้กำหนดให้มี “pseudo-classes” (:link และ :visited) ที่เรียกว่า “pseudo-classes” เพื่อแยกแยะความ แตกต่างระหว่าง class attributes, ที่แสดงบน HTML โดยตรงตัวอย่างเช่น class="navbar" ที่แสดงไว้ในตัวอย่างข้างต้น

แนะนำการเขียน html

ขั้นที่6: การเพิ่มเส้นแบ่งในแนวนอน
ส่วนที่เราจะเพิ่มเป็นส่วนสุดท้ายใน style sheet คือการใส่เส้นแบ่งในแนวนอนเพื่อแยกข้อความออกจากส่วนของลายเซ็นต์ในส่วนท้าย เราจะใช้ 'border-top' เพื่อเพิ่มเส้นแบ่งแบบจุดในส่วนบนของ element
(lines 34-37)




My first styled page




[etc.]
ตอนนี้การใส่สไตล์ของเราก็เสร็จสมบูรณ์ต่อไปเราจะมาดูว่าเราจะแยก style sheet ไว้อีกไฟล์ได้อย่างไรเพื่อที่ว่าหน้าอื่นสามารถใช้สไตล์ร่วมกันได้

ขั้นที่ 7: การใส่ style sheet แยกไฟล์
ตอนนี้เรามีไฟล์ HTML ที่มี style sheet ฝังอยู่แต่หาก เวบไซด์ของเรามีเนื้อหาเพิ่มมากขึ้นเราอาจจะต้องการให้หน้าแต่ละหน้าสามารถใช้สไตล์ร่วม กันได้ ซึ่งมีวิธีที่ดีกว่าการก๊อปปี้ style sheet ลงไปในทุกๆหน้า นั่นก็คือหากเราใส่ style sheet แยกไฟล์ไว้ทุกๆหน้าเวบก็สามารถเรียกสไตล์มาใช้ ได้โดยตรง

ในการสร้างไฟล์สำหรับ style sheet เราต้องสร้างไฟล์ text เปล่าขึ้นมาอีกหนึ่งไฟล์ คุณสามารถทำได้โดยเลือก “New” จากเมนู File ในโปรแกรม แก้ไขเพื่อสร้างหน้าเปล่าขึ้นมาหนึ่งหน้า (ถ้าคุณใช้โปรแกรม TextEdit อย่าลืมว่าต้องแก้ไขให้เป็นข้อความธรรมดาก่อนโดยเลือกได้จากเมนู Format)

หลังจากนั้นให้ตัดและวางทุกส่วนที่อยู่ใน element เอง เพราะเป็นส่วนที่ใช้กับ HTML ไม่ใช่ CSS ในหน้าใหม่ของโปรแกรมแก้ไข ควรจะมี style sheet ที่ครบสมบูรณ์ดังนี้

body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
ให้เลือก “Save As…” จากเมนู File ต้องแน่ใจว่าได้เซฟไว้อยู่ในส่วนหรือแฟ้มเดียวกันกับไฟล์ mypage.html และให้เซฟ style sheet เป็น “mystyle.css”

ตอนนี้ให้กลับไปยังหน้าที่มีโคด HTML ให้เอาทุกอย่างออกเริ่มตั้งแต่ tag และแทนที่ด้วย element ดังนี้




My first styled page




[etc.]
ส่วนนี้จะเป็นส่วนที่บอกบราวเซอร์ว่า style sheet จะอยู่ในไฟล์ที่ชื่อว่า “mystyle.css” และเนื่องจากไม่ได้มีการบอกถึงส่วนที่เก็บไฟล์ บราวเซอร์จะดูจากส่วน ที่เก็บไฟล์เดียวกันกับไฟล์ HTML

หากคุณเซฟไฟล์ HTML และโหลดใหม่ในบราวเซอร์ คุณอาจจะมองไม่เห็นถึงความแตกต่างเพราะหน้าเวบยังคงมีสไตล์เดิมแต่ตอนนี้สไตล์จะมาก จากไฟล์ที่อยู่ข้างนอก

แนะนำการเขียน html



ขั้นที่ 7: การใส่ style sheet แยกไฟล์
ตอนนี้เรามีไฟล์ HTML ที่มี style sheet ฝังอยู่แต่หาก เวบไซด์ของเรามีเนื้อหาเพิ่มมากขึ้นเราอาจจะต้องการให้หน้าแต่ละหน้าสามารถใช้สไตล์ร่วม กันได้ ซึ่งมีวิธีที่ดีกว่าการก๊อปปี้ style sheet ลงไปในทุกๆหน้า นั่นก็คือหากเราใส่ style sheet แยกไฟล์ไว้ทุกๆหน้าเวบก็สามารถเรียกสไตล์มาใช้ ได้โดยตรง

ในการสร้างไฟล์สำหรับ style sheet เราต้องสร้างไฟล์ text เปล่าขึ้นมาอีกหนึ่งไฟล์ คุณสามารถทำได้โดยเลือก “New” จากเมนู File ในโปรแกรม แก้ไขเพื่อสร้างหน้าเปล่าขึ้นมาหนึ่งหน้า (ถ้าคุณใช้โปรแกรม TextEdit อย่าลืมว่าต้องแก้ไขให้เป็นข้อความธรรมดาก่อนโดยเลือกได้จากเมนู Format)

หลังจากนั้นให้ตัดและวางทุกส่วนที่อยู่ใน element เอง เพราะเป็นส่วนที่ใช้กับ HTML ไม่ใช่ CSS ในหน้าใหม่ของโปรแกรมแก้ไข ควรจะมี style sheet ที่ครบสมบูรณ์ดังนี้

body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
ให้เลือก “Save As…” จากเมนู File ต้องแน่ใจว่าได้เซฟไว้อยู่ในส่วนหรือแฟ้มเดียวกันกับไฟล์ mypage.html และให้เซฟ style sheet เป็น “mystyle.css”

ตอนนี้ให้กลับไปยังหน้าที่มีโคด HTML ให้เอาทุกอย่างออกเริ่มตั้งแต่ tag และแทนที่ด้วย element ดังนี้




My first styled page




[etc.]
ส่วนนี้จะเป็นส่วนที่บอกบราวเซอร์ว่า style sheet จะอยู่ในไฟล์ที่ชื่อว่า “mystyle.css” และเนื่องจากไม่ได้มีการบอกถึงส่วนที่เก็บไฟล์ บราวเซอร์จะดูจากส่วน ที่เก็บไฟล์เดียวกันกับไฟล์ HTML