การสร้างประโยค passive voice

Share the joy
  •  
  •  
  •  
  •  
  •  

Passive voice คือการสร้างประโยคแบบถูกกระทำนั่นเอง เช่น เราพูดว่า โทนี่วาดรูป ถูกเปลี่ยนเป็น รูปถูกวาดโดยโทนนี่ วิธีการเปลี่ยนโดยการ ใส่ V.be + V.3 และอาจกำหนดจาก Tense เช่น Tony draws a picture. –> Picture is drawn by Tony. แปลว่ารูปถูกวาดโดยโทนนี่ เป็นแปลงจาก present simple tense ดังนั้นอาจเป็นการพูดแบบลอยๆ Tony is drawing picture. –> Picture is being drawn by Tony. แปลว่ารูปกำลังถูกวาด แปลงจาก present continuous tense Tony has draw picture. –> Picture has…

Details

การเปลี่ยนประโยคบอกเล่นเป็น ประโยคคำถาม Yes/No Question และการสร้างประโยคปฏิเสธ

Share the joy
  •  
  •  
  •  
  •  
  •  

การทำบอกเล่าเป็นคำถาม Yes No ถ้าในประโยคบอกเล่า Verb to be เป็น Verb แท้ –> ให้กลับ Verb ไว้ต้นประโยคเลย เช่น บอกเล่า – You are hungry. เปลี่ยนเป็นถาม – Are you hungry? ถ้าในประโยคบอกเล่า มีทั้ง Verb ช่วย และ Verb แท้ –> ให้เอา Verb ช่วยขึ้นต้นประโยค บอกเล่า – You are going to … เปลี่ยนเป็นถาม – Are you going to …? ถ้าในประโยคบอกเล่ามีแต่ Verb แท้ ที่ไม่ได้เป็น Verb…

Details

การใช้คำเชื่อมในภาษาอังกฤษ (Conjection)

Share the joy
  •  
  •  
  •  
  •  
  •  

ใครที่ภาษาอังกฤษงูๆปลาๆเหมือนผม เวลาจะเชื่อมคำอะไรก็มักจะเอาคำใกล้ตัว “but”, “if”, “or” พยายามดัดแปลประโยคเพื่อให้เข้าใจความหมาย… ก็เอาตัวรอดแบบบ้านๆไปได้ แต่จริงๆมีคำเชื่อมมากมายที่น่าใช้ดังนี้ครับ or else แปลว่า หรือว่าจะ วิธีใช้ “Fight it, or else lose it” otherwise แปลว่า ไม่เช่นนั้น, ไม่งั้น วิธีใช้ “Today ‘s holiday.Otherwise he’s at work” unless แปลว่า เว้นเสียแต่ว่า วิธีใช้ “You will not pass unless you get score more than 80″ <– คล้ายกับใช้ if   คำว่า “ดังนั้น” จะมีคำคล้ายกัน แต่ใช้ไม่เหมือนกันคือ so แปลว่า…

Details

เรียนสร้างเว็บ lesson 7 : การสร้าง List Gallery

Share the joy
  •  
  •  
  •  
  •  
  •  

ในเว็บไซต์ของทุกท่านผมเชื่อว่าน่าจะมีสักส่วนหนึ่งหล่ะที่ใส่ Gallery อยู่… ผมพนันได้! ที่แน่ใจขนาดนั้นเพราะผมต้องเขียนมันบ่อยมาก จนบางทีอยากจะเขียนเป็น Library ออกมาให้เรียกใช้งานง่ายๆ แต่ Gallery แต่ละตัวก็ไม่ค่อยจะมีรูปแบบที่เหมือนกัน ก็แล้วแต่แรงบรรดาลใจของดีไซน์เนอร์เค้าหล่ะ… แต่ไม่ต้องห่วง ผมจะสอนทำทุกระบวนท่าให้ตอบสนองเลย์เอาท์เว็บไซต์เทพๆได้อย่างแน่นอน   โครงสร้าง HTML เริ่มจากเขียน HTML แท็ก เราจะมองว่ามันคือ ลิสล์แบบไม่มีลำดับ (Unorder list) โดยที่ li คือ gallery แต่ละตัว ตามภาพ โค๊ดที่ได้เป็นดังนี้ <ul> <li>…</li> <li>…</li> <li>…</li> </ul>   Planing หยุด… วางแผนกันสักนิด อย่าเพิ่งเบื่อกันทฤษฎี การวางแผนที่ดีจะทำให้เราเข้าใจ Concept และเดินไปได้ถูกทิศถูกทาง สิ่งที่จะวางแผนตอนนี้คือความกว้างของแต่ละไอเท็ม และช่องว่างของแต่ละอัน สมมุติว่า เราต้องการ Gallery ที่วางเรียงกันจำนวน 4 item ต่อ 1 แถว…

Details

เรียนสร้างเว็บ lesson 6 : ทฤษฎี Box model element

ทุกแท็ก HTML ล้วนเกี่ยวข้องกับทฤษฎี Box model element เพราะการทำเว็บเราจะมองแต่ละแท็กเปรียบเสมือน “กล่อง” (หลับตาแล้วจินตนาการดูว่าเว็บเรามีกล่องเรียงกันซ้อนกันเต็มไปหมด)

บางคนอาจสงสัย ก็แค่ “กล่อง” ธรรมดามันน่าสนใจตรงไหน?

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

 

margin คือ ส่วนนอกกล่อง เอาไว้กำหนดระยะห่างแต่ละกล่อง

border คือ เส้นขอบของกล่อง

padding คือส่วนด้านในของกล่อง ไว้กำหนดระยะในกรณีที่ต้องการความห่างจากกล่องด้านใน

 

เรียนสร้างเว็บ lesson 5 : ความหมายของแท็ก HTML

Share the joy
  •  
  •  
  •  
  •  
  •  

แต่ละแท็ก HTML นั้นมีความหมายแตกต่างกัน การใช้งานก็ไม่เหมือนกัน ไม่ใช่เอะอะอะไรก็ div ไว้ก่อน นั่นสินะ ง่ายดี ไม่ต้องจำ แถมหน้าเว็บก็แสดงผลออกมาสวยงามเหมือนกัน อย่ามักง่ายนะครับ สมัยนี้มักจะเอาเร็วเข้าว่าใส่มั่วๆไปลูกค้าไม่รู้หรอก ลูกค้าไม่รู้ แต่ตัวคุณเองก็รู้ ถือว่าทรยศต่ออาชีพตัวเอง ทำอาชีพนี้ไปก็ไม่รุ่ง บ่นๆๆๆๆ (เพิ่งเจอมากับตัว) ทีนี้ที่เราต้องใส่แท็กให้ถูกต้องตามข้อมูลเพราะเราต้องการให้ Robot  ของ Search engine รู้เรื่อง เมื่อมันรู้เรื่องว่าข้อมูลนี้ มันหมายความว่าอะไร เราต้องการเน้นย้ำเรื่องอะไร มันก็ไม่สับสน และเอาเว็บเราไปจัดลำดับ ตามคีย์เวิดได้อย่างถูกต้องไงล่ะ เรื่องนี้ผมจึงต้องมาสอนการใช้งานแท็กในเว็บไซต์ เช่น แท็ก <h1> ย่อมากจาก หัวข้อที่ 1 เราก็เอาไปครอบหัวข้อหลักของหน้าเว็บนั้น มีแค่ 1 แท็กต่อหน้า (เราไม่ควรพูดหลายๆหัวข้อหลักใน 1 หน้า) แท็ก <h2> ย่อมากจาก หัวข้อที่ 2 เราก็เอาไปครอบหัวข้อย่อยที่ลองจาก <h1> สามารถมีได้หลายหัวข้อย่อย แท็ก <p>…

Details

เรียนสร้างเว็บ lesson 4 : สร้างเมนูหลัก Vertical navigation

ทุกเว็บไซต์จะขาดเมนูสำหรับเชื่อมโยงลิงค์ไปแต่ละหน้าไม่ได้ บทนี้จะสอนการทำเมนูในเว็บไซต์(Navigator) แปลงร่างจากแนวตั้ง ให้เป็นเมนูแนวนอน (Vertical navigator) พร้อมทั้งกำหนด Alignment ของ Navigator ชิดซ้าย กึ่งกลาง ชิดขวา

  • เรียนรู้โครงสร้าง HTML สำหรับ Navigator
  • CSS selector  แบบกำหนด Child node ช่วยกำหนดแท็กลูกหลายๆตัวพร้อมกัน
  • CSS property display : inline-block กำหนดเมนูแนวนอน
  • CSS propery text-align : [value] จัดตำแหน่ง Alignment

 

เรียนสร้างเว็บ lesson 3 : สร้างโครงหลักจากดีไซน์

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

  • แยกส่วน Header, Content, Footer
  • การ Comment การใช้ประโยชน์
  • กำหนดขนาด container หลัก
  • สร้างเลย์เอาท์แบบคอลัมน์
  • การใช้ float right
  • ข้อระวังการใช้ float และการแก้ปัญหา
  • การเขียน CSS ให้เป็น Library กับ การเขียนระบุแต่ละคลาส

เรียนสร้างเว็บ lesson 2 : การใช้ CSS และวางแผน CSS ไฟล์ก่อนเริ่มทำงาน

น้องสมรศรี เตรียมพร้อมยืดเส้นยืดสายได้เลยนะครับ เดี๋ยวจะได้เริ่มลงมือเขียนโค๊ด CSS กันแล้วหล่ะ แต่ถึงเราจะเริ่มเขียนครั้งแรกแต่ก็จะสอนวิธีที่มืออาชีพเค้าใช้วางแผนกับเว็บไซต์ขนาดใหญ่กันด้วย โดยมีหัวข้อดังนี้

  • การเชื่อม Link CSS file กับ HTML
  • CSS Syntax
  • การใช้ Selector – และความแตกต่างระหว่าง Element, Class, ID
  • การใช้ 1 CSS ไฟล์กับหลาย HTML ไฟล์
  • วางแผน CSS file กับเว็บไซต์ขนาดใหญ่

 

เรียนสร้างเว็บ lesson 1 : ปูพื้นฐาน รู้จัก HTML CSS และเครื่องมือ

Share the joy
  •  
  •  
  •  
  •  
  •  

สมรศรี : พี่คะ หนูพร้อมจะลุยสร้างเว็บแล้วค่ะพี่ พี่รู้อะไรสอนหนูมาให้หมดนะคะ อย่ากั๊กนะคะ ผม : ใจเย็นครับ บทนี้ขอนั่งฟังกันก่อน ก่อนเริ่มลุยเขียนเว็บ ขออธิบายทำความเข้าใจเบื้องต้นกันสักนิด เริ่มต้นด้วยความแตก หน้าที่ ของ HTML CSS ตามด้วยรู้จัก เลือกใช้ เครื่องไม้เครื่องมือที่เหมาะสมกับตัวเอง การกำหนดเอกสาร HTML5 และแท็ก HTML ที่โปรแกรมสร้างให้ ตามหัวข้อนี้ครับ ความแตกต่างของ HTML CSS รู้จัก Editor และเลือกใช้งาน การ Manage site ใน Dreamweaver รู้จักกับ HTML Doctype แบบต่างๆ และใช้งาน Doctype HTML5 รู้จัก HTML tag เบื้องต้น การวางแผนใช้งาน CSS สมรศรี : หนูจะหลับไม๊คะเนี่ยะ ผม :…

Details