รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

CSS3 และ HTML5 วิธีเรียนรู้ให้เกิดประโยชน์สูงสุด !!!

    ก่อนที่เราจะเลือกใช้ HTML ในหน้าเอกสารของเรานั้น เราต้องรู้ก่อนเป็นอันดับแรกว่า เนื้อหาที่เรากำลังเขียนอยู่นั้น มันประกอบไปด้วยการแสดงผลแบบไหนบ้าง เช่น แบ่งกลุ่ม Layout ไหม แสดงผลเป็น List ด้วยหรือไม่ มี Form กี่อัน มีตารางหรือเปล่า แทรกรูปภาพตรงไหน

     

    ซึ่งการคิดแยกแยะตามย่อหน้าข้างต้นนั้น ภาษา HTML มี tags เอาไว้จัดการกับเนื้อหาที่แตกต่างกันทั้งหมด เพราะฉะนั้น เราจึงจำเป็นต้องเรียนรู้ภาษา HTML ก่อนเป็นอันดับแรก แยกแยะให้ออกก่อนว่า จะใช้ Element ใด ตรงไหน ไม่ใช่ <div> แหลก

     

    แยกให้ออกว่า อะไรคือ CSS และ อะไรคือ HTML เอามาใช้ร่วมกันยังไง

    ผู้ที่เพิ่งเริ่มศึกษาการเขียน CSS โดยส่วนมากแล้วมักจะสับสนว่าสองภาษานี้มันต่างกันตรงไหน ยิ่งทุกวันนี้คำว่า CSS ติดปากเป็นคำเรียกขานรวมเหมาทั้งคนเขียน HTML เข้าไปด้วยแล้วยิ่งไปกันใหญ่

     

    HTML คือ ภาษาโครงสร้าง ไม่มี HTML เราก็ไม่รู้จะเขียน CSS ไปจัดการกับอะไร นอกจากจะไปเขียนจัดการกับ XML หรือภาษาอื่นๆ ที่อนุญาตให้ CSS จัดการได้ แต่ในที่นี้เราพูดถึง HTML

    CSS คือภาษาที่เอาไว้ทำให้ HTML แสดงผลให้สวยงามตามท้องเรื่องในอุปกรณ์ต่างๆ (User Agents)

    เพราะฉะนั้น ทั้งสองภาษาจึงควบคู่กันไป

     

    เริ่มศึกษา HTML อย่างมีหลักการ

    ผมคงไม่สามารถขอให้ทุกๆ คนเข้าไปอ่านวีธีการเขียน HTML หรือ หลักการของภาษา HTML ใน W3C ได้ทั้งหมด ซึ่งที่ที่สามารถศึกษาได้เป็นอย่างดีก็คือ เว็บของ W3C อยู่วันยังค่ำ

     

    โดยเราควรเริ่มจากเรียนรู้ว่า HTML5 มีพฤติกรรมข้อมูลอยู่ 7 ประเภท และกลุ่ม Element อยู่ 15 หมวดหมู่ โดย 7 ประเภทของ HTML5 นั้นเอาไว้แยกแยะรูปแบบการวางโครงสร้างของเอกสาร ส่วน 15 หมวดหมู่นั้น เอาไว้จัดการกับเนื้อหาแบบต่างๆ ที่เกิดขึ้น เช่น <article> เราต้องบอกได้ว่า tag <article> นั้น อยู่ในหมวดหมู่ Sections (จาก 15 หมวดหมู่) ซึ่งมีพฤติกรรมข้อมูล เป็น Flow content และ Sectioning content (จาก 7 ประเภท)

     

    เมื่อมองย้อนกลับไปยัง XHTML การแยกแยะหมวดหมู่ของภาษา ไม่ได้แยกเหมือน HTML5 เพราะ XHTML นั้นถือเอาการวางโครงสร้างเอกสารเป็นหลัก XHTML จะแยก Element ออกตาม Modules ซึ่งแต่ละ Module นั้นจะดูจากการใช้งาน เช่น Text Module มีอะไรบ้าง หรือ List Module มีอะไรบ้าง หรือ Form Module มีอะไรบ้าง (ทั้งหมดประมาณ 17 Modules) แล้วค่อยไปเจาะจงอีกทีว่า ค่าพื้นฐานแสดงผลแบบไหน แล้วมีกฎการใช้งานยังไง ซึ่งจะสวนทางกับ HTML5 เพราะ HTML5 นั้นวางกฎการใช้งานตามประเภทมาก่อน เพื่อที่จะแยกแยะรูปแบบการเขียนทีหลัง

     

    หมวดหมู่ Elements ของ HTML5

    The Root Element
        html
    Document metadata
        head, title, base, link, meta, style
    Scripting
        script, noscript
    Sections
        body, section, nav, article, aside, h1-h6, hgroup, header, footer, address
    Grouping contents
        p, hr, pre, blockqoute, ol, ul, li, dl, dt, dd, figure, figcaption, div
    Text-level semantics
        a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, sup, i, b, mark, ruby, rt, rp, bdo, span, br, wbr
    Edit
        ins, del
    Embedded content
        img, iframe, embed, object, param, video, audio, source, canvas, map, area
    Tabular data
        table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th
    Forms
        form, fieldset, legend, label, input, button, select, datalist, optgroup, option, textarea, keygen, output, progress, meter
    APIs for the text field selections
    Interactive

        details, summary, command, menu
    Link and link type
    Common idioms without dedicated elements
    Matching HTML elements using selectors


    หัวใจสำคัญของการศึกษา HTML5 สำหรับทำเว็บ ให้เน้นทำความเข้าใจ 3 หมวดหมู่หลักนี้ก่อนครับ Sections, Grouping content และ Text-level Semantics หลังจากนั้น ค่อยขยับขยายไปหาอีก 12 หมวดหมู่ที่เหลือ

     

    กฎการใช้งาน HTML5 Elements แยกตามพฤติกรรม

    เมื่อเรารู้แล้วว่า Elements แต่ละตัว อยู่ในหมวดหมู่ไหน ขั้นต่อไป ให้ตามไปดูพฤติกรรมของเหล่า Element นั้นๆ คำว่า พฤติกรรมของเหล่า Element นั้นคืออะไรหรือ เอากันง่ายๆ ว่ากันซึ่งๆ หน้า คือ สิ่งที่จะบอกว่า “เราสามารถเขียน tag A เข้าไปใน tag B ได้หรือไม่” เพราะในภาษา HTML5 นั้น มีกฎเกณฑ์ควบคุมเอาไว้หมดแล้วครับ โดยที่ทั้ง 7 พฤติกรรมนั้น มีประมาณนี้

        Metadata content คือ กลุ่มของ Elements ที่เอาไว้ตั้งค่าหรือบอกพฤติกรรมหลักของเอกสาร  หรือเอาไว้แสดงความสัมพันธ์กับเอกสารอื่นๆ มี base, command, link,meta, noscript, script, style, title
        Flow content โดยกฎพื้นฐาน Element เกือบทั้งหมดของ HTML5 นั้นมีพฤติกรรมเป็น Flow content อยู่แล้ว ข้อสำคัญที่สุดคือ ห้ามมี tag เปล่า
        Sectioning content คือ กลุ่มที่เอาไว้แสดงรูปแบบความเป็นหน้าเอกสาร มี article, aside, nav, section
        Heading content คือ กลุ่มที่เอาไว้บอกการเป็น “หัวข้อ” โดยหลักๆ แล้วเอาไว้ใช้ร่วมกับ Sectioning content โดยมี h1-h6 และ hgroup
        Phrasing content คือ หน่วยที่ติดต่อโดยตรงกับ “ตัวหนังสือ” หรือ Element ที่เป็น Phrasing content ด้วยกันเอง หรือ ถ้าอยากจำให้ง่าย มันคือ “inline element” ตามแบบฉบับของ XHTML นั่นเอง ห้ามเอา Phrasing content ไปเขียนครอบ Element ใดๆ ที่ไม่ใช่ Phrasing content โดยเด็ดขาด เช่น อย่าเอา span ไป ครอบ aside หรือ อย่าเอา em ไปครอบ section
        Embedded content คือ กลุ่มที่เอาไว้ แทรกเนื้อหาที่เป็น Media ทั้งหลาย หรือแทรกเนื้อหาจากแหล่งอื่น มี audio, canvas, embed, iframe, img, math, object, svg, video
        Interactive content คือ กลุ่มของ Element ที่ทำหน้าที่ ปฏิสนธิกับผู้ใช้โดยตรง เช่น ปุ่มกดต่างๆ ส่วนมากจะอยู่ในหมวดหมู่ของ Form และ tag <a> ถือเป็น Interactive content ด้วย

    โดยใน HTML5 Element ใดๆ นั้น สามารถมีพฤติกรรมได้มากกว่า 1 อย่าง ดั่งเช่น <article> ที่ผมยกตัวอย่างมาไว้ก่อนหน้า ซึ่งมีพฤติกรรมเป็นทั้ง Flow content และ Sectioning content
     
    ขั้นตอนการเรียนรู้ CSS3

    CSS3 แตกต่างไปจาก CSS2 แบบยกเครื่อง การเริ่มต้นเรียนรู้จึงจำเป็นต้องปรับเปลี่ยนรูปแบบไปด้วย ใน CSS3 นั้น ระบบการทำงานแต่ละอย่างจะถูกแยกออกมาเป็น Module เดี่ยวๆ ของใครของมัน รวมไปถึง Selectors ของ CSS3 เองด้วย ใน CSS2 Selectors นั้น W3C ได้รวมเอา Selectors เป็นองค์ประกอบหลักของการเขียน CSS ใน ทุกๆ Models (CSS2 เรียก Model ส่วน CSS3 เรียก Module)

    CSS3 นั้นแยกเนื้อหาออกเป็น Modules ซึ่งในแต่ละ Module นั้นจะมี CSS Properties และ Values เพื่อใช้ในการควบคุมการแสดงผล ของ HTML โดยสื่อสารผ่าน Selectors

    ใน CSS3 ทาง W3C ได้ยกเรื่องของ Selectors ออกมาเป็น CSS Selectors Module Level 3 ซึ่งถือเป็น Module แรกสุดของ CSS3 ที่ประกาศเป็นสถานะ PR (Proposed Recommendation) แต่ในขณะเดียวกัน CSS2.1 ยังอยู่ในสถานะ CR (Candidate Recommendation) อยู่เลยครับ

    CSS3 Modules ที่จำเป็นต้องเรียนรู้ก่อนเมื่อมีเวลา

        CSS Selectors
        CSS Background and Borders
        CSS Color
        CSS Fonts
        CSS Basic Box model
        CSS Multi-column layout
        CSS 2D Transformations
        CSS Transitions
        CSS Animation
        CSS Basic user interface
        CSS Values and Units

    ตัวอย่างการเริ่มต้นศึกษาก็เช่น CSS Basic Box Model คืออะไร และมันมีอะไรบ้าง

    ส่วนประกอบ (Properties) ของ Module นี้ มีอะไรบ้าง คือคำถามหลักที่เกิดขึ้น เมื่อเราได้ยินคำว่า “Box Model” ให้จดจำเอาไว้ว่า มันมีประมาณนี้


        ประเภทของ Box
            Display
            Block-Level
            Run-in การสั่ง run-in นั้น กระทำก็ต่อเมื่อ เราต้องการเอา Element ที่เป็น formattedBlock มาเรียงต่อกันกัน ให้สั่ง display: run-in;
            Compact
        Padding
        Margin ซึ่ง Margin แยกออกเป็น 2 แบบ
            Margin properties ปรกติ
            Collapsing Margins ใน Collapsing นี้ มันจะอยู่ใน <table>
        Width และ Height
        min-width, min-height, max-width, max-height
        กฎการคำนาณ ความกว้าง สูงและ margins
        Float
        Overflow
        Visibility


        * หมายเหตุ คำถามต่อมา หลายคนคงอยากถามว่า แล้วไอ้ Element ของ HTML5 ที่มันเป็น Block element มันมีอะไรบ้างหละ? วิธีการจดจำ ให้มองไปที่ หมวดหมู่ของ HTML5 ในส่วนของ Sections และ Grouping Contents


    เมื่อเรารู้ว่า HTML Element ที่เรากำลังสั่งงานอยู่นั้น คืออะไร เราก็สามารถที่จะใช้ Properties สั่งงานได้ถูกต้อง เช่น เช่น เราต้องการสั่งงาน <aside> ซึ่ง tag <aside> นั้นถือเป็น formattedBlock Candidate สามารถที่จะใช้ Properties ต่างๆ ที่เป็นของ Basic box model นั้น สั่งงานได้เลย


    การสังเกตว่า Element ไม่มีคุณสมบัติเป็น Block Element ให้จดจำง่ายๆ คือ HTML5 เกือบทุกตัวที่มีพฤติกรรมเป็น Phrasing content โดยถ้าเราอยากให้ Elements เหล่านี้ต้องการเปลี่ยนรูปแบบการแสดงผลเป็น Block และสามารถใช้ Box model properties สั่งงานได้อย่างสมบูรณ์ เราสามารถทำได้โดย สั่งให้ Element นั้นๆ display เป็น block ก่อนได้ เช่น ถ้าเราต้องการสั่งงาน <abbr> ให้แสดงผลแบบ <footer> ให้ได้ เราสามารถเขียนได้ ประมาณนี้
    abbr {display: block;} หลังจากสั่ง display เป็น block แล้ว เราก็สามารถใช้ properties อื่นๆ ที่สามารถใช้ได้กับ Block element โดยตรง


    ง่ายๆ สำหรับหลักการ ในการเรียนรู้อย่างเป็นระบบคือ ให้มุ่งไปที่ Modules ต่างๆ ของ CSS3 ก่อน แล้วจดจำ Properties ที่มีอยู่ให้ได้ รวมถึงใช้ Values ให้เป็น