วันอังคารที่ 7 มิถุนายน พ.ศ. 2559

HTML

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

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

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


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

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


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

การเรียกใช้งานหรือทดสอบการทำงานของเอกสาร HTML จะใช้โปรแกรม Internet Web Browser เช่น Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Google Chrome เป็นต้น

ข้อเสีย คือ โปรแกรมเหล่านี้มัก generate code ที่เกินความจำเป็นมากเกินไป ทําให้ไฟล์ HTML มีขนาดใหญ่ และแสดงผลช้า ดังนั้นหากเรามีความเข้าใจภาษา HTML จะเป็นประโยชน์ให้เราสามารถแก้ไข code ของเว็บเพจได้ตามความต้องการ และยังสามารถนำ script มาแทรก ตัดต่อ สร้างลูกเล่นสีสันให้กับเว็บเพจของเราได้



อ้างอิง http://www.codingbasic.com/html.html
           http://www.fusionidea.biz/html-คืออะไร/#prettyPhoto
           http://www.enjoyday.net/webtutorial/html/html_chapter01.html



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

Responsive Web

Responsive Web Design คืออะไร?

     Responsive Web Design คือ การออกแบบเว็บไซต์ให้รองรับขนาดหน้าจอของอุปกรณ์ทุกชนิด ตั้งแต่คอมพิวเตอร์ที่มีขนาดหน้าจอหลากหลาย ไปจนถึงโทรศัพท์มือถือ Smart Phone และ Tablet ต่างๆ ที่มีมาตรฐานขนาดหน้าจอที่แตกต่างกัน พูดได้ว่าออกแบบครั้งเดียวสามารถนำไปใช้ได้กับทุกหน้าจอเลยทีเดียว

หลักการของ 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 ได้รับการรับรองจาก google ช่วยให้ติด index google ได้ทั้ง desktop และ mobile ในหน้าเดียว
  • การทำ Responsive เพียงแค่ไซต์เดียวก็รองรับทุกอุปกรณ์ และไม่ต้องทำหลายๆหน้า ช่วยให้ไม่หนักเซิฟเวอร์ 
  • ประหยัดค่าใช้จ่ายในการจัดทำ โดยที่เราไม่ต้องทำหน้าต่างแยกกันระหว่าง mobile และ desktop
  • นอกจากนี้ยังประหยัดเวลาลดระยะเวลาในการทำงานหลายๆหน้า โดยที่เราก็วางแผนครั้งเดียว และทำเพียงแค่หน้าเดียวเท่านั้นเอง
  • รวดเร็วในการดูแล จัดการเว็บไซต์ ไม่ยุ่งยาก และไม่ต้องไปเปลี่ยนแปลงเว็บไซต์หลายๆหน้า 
  • รองรับผู้ใช้ทุกอุปกรณ์ เพราะสุดท้ายผู้คนจากหลายอุปกรณ์ก็มีความต้องการเดียวกัน
  • เว็บไซต์ไม่ต้อง redirect หน้าไปหาหน้า mobile ให้เสียเวลา ช่วยให้เซิฟเวอร์ไม่ทำงานหนักและไม่วุ่นวาย
  • Googlebot-Mobile จะสนใจกับไซต์ที่รองรับอุปกรณ์ประเภท mobile ดังนั้นมั่นใจได้เลยว่า Googlebot-mobile จะเข้ามาเก็บข้อมูลในเว็บไซต์ที่ทำออกมารองรับ mobile ของคุณอย่างแน่นอน หลังจากนี้เราก็มาเริ่มทำ seo ผ่าน mobile กันต่อไป 
  • ช่วยทำให้การค้นหาผ่าน mobile เป็นไปได้ง่ายมากยิ่งขึ้น

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


อ้างอิง   http://www.softmelt.com/article.php?id=391
             http://www.siamhtml.com/responsive-web-design-คืออะไร

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