Categories
CSS

เริ่มต้นด้วย 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, หรืออะไรก็ตามที่คุณชอบใช้) เริ่มจากหน้าที่ว่างและพิมพ์ ข้อความต่อไปนี้ลงไป

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 ในตัวอย่าง

Leave a Reply

Your email address will not be published. Required fields are marked *