ดาวน์โหลดบทความดาวน์โหลดบทความX
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้
บทความนี้ถูกเข้าชม 66,541 ครั้ง
ถ้าอยากใส่รูปในหน้าเว็บ ที่คุณต้องการก็คือ HTML แต่ถ้าอยากตั้งรูปเป็นพื้นหลังของหน้าเว็บนั้น ก็ต้องใช้ทั้ง HTML และ CSS โดย HTML นั้นย่อมาจาก Hypertext Markup Language เป็นโค้ดที่ใช้บอกเบราว์เซอร์ว่าต้องแสดงอะไรในหน้าเว็บนั้นบ้าง [1] ส่วน CSS ย่อมาจาก Cascading Style Sheets ใช้แปลงโฉมหน้าตาเว็บที่คุณเห็น [2] ถ้าเลือกรูปพื้นหลังที่ต้องการได้แล้ว ก็เลื่อนไปอ่านวิธีการข้างล่างกันเลย
ขั้นตอน
สร้างโฟลเดอร์ไว้ใส่ไฟล์ HTML กับไฟล์รูปพื้นหลัง. ให้สร้างโฟลเดอร์ในคอม แล้วตั้งชื่อให้หาง่ายๆ- จะตั้งชื่ออะไรก็ได้ แต่เวลาใช้ HTML ขอให้ฝึกเป็นนิสัย ว่าต้องตั้งชื่อไฟล์กับโฟลเดอร์แบบสั้นกระชับได้ใจความ คำสองคำได้ยิ่งดี
ใส่รูปพื้นหลังที่จะใช้ในโฟลเดอร์ HTML. ใส่รูปที่จะใช้ทำพื้นหลังในโฟลเดอร์ HTML- ถ้าไม่ห่วงเรื่องเว็บจะเปิดในอุปกรณ์เก่าๆ เน็ตอืดๆ ไม่ได้ ก็ใช้รูปพื้นหลังแบบชัดๆ resolution สูงๆ ไปเลย ให้เลือกรูปสะอาดๆ สว่างๆ หรือเป็นแพทเทิร์นซ้ำๆ นี่แหละดีที่สุด เพราะข้อความด้านบนจะได้อ่านง่าย
- ถ้าไม่มีรูป ก็ลองไปดาวน์โหลดฟรีจากในเน็ต เสร็จแล้วเอามาใส่ในโฟลเดอร์ HTML เลย
สร้างไฟล์ HTML. เปิดโปรแกรม text editor ที่ถนัด แล้วสร้างไฟล์ใหม่ จากนั้นเซฟไฟล์เป็น index.html- จะใช้โปรแกรม text editor ไหนก็ได้ กระทั่งโปรแกรมที่มีมาในเครื่อง Windows อยู่แล้วอย่าง Notepad หรือ TextEdit ของ Mac OS X
- ถ้าอยากใช้ text editor สำหรับ HTML โดยเฉพาะ ให้คลิกที่นี่เลย เพื่อดาวน์โหลด Atom โปรแกรม text editor ที่ใช้ได้ทั้งใน Windows, Mac OS X และ Linux
- ถ้าคุณใช้ TextEdit ก่อนเขียนไฟล์ HTML ให้คลิกเมนู Format ก่อน แล้วคลิก Make Plain Text จะได้แน่ใจว่าไฟล์ HTML นั้นเปิดในเบราว์เซอร์ได้
- โปรแกรม Word processor อย่าง Microsoft Word ไม่ค่อยเหมาะใช้เขียน HTML เพราะจะมีอักขระพิเศษที่มองไม่เห็นโผล่มา ถ้าไปแปลงฟอร์แมต ไฟล์ HTML จะเจ๊งได้ ทำให้ไม่ขึ้นในเบราว์เซอร์
โฆษณา
copy/paste โค้ด HTML มาตรฐาน. เลือกแล้ว copy โค้ด HTML ต่อไปนี้ แล้วเอาไป paste ในไฟล์ index.html ที่เปิดอยู่<!DOCTYPE html><html><head><title>Page Title</title><style>body {background-image: url(" ");} </style></head><body></body></html>
ใส่ URL ของรูปพื้นหลัง. ในไฟล์ index.html ให้หาบรรทัดที่เขียนว่า background-image: url(" "); จากนั้นคลิกเคอร์เซอร์ที่กลางวงเล็บ แล้วพิมพ์ชื่อไฟล์รูปพื้นหลัง อย่าลืมพ่วงนามสกุลไฟล์ไปด้วยโฆษณา
- ถ้าพิมพ์ถูก จะหน้าตาประมาณนี้
background-image: url("background.png");
- เวลาคุณพิมพ์ชื่อไฟล์โดยไม่มี path หรือ URL ของไฟล์ เบราว์เซอร์จะไปตามหารูปที่ชื่อนี้ในโฟลเดอร์ของหน้าเว็บแทน แต่ถ้าไฟล์อยู่ในโฟลเดอร์อื่นของระบบไฟล์ ก็ต้องใส่ path เต็มๆ ของไฟล์นั้นแทน [3]
เปิดไฟล์ HTML ในเบราว์เซอร์. คลิกขวาไฟล์ index.html แล้วเปิดในเบราว์เซอร์ที่ต้องการ- พอเปิดเบราว์เซอร์แล้ว ถ้าไม่เจอรูป ให้เช็คว่าสะกดชื่อไฟล์รูปในหน้าต่าง text editor ของ index.html ถูกต้องแล้วหรือยัง
- พอเปิดเบราว์เซอร์แล้ว ถ้าเห็นเป็นโค้ด HTML แทนรูปพื้นหลัง แสดงว่าไฟล์ index.html ถูกเซฟเป็น rich text document ให้กลับไปแก้ไฟล์ HTML ในโปรแกรม text editor อื่นแทน
แก้ไขไฟล์ HTML. ในหน้าต่าง text editor ให้คลิกเคอร์เซอร์ตรงกลางระหว่างแท็ก <body> </body> แล้วพิมพ์ Hello world! จากนั้นรีเฟรชเบราว์เซอร์เพื่อดูว่าข้อความขึ้นทับรูปพื้นหลังไหมโฆษณา
รู้จักแท็ก HTML กับ CSS. โค้ด HTML นั้นประกอบด้วยแท็กเปิด (open tag) กับแท็กปิด (closed tag) แท็ก <body> คือแท็กเปิดของเนื้อหา (open body tag) ส่วย </body> คือแท็กปิดของเนื้อหา (closed body tag) ใส่แท็กเปิดตรงจุดไหนของหน้า HTML แล้วต้องใส่แท็กปิดด้วย ถึงจะแสดงผลได้
รู้จักแท็ก DOCTYPE. โค้ด HTML ที่ถูกต้อง ต้องเริ่มด้วย <!DOCTYPE html> เพื่อบอกเบราว์เซอร์ว่าไฟล์ HTML นี้คือไฟล์ HTML
แก้ไขไฟล์ HTML. ในหน้าต่าง text editor ให้คลิกเคอร์เซอร์ตรงกลางระหว่างแท็ก <body> </body> แล้วพิมพ์ Hello world! จากนั้นรีเฟรชเบราว์เซอร์เพื่อดูว่าข้อความขึ้นทับรูปพื้นหลังไหม
รู้จักแท็ก HTML กับ CSS. โค้ด HTML นั้นประกอบด้วยแท็กเปิด (open tag) กับแท็กปิด (closed tag) แท็ก <body> คือแท็กเปิดของเนื้อหา (open body tag) ส่วย </body> คือแท็กปิดของเนื้อหา (closed body tag) ใส่แท็กเปิดตรงจุดไหนของหน้า HTML แล้วต้องใส่แท็กปิดด้วย ถึงจะแสดงผลได้
รู้จัก title tag. แท็ก <title> คือข้อความที่จะขึ้นในแถบชื่อ (title) ของหน้าต่างเบราว์เซอร์ รวมถึงใน tab ของเบราว์เซอร์ด้วย
รู้จัก style tag. แท็ก <style> ใช้ระบุเนื้อหาที่เป็น CSS ทุกอย่างที่อยู่ตรงกลางระหว่างแท็ก <style> คือโค้ด CSS
รู้จัก body tag. ข้อความไหนก็ตามที่อยู่ระหว่างแท็ก <body> จะเป็นเนื้อหาตามที่คุณพิมพ์ เว้นแต่เป็นโค้ด HTML หรือ CSS
แก้ไขไฟล์ HTML. ในหน้าต่าง text editor ให้คลิกเคอร์เซอร์ตรงกลางระหว่างแท็ก <body> </body> แล้วพิมพ์ "Hello world!" จากนั้นรีเฟรชเบราว์เซอร์เพื่อดูว่าข้อความขึ้นทับรูปพื้นหลังไหมโฆษณา
รู้จักโค้ด CSS. ในโค้ด index.html โค้ด CSS ที่อยู่ตรงกลางระหว่างแท็ก <style> จะบอกเบราว์เซอร์ให้ใส่รูปพื้นหลังที่คุณกำหนดในแท็ก <body> ตอนโหลดหน้าเว็บ
ตรวจทานโค้ด CSS.
รู้จักโค้ด CSS ส่วนต่างๆ. CSS styles นั้นแบ่งออกเป็น 2 ส่วน คือ selector กับ declaration [4]- ในตัวอย่างของเรา body คือ selector ส่วน
background-image: url("background.png") คือ declaration- selector จะเป็นแท็ก HTML ไหนก็ได้
- declaration จะอยู่ระหว่างปีกกา { } เสมอ
รู้จัก CSS declaration. CSS declaration ประกอบด้วย 2 ส่วน คือ property กับ value ส่วน
background-image กลางปีกกา คือ property และ url("background.png") คือ value [5]- property ใช้อธิบายว่าส่วนไหนถูกกำหนดสไตล์บ้าง ส่วน value จะบอกว่า property ถูกกำหนดยังไง
- property กับ value จะแยกกันด้วย colon :
- CSS declaration ต้องปิดท้ายด้วย semicolons ; เสมอ
โฆษณา
ข้อมูลอ้างอิง
เกี่ยวกับวิกิฮาวนี้
นักเขียนในทีมวิกิฮาว
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 66,541 ครั้ง
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 66,541 ครั้ง
หมวดหมู่: คอมพิวเตอร์และอุปกรณ์อิเล็กทรอนิกส์
มีการเข้าถึงหน้านี้ 66,541 ครั้ง
บทความนี้เป็นประโยชน์กับคุณไหม
⚠️ Disclaimer:
Content from Wiki How ไท language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
โฆษณา
