วันเสาร์ที่ 28 พฤษภาคม พ.ศ. 2559

HTML

HTML



HTML ย่อมาจาก Hyper Text Markup Language
HTML ไม่ใช่ภาษาโปรแกรม แต่เป็น markup language
markup language คือกลุ่มที่อยู่ใน markup tags

HTML Tags มักจะเป็นคู่เปิด กับคู่ปิด เช่น <b> และ </b> ใน HTML Tags คู่หนึ่ง Tags แรกมักจะถูกเรียกว่า แท็กเปิด Tags สุดท้ายมักจะถูกเรียกว่า แท็กปิด
วัตถุประสงค์ของเว็บบราวเซอร์(web browser) เช่น Internet Explorer, Mozilla Firefox, Chrome และอื่น ๆ ก็คือการอ่านเอกสาร HTML แล้วแสดงออกมาในรูปแบบของเว็บเพจ เว็บบราวเซอร์จะไม่แสดง HTML Tags แต่จะใช้แท็กเหล่านั้นอธิบายและกำหนดสิ่งต่าง ๆ สำหรับเว็บเพจ
 
ส่วนประกอบของ HTML Document
เอกสาร HTML แบ่งออกเป็นสองส่วน นั่นคือส่วน head กับส่วน body
เอกสาร HTML จะต้องประกอบไปด้วยแท็กที่สำคํญด้วยกันอยู่ 3 แท็ก นั่นคือ html, head และ body มีการวางรูปแบบแท็กดังนี้ <html>, <head>, </head>,<body>, </body>,</html>
แท็ก html บ่งบอกว่าเอกสารนี้เป็นเอกสาร HTML
แท็ก head เป็นส่วนที่ทำงานเกี่ยวกับส่วนหัวของเอกสารการกำหนดค่าต่าง ๆ และจะต้องอยู่ภายในแท็ก html เพื่อบ่งบอกว่าอยู่ภายในเอกสาร html
แท็ก body เป็นส่วนที่ทำงานเกี่ยวกับตัวของเอกสารที่จะแสดงในหน้าเว็บเพจ และจะต้องอยู่ภายในแท็ก html และอยู่หลังแท็ก head

การสร้างเอกสาร HTML
ในการสร้างเอกสาร HTML สามารถสร้างได้ง่ายดายโดยใช้ Notepad, Dreamweaver, Editplus หรืออื่น ๆ ในที่นี้ผมขอยกตัวอย่างการสร้างโดยทั้งสามโปรแกรมให้ดูคับเริ่มจาก Notepad กันก่อนเลย
การสร้างเว็จเพจโดย Notepad
ก่อนอื่นก็เปิด Notepad ขึ้นแล้วแล้วทำการกรอกโค้ดเหล่านี้ไปดังรูป




เสร็จแล้วทำการเซฟ โดยใช้นามสกุล .html หรือ .htm ก็ได้ดังรูป โดยเปลี่ยน Save as type เป็น All File




เมื่อเซฟเสร็จเราก็จะได้เอกสาร HTML แล้วง่ายไหมละคับ คราวนี้เราลองมาเปิดดูกันว่าผลลัพธ์จะออกมายังไง


นี่คือผลลัพธ์จากการทำเอกสาร HTML ของเราเมื่อกี้
การสร้างเว็จเพจโดย Editplus
ทำการเปิดโปรแกรม Editplus ขี้นแล้วแล้วไปที่ File => New => HTML Page ดังรูป



จะเห็นว่าเมื่อสร้างแล้วจะมีโค้ดมาให้เองโดยอัตโนมัติให้ทำการเปลี่ยนเป็นโค้ดเหมือนรูปด้านล่างก็จะได้เว็บเพจที่แสดงเหมือนกันกับการสร้างด้วย Notepad แล้ว ส่วนโค้ดในส่วนอื่น ๆ ดังแสดงในรูป เช่น doctype, meta tage ไว้ผมจะมาอธิบายใหม่ในวันหลังนะคับ




เมื่อเสร็จแล้วก็ทำการเซฟ เราก็จะได้เอกสาร HTML อย่างง่าย ๆ แล้วละคับ
การสร้างเว็จเพจโดย Dreamweaver
สร้างเอกสารโดยไปที่ File => New หรือกด Ctrl + N จะได้ดังรูปให้เลือก HTML
 
เสร็จแล้วกด Creat จะมีโค้ดมาให้ทำการแก้ไขใหม่ดังรูป 

เสร็จแล้วก็ทำการเซฟไฟล์ เราก็จะได้เอกสาร HTML หรือที่เรียกกันว่าเว็บเพจแล้ว

ที่มา : http://www.doesystem.com/18546d147f5039787ec26ee5625872e4/HTML-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.htm









อ่านเพิ่มเติม »
เขียนโดย ที่ ไม่มีความคิดเห็น:

วันอาทิตย์ที่ 22 พฤษภาคม พ.ศ. 2559

Responsive web

ความหมาย และ ความสำคัญ ของ Responsive Web Design

ในปัจจุบัน Mobile Internet Users ได้มีจำนวนเพิ่มขึ้นอย่างรวดเร็ว และมีแนวโน้มที่จะแซง Desktop Internet Users ในปี 2013 อีกด้วย ซึ่ง Mobile Devices นั้นมีความหลากหลายมาก ไม่ว่าจะเป็น ขนาดและความละเอียดของหน้าจอแสดงผล(screen size and resolution) แนวของการแสดงผล(orientation) หรือแม้แต่ระบบปฏิบัติการ(OS)

ถ้าเป็นสมัยก่อน เราต้องทำเว็บไซต์ออกมาหลายๆ version เช่น Desktop version กับ Mobile version เพื่อให้เว็บไซต์ของเรา สามารถแสดงผลได้อย่างเหมาะสมกับ Device นั้นๆ ซึ่งวิธีนี้จะทำให้ต้นทุนเพิ่มขึ้น ทั้งในด้านเวลาและค่าจ้างในการพัฒนา

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

หลักการของ Responsive Web Design

การจะทำ Responsive Web Design มักใช้เทคนิคหลายๆ อย่าง ร่วมกัน ไม่ว่าจะเป็น Fluid Grid, Flexible Images และ CSS3 Media Queries
เริ่มแรกคือการทำ Fluid Grid ซึ่งก็คือการออกแบบ Grid ให้เป็นแบบ Relative ซึ่งก็คือการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ เช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em เป็นต้น

ต่อมาคือการทำ Flexible Images หรือการกำหนดขนาดของ Images ต่างๆ ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มาก เวลาแสดงในมือถือที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างสวยงาม เป็นต้น

สุดท้ายคือการใช้ CSS3 Media Queries ซึ่งจะช่วยให้เราสามารถกำหนด style sheets สำหรับ Devices ต่างๆ ได้ โดยส่วนใหญ่ เราจะเขียน style sheets พื้นฐานเอาไว้ ซึ่งกลุ่มนี้ จะไม่ขึ้นอยู่กับ Devices ใดๆ หลังจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กสุด เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด ซึ่งการเขียนแบบนี้ จะช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่ายอีกด้วย

ข้อเสียของ Responsive Web Design

อย่างไรก็ตาม Responsive Web Design ก็ยังมีข้อเสียอยู่บ้าง เนื่องจากการเขียนโค้ดเดียว ให้รองรับหลายๆ Devices จึงอาจทำให้เกิดปัญหา เช่น โทรศัพท์มือถือที่มีหน้าจอขนาดเล็ก ถึงแม้เราจะซ่อนเนื้อหาบางส่วนที่ไม่จำเป็นเอาไว้ เช่น โฆษณา แต่ในบางเว็บบราวเซอร์ ข้อมูลเหล่านี้ยังจะถูกโหลดเข้ามาอยู่ รวมไปถึงเรื่องของ Image Resizing ที่เราไม่ได้ไปลด File Size ของตัว Image จริงๆ ทำให้โทรศัพท์มือถือจำเป็นต้องโหลดรูปเดียวกับรูปที่ใช้แสดงบน Desktop ทำให้เสียเวลาโดยไม่จำเป็น

Cr. http://www.siamhtml.com/responsive-web-design-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/

เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)