home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> ระบบเครือข่าย >> อินเทอร์เน็ต

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

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

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

ข้อมูลเบื้องต้นเบื้องต้น

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

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

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

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

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

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

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

ตั้งค่าพื้นที่ทำงานของคุณ

เรียกใช้เบราว์เซอร์ที่คุณชื่นชอบและโหลดไฟล์ HTML โดยเลือก "ไฟล์ -> เปิด" หรือโดยการลากและวางไฟล์ในหน้าต่าง

เปิดทั้งไฟล์ HTML และ CSS ในโปรแกรมแก้ไขข้อความประเภทแผ่นจดบันทึกที่คุณชื่นชอบ

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

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

“ติด” หน้าต่างเบราว์เซอร์ของคุณที่ด้านหนึ่งของหน้าจอเพื่อครอบครองครึ่งหนึ่ง (ในแนวตั้ง)4 และวางหน้าต่างแผ่นจดบันทึกสองหน้าต่างไว้ที่อีกด้านหนึ่ง โดยหนึ่งอยู่ใต้อีกด้านหนึ่ง

หน่วยการสร้าง

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

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

HTML ให้คุณ "ทำเครื่องหมายว่าเนื้อหาแต่ละส่วนคืออะไร" โดยใช้ชุด "โค้ด" เฉพาะ สิ่งที่สำคัญที่สุดคือ:

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

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

<p>Standard Text Paragraph</p>

“

” ระบุว่า “สิ่งที่ตามมาคือย่อหน้า” และ “

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

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

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

เปลี่ยนแปลงและรีเฟรช

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

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

รีเฟรชเบราว์เซอร์ของคุณ (F5) แล้วคุณจะเห็นคำว่า HEADER, CONTENT และ FOOTER ปรากฏขึ้นด้านล่างอีกคำหนึ่ง เราเพิ่งสร้างกล่อง "div" อิสระที่มองไม่เห็นสามกล่อง แต่ละคำมีหนึ่งคำ

เพื่อให้สามารถกำหนดลักษณะที่ปรากฏผ่าน CSS เราได้กำหนดคีย์เวิร์ดให้กับแต่ละคีย์เวิร์ด นั่นคือ "เอกลักษณ์" ("id=name" ในโค้ด) ซึ่งสอดคล้องกับเนื้อหา ได้แก่ ส่วนหัว เนื้อหา และส่วนท้าย องค์ประกอบทั้งหมดในหน้าเว็บสามารถมีนามแฝงดังกล่าว ตั้งค่าเป็น "คลาส" หรือ "id" คลาสกำหนดนามแฝงสำหรับรายการที่ปรากฏหลายครั้งในหน้าเว็บเดียวกัน เช่น ย่อหน้า ลิงก์ ฯลฯ ID กำหนดนามแฝงสำหรับองค์ประกอบที่ปรากฏเพียงครั้งเดียวในแต่ละหน้า เช่น ชื่อหรือโลโก้ของเว็บไซต์

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

เนื้อหาจริง

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

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

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

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

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

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

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

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

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

คุณมีสไตล์ (.CSS)

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

<head>
 
</head>

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

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

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

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

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

เว็บไซต์จริง

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

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

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

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

กฎข้างต้นระบุว่าเราต้องการให้ไซต์ของเราครอบครองความกว้างทั้งหมดของหน้าต่างเบราว์เซอร์ (ความกว้าง:100%) และเราไม่ต้องการให้มีระยะห่างจากขอบของหน้าต่างเบราว์เซอร์ (ระยะขอบ:0) และไม่ ต้องการพื้นที่ว่างรอบๆ (padding:0).

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

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

ดำเนินการต่อโดยอัปเดต CSS “#header, #content, #footer” เป็นดังต่อไปนี้:

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

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

อัปเดต #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;
}

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

กฎพื้นหลังและสีจะระบุตามลำดับว่า "กล่อง div" ส่วนหัวและส่วนท้ายทั้งหมดจะมีสีอะไร และสีของข้อความใดๆ ที่อยู่ในนั้น “RGBA” กำหนดสีตามมาตรฐานการผสมสีแดง – เขียว – น้ำเงิน แต่ละสีสามารถมีค่าได้ตั้งแต่ 0 ถึง 255 โดยมีค่าสีแดง สีเขียว และสีน้ำเงินผสมกัน ทำให้สามารถแสดงสีใดก็ได้ ตัวเลขสุดท้ายสอดคล้องกับความโปร่งใส ดังนั้น 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%;
}

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

การจัดรูปแบบรูปภาพ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ดังนั้น กฎของเราควรกำหนดว่ารูปภาพใดๆ ที่มี .alignright คลาสที่แนบมาจะใช้พื้นที่ 46% ของความกว้างของหน้า บวกกับระยะขอบ 1% ในแต่ละด้าน บวกกับช่องว่างภายใน 1% ในแต่ละด้าน ทั้งหมดนี้รวมกันได้มากถึง 50% – เท่ากับครึ่งหนึ่งของความกว้างของหน้า ผลลัพธ์ควรมีลักษณะดังนี้:

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

หน้าถัดไป

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

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