วันจันทร์ที่ 23 พฤษภาคม พ.ศ. 2559

HTML คืออะไร


HTML คืออะไร?





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

HTML หรือชื่อเต็มๆ ก็คือ Hypertext Markup Language เป็นภาษาประเภท Markup ที่ออกแบบมาเพื่อใช้ในการสร้างเว็บเพจ มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ รูปภาพ เสียง อื่นๆ ที่สามารถเรียกดูผ่านทางเว็บเบราว์เซอร์ได้ แต่ละ Tag สามารถระบุหรือควบคุมการแสดงผลของเว็บให้เป็นไปตามที่ผู้ออกแบบเว็บไซต์กำหนดไว้ หรือจะให้เข้าใจง่ายๆ ก็คือ เว็บที่เราเข้าอยู่ในทุกๆ วันนี้ ก็ล้วนถูกแสดงผลด้วยโค้ด HTML ทั้งนั้น

HTML พัฒนามาจากภาษา SGML และถูกพัฒนามาเรื่อยๆ ตั้งแต่เวอร์ชั่นแรก สู่เวอร์ชั่น HTML 2.0, HTML 3.2, HTML 4.1 และตัวล่าสุดคือ HTML 5 (ซึ่งอยู่ในระหว่างการพัฒนา) และยังมีการพัฒนารูปแบบของ HTML แบบใหม่ที่เรียกกันว่า XHTML ซึ่งมีความสามารถและมาตราฐานที่รัดกุมกว่าอีกด้วย

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

ตัวอย่าง CODE ภาษา HTML

Description: https://blogger.googleusercontent.com/img/proxy/AVvXsEhZdL4hb4kDZbCcjEm-lc8JLCVXkImRIlrBreoi5sfv2E7MakFE6ZswEA4Lmk4SGtvIBaXc25QpYDkzXC7VHZc9PzaE5frxaRp_qZBF7O5pTXxEaUrzHElfQ8ynAMzZxuHPp0q1VuREM_-V2BUDzzueT8cfGXRJXqQ9ONAa6mAxq0UsIUBm=

จากภาพจะเห็นว่า… HTML มีรูปแบบการเขียนที่ชัดเจน จะประกอบด้วย Tag พื้นฐาน ดังนี้
Tag <html>…</html> เป็นส่วนประกาศที่กำหนดหัวละท้ายของเอกสาร เพื่อให้บราว์เซอร์ทราบและแสดงผลได้ถูกต้อง
Tag <head>…</head> เป็นส่วนหัวเรื่องของเอกสาร ภายในจะมี Tag <title>…</title> ใช้สำหรับการกำหนดชื่อของเอกสาร
Tag <body>…</body> เป็นส่วนที่มีรายละเอียดมากที่สุด จะบรรจุข้อมูลต่างๆ ที่ต้องการให้แสดงบนหน้าเว็บไซต์ของเรา ทั้งข้อความ รูปภาพ เป็นต้น

ผลลัพธ์หน้าจอแสดงผล

Description: https://blogger.googleusercontent.com/img/proxy/AVvXsEiSJbAhT8l9VXfqxCK6UeShzcvD4Q4v0FWcAS3wttI_C_FzTS8lfzXYfOSSsi0rg9nF_iqKLqNHUy-oYDOXnn7HyCdS7rPqPQAWUkqxOk6yAw2TTiYMpVRSuXHnVWpNkYyMFkE5v5agMrZ0pTWMUdr1TkhzJBbkeu9lBQBmyOupU-ud8l-Q=

ในการสร้างเว็บเพจโดยใช้ภาษา HTML เขียนนั้น สามารถใช้โปรแกรม Text Editor ต่างๆ เขียนได้ เช่น Note Pad , Word Pad ฯลฯ หรือจะใช้โปรแกรมประเภท WYSIWYG (What You See Is What You Get) ที่เป็นเครื่องมือช่วยสร้างเว็บเพจซึ่งอํานวยความสะดวกในการสร้างหน้า HTML เช่น Dream Weaver, Microsoft FrontPage ฯลฯ

ส่วนในการเรียกใช้งานหรือทดสอบการทำงานของเอกสาร HTML ที่เราได้เขียนไว้นั้นจะใช้โปรแกรมเว็บเบราว์เซอร์ (web browser) เช่น Internet Explorer (IE), Google Chrome, Mozilla Firefox, Safari และอื่นๆ เป็นต้น เป็นเครื่องมือแสดงผลไฟล์ HTML ของเราออกมาเป็นตัวอักษร ภาพและเสียง

เท่านี้ก็ทำให้คนที่กำลังสนใจที่จะเริ่มต้นการเขียนเว็บไซต์รู้แล้วว่าต้องเริ่มต้นตรงไหน ศึกษาอะไร
และต้องเตรียมความพร้อมอะไรบ้าง…
เขียนโดย ที่ ไม่มีความคิดเห็น:

HTML

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

Responsive Web Design คืออะไร



ความหมาย และ ความสำคัญ ของ 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 ทำให้เสียเวลาโดยไม่จำเป็น
เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)