คู่มือ HTML และ CSS สำหรับผู้เริ่มต้น

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

บทนำพื้นฐาน

นี่คือคู่มือ HTML และ CSS สำหรับผู้เริ่มต้น ที่จะแสดงวิธีสร้างไซต์ง่ายๆ ให้เร็วที่สุด ผลลัพธ์อาจไม่ "standards-compliant" (สอดคล้องมาตรฐาน) และคุณจะต้องอ่านต่อด้วยตัวเองหากต้องการปรับแต่งและขยายต่อ แตมันจะเป็นไซต์ และทำงาน "as it should" (อย่างควรจะเป็น) ในเบราว์เซอร์ส่วนใหญ่

เนื่องจากพื้นที่จำกัด เราจะไม่เจาะลึกทุกด้านของการพัฒนาและออกแบบเว็บ แทนที่จะเป็นเราจะพาคุณผ่านขั้นตอนจากศูนย์สู่เพจเว็บทำงานเต็มรูปแบบ อธิบายว่าทุกอย่างทำหน้าที่อะไรในกระบวนการ

สองไฟล์ที่จำเป็น

ไซต์สมัยใหม่ประกอบด้วยไฟล์หลายไฟล์ แตสองไฟล์ที่สำคัญที่สุดคือ ไฟล์ HTML และไฟล์ CSS ไฟล์ HTML กำหนดองค์ประกอบและโครงสร้างของหน้า ไฟล์ CSS กำหนดลักษณะที่ปรากฏขององค์ประกอบเหล่านั้น

ทั้งคู่เป็นไฟล์ข้อความธรรมดา โดยเฉพาะที่มีข้อความที่มีโครงสร้างเฉพาะ คุณไม่ต้องการโปรแกรมประเภทพิเศษเพื่อสร้างหรือปรับแต่งพวกมัน: text editor แบบ "simple" (ง่าย) จะทำได้ ด้วย "simple" เราหมายถึงแอปพลิเคชันสไตล์ notepad ทั่วไป ไม่ใช่อย่าง editor ของ LibreOffice หรือ Microsoft Word ที่อาจ "enrich" (ทำให้สมบูรณ์) ข้อความในทุกทาง

ขั้นตอนแรกคือสร้างโฟลเดอร์ใหม่บนเดสก์ท็อพพร้อมไฟล์ข้อความว่างสองไฟล์ภายใน ให้ชื่อหนึ่งว่า "index.html" และอีกอัน "style.css"

ตั้งค่าพื้นที่ทำงาน

รันเบราว์เซอร์โปรดและโหลดไฟล์ HTML ในมัน ไม่ว่าจะเลือก "File -> Open" หรือลากวางไฟล์ในหน้าต่าง

เปิดไฟล์ HTML และ CSS ทั้งคู่ใน text editor แบบ notepad ที่คุณชอบ

การมองเห็นหน้าต่างทั้งสามพร้อมกันเป็นวิธีที่สะดวกที่สุด ถ้าคุณไม่มีสองหน้าจอที่จะกระจาย พวกเราแนะนำจัดเรียงหน้าต่างเหมือนรูปด้านล่าง

"ติด" (Stick) หน้าต่างเบราว์เซอร์ไว้ด้านหนึ่งของหน้าจอ ครึ่งหนึ่ง (แนวตั้ง) และวางหน้าต่าง notepad สองอันอีกด้าน หนึ่งทับอีกหนึ่ง

Building Blocks (บล็อกสร้าง)

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

ยินดีด้วยที่เพิ่งตั้งค่าไซต์แรกของคุณ! และเราไม่ได้เล่นนี่ เนื่องจากไซต์แรกๆ บนอินเทอร์เน็ต ไม่ต่างมากในลักษณะที่ปรากฏเมื่อเทียบกับสิ่งที่คุณเพิ่งสร้าง สิ่งสำคัญในตอนนั้นคือเนื้อหาเอง

HTML ให้คุณ "mark up what each piece of content is" (ทำเครื่องหมายว่าแต่ละชิ้นของเนื้อหาคืออะไร) โดยใช้ชุด "codes" (โค้ด) เฉพาะ บางอันที่สำคัญที่สุดคือ:

• html: บ่งบอกว่าเป็นเอกสาร html ควรอยู่ต้นทางของทุกไฟล์ html
• body: เนื้อหาทั้งหมดที่คุณเห็นบนเบราว์เซอร์ ถูกล้อมรอบในแท็ก body นี้ มันแทนลักษณะภาพของเอกสาร html
• p: ย่อหน้าข้อความ
• img: รูปภาพ
• a href: ลิงก์ไปที่อยู่เว็บ
• div: ตั้ง "กล่อง" (box) รอบเนื้อหาชิ้นไหนก็ได้ ที่คุณแล้วสามารถ "style" (จัดสไตล์) ด้วย CSS

เพื่อ "define" (กำหนด) ชิ้นเนื้อหา มันมักต้องถูกล้อมรอบด้วยโค้ดเดียวกัน พร้อมความแตกต่างเล็กน้อยที่ต้นทางและปลายทาง ตัวอย่างเช่น ย่อหน้าข้อความถูกกำหนดว่า:

<p>Standard Text Paragraph</p>

"<p>" บ่งบอกว่า "สิ่งที่ตามมาคือย่อหน้า" และ "</p>" ว่า "ย่อหน้าจบที่นี่" โดยแทนที่ "p" ด้วย "div" ในทั้งสองกรณี คุณกำหนดกล่องล้อมรอบเนื้อหา แทนที่จะ "ทำเครื่องหมายว่าเป็นย่อหน้า"

โปรดทราบว่ามีข้อยกเว้น: องค์ประกอบอย่างรูปภาพ (img) และเส้นแบ่ง (hr) ไม่ต้องการ "closing code" (โค้ดปิด)

เปลี่ยนและ Refresh

แทนที่ทุกอย่างในไฟล์ HTML ของคุณด้วยสิ่งต่อไปนี้:

<html> <body> <div id="header">HEADER</div> <div id="content">CONTENT</div> <div id="footer">FOOTER</div> </body> </html>

Refresh เบราว์เซอร์ (F5) และคุณจะเห็นคำว่า HEADER, CONTENT, และ FOOTER ปรากฏต่อกันจากบนลงล่าง เราเพิ่งสร้าง "div" กล่องอะโนนิมัส (invisible, autonomous) สามอัน แต่ละอันมีคำหนึ่งคำ

เพื่อให้สามารถกำหนดลักษณะที่ปรากฏผ่าน CSS เราจัด keyword ให้แต่ละอัน หนึ่ง "identity" (คือ "id=name" ในโค้ด) ตรงกับเนื้อหาของมัน: header, content, และ footer ทุกองค์ประกอบในเว็บเพจสามารถมีอีเลียส (alias) ได้ ตั้งค่าเป็น "class" หรือ "id" Classes กำหนดอีเลียสสำหรับไอเทมที่ปรากฏหลายครั้งบนหน้าเว็บเดียวกัน เช่น ย่อหน้า ลิงก์ ฯลฯ IDs กำหนดอีเลียสสำหรับองค์ประกอบที่ปรากฏเพียงครั้งเดียวในแต่ละหน้า เช่น ชื่อหรือโลโก้ของไซต์

เนื้อหาจริง

ลบคำว่า "HEADER" ระหว่างโค้ด div — โดยไม่เปลี่ยนโครงสร้าง — และแทนที่ใส่ชื่อที่คุณต้องการสำหรับไซต์ของคุณ

ทำเช่นเดียวกับ "CONTENT" แตแทนที่จะใส่แค่ข้อความ ยังต้อง "mark" (ทำเครื่องหมาย) จุดเริ่มต้นและจุดสิ้นสุดของแต่ละย่อหน้าตามที่เห็นก่อนหน้า แทนที่ "CONTENT" ด้วยย่อหน้าข้อความสองสามย่อหน้า

ตอนนี้ถึงเวลาพูดถึงลิงก์ เพื่อแปลงวลีใดๆ ในข้อความของคุณเป็นลิงก์ โครงสร้างมันว่า:

<a href="ADDRESS">TEXT</a>

คุณสามารถ copy-paste นี้และแทนที่ "ADDRESS" ด้วย "สิ่งที่คุณต้องการลิงก์ชี้ไป" และ "TEXT" ด้วยวลีที่จะโชว์บนไซต์ของคุณ เราลิงก์วลีใน footer ไปที่เว็บไซต์ของเราด้วย:

<a href="https://www.maketecheasier.com">Make Tech Easier</a>

สุดท้าย แทนที่คำว่า "FOOTER" ด้วยชื่อของคุณ ประโยคเล็กๆ บ่งชี้ว่าใครออกแบบหรือเป็นเจ้าของไซต์ หรืออะไรก็ตามที่คุณชอบ

บันทึกการเปลี่ยนแปลงและ refresh เบราว์เซอร์เพื่อดูพวกมันที่นั่น

You've Got Style (.CSS)

องค์ประกอบแรกของหน้าเว็บใดๆ คือ head (หัว) ในมัน เรามักพบโค้ดที่กำหนดตัวตนของไซต์ ชื่อ ผู้สร้าง และภาษา รวมถึงเทคโนโลยี — นอกจาก HTML — ที่ใช้ในมัน นั่นคือที่ที่ลิงก์ไปยัง JavaScript และ CSS files ภายนอกส่วนใหญ่อาศัยอยู่ เพิ่มหนึ่งเข้าไปในไซต์ของคุณโดยแทรกสิ่งต่อไปนี้ที่จุดสูงสุดของไฟล์ HTML ของคุณ เพียงหลังแท็ก html:

<head> </head>

เพื่อให้สามารถจัดสไตล์องค์ประกอบของเว็บเพจด้วย CSS คุณจะต้องโหลดไฟล์ CSS จากภายใน HTML และนี่หมายถึงการรวมมันใน "head" ของคุณ สิ่งต่อไปนี้บ่งบอกว่าเพจ HTML จะ "link" (ลิงก์) ไปยังไฟล์ "stylesheet" (แผ่นสไตล์) ประเภท "text/css" ชื่อ "style.css":

<link rel="stylesheet" type="text/css" href="style.css">

คัดลอกและวางโค้ดของเรา พอดีกับที่คุณเห็น "ภายใน" head — นั่นคือ ใต้ "<head>" และเหนือ "</head>" บันทึกการเปลี่ยนแปลงและหันไปสนใจไฟล์ CSS ที่นั่น ใส่สิ่งต่อไปนี้:

body {} #header, #content, #footer {} #header, #footer {} #header {} #content {} #footer {} img {}

ไซต์จริง

CSS หรือ Cascading Style Sheets คือเพียงชุดกฎการแสดงผลที่ตรงกับองค์ประกอบเฉพาะของเว็บเพจ ด้วย CSS เราสามารถจัดสไตล์ได้ทั้ง "ที่ไหน" (where) และ "อย่างไร" (how) ทุกอย่างจะปรากฏบนเว็บเพจ

ในขั้นตอนก่อนหน้า เราแนะนำชุดกฎว่างสำหรับองค์ประกอบทั้งหมดบนเพจของเรา ตอนนี้ มาดูว่าจะเพิ่มพารามิเตอร์ให้พวกมันเพื่อกำหนดลักษณะที่ปรากฏได้อย่างไร

เริ่มกับ body ซึ่งรวมทุกอย่างบนเว็บไซต์ของคุณ ปรับแต่งมันดังนี้:

body { width: 100%; position: relative; margin: 0; padding: 0; }

กฎข้างต้นระบุว่าเราต้องการให้ไซต์ของเราใช้ความกว้างเต็มของหน้าต่างเบราว์เซอร์ (width: 100%) ว่าเราไม่ต้องการให้มันมีระยะห่างจากขอบหน้าต่างเบราว์เซอร์ (margin: 0) และไม่ต้องการช่องว่างเปล่ารอบๆ (padding: 0)

กฎทั้งหมดสำหรับองค์ประกอบควรล้อมรอบด้วยวงเล็บปีกกา และแต่ละกฎควรจบด้วย ";" เหมือนนี้:

#Element_ID { RULE 1; RULE 2; RULE 3; }

ต่อไป อัปเดต CSS "#header, #content, #footer" ของคุณเป็นดังนี้:

#header, #content, #footer { float: left; position: relative; }

ด้วยสิ่งนี้ คุณกำลังพูดว่าตำแหน่งของทั้งสามองค์ประกอบควรปฏิบัติตามกฎทั่วไปบางอย่าง: แต่ละอันควรเป็น "relative" (สัมพัทธ์) ต่ออันก่อนหน้า และ "follow" (ติดตาม) มัน (float: left) ไม่ว่าขนาด รูปร่าง ลักษณะที่ปรากฏ หรือปัจจัยอื่นๆ แต่ละอันจะ "push" (ผลัก) องค์ประกอบถัดไป และพวกมันจะไม่ทับซ้อนกัน

อัปเดต #header, #footer ด้วยสิ่งต่อไปนี้เพื่อให้เว็บเพจของคุณดูเหมือนไซต์จริงมากขึ้น:

#header, #footer { width: 100%; height: 100px; background: rgba(0,0,0,0.9); color: rgba(255,255,255,0.9); text-align: center; font-size: 12px; }

ข้างต้นกำหนดว่าเราต้องการให้ทั้ง header และ footer ของเว็บไซต์ของเรา กว้าง 100% สูง 100 พิกเซล และข้อความที่แสดงในพวกมันขนาด 3em และจัดกลาง

กฎ background และ color ระบุตามลำดับว่า สีของ "div box" ทั้ง header และ footer จะเป็นสีอะไร และสีของข้อความใดๆ ที่อยู่ในพวกมัน "RGBA" ตั้งสีตามมาตรฐานการผสมสี Red — Green — Blue แต่ละสีสามารถมีค่า 0 ถึง 255 การผสมค่า Red, Green, Blue ต่างๆ ทำให้แสดงสีใดๆ ได้ ตัวเลขตัวสุดท้ายตรงกับความโปร่งใส ดังนั้น RGBA(255,0,0,0.5) จะให้เราได้สีแดงโปร่งแสง ส่วน RGBA(50,50,255,1) จะให้สีฟ้าสว่างและ "แข็ง"

เสร็จสิ้นโดยโฟกัสที่เนื้อหาพื้นฐานของไซต์ กำหนดลักษณะที่ปรากฏว่า:

#content { width: 80%; background: rgba(255,255,255,0.9); color: rgba(0,0,0,0.9); margin: 0 10%; }

บันทึกการเปลี่ยนแปลงทั้งหมดอีกครั้ง และ refresh หน้าต่างเบราว์เซอร์เพื่อดูพวกมัน

การจัดสไตล์รูปภาพ

เพื่อเพิ่มรูปภาพในไซต์ของคุณ คุณต้องกลับไปที่ไฟล์ HTML ที่นั่น "ภายใน" (inside) content แตก่อนย่อหน้าแรก ใส่สิ่งต่อไปนี้:

<img src="/PATH/FILE.JPG" alt="TEXT">

ที่ "PATH" และ "FILE.JPG" คือ "ตำแหน่ง" และชื่อไฟล์ของรูปภาพใดๆ ที่มีอยู่ออนไลน์หรือในเครื่อง และ "TEXT" คือคำอธิบายว่ามันแทนอะไร เพื่อวัตถุประสงค์การเข้าถึง (accessibility)

หากคุณลองบันทึกและตรวจสอบการเปลี่ยนแปลงหลังเพิ่มสิ่งนี้ คุณจะพบว่าไซต์ของคุณบิดเบี้ยว ปัญหาจะแก้ไขได้เมื่อคุณสร้างกฎ CSS ว่ารูปภาพควรแสดงบนเว็บไซต์ของคุณอย่างไร

กลับไปที่ไฟล์ CSS และประกาศว่าคุณต้องการให้รูปภาพทั้งหมด (img) จัดชิดซ้าย ตามกระแสขององค์ประกอบอื่นๆ (float: left และ position: relative)

เพื่อไม่ให้เกินขอบหน้า ระบุว่าคุณต้องการให้ความกว้างของพวกมันเป็นสูงสุดของหน้าเอง (width: 100%) เพื่อไม่ให้รูปภาพแตะข้อความ ให้เพิ่ม vertical margin ที่บนและล่าง ผลลัพธ์ควรดูเหมือนนี้:

img { float: left; position: relative; width: 100%; margin: 5px 0; padding: 0; }

เสร็จสิ้นโดยเพิ่มรูปภาพอีกอัน ครั้งนี้จัดชิดซ้ายหรือขวา เหมือนเดิม คุณควรกลับไปที่โค้ด HTML ก่อน และวางลิงก์ไปรูปภาพที่นั่น ตามที่เห็นก่อนหน้า ความแตกต่างคือ คุณจะต้องเพิ่ม "class" ตัวระบุตัวตนให้กับองค์ประกอบ แล้วคุณจะระบุผ่าน CSS กฎการแสดงผลบนมันและองค์ประกอบอื่นๆ ที่ class เดียวกันถูก "attach" (แนบ)

เราตั้งชื่อ class ว่า "alignright" เนื่องจากเราต้องการให้วัตถุใดๆ ที่มันถูกแนบ ถูกแสดงด้านขวาของหน้า

ลองสร้างโค้ดด้วยตัวเอง เพิ่ม .alignright {} class ใน "style.css" ของคุณ และสร้างกฎที่ควรจัดสไตล์มัน กฎ CSS ควรระบุว่าเราต้องการให้องค์ประกต์ลอยไปขวาของหน้า และกว้าง 46% (width: 46%) เราไม่ต้องการให้รูปภาพแตะข้อความ ดังนั้นเราควรเพิ่มช่องว่าง 2% รอบๆ แบ่งเป็น 1% margin (ระยะห่างจากองค์ประกอบอื่น) และ 1% padding (ช่องว่างเพิ่มเติมรอบองค์ประกอบ)

ดังนั้น กฎของเราควรกำหนดว่า รูปภาพใดๆ ที่มี class .alignright แนบมาจะใช้ความกว้าง 46% ของหน้า บวก margin 1% ทั้งสองข้าง บวก padding 1% ทั้งสองข้าง รวมเป็น 50% — ครึ่งหนึ่งของความกว้างหน้า ผลลัพธ์ควรดูประมาณนี้:

img.alignright { float: right; width: 46%; margin: 1%; padding: 1%; }

หน้าถัดไป

เพจเว็บแรกของคุณพร้อมและทำงานเต็มที่แล้ว ด้วยการเรียนรู้เพิ่มเติมเกี่ยวกับ HTML และ CSS ทั้งคู่ คุณสามารถทำให้เนื้อหา豐富ขึ้น เพิ่มองค์ประกอบใหม่ และปรับปรุงลักษณะที่ปรากฏ ขั้นตอนต่อไป ลอง copy และ rename ไฟล์ HTML ปรับเปลี่ยนเนื้อหา และลิงก์แต่ละหน้าใหม่เข้ากับกัน

มันดูไม่ยากใช่ไหม? ยินดีต้อนรับสู่การพัฒนาเว็บ: โดยการ copy, modify และ link หน้าต่างๆ ผ่านลิงก์ คุณจะสร้างไซต์หลายหน้า "proper" (เหมาะสม) แรกของคุณได้!