ทำไมคุณควรเรียนรู้การเขียนโค้ด (เล็กน้อย): บทนำสู่ HTML & CSS

เผยแพร่แล้ว: 2021-08-15
หมายเหตุ: ก่อนทำการเปลี่ยนแปลงใดๆ กับรหัสร้านค้าของคุณ โปรดสำรองข้อมูลไซต์ของคุณเสมอ

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

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

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

ในตอนท้ายของบทความนี้ คุณควรรู้พื้นฐานของ HTML & CSS และรู้เพียงพอที่จะเริ่มซ่อมแซมร้านค้าของคุณเอง

ใช้เวลาสักครู่เพื่อเตรียมตัวให้พร้อมและเริ่มกันเลย!

HTML & CSS คืออะไร?

HTML ย่อมาจาก Hypertext Markup Language เป็นหนึ่งในภาษาพื้นฐานที่เก่าแก่และสำคัญที่สุดของเว็บ มีหน้าที่รับผิดชอบในการจัดโครงสร้างและนำเสนอเนื้อหาในหน้านี้!

CSS ย่อมาจาก Cascading Style Sheets มีหน้าที่รับผิดชอบในการจัดเตรียมรูปแบบและการจัดรูปแบบ HTML

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

เนื่องจากฉันเป็นแฟนตัวยงของบิล เมอร์เรย์ (ที่ไม่ใช่ใคร) เราจึงจะสร้างศาลเจ้าบนเว็บให้กับบิล

ก่อนอื่น มาเจาะลึกใน HTML และ CSS เพื่อทำความเข้าใจเกี่ยวกับพลังและความสามารถของพวกเขา

กายวิภาคของเว็บไซต์

เราเข้าใจได้ง่ายว่า HTML และ CSS ทำงานร่วมกันอย่างไรโดยเปรียบเทียบกับส่วนโครงสร้างของบ้าน

หลังกำแพงของบ้านทุกหลังมีโครงที่รับผิดชอบต่อโครงสร้าง คิดว่า HTML เหมือนกรอบบ้าน รับผิดชอบโครงสร้างของเว็บไซต์

CSS มีหน้าที่รับผิดชอบในสิ่งต่างๆ เช่น สีเพ้นท์ ขนาดของห้องอาหาร สีของพื้นไม้ และรูปทรงและรูปแบบของโต๊ะในห้องอาหาร

ลองดูมาร์กอัป HTML พื้นฐานและอธิบายทีละบรรทัด

ตัวอย่างมาร์กอัป HTML

Doctype

แท็ก <!DOCTYPE html> ช่วยให้เบราว์เซอร์รู้ว่าประเภทเอกสารที่เราต้องการใช้งานคือ HTML

ศีรษะ

ภายใน แท็ก <head> เป็นที่ที่เราจัดเก็บข้อมูลเมตาทั้งหมดของเอกสารของเรา ข้อมูลนี้รวมถึงสิ่งต่างๆ เช่น ชื่อ สไตล์ (CSS) คำอธิบาย และอื่นๆ ข้อมูลนี้ไม่แสดงต่อผู้ใช้ปลายทาง แต่เบราว์เซอร์ใช้เพื่อกำหนดว่าเอกสารควรมีชื่อว่าอะไร หรือควรใช้สไตล์ใดเมื่อแสดงต่อผู้ใช้ปลายทาง

โฆษณา

องค์ประกอบอื่นๆ ที่พบใน <head> ของหน้า HTML อาจรวมถึงข้อมูลผู้เขียน คำอธิบายหน้า หรือลิงก์ไปยังรูปภาพที่ใช้สำหรับไอคอน Fav (ไอคอนเล็กๆ ในแท็บเบราว์เซอร์)

ตัวอย่าง Favicon

ร่างกาย

แท็ก <body> มีมาร์กอัป (รหัส) ทั้งหมดสำหรับเว็บไซต์ นี่เป็นรหัสเดียวที่ผู้ใช้ปลายทางจะเห็นเมื่อดูไซต์ของเรา

เครื่องมือที่คุณต้องใช้ในการสร้างเว็บไซต์

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

หากคุณกำลังใช้พีซี ให้เปิดโปรแกรม NotePad หากคุณใช้ Apple Mac ให้เปิด TextEdit

เมื่อคุณเปิดโปรแกรมแก้ไขข้อความแล้ว โปรดติดตามฉันในขณะที่เราขยายมาร์กอัป HTML พื้นฐานด้านบน คัดลอก (Ctrl + C บน Windows / Cmd + C บน Mac) และวาง (Ctrl + p บน Windows / Cmd + P บน Mac) โค้ดต่อไปนี้ลงในโปรแกรมแก้ไขข้อความของคุณ

<!DOCTYPE html>
<html>
<head>
<title>ชื่อเพจของคุณ</title>
</head>
<body>
<h1>สวัสดีชาวโลก!</h1>
<p>นี่คือย่อหน้าแรกของเรา</p>
</body>
</html>

บันทึกไฟล์นี้บนเดสก์ท็อปและเปิดในเว็บเบราว์เซอร์ของคุณ ตอนนี้คุณควรเห็นโค้ดของคุณแปลหรือแสดงผลโดยเบราว์เซอร์ และควรมีลักษณะดังนี้:

ตัวอย่างการแสดงผลโค้ด

องค์ประกอบส่วนหัว (<h1>)

แท็ก <h1> จะใช้เมื่อคุณต้องการสร้างความน่าสนใจและคำจำกัดความให้กับข้อความบางข้อความ ในกรณีนี้ เราต้องการข้อความ “Hello World!” ให้ใหญ่และเด่นกว่าข้อความต่อมา

นอกกรอบ HTML มีแท็กส่วนหัวที่แตกต่างกันหกแท็กที่คุณสามารถใช้ได้: h1, h2, h3, h4, h5 และ h6

ตัวอย่างหัวเรื่อง HTML
ขนาดตัวอักษรจะเล็กลงทุกครั้งที่คุณทำ H1 จะใหญ่ที่สุดและ H6 จะเล็กที่สุด โดยค่าเริ่มต้น พวกมันจะมีระยะขอบ (หรือระยะห่างรอบๆ) เพื่อแยกองค์ประกอบออกจากองค์ประกอบอื่นๆ บนหน้าและเพื่อให้ผู้ใช้มีลำดับชั้นภาพ

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

ดูน่าเบื่อใช่มั้ย?

มาเพิ่ม สไตล์ ให้กับเพจของเราและเรียนรู้เพิ่มเติมเกี่ยวกับพลังที่แท้จริงของ CSS

ในการเพิ่มสไตล์ของเราเองให้กับองค์ประกอบ HTML เหล่านี้ เราจำเป็นต้องเพิ่ม แท็ก <style> ไว้ใน <head> ของเอกสารของเรา

แท็กนี้ล้อมรอบ CSS ทั้งหมดของเรา คิดว่าสิ่งที่อยู่ภายใน แท็ก <style> เป็นแนวทางในสไตล์ของเบราว์เซอร์

ภายใต้ แท็ก <title> ในบรรทัดใหม่ ให้เพิ่มแท็กสไตล์ดังนี้:

<title>ชื่อเพจของคุณ</title>

โฆษณา

<style>

 </style>

ภายในแท็กสไตล์เป็นที่ที่เราสามารถป้อนการประกาศทั้งหมดของเรา การประกาศ CSS ประกอบด้วย คุณสมบัติ ตามด้วย ค่า

ประกาศ CSS

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

<style>
h1 { สี: ฟ้า; }
</style>

ตอนนี้คุณน่าจะได้เห็นบางอย่างที่เป็นแบบนี้! คุณจะสังเกตเห็นว่า "Hello World!" ของเรา ข้อความตอนนี้เป็นสีน้ำเงิน ง่ายใช่มั้ย?

การปรับเปลี่ยน CSS เป็น H-Tag

ที่นั่นคุณทำได้แล้ว! คุณเปลี่ยนรูปแบบขององค์ประกอบ HTML โดยใช้ CSS สำเร็จแล้ว พวกเราสนุกกันรึยัง?

การเพิ่มรูปภาพในเพจของเรา

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

<img src= “https://www.fillmurray.com/400/500” >

หมายเหตุ: เพื่อการสาธิต ฉันกำลังใช้บริการตัวแทนรูปภาพชื่อ www.fillmurray.com คุณสามารถใช้รูปภาพในเครื่องคอมพิวเตอร์ของคุณได้หากต้องการ

วิธีอื่น (เคล็ดลับสำหรับมืออาชีพ) ในการคว้ารูปภาพจากเว็บไซต์: ค้นหารูปภาพบนเว็บไซต์ที่คุณต้องการใช้และคลิกขวาที่รูปภาพนั้น คลิก คัดลอกที่อยู่รูปภาพ และ URL ของรูปภาพนั้นจะอยู่ในคลิปบอร์ดของคุณ ถ้อยคำอาจแตกต่างกันเล็กน้อยขึ้นอยู่กับเบราว์เซอร์ของคุณ ฉันใช้ Google Chrome ฉันไม่แนะนำให้ใช้ hotlinking มากเกินไป แต่สำหรับการสาธิตนี้ไม่ใช่เรื่องใหญ่

วิธีบันทึกรูปภาพจากเว็บไซต์

คัดลอกและวางองค์ประกอบรูปภาพนี้แล้ววางไว้ใต้แท็กย่อหน้าของคุณ เพื่อให้บล็อกโค้ดทั้งหมดดูเหมือนของฉัน:

<!DOCTYPE html>
 <html>
 <head>
 <title> ชื่อหน้าของคุณ </title>
 <style>
 h1 { สี : ฟ้า;}
 </style>
 </head>
 <body>
 <h1> สวัสดีชาวโลก! </h1>
 <p> นี่คือย่อหน้าแรกของเรา </p>
 <img src= “ https://www.fillmurray.com/400/500 ” alt=”image of Bill Murray” >
 </body>
 </html>

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

วิธีเริ่มเข้ารหัสเว็บไซต์แรกของคุณ

ถ้าคุณได้ให้ความสนใจคุณสังเกตเห็นแอตทริบิวต์อื่นบน <img> แท็กปุ่ม ALT =” ภาพของบิลเมอร์เร” เนื่องจากเบราว์เซอร์ถอดรหัสรหัสและไม่สามารถมองเห็นผลลัพธ์ที่แสดงผลเช่นคุณและฉัน จึงจำเป็นต้องรู้บริบทของสิ่งที่แสดง

โฆษณา

โดยการเพิ่มแท็ก ALT (ข้อความแสดงแทน) ให้กับรูปภาพของเรา เราสามารถบอกเบราว์เซอร์ว่าเนื้อหาเกี่ยวกับรูปภาพของเรานั้นเกี่ยวกับอะไร

สิ่งนี้สำคัญมากสำหรับ SEO (การเพิ่มประสิทธิภาพกลไกค้นหา) และที่สำคัญกว่านั้น ข้อความนี้จะถูกอ่านออกเสียงสำหรับผู้ใช้ที่ตาบอดโดยใช้โปรแกรมอ่านหน้าจอ

แต่สิ่งที่เกี่ยวกับลิงค์?

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

มาพูดถึงองค์ประกอบสมอ ความมหัศจรรย์ที่แท้จริงขององค์ประกอบสมอคือแอตทริบิวต์ href มาสาธิตโครงสร้างของแท็ก anchor โดยการเพิ่มลิงก์ไปยังหน้า Wikipedia ของ Bill

<a href= “www.google.com” > อ่านรายการ Wikipedia ของเขา </a>

รหัสนี้บอกเบราว์เซอร์ว่าเมื่อผู้ใช้คลิกที่ข้อความ: “อ่านรายการ Wikipedia ของเขา” ให้นำไปที่ www.google.com

มาเพิ่มโค้ดนี้ใต้องค์ประกอบส่วนหัวของเรา เพื่อให้บล็อกโค้ดของเรามีลักษณะดังนี้:

<!DOCTYPE html>
 <html>
 <head>
 <title> ชื่อหน้าของคุณ </title>
 <style>
 h1 { สี : ฟ้า;}
 </style>
 </head>
 <body>
 <h1> สวัสดีชาวโลก! </h1>
 <a href= “https://en.wikipedia.org/wiki/Bill_Murray” > อ่านรายการ Wikipedia ของเขา </a>
 <p> นี่คือย่อหน้าแรกของเรา </p>
 <img src= “https://www.fillmurray.com/400/500” alt= “ภาพของบิล เมอร์เรย์” >
 </body>
 </html>

กดบันทึกและรีเฟรชเบราว์เซอร์และหวังว่าคุณจะดูเหมือนของฉัน

พื้นฐานการเข้ารหัส

ก้าวข้ามเส้นชัย

ฉันไปข้างหน้าและแสดงความเคารพเล็กน้อยต่อ Bill Murray และนี่คือผลลัพธ์สุดท้ายของฉัน ฉันจะอธิบายสไตล์เพิ่มเติมด้านล่าง

ได้โปรด...

พื้นฐานของ HTML และ CSS

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

โฆษณา

ข้ามไปที่ CSS เล็กๆ ที่ฉันต้องเพิ่มเพื่อให้เรามาไกลได้ขนาดนี้

จัดแต่งทรงผมร่างกาย:

ขั้นแรก ฉันได้เพิ่มไปที่เนื้อหาของหน้า:

ร่างกาย {
 พื้นหลังสี: #eee;
 ตระกูลแบบอักษร: Helvetica, Arial, sans-serif;
 จัดข้อความ: ศูนย์;
 ระยะขอบ: 25px;
 }

สีพื้นหลัง
ฉันตั้งค่าสีพื้นหลังของหน้าให้เป็นสีเทาอ่อนมากโดยใช้ค่าสีฐานสิบหก #eee คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับสิ่งเหล่านั้นและดูตัวอย่างได้ที่ MOZ

ตระกูลอักษร
ฉันต้องการเปลี่ยนแบบอักษรจากค่าเริ่มต้นของเบราว์เซอร์ Times New Roman สำหรับสิ่งนี้ ฉันเลือก Helvetica เป็นตัวเลือกแรกของฉัน (หากผู้ใช้ติดตั้งแบบอักษรนั้นในคอมพิวเตอร์ของตน) Arial เป็นตัวเลือกที่สองของฉัน (หากผู้ใช้ไม่มี Helvetica จะใช้ค่าเริ่มต้นเป็น Arial) และเป็นการสำรองข้อมูลขั้นสุดท้าย , ฟอนต์พื้นฐานซานเซอริฟ

text-align
ฉันเลือกให้ข้อความทั้งหมดอยู่ตรงกลางหน้าของฉัน มีตัวเลือกอื่นๆ อีกสองสามตัวสำหรับค่าต่างๆ เช่น ซ้ายและขวา แต่ฉันคิดว่าสำหรับค่านี้ ค่านี้จะดูอยู่ตรงกลางดีที่สุด

ระยะขอบ
ฉันเพิ่มระยะขอบเล็กน้อยให้กับเนื้อหาของเอกสารเพื่อให้มีพื้นที่หายใจ

จัดแต่งทรงผมภาพของเรา:

สุดท้ายนี้ ฉันแต่งหน้าสวยให้บิล เอ่อ ฉันหมายถึงองค์ประกอบภาพ

อิมเมจ {
 เส้นขอบ: 10px แข็ง #41bcd6;
 กล่องเงา: 2px 5px 5px #999;
 ช่องว่างภายใน: 10px;
 รัศมีเส้นขอบ: 5px;
 }

ฉันไม่ได้ทำอะไรมาก แต่ต้องการให้รูปภาพของ Bill ปรากฏบนเพจ

ชายแดน
ฉันเพิ่มเส้นขอบ 10px รอบรูปภาพ # 41bcd6 เป็นค่าสีฐานสิบหกอีกค่าหนึ่งที่ให้สีฟ้าอ่อน (ส่วนหนึ่งของธีมสี Steve Zissou ที่เป็นความลับของฉัน)

กล่องเงา
ฉันต้องการให้ภาพมีความรู้สึกสามมิติ ดังนั้นฉันจึงเพิ่มเงาแสงเข้าไป คุณสมบัติ box-shadow ยอมรับค่าพิกเซลและสีที่กำหนดความยาว ความเบลอ และสีของเงา หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการประกาศกล่องเงา Moz ได้แบ่งรายละเอียดสำหรับคุณที่นี่

การขยายความ
ในการทำให้รูปภาพดูเหมือนกรอบรูปมากขึ้น ฉันได้เพิ่มช่องว่างภายใน 10px ระหว่างมันกับเส้นขอบ

รัศมีชายแดน
เพื่อแสดงความสามารถที่เจ๋งกว่าของ CSS อย่างหนึ่ง ฉันจึงทำให้มุมของรูปภาพโค้งมนโดยใช้รัศมีเส้นขอบ เมื่อฉันเริ่มสร้างเว็บไซต์ ไม่มีอะไรที่เหมือนกับที่มีอยู่ และการสร้างมุมโค้งมนบนเว็บก็ค่อนข้างท้าทาย เรามาไกลตั้งแต่นั้นมา และตอนนี้มันค่อนข้างง่าย มันยอมรับค่าเช่น px หรือ ems และที่นี่ฉันเลือกเพียงปัดเศษให้พอสังเกตเห็นโดยตั้งค่าเป็น 5px

บทสรุป

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

ฉันหวังว่าคุณจะสามารถติดตามฉันและสร้างเว็บไซต์พื้นฐานแรกของคุณ ตอนนี้ถ้า Bill Murray ไม่ใช่นักแสดงคนโปรดของคุณ ฉันขอท้าให้คุณแก้ไขโค้ดนี้เพื่อแสดงนักแสดง วงดนตรีที่คุณชื่นชอบ หรืออะไรก็ได้ที่คุณต้องการ

หากคุณต้องการอ้างอิงรหัสนี้เมื่อใดก็ได้ โปรดกลับมาอ่านบทความนี้ หรือเพื่อความสะดวก ฉันได้ใส่ไว้ใน CodePen ที่นี่

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

โฆษณา

  • Code Academy: แนะนำหลักสูตร HTML/CSS ฟรี 100%
  • CSS Zen Garden: ตัวอย่างแรกบนเว็บที่ "คลิก" จริงๆ สำหรับฉัน เพื่อช่วยให้ฉันรู้ว่าคุณสามารถมีเว็บไซต์ที่มีลักษณะแตกต่างกันได้ 100 แห่ง ซึ่งทั้งหมดใช้มาร์กอัป HTML เดียวกัน
  • ภาพเคลื่อนไหว CSS
  • โมนาลิซ่าใช้ CSS . เท่านั้น
  • สุนัขฮัสกี้เคลื่อนไหวโดยใช้ CSS เท่านั้น
  • CodePen: CodePen เป็นเครื่องมือออนไลน์สำหรับการทดสอบสดและแสดงโค้ด HTML, CSS และ JavaScript ของคุณ

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