front end
1.0.0
การเตรียมตัว : สำหรับเนื้อหานี้ นักเรียนจะต้องมีคอมพิวเตอร์ที่เชื่อมต่ออินเทอร์เน็ต, เว็บเบราว์เซอร์ที่รองรับ HTML 5 (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera ฯลฯ) โปรแกรมแก้ไขข้อความ (VSCode ฯลฯ) .) และแพลตฟอร์มโฮสติ้ง (ฟรีหรือจ่ายเงิน)
เมื่อเราพูดถึงเว็บไซต์ เราจะสังเกตได้ว่าคำนี้เป็นการรวมคำสองคำในภาษาอังกฤษเข้าด้วยกัน คือ web ซึ่งหมายถึงเครือข่ายและหมายถึงเวิลด์ไวด์เว็บ และคำว่า site ซึ่งหมายถึงสถานที่ ในแง่นี้ เว็บไซต์หรือไซต์เป็นสถานที่ที่สามารถเข้าถึงได้บนอินเทอร์เน็ต ผ่านทาง URL และมีชุดของเพจที่ตั้งโปรแกรมไว้ในภาษาใดภาษาหนึ่ง
เพื่อให้เข้าใจหัวข้อนี้ได้ดีขึ้น ลองดูตัวอย่าง: เมื่อคุณพิมพ์ที่อยู่ blog.betrybe.com ลงในอินเทอร์เน็ตเบราว์เซอร์ของคุณเพื่อเข้าถึงบล็อกของ Trybe เบราว์เซอร์จะค้นหาว่าเว็บไซต์นี้อยู่ที่ใดบนอินเทอร์เน็ต จากนั้นจะมีการร้องขอไปยังเซิร์ฟเวอร์
ไฟล์ข้อความ รูปภาพ และสไตล์ทั้งหมดที่ประกอบเป็นเว็บเพจจะถูกจัดเก็บไว้ในเซิร์ฟเวอร์นี้ จากนั้น เซิร์ฟเวอร์จะส่งคืนเอกสารชุดนี้ไปยังเบราว์เซอร์ เพื่อให้สามารถแสดงเนื้อหาตามที่คุณเห็นบนหน้าจอของคุณ
เว็บไซต์สามารถนำเสนอรูปแบบและเนื้อหาที่แตกต่างกันได้ ตัวเลือกบางส่วนได้แก่: ร้านค้าเสมือนจริง เช่น Mercado Livre และ Amazon ซึ่งสามารถซื้อและขายผลิตภัณฑ์ได้ เว็บไซต์และพอร์ตโฟลิโอของสถาบันที่ใช้โดยบริษัทและบุคคลเพื่อนำเสนอตัวเองและให้ลูกค้าค้นพบ และบล็อกต่างๆ เช่นเดียวกับที่คุณอ่าน
นอกจากนี้ เว็บไซต์ยังสามารถจัดประเภทเป็นแบบคงที่หรือไดนามิกได้ โดยทั่วไปเว็บไซต์แบบคงที่ได้รับการพัฒนาโดยใช้ HTML, CSS และ JavaScript เนื้อหาง่ายกว่าและไม่มีการโต้ตอบกับฐานข้อมูล
เว็บไซต์แบบไดนามิก นอกเหนือจากการใช้ประโยชน์จาก HTML, CSS และ JavaScript แล้ว ยังใช้ภาษาการเขียนโปรแกรมที่มีประสิทธิภาพมากกว่า เช่น PHP ไซต์เหล่านี้มีฟังก์ชันการทำงานที่เชื่อมต่อกับฐานข้อมูล ด้วยวิธีนี้ แต่ละหน้าที่เข้าถึงสามารถนำข้อมูลเฉพาะมาได้
ด้วย การออกแบบเว็บไซต์ คุณต้องสังเกตความสำคัญของอินเทอร์เฟซสำหรับการพัฒนาเว็บไซต์ วิวัฒนาการของเทคโนโลยีที่ใช้ในการสร้างหน้าเว็บที่หลากหลาย (เว็บ 1.0, เว็บ 2.0, เว็บ 3.0 และเว็บ 4.0) วิวัฒนาการของอินเทอร์เฟซ (ความสวยงาม การทำงาน และโครงสร้าง ).
ดังนั้นคุณต้องเข้าใจถึงความสำคัญของการสร้างอินเทอร์เฟซที่หลากหลายสำหรับการสร้างเว็บไซต์โดยมุ่งเป้าไปที่การนำทางและประสบการณ์การใช้งานที่ดีที่สุดสำหรับผู้ใช้ปลายทาง โดยรู้จักเทคโนโลยีบางอย่างที่ใช้ในอดีตเพื่อสร้างเว็บไซต์ออนไลน์ จากวิสัยทัศน์นี้ ให้สังเกตแนวโน้มของตลาดเก่า รวมถึงดูแนวโน้มใหม่ในการพัฒนาอินเทอร์เฟซ
จานสี:
การไล่ระดับสี:
โดยพื้นฐานแล้ว การพัฒนาเว็บหมายถึงการเขียนโค้ดเพจสำหรับอินเทอร์เน็ต อย่างไรก็ตาม งานนี้นอกเหนือไปจากการใช้ HTML และ CSS ซึ่งเป็นเครื่องมือพื้นฐานสำหรับการสร้างเพจแบบคงที่ ซึ่งนำเสนอข้อมูลที่สามารถแก้ไขได้โดยการแก้ไขซอร์สโค้ดเท่านั้น
ในทางกลับกัน หน้าเว็บบนเว็บไซต์อาจเป็นไดนามิกได้ ซึ่งหมายความว่าเนื้อหาที่แสดงสามารถเปลี่ยนแปลงได้โดยไม่รบกวนซอร์สโค้ด เพื่อให้สิ่งนี้เป็นไปได้ ส่วนไดนามิกของเว็บไซต์จะถูกจัดเก็บไว้ในฐานข้อมูล ซึ่งเข้าถึงได้เมื่อใดก็ตามที่จำเป็นต้องดึงเนื้อหานี้
คุณสมบัตินี้ช่วยให้สามารถพัฒนาแอปพลิเคชันที่ซับซ้อนได้ ซึ่งใช้กฎเกณฑ์ทางธุรกิจ, API — Application Programming Interface — และอื่นๆ อีกมากมาย ดังนั้นจึงมีการแบ่งกิจกรรมที่เน้นไปที่การพัฒนาเว็บ การเขียนโค้ดฝั่งไคลเอ็นต์ (ส่วนหน้า) และการเขียนโค้ดฝั่งเซิร์ฟเวอร์ (ส่วนหลัง)
ตัวอย่าง API ที่มีโครงสร้างที่ใช้มากที่สุดในปัจจุบันสำหรับเว็บและแอปพลิเคชันมือถือ REST API เรียกอีกอย่างว่า RESTful API
แอปพลิเคชันเว็บคือจำนวนไซต์บนเว็บที่เพิ่มขึ้น กล่าวคือ แอปพลิเคชันเหล่านี้เลียนแบบแอปพลิเคชันเดสก์ท็อปมากกว่าเอกสารแบบเดิมและลิงก์แบบคงที่ของข้อความและรูปภาพที่ประกอบขึ้นเป็นส่วนใหญ่ของเว็บ ตัวอย่างเช่น เรามีโปรแกรมประมวลผลคำออนไลน์ เครื่องมือแก้ไขรูปภาพ การทำแผนที่เว็บไซต์ ฯลฯ ขับเคลื่อนด้วย JavaScript อย่างหนัก พวกเขาผลักดัน HTML4 ไปสู่ขีดความสามารถสูงสุด HTML5 ระบุ API ใหม่ (Application Programming Interface) สำหรับ DOM (Document Object Model) ซึ่งเป็นรูปแบบข้ามแพลตฟอร์มและไม่ขึ้นอยู่กับภาษาสำหรับการแสดงและการโต้ตอบกับวัตถุและเอกสาร HTML, XHTML และ XML
API ใหม่เหล่านี้ช่วยให้คุณลากและวางออบเจ็กต์ที่เซิร์ฟเวอร์ส่ง เช่น ภาพวาด วิดีโอ และอื่นๆ ที่คล้ายกัน
อินเทอร์เฟซใหม่เหล่านี้ที่หน้า HTML เปิดเผยกับ JavaScript ผ่านออบเจ็กต์ใน DOM ทำให้ง่ายต่อการเขียนแอปพลิเคชันโดยใช้รูปแบบที่มีการระบุอย่างมาก แทนที่จะเป็นเพียงลูกเล่นที่มีการจัดทำเอกสารไม่ดี
ที่สำคัญยิ่งกว่านั้นคือความต้องการมาตรฐานแบบเปิดที่ให้บริการฟรี (เพื่อใช้งานและนำไปใช้) ที่สามารถแข่งขันกับมาตรฐานที่เป็นกรรมสิทธิ์ เช่น Adobe Flash หรือ Microsoft Silverlight ไม่ว่าคุณจะคิดอย่างไรเกี่ยวกับเทคโนโลยีหรือบริษัทเหล่านี้ เราเชื่อว่าเว็บเป็นแพลตฟอร์มที่สำคัญสำหรับสังคม การพาณิชย์ และการสื่อสารที่จะอยู่ในมือของผู้ผลิต
มีหน้าเว็บหลายล้านหน้าที่ใช้งานอยู่แล้ว และจำเป็นต้องทำซ้ำต่อไป ดังนั้น HTML5 ส่วนใหญ่เป็นอนุพันธ์ของ HTML4 ที่ยังคงกำหนดวิธีที่เบราว์เซอร์ควรจัดการกับมาร์กอัปเก่าเช่น <font> , <center> และมาร์กอัปใหม่อื่น ๆ เมื่อมีหน้าเว็บหลายล้านหน้าใช้งาน
คำว่า อินเทอร์เฟซ สามารถมีได้หลายความหมายขึ้นอยู่กับพื้นที่ที่ทำการศึกษา ในด้านเทคโนโลยีสารสนเทศ อินเทอร์เฟซ หมายถึง ความเป็นไปได้ของการสื่อสารระหว่างสองระบบที่ไม่สามารถสื่อสารได้ตามธรรมชาติหากไม่มีความช่วยเหลือจากภายนอก
HCI คือการศึกษาปฏิสัมพันธ์ระหว่างผู้คนกับคอมพิวเตอร์ เป็นวิชาสหวิทยาการที่เกี่ยวข้องกับวิทยาการคอมพิวเตอร์ ศิลปะ การออกแบบ การยศาสตร์ จิตวิทยา สังคมวิทยา สัญศาสตร์ ภาษาศาสตร์ และสาขาที่เกี่ยวข้อง ปฏิสัมพันธ์ระหว่างมนุษย์กับเครื่องจักรเกิดขึ้นผ่านอินเทอร์เฟซผู้ใช้ ซึ่งประกอบด้วยซอฟต์แวร์และฮาร์ดแวร์
ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์เป็นสาขาวิชาที่เกี่ยวข้องกับการออกแบบ การประเมิน และการใช้งานระบบคอมพิวเตอร์เชิงโต้ตอบสำหรับการใช้งานของมนุษย์ และการศึกษาปรากฏการณ์หลักที่อยู่รอบตัวพวกเขา
<a href="mailto:[email protected]">ส่งอีเมล</a>
คำว่าสื่อดิจิทัลนั้นตรงกันข้ามกับสื่ออะนาล็อกซึ่งถูกกำหนดโดยฐานวัสดุ เสียงจะถูกบันทึกในร่องเล็กๆ บนพื้นผิวไวนิล และเมื่อเข็มผ่านร่องเหล่านี้ เสียงก็ถูกสร้างขึ้นมาใหม่ ในสื่อดิจิทัล การสนับสนุนทางกายภาพแทบจะหายไป และข้อมูลจะถูกแปลงเป็นลำดับตัวเลขหรือตัวเลข ดังนั้นจึงมีการใช้คำว่าดิจิทัล ด้วยวิธีนี้ เสียง รูปภาพ ข้อความจึงเป็นลำดับของตัวเลข ซึ่งช่วยให้สามารถแชร์ข้อมูล จัดเก็บ และแปลงข้อมูลได้ ในความหมายที่กว้างที่สุด สื่อดิจิทัลสามารถถูกกำหนดให้เป็นชุดของยานพาหนะและอุปกรณ์สื่อสารที่ใช้เทคโนโลยีดิจิทัล ซึ่งช่วยให้สามารถเผยแพร่หรือสื่อสารทางดิจิทัลของงานทางปัญญาที่เป็นลายลักษณ์อักษร เสียง หรือภาพได้ แหล่งที่มาทางอิเล็กทรอนิกส์ที่ใช้ในกลยุทธ์การสื่อสารของแบรนด์กับผู้บริโภค โดยทั่วไปเรียกว่าสื่อดิจิทัล
Flash เป็นทางเลือกที่เหมาะสมที่สุดสำหรับผู้ที่ต้องการเพิ่มวิดีโอและเพลงลงในเว็บเพจมาโดยตลอด เคยเป็นและยังคงมีอยู่ในเบราว์เซอร์เกือบทั้งหมด และเรามีรูปแบบที่สามารถใช้งานได้โดยไม่มีปัญหาใหญ่ใดๆ
เพียงเพิ่ม การเรียกไปยังปลั๊กอิน และใช้งานได้
<object width="426" height="240"><param name="movie" value=" https://youtu.be/S2Vty9srpFw"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="allowscriptaccess" value="always"></param> <embed src= https://www.youtube.com/embed/S2Vty9srpFw type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="426" height="240"></embed></object>
เนื่องจากเบราว์เซอร์ไม่สอดคล้องกัน จึงจำเป็นต้องเพิ่มทั้ง <object> ; สำหรับคำสั่ง <embed> ; คำสั่งเฉพาะสำหรับการใช้ปลั๊กอินโดยทำซ้ำแอตทริบิวต์มากมาย ไม่ต้องพูดถึงว่าปลั๊กอินเช่น Flash ทำให้เกิดความไม่เสถียรมากมาย ทำให้เกิดข้อผิดพลาดที่นำไปสู่การปิดเบราว์เซอร์ด้วยซ้ำ
ด้วยเหตุนี้ HTML 5 จึงมาพร้อมกับการรองรับใหม่ในภาษาพื้นเมือง เพื่อหลีกเลี่ยงการใช้ปลั๊กอินและคำสั่งที่ไม่จำเป็น ในปัจจุบัน เพียงแค่ทำการโทรแบบธรรมดา ราวกับว่าเป็นรูปภาพและไฟล์จะถูกทริกเกอร์
<การควบคุมวิดีโอ src="video.mp4" width="426" height="240"></video>
ปัญหาที่นำเสนอโดยคำสั่งใหม่คือการใช้แอตทริบิวต์ src ซึ่งทำงานได้ไม่ดีในเบราว์เซอร์บางตัว และถ้าเราต้องการให้ทุกคนสามารถเปิดเพจด้วยเบราว์เซอร์ใดก็ได้ ก็จำเป็นต้องใช้แอตทริบิวต์ประเภทอื่น ดังนั้นจึงเป็นเรื่องปกติที่จะใช้แอตทริบิวต์ <source> ในแท็ก <video>
องค์ประกอบ <source> สามารถใช้ได้หลายครั้ง และช่วยให้คุณสามารถกำหนดรูปแบบวิดีโอสำหรับแต่ละเบราว์เซอร์ ทำให้คุณเข้าถึงได้มากขึ้น
< video width =" 426 " height =" 240 " controls >
< source src =" video.mp4 " type =" video/mp4 " >
< source src =" video.webm " type =" video/webm " >
< source src =" video.ogg " type =" video/ogg " >
</ video > < audio controls >
< source src =" audio.mp3 " type =" audio/mpeg " >
< source src =" audio.ogg " type =" audio/ogg " >
< source src =" audio.wav " type =" audio/wav " >
</ audio >มี ตัวแปลงสัญญาณ ที่เป็นไปได้หลายตัว และคุณจะต้องส่งออกอย่างน้อยสองเวอร์ชันเพื่อให้เข้าถึงได้มากขึ้น
หมายเหตุ : Codec คือโปรแกรมที่ใช้ในการเข้ารหัสและถอดรหัสไฟล์มีเดีย พวกเขาบีบอัดรูปแบบดั้งเดิม ชอบพื้นที่จัดเก็บข้อมูล และขยายขนาดในระหว่างการสร้างใหม่ เปลี่ยนกลับเป็นภาพหรือเสียง
ตัวอย่างเสียงและวิดีโอทั้งหมดที่กล่าวถึงจะถูกนำเข้าผ่านเอกสารในไดเร็กทอรี และคำถามก็คือ ฉันจะนำเข้าวิดีโอที่โฮสต์ไว้บนเว็บไซต์อย่าง YouTube หรือ Vimeo ได้อย่างไร และโซลูชันใดในสองโซลูชัน (ผ่านเอกสารหรือผ่านเซิร์ฟเวอร์) ที่ได้เปรียบมากที่สุด?
มาดูวิธีการนำเข้าวิดีโอจาก YouTube และ Vimeo ทีละขั้นตอน!
จนกระทั่งการปรากฏตัวของ HTML5 ตาราง ถูกใช้เป็นทรัพยากรสำหรับการออกแบบเค้าโครงหน้า นักออกแบบใช้ตารางเป็นตารางเพื่อแสดงรูปภาพและข้อความ และมีการใช้กันอย่างแพร่หลาย กลายเป็นรูปแบบที่โดดเด่นของการออกแบบเว็บไซต์ จึงสร้างรูปลักษณ์ที่สมบูรณ์
อย่างไรก็ตาม ในปัจจุบันนี้ ในความเป็นจริงแล้ว การใช้ตารางกำลังขัดขวางการสร้างเว็บไซต์ที่ดีขึ้น เข้าถึงได้มากขึ้น ยืดหยุ่น และใช้งานได้จริง โดยเฉพาะอย่างยิ่งสำหรับสื่อใหม่ เช่น โทรศัพท์มือถือ แท็บเล็ต เป็นต้น
ตารางเหล่านี้ยังคงอยู่ใน HTML 5 เป็นทรัพยากรสำหรับการแสดงข้อมูลแบบตาราง ข้อมูลที่มาจากฐานข้อมูล ด้วย HTML เวอร์ชันใหม่ เราสามารถสร้างเว็บไซต์ที่สร้างขึ้นโดยไม่มีตารางได้อย่างสมบูรณ์ ดังนั้นจึงสร้างเลย์เอาต์แบบไดนามิกที่ปรากฏบนหน้าจอขนาดใหญ่ เช่น บนคอมพิวเตอร์ และปรับให้เข้ากับหน้าจอสมาร์ทโฟนขนาดเล็กได้ดี ต่อมาคุณจะเห็นวิธีสร้างเลย์เอาต์แบบตอบสนองด้วย HTML5 และ CSS3
คำสั่ง table ไม่ได้ถูกลบออกจากภาษา แต่การใช้งานถูกจำกัด ในทางกลับกัน เรายังมีเว็บไซต์หลายแห่งที่ใช้แหล่งข้อมูลนี้ ดังนั้นจึงเป็นสิ่งสำคัญที่เราจะต้องเข้าใจวิธีการทำงาน เพื่อที่เราจะสามารถรักษาเพจประเภทนี้ได้ หากจำเป็น
คำสั่งในการแทรกตารางคือ <table> ในการเริ่ม บรรทัด เราต้องแนะนำแท็ก <tr> และสำหรับ เซลล์ <td> ซึ่งแบ่งแถวของตาราง <th> แบ่งแถวของตารางโดยใส่เนื้อหาเป็นตัวหนา คำสั่งทั้งหมดเหล่านี้จะถูกยกเลิกด้วย </table> , </tr> และ </td> ตามลำดับ
< table >
< tr >
< td > </ td >
< td > </ td >
</ tr >
</ table > คำสั่ง <table> มีชุดคุณลักษณะที่ช่วยในการจัดรูปแบบตาราง สิ่งสำคัญคือ:
align="" | จัดแนวตารางในสามตำแหน่ง: center , left , right และ justify |
bgcolor="" | กำหนดสีของตาราง |
border="" | กำหนดขนาดของเส้นขอบ ถ้าเป็นศูนย์จะไม่แสดงเส้นขอบ |
cellspacing="" | กำหนดระยะห่างระหว่างเซลล์ |
colspan="" | กำหนดการจัดกลุ่มระหว่างคอลัมน์ตารางตั้งแต่สองคอลัมน์ขึ้นไป (ด้านข้าง) |
rowspan="" | กำหนดการจัดกลุ่มระหว่างสองแถวขึ้นไปในตาราง (ทิศทางขึ้นและลง) |
cellpadding="" | กำหนดระยะห่างระหว่างข้อความและเส้นขอบเซลล์ |
<caption> แสดงข้อความที่อยู่กึ่งกลางของตาราง ราวกับว่าเป็นคำบรรยาย
ในการเลือกแถวภายในที่จะแสดงภายในตาราง เราจะใช้แอตทริบิวต์ RULES ภายในแท็ก ส่วนเสริมของคุณลักษณะนี้คือ:
none | ไม่มีทั้งบรรทัด |
all | เพื่อแสดงแถวทั้งหมดระหว่างแต่ละคอลัมน์และแถวในตาราง (ค่าเริ่มต้น) |
rows | สำหรับเส้นแนวนอนระหว่างแต่ละแถวในตาราง |
cols | สำหรับเส้นแนวตั้งระหว่างแต่ละคอลัมน์ของตาราง |
groups | สำหรับแถวระหว่างกลุ่มคอลัมน์และส่วนแนวนอน ที่กำหนดโดยแท็กพิเศษ เช่น <colgroup> และ <thead> |
ดูตัวอย่างบางส่วน:
< table border rules =" all " 6 > <table border rules="none"6> <table border rules="cols"6> <table border rules="groups"6> <table border rules="rows"6>ส่วนแบบฟอร์ม HTML มีความสำคัญมากสำหรับการกรอกข้อมูลที่ผู้ใช้ป้อนลงในหน้า HTML ข้อมูลนี้ถูกรวบรวมโดยแบ็คเอนด์ด้วยภาษาการเขียนโปรแกรมแบ็คเอนด์ (PHP, JavaScript, Python, Java ฯลฯ) ที่เก็บและสืบค้นข้อมูลนี้ในฐานข้อมูล (MySQL, PostgreSQL, MongoDB, OracleDB ฯลฯ) ). ลองดูที่แท็กแบบฟอร์ม:
แบบฟอร์มเข้าสู่ระบบ (หม้อต้ม) :
< html >
< body >
< h2 > Login </ h2 >
< form >
Login: < br >
< input type =" email " name =" email " > < br >
Senha: < br >
< input type =" password " name =" senha " > < br >
< input type =" submit " value =" Logar " >
</ form >
</ body >
</ html > ด้วยแอตทริบิวต์ type เราสามารถกำหนดประเภทของ input ที่ใช้ได้ คุณลักษณะ name='' ที่เราสามารถประมวลผลข้อมูลที่ส่งผ่านภาษาการเขียนโปรแกรม
แบบฟอร์มเข้าสู่ระบบ (boilerplate) - ด้วย PHP :
< html >
< body >
< h2 > Login </ h2 >
< form action =" processa.php " >
Login: < br >
< input type =" email " name =" email " required > < br >
Senha: < br >
< input type =" password " name =" senha " required > < br >
< input type =" submit " value =" Logar " >
</ form >
</ body >
</ html >แบบฟอร์มลงทะเบียน (หม้อต้ม) :
< html >
< head >
< title > Cadastro </ title >
</ head >
< body >
< h2 > Cadastre-se </ h2 >
< form action =" processa.php " >
Nome Completo: < br >
< input type =" text " name =" nome " required > < br >
<!-- <label for="email">Email:</label> -->
Email: < br >
< input type =" email " name =" email " required > < br >
Senha: < br >
< input type =" password " name =" password " required > < br >
Repita a senha: < br >
< input type =" password " name =" password " required > < br >
Sexo: < br >
< input type =" radio " name =" sexo " value =" masculino " > Masculino < br >
< input type =" radio " name =" sexo " value =" feminino " > Feminino < br >
Interesses: < br >
< input type =" checkbox " name =" interesse " value =" futebol " > Futebol < br >
< input type =" checkbox " name =" interesse " value =" video-games " > Video-games < br >
< input type =" checkbox " name =" interesse " value =" academia " > Academia < br >
Estado < br >
< select name =" estado " >
< option value =" RJ " > RJ </ option >
< option value =" SP " > SP </ option >
< option value =" MG " > MG </ option >
< option value =" ES " > ES </ option >
</ select > < br >
Comente! < br >
< textarea name =" comentario " > </ textarea > < br >
< input type =" submit " value =" Cadastrar " >
</ form >
</ body >
</ html > เราจะสามารถ input ระหว่างวิทยุได้ก็ต่อเมื่อ name เหมือนกัน ด้วยวิธีนี้เราสามารถจัดกลุ่มข้อมูลนี้และจะมีเพียงหนึ่งรายการเท่านั้นที่จะถูกทำเครื่องหมาย
ด้วย checkbox เราสามารถเลือกได้มากกว่าหนึ่งตัวเลือกให้เลือก
กับ
เราสามารถกำหนดประเภท <input> และคุณลักษณะได้:
buttonpasswordtext องค์ประกอบ <a> , <input> และ <button> ทั้งหมดใช้เพื่อสร้างปุ่มบนหน้า HTML แต่แต่ละองค์ประกอบมีวัตถุประสงค์ที่แตกต่างกันเล็กน้อยและใช้ในบริบทที่แตกต่างกัน
<a> สมอใช้ในการสร้างลิงค์ในรูปแบบ HTML ส่วนใหญ่จะใช้เพื่อนำทางระหว่างหน้าเว็บต่างๆ หรือยึดไปยังส่วนต่างๆ ของหน้า เมื่อผู้ใช้คลิกที่องค์ประกอบ <a> พวกเขาจะถูกนำทางไปยัง URL ที่ระบุในแอตทริบิวต์ href องค์ประกอบ <a> มักถูกจัดสไตล์ด้วย CSS ให้ดูเหมือนปุ่ม แต่มีลักษณะการทำงานของลิงก์มาตรฐาน
< a href =" pagina.html " > Link </ a > <input> ใช้เพื่อสร้างองค์ประกอบอินพุตในรูปแบบ HTML แม้ว่ามักใช้เพื่อสร้างช่องป้อนข้อความ แต่ก็สามารถใช้เพื่อสร้างปุ่มได้เช่นกัน ประเภทของปุ่มจะถูกระบุโดยแอตทริบิวต์ type ค่าทั่วไปบางอย่างสำหรับแอตทริบิวต์ type คือ "button" , "submit" และ "reset" ปุ่ม <input> มีประโยชน์เมื่อคุณต้องการส่งข้อมูลจากแบบฟอร์มไปยังเซิร์ฟเวอร์หรือดำเนินการเฉพาะเมื่อมีการคลิกปุ่ม
< input type =" button " value =" Clique Aqui " > <button> ใช้เพื่อสร้างปุ่มในรูปแบบ HTML อาจมีข้อความ องค์ประกอบรูปภาพ หรือองค์ประกอบ HTML อื่นๆ เช่นเดียวกับปุ่ม <input> ปุ่ม <button> สามารถมีประเภทเฉพาะที่ระบุโดยแอตทริบิวต์ type เช่น "button" , "submit" หรือ "reset" ปุ่ม <button> ให้ความยืดหยุ่นในแง่ของเนื้อหาและลักษณะการทำงานมากกว่าปุ่ม <input> โดยเฉพาะอย่างยิ่งเมื่อเป็นเรื่องของสไตล์และการจัดการเหตุการณ์โดยใช้ JavaScript
< button type =" button " > Clique Aqui </ button > กล่าวโดยสรุป หากคุณกำลังสร้างปุ่มสำหรับการนำทาง ให้ใช้ <a> หากคุณกำลังสร้างปุ่มเพื่อส่งข้อมูลจากแบบฟอร์ม ให้ใช้ <input type="submit"> หรือ <button type="submit"> หากคุณกำลังสร้างปุ่มเพื่อดำเนินการบางอย่างบนเพจ (เช่น การแสดงหรือซ่อนเนื้อหา) ให้ใช้ <button type="button">
Semantic HTML ทำหน้าที่จัดระเบียบและจัดโครงสร้างองค์ประกอบเอกสารออกเป็นส่วนเฉพาะ เพื่อไม่ให้ทำงานทั่วร่างกายในลักษณะที่ไม่เป็นระเบียบและไม่สามารถอ่านได้
จนถึงเวอร์ชัน 4 ของ HTML divs เป็นความหมายการจัดโครงสร้างหลักของหน้า ด้วยการมาถึงของ HTML5 TAG ใหม่ปรากฏขึ้นพร้อมกับฟังก์ชัน div ที่สร้างขึ้นเพื่อจัดโครงสร้างองค์ประกอบที่มีอยู่ในเอกสาร ซึ่งทำให้การจัดโครงสร้างหน้าง่ายขึ้นมาก โปรดทราบว่าคุณสามารถเปรียบเทียบโครงสร้างของหน้าเว็บกับเค้าโครงของ หน้าหนังสือพิมพ์ ได้ เนื่องจากทั้งสองมีส่วนหัว ส่วนท้าย บทความ และส่วนต่างๆ
<section> องค์ประกอบแสดงถึงส่วนทั่วไปภายในเอกสาร องค์ประกอบนี้สามารถประกอบด้วยการจัดกลุ่มข้อความที่มีหลายบท ส่วนที่เรียงลำดับเลข ฯลฯ ในตัวอย่างต่อไปนี้ บทความจะถูกนำเสนอโดยมีหัวข้อหลักและหลายหัวข้อที่มีหัวข้อต่างกันภายในหัวข้อนั้น 
<header> ยังใช้เพื่อคั่นชื่อส่วน โดยทำงานร่วมกับองค์ประกอบก่อนหน้า อย่างไรก็ตาม ไม่ได้บังคับ 
<nav> (การนำทาง) องค์ประกอบนี้เป็นส่วนที่มีข้อมูลเพจอยู่ โดยทั่วไป ลิงก์ (ลิงก์ภายใน) ไปยังหน้านั้นหรือลิงก์ภายนอกไปยังหน้าอื่น ๆ บนเว็บไซต์ภายนอกจะอยู่ในส่วนนี้ 
<article> (บทความ) องค์ประกอบนี้เป็นบทความอิสระภายในข้อความ องค์ประกอบนี้อาจหรืออาจจะไม่อยู่ในองค์ประกอบ <section> ลองนึกภาพหนังสือพิมพ์ที่มีหัวข้อกีฬา เรื่องซุบซิบ และอื่นๆ ภายในแต่ละส่วนจะมีบทความหลายบทความเกี่ยวกับข้อความเฉพาะ เช่น ในส่วนกีฬาอาจมีบทความเกี่ยวกับทีม A อีกบทความเกี่ยวกับทีม B และอีกบทความเกี่ยวกับทีม C บทความสามารถมีองค์ประกอบ <header> ที่เป็น title และองค์ประกอบ <footer> ซึ่งเป็นส่วนท้ายขององค์ประกอบ 
<footer> (footer) องค์ประกอบนี้เป็นองค์ประกอบที่ประกอบด้วยข้อมูลเกี่ยวกับเนื้อหาของส่วนดังกล่าว เช่น ผู้เขียน ลิงก์ที่เกี่ยวข้อง เป็นต้น 
<aside> องค์ประกอบนี้มีข้อมูลที่ไม่เกี่ยวข้องโดยตรงกับข้อความ ตัวอย่างเช่น: โฆษณาแบบชำระเงิน ลิงก์ส่งเสริมการขาย ฯลฯ 
โดดเด่นด้วยการเขียนโค้ด CSS โดยใช้คำสั่ง HTML <style> วิธีนี้ดีกว่าวิธีก่อนหน้า เนื่องจาก กฎ CSS ทั้งหมด อยู่ที่จุดเริ่มต้นของโค้ด HTML5 อย่างไรก็ตาม กฎเหล่านี้สามารถใช้ได้เฉพาะภายในเอกสารนี้เท่านั้น ซึ่งป้องกันการแชร์และการนำกฎไปใช้ซ้ำ
ตัวอย่างการใช้งาน:
< head >
< style >
* {margin: 0; padding: 0; box-sizing: border-box;}
body {width: 100%; height: 100vh;}
</ style >
</ head >กฎถูกเขียนในไฟล์ที่มีนามสกุล .css และสามารถโหลดลงในเอกสาร HTML5 ได้สองวิธี:
< head >
< link rel =" stylesheet " href =" default.css " >
< link rel =" stylesheet " href =" green.css " title =" Green styles " >
< link rel =" alternate stylesheet " href =" contrast.css " title =" High contrast " >
< link rel =" alternate stylesheet " href =" big.css " title =" Big fonts " >
< link rel =" alternate stylesheet " href =" wide.css " title =" Wide screen " >
</ head > @import ใน CSSอนุญาตให้คุณ นำเข้า กฎสไตล์ภายในกฎสไตล์อื่นๆ วิธีนี้ช่วยให้คุณใช้กฎทั่วไปกับเอกสาร HTML ทั้งหมด
ตัวอย่างการใช้งาน :
ภายในเอกสาร .css เราสามารถใช้การเรียกกับไฟล์ภายนอกในบรรทัดแรกเพื่อใช้คำสั่งที่มีอยู่
@import "mystyle.css" ;
@import url ( "mystyle.css" );
@import url ( "fineprint.css" ) print; /* mídia específica para impressão */
@import url ( "bluish.css" ) projection , tv; /* mídia específica grandes mídias*/
@import url ( "narrow.css" ) handheld and ( max-width : 400 px ); /* mídia específica mídias portáteis*/ CSS ระดับ 3 นำแนวคิดของโมดูลไปใช้ ซึ่งแต่ละโมดูลได้รับการพัฒนาอย่างอิสระตามกำหนดเวลาของตัวเอง ข้อได้เปรียบหลักคือความเป็นอิสระในการสร้างคุณสมบัติใหม่
หลังจากการสร้าง HTML ความจำเป็นในการจัดรูปแบบหน้าก็ชัดเจนขึ้น ดังนั้นในปี 1996 ภาษาสไตล์ที่เรารู้จักในชื่อ CSS จึงถูกสร้างขึ้น
ไวยากรณ์นั้นง่ายมากและสามารถอธิบายได้ด้วยวลี "คุณสร้างกฎสไตล์สำหรับองค์ประกอบหรือกลุ่มขององค์ประกอบ"
ลองใช้องค์ประกอบ HTML ที่เราเห็นก่อนหน้านี้ ซึ่งก็คือจุดยึด เพื่อเป็นตัวอย่าง
กฎ CSS จะแสดงโดย ตัวเลือก หรือ กลุ่มของตัวเลือก ในกรณีของเรามัน คือ ดังนั้นภายในวงเล็บปีกกาคู่หนึ่งเราจึงเพิ่ม การประกาศ ในตัวอย่างด้านล่างเราจะเปลี่ยนสีและขนาดตัวอักษรของชื่อนี้ การประกาศ เกิดขึ้นจากคุณสมบัติและมูลค่า
กฎ CSS แสดงโดย:
ตัวอย่าง:
a {
color : # 000 ;
}ใน CSS การเลือกองค์ประกอบอาจมีตั้งแต่รูปแบบที่เรียบง่ายไปจนถึงรูปแบบตามบริบทที่หลากหลาย
ประเภทการเลือกมีความสำคัญมาก เนื่องจากลำดับจะเปลี่ยนแปลงไปขึ้นอยู่กับผลการประมวลผลหน้า
CSS ช่วยให้คุณสามารถจัดกลุ่มคำสั่งที่ซ้ำกัน
ตัวอย่าง:
h1 {ตระกูลแบบอักษร: sans-serif }
h2 {ตระกูลแบบอักษร: sans-serif }
h3 {ตระกูลแบบอักษร: sans-serif }
มันเทียบเท่ากับ:
h1, h2, h3 {
ตระกูลฟอนต์: sans-serif
-
หมายเหตุ: h1 ทั้งหมด, h2 ทั้งหมด และ h3 ทั้งหมด
องค์ประกอบสามารถอยู่ภายในองค์ประกอบอื่นได้
ตัวอย่าง: <H1>ข้อความนี้<EM>มาก</EM>สำคัญ</H1>
h1 { color: red } /* แสดงว่าองค์ประกอบ h1 ทั้งหมดมีสีแดง */
ใน { color: red } /* แสดงว่าองค์ประกอบทั้งหมดมีสีแดง */
h1 ใน { color: blue } /* บ่งชี้ว่าองค์ประกอบที่มีอยู่ในองค์ประกอบ h1 มีสีฟ้า */
องค์ประกอบลูกจะมีลักษณะเฉพาะเมื่อองค์ประกอบถูกคั่นด้วย ">"
div ol > lip {สี: สีเขียว }ในตัวอย่างนี้ องค์ประกอบ p ทั้งหมดจะเป็นสีเขียวเมื่ออยู่ภายในองค์ประกอบรายการ <li> ซึ่งเป็นลูกของรายการ <ol> ภายใน <div>
องค์ประกอบตามลำดับความสำคัญจะมีลักษณะเฉพาะเมื่อองค์ประกอบถูกคั่นด้วย "+" นั่นคือย่อหน้าแรกที่อยู่หลัง div
div + พี {
สี: สีแดง;
-
ระบุกฎสำหรับองค์ประกอบที่มีคุณลักษณะบางอย่าง
ตัวอย่าง:
span [hello = "คลีฟแลนด์"] [ลาก่อน = "โคลัมบัส"] { สี: สีน้ำเงิน; -กฎจะถูกนำไปใช้กับองค์ประกอบ span ทั้งหมดที่มีแอตทริบิวต์ hello="Cleveland" และแอตทริบิวต์ bye="Columbus"
คลาสอนุญาตให้คุณกำหนดชุดกฎให้กับองค์ประกอบที่กำหนด ถูกกำหนดโดยเครื่องหมายดอกจัน (*.) หรือเพียงจุด (.)
ตัวอย่าง:
.pastoral { color: green } /* องค์ประกอบทั้งหมดที่มีคลาส~=pastoral */
/*หรือ*/
*.pastoral { color: green } /* องค์ประกอบทั้งหมดที่มีคลาส~=pastoral */
แอตทริบิวต์ ID ช่วยให้คุณระบุองค์ประกอบที่ไม่ซ้ำในเอกสาร HTML หากต้องการเลือกองค์ประกอบนี้ เพียงใช้อักขระ “#” ตามด้วยชื่อขององค์ประกอบ
ตัวอย่าง:
h1#title1 { text-align: center } /* ใช้กฎกับองค์ประกอบ h1 ด้วย id=title */
*.pastoral { color: green } /* องค์ประกอบทั้งหมดที่มีคลาส~=pastoral */
ในตัวอย่างก่อนหน้านี้ เราได้สร้างกฎที่เปลี่ยนแปลงองค์ประกอบ HTML โดยตรง แต่นั่นหมายความว่าองค์ประกอบทั้งหมดจะมีลักษณะดังกล่าว และโดยทั่วไปแล้ว เรามีเว็บไซต์ที่ซับซ้อนกว่าซึ่งต้องใช้กฎที่แตกต่างกันหลายข้อสำหรับองค์ประกอบเดียวกัน
เพื่อให้จับต้องได้มากขึ้น เรามาจำกันสักหน่อยเกี่ยวกับเว็บไซต์ที่เราเริ่มสร้างในโมดูลที่แล้ว ซึ่งมีองค์ประกอบส่วนหัวหลายรายการ แต่เราไม่ต้องการให้ส่วนหัวหลักมีรูปแบบเดียวกันกับส่วนหัวของโพสต์ นั่นคือที่ รหัสและคลาส
ตัวเลือกที่เราเห็นในตัวอย่างแรกคือตัวเลือกประเภท เนื่องจากมันแสดงถึงองค์ประกอบ HTML และด้วย ID และคลาส เราสามารถแสดงองค์ประกอบประเภทใดก็ได้ แต่มีความแตกต่างบางประการระหว่างสิ่งเหล่านั้น:
ID : แสดงด้วยสัญลักษณ์ # (แฮช) ตามด้วยชื่อสำหรับ ID นั้น สามารถใช้ได้เพียงครั้งเดียวเท่านั้น!
#id{
}Class : คลาสจะแสดงในลักษณะเดียวกันกับ ID แต่นำหน้าด้วยจุดแทนที่จะเป็นแฮช สามารถใช้ได้มากกว่าหนึ่งครั้ง!
.class{
}และความแตกต่างที่สำคัญที่สุดคือวิธีการใช้ ID สามารถใช้ได้เพียงครั้งเดียวในหน้า HTML ในขณะที่คลาสไม่มีข้อจำกัด
และมีรายละเอียดสุดท้ายในตัวอย่างนี้: pseudoclass องค์ประกอบ HTML มีการเปลี่ยนแปลงที่เกิดจากการโต้ตอบของผู้ใช้ เช่น การเลื่อนเมาส์ไปเหนือหรือการคลิกองค์ประกอบนั้น Pseudo-class คล้ายกับเหตุการณ์ JavaScript มาก แต่ไม่มีอำนาจในการจัดการองค์ประกอบต่างๆ เหมือนกัน
ตัวเลือก: คลาสหลอก {
คุณสมบัติ: คุณค่า;
-
a:hover ในตัวอย่างหมายความว่าจุดยึดจะมีลักษณะเช่นนี้เมื่อผู้ใช้โฮเวอร์เหนือไฮเปอร์ลิงก์
| คลาสหลอก | คำนิยาม |
:hover | มันเปลี่ยนองค์ประกอบโดยการวางเมาส์เหนือองค์ประกอบนั้น |
:active | เปลี่ยนองค์ประกอบโดยคลิก |
:link | เปลี่ยนลิงก์ที่ไม่ได้เยี่ยมชมทั้งหมด |
:visited | เปลี่ยนแปลงลิงก์ที่เยี่ยมชมทั้งหมด |
:focus | เปลี่ยน <input> องค์ประกอบที่มีโฟกัส |
:checked | เปลี่ยนองค์ประกอบ <input> ที่ทำเครื่องหมายไว้ทั้งหมด |
:disable | เปลี่ยนองค์ประกอบ <input> ที่ปิดใช้งานทั้งหมด |
:enabled | เปลี่ยนองค์ประกอบ <input> ที่เปิดใช้งานทั้งหมด |
:empty | เปลี่ยนแปลงทั้งหมด <p> องค์ประกอบที่ไม่มีลูก |
:first-child | เปลี่ยนแต่ละองค์ประกอบที่เปิดใช้งาน <input> |
:enabled | เปลี่ยนแต่ละองค์ประกอบที่เปิดใช้งาน <input> |
:first-child | เปลี่ยนแต่ละ <p> องค์ประกอบที่เป็นลูกคนแรกขององค์ประกอบหลัก |
:first-of-type | มันเปลี่ยนแต่ละองค์ประกอบ <p> ที่เป็นองค์ประกอบ <p> แรกขององค์ประกอบหลัก |
:in-range | เปลี่ยน <input> องค์ประกอบที่มีค่าภายในช่วงที่ระบุ |
:invalid | เปลี่ยนองค์ประกอบ <input> ทั้งหมดให้เป็นค่าที่ไม่ถูกต้อง |
:lang(language) | เปลี่ยนแต่ละองค์ประกอบ <p> ที่มีค่าแอตทริบิวต์ lang ที่ขึ้นต้นด้วย " it " |
:last-child | มันเปลี่ยนองค์ประกอบ <p> ทั้งหมดที่เป็นลูกสุดท้ายขององค์ประกอบหลัก |
:last-of-type | เปลี่ยนทุกองค์ประกอบ <p> ที่เป็นองค์ประกอบ <p> สุดท้ายขององค์ประกอบหลัก |
:link | เปลี่ยนลิงก์ที่ไม่ได้เยี่ยมชมทั้งหมด |
:not(selector) | เปลี่ยนทุกองค์ประกอบที่ไม่ใช่องค์ประกอบ <p> |
:nth-child(n) | เปลี่ยนแต่ละ <p> องค์ประกอบที่ได้รับการสั่งซื้อจากองค์ประกอบหลัก |
:nth-last-child(n) | เปลี่ยนแต่ละองค์ประกอบ <p> ที่เรียงลำดับจากองค์ประกอบหลักโดยนับจากลูกสุดท้าย |
:nth-last-of-type(n) | เปลี่ยนแต่ละองค์ประกอบ <p> ที่เป็นองค์ประกอบ <p> ที่สองจากผู้ปกครอง นับจากลูกสุดท้าย |
:nth-of-type(n) | มันเปลี่ยนทุกองค์ประกอบ <p> ที่เป็นองค์ประกอบ <p> ที่สองขององค์ประกอบหลัก |
:only-of-type | เปลี่ยน <p> องค์ประกอบที่เป็นองค์ประกอบเดียว <p> จากองค์ประกอบหลัก |
:only-child | มันเปลี่ยนทุก <p> องค์ประกอบที่เป็นลูกเดียวขององค์ประกอบหลัก |
:optional | เปลี่ยนองค์ประกอบ <input> โดยไม่มีแอตทริบิวต์ "required" |
:out-of-range | เปลี่ยน <input> องค์ประกอบที่มี atr
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง
ทั้งหมด
|
