ติดต่อสอบถาม!02-933-0427 , 088-807-9770

HTML+CSS

  • HTML CSS

    HTML+CSS

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

VDO รีวิวลักษณะการสอนของอาจารย์

HTML CSS
HTML CSS

HTML CSS รายละเอียด


กลุ่มเป้าหมาย

• ผู้สนใจทั่วไปที่ต้องการเรียนรู้การออกแบบเว็บไซต์เริ่มต้น
• นักเรียน นักศึกษาที่ต้องการพัฒนาโครงงานคอมพิวเตอร์ด้วยภาษา HTML และ CSS
• ฝ่ายกราฟฟิกที่ดูแลด้านการออกแบบเว็บไซต์


ระยะเวลาในการอบรม

• 5 ชม. (2 วัน)
• ยังไม่มีกำหนดเปิด (ลงชื่อจองไว้ได้) เมื่อเปิดแล้วจะแจ้งข่าวทางอีเมล์ที่ลงชื่อไว้ทันที


ราคาคอร์สอบรม

• หลักสูตรนี้ อบรมฟรี ไม่เสียค่าใช้จ่าย

ความรู้พื้นฐาน

• มีความรู้ความเข้าใจเรื่องการติดตั้ง/ถอนการติดตั้ง โปรแกรมพื้นฐาน
• มีความรู้ในการใช้อินเตอร์เน็ตและเครือข่ายพื้นฐาน
• ใช้งานอินเตอร์เน็ตและระบบปฏิบัติการวินโดว์ได้


วิทยากรผู้สอน

• อาจารย์สามิตร โกยม  (ดูประวัติ)

HTML CSS เนื้อหาการอบรม

เริ่มต้นกับ HTML และ CSS

• แนะนำตัววิทยากร
• การเตรียมเครื่องมือที่จำเป็นในการเรียน (Dreamweaver)
• การตั้งค่าเครื่องมือเบื้องต้น
• พื้นฐานงานกราฟฟิกบนเว็บไซต์
• รู้จักเทคโนโลยีการออกแบบเว็บไซต์
• ตัวอย่างเว็บไซต์ที่ออกแบบตามมาตรฐาน
• แนวทางการออกแบบเว็บไซต์สมัยใหม่


เริ่มต้นกับ HTML

• รู้จักโครงสร้างของภาษา HTML
• Syntax พื้นฐานของ HTML
• การจัดการกับข้อความและภาพบนหน้าเว็บเพจ
• การใช้ตารางในภาษา HTML
• การสร้างแบบฟอร์มรับข้อมูล
• Workshop การสร้างหน้าเว็บไซต์ด้วย HTML

เริ่มต้นกับ CSS

• แนะนำเว็บไซต์ที่ออกแบบด้วย CSS
• Tag พื้นฐานในการเขียน CSS
• รู้จักโครงสร้างในการเขียน CSS
• Box Model
• CSS กับการรูปภาพ
• การวาง navigation menu ด้วย CSS
• การวาง layout เว็บไซต์ด้วย CSS
• Workshop การออกแบบเว็บไซต์ด้วย CSS

ตัวอย่าง WORKSHOP การออกแบบโครงสร้างเว็บไซต์ด้วย CSS

HTML CSS

HTML CSS

HTML CSS

HTML CSS

ความรู้เกี่ยวกับ CSS เบื้องต้น

CSS หรือ ย่อมาจาก Cascading Styles Sheets เป็นแนวทางสำหรับใช้ในการจัดรูปแบบของ HTML
ด้วยเหตุที่ HTML เป็นเนื้อหา ส่วน Style sheet เป็นการนำเสนอเนื้อหานั้นๆ

Styles ไม่ได้มีลักษณะใดๆ ที่คล้ายกับ HTML แต่จะมีคุณสมบัติ และค่า ของมันหรือ
ซึ่งอยู่ในรูปแบบ 'property:value'
โดยที่ property ต่างๆ สามารถนำไปใช้กับแท็ก HTML

ศึกษาวิธีการนำ CSS ไปใช้กับ HTML

มีวิธีในการนำ CSS ไปใช้กับ HTML อยู่ 3 วิธี ประกอบไปด้วย

  1. In-line
  2. Internal
  3. External

 

การใช้วิธีแบบ In-line

In-line เป็นการเขียน CSS เข้าไปในแท็ก HTML โดยใช้ style attribute
ซึ่งมีลักษณะดังต่อไปนี้


HTML CSS


จากโค้ดด้านบนเป็นการกำหนด paragraph ให้เป็นสีแดง

แต่จำไว้ว่า HTML เป็นเอกสารในลักษณะ stand-alone หรือเป็นการนำเสนอเอกสารเปล่าๆ
ดังนั้นหากเป็นไปได้ควรหลักเลี่ยงการแทรก CSS เข้าไปในแท็ก HTML


การใช้วิธีแบบ Internal


การใช้วิธีการฝังโค้ด หรือวิธีแบบ Internal style ใช้สำหรับหน้าเพจทั้งหมด จะแทรกอยู่ในแท็ก <head> และมีแท็ก <style>
อยู่ล้อมรอบ styles ในหน้าเพจนั้นๆ
ซึ่งมีลักษณะดังต่อไปนี้


HTML CSS


จากโค้ดด้านบนเป็นการกำหนดสีของ paragraph และสีพื้นหลังหรือ background ของหน้าเพจนั้น

เช่นเดียวกับกันกับวิธีแบบ in-line ซึ่งทางที่ดีควรจะจัดให้ CSS และ HTML แยกกันด้วยวิธีที่ 3 คือ Extenal


การใช้วิธีแบบ External


รูปแบบ External style เป็นวิธีการใช้ CSS ทั้งเว็บหรือสำหรับหลายเว็บไซต์ได้ ซึ่งจะมีไฟล์ CSS แยกออกมาต่างหาก
ลักษณะไฟล์เป็นดังนี้


HTML CSS


ถ้าทำการบันทึกไฟล์จากด้านบนเป็นชื่อ web.css เราจะสามารถลิ๊งค์ไฟล์นีเข้ากับ HTML ได้ดังนี้


HTML CSS


 

สิ่งที่เรียกว่า Selects, Properties , and Values สิ่งที่เป็นองค์ประกอบของ CSS


ในขณะที่ HTML มี tags , CSS ก็มี selectors
Selectors คือชื่อที่กำหนดให้กับ styles ทั้งในรูปแบบ Internal และ External style โดยในเบื้องต้นนี้เราจะสนใจ
เกี่ยวกับ HTML selectors ซึ่งเป็นแท็ก HTML ง่ายในการใช้เปลี่ยนแปลง style ที่กำหนด

ใน selector แต่ละตัวจะมี properties อยู่ภายในเครื่องหมายปีกกา { } ซึีงอาจจะประกอบไปด้วย
รูปแบบของคำว่า color, font-weight หรือ background-color. เป็นต้น

ค่า value จะกำหนดต่อท้ายเครื่องหมาย : โค่ลอน และจะมีเครื่องหมาย ; เซมิโคล่อน ทำการแบ่ง
property แต่ละตัว

ดังตัวอย่างข้างล่าง


HTML CSS


เป็นการกำหนดค่า value ให้กับ property ที่ชื่อ font-size และ color โดยมี body เป็นตัว selector

ดังนั้น โดยง่ายๆ เมื่อมีการนำ CSS ด้านบนไปใช้ก็จะมีผลทำให้ข้อความที่อยู่ในแท็ก <body> มีขนาดตัวอักษรเท่ากับ 12 pixels และมีสีแดง

Colours การใช้งานสี


การกำหนดสีใน CSS สามารถกำหนดเป็นชื่อสี กำหนดในรูปแบบ rgb หรือกำหนดแบบเลขฐาน 16 ก็ได้

เช่้นสีแดง อาจกำหนดเป็น

red หรือ
rgb(255,0,0) หรือ
#ff0000 ก็ได้

มีชื่อสีทั้งหมด 17 ชื่อสีที่ได้กำหนดไว้แล้วได้แก่ aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, orange, purple, red, silver, teal, white, และ yellow.

transparent สามารถนำมาใช้กำหนดได้

ค่าตัวเลข 3 ตัวใน rgb คือค่าที่อยู่ระหว่าง 0 ถึง 255 โดย 0 จะเป็นระดับค่าสีที่ต่ำที่สุด
และ 255 จะเป็นระดับค่าสีที่สูงที่สุด นอกจากนี้เรายังสามารถกำหนดค่าดังกล่าว
ในรูปของเปอร์เซ็นต์ เช่น rgb(80%,20%,20%) เป็นต้น

สำหรับการกำหนดค่าสีด้วยเลขฐาน 16 จะนำหน้าด้วย เครื่องหมาย # เข่น #FF0000 เป็นต้น

ตัวอย่างการกำหนดค่าสี


HTML CSS


การจัดการเกี่ยวกับขนาดและรูปร่างของข้อความ


เราสามารถที่จะจัดการกับขนาดและรูปร่างของตัวอักษรได้ด้วย property ต่างๆ ต่อไปนี้


font-family


เป็นการกำหนดลักษณะของตัวอักษรที่ต้องการใช้ โดยปกติจะใช้ตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้งาน
และส่วนใหญ่จะหลีกเลี่ยงการเลือกใช้ตัวอักษรที่ไม่แน่ชัด

ในการกำหนดค่าตัวอักษรใน font-family ค่าที่นิยมใช้ได้แก่ arial, verdana และ times new roman
หากเป็นภาษาไทยก็จะใช้พวก Tahoma, "microsoft Sans Serif" และ Verdana ปกติจะมีการเลือกใช้
font มากกว่า 1 font โดยทำการแยกแต่ละ font ด้วยเครื่องหมาย commas ซึ่งการใช้ font หลายตัวก็เพื่อ
ป้องกันปัญหาในกรณีบางเครื่องไม่มี font ตัวแรก ก็จะมีการไปดึงเอา font ตัวที่ 2 หรือ ที่ 3 หรือตัวถัดไปมาใช้

หากกรณีชื่อ font นั้นยาว หรือมีช่องว่าง เช่น microsoft Sans Serif ก็ต้องทำการครอบด้วยเครื่องหมาย " "
quotation marks จะได้เป็น "microsoft Sans Serif" เป็นต้น

ตัวอย่างการกำหนด font-family


HTML CSS


font-size


เป็นการกำหนดขนาดตัวอักษร หากข้อความนั้นๆ เป็นหัวข้อ ไม่ใช่ paragraph ควรใช้แท็ก <h1> <h2>..
แทน ตัวอย่างการกำหนดขนาดตัวอักษรด้วย font-size


HTML CSS


font-weight


เป็นการกำหนดความหนาของตัวอักษร โดยทั่วไปจะใช้แค่ bold หรือ normal
ตัวอย่างการกำหนดความหนาของตัวอักษร


HTML CSS


font-style


โดยทั่วไปจะใช้เป็นการกำหนดตัวอักษรให้เป็นตัวเอียงหรือไม่
คือเป็น Italic หรือ normal
ตัวอย่าง


HTML CSS


text-decoration


โดยทั่วไปจะเป็นการกำหนดให้มีการขีดเส้นใต้ข้อความหรือไม่ นอกจากนี้ยังมีค่าอื่นอืก
ดังต่อไปนี้

text-decoration:overline; เป็นการกำหนดให้มีเส้นอยู่เหนือข้อความ
text-decoration:line-through; เป็นการกำหนดให้มีเส้นลากผ่านข้อความ
text-decoration:underline; เป็นการกำหนดให้มีเส้นอยู่ใต้ข้อความ
text-decoration:none; เป็นการกำหนดไม่ให้มีเส้นใต้ข้อความ

ตัวอย่างการใช้งาน


HTML CSS


text-transform


เป็นการกำหนดลักษณะตัวเล็ก ตัวใหญ่ ให้กับตัวอักษร

text-transform:capitalize; กำหนดให้ตัวแรกทุกๆ ตัวของแต่ละคำเป็นตัวใหญ่
text-transform:uppercase; กำหนดให้ทุกๆ ตัวเป็นตัวใหญ่
text-transform:lowercase; กำหนดให้ทุกๆ ตัวเป็นตัวเล็ก
text-transform:none; ไม่กำหนดใดๆ

ตัวอย่างการใข้งาน


HTML CSS


Text spacing


การกำหนดช่องว่างของข้อความ property ชื่อ letter-spacing หรือ word-spacing
จะให้กำหนดช่องว่างระหว่างตัวอักษร หรือช่องว่างระหว่างคำตามลำดับ จะกำหนดเป็นตัวเลยหรือ
normal ก็ได้

line-height จะใช้กำหนดความสูงของ element เข่นแท็ก <p> โดยไม่ต้องทำการกำหนด
ขนาดตัวอักษรในแท็ก <p> โดยค่าที่กำหนดจะเป็นตัวเลขหรือ normal ก็ได้

text-align เป็นกำหนดการจัดข้อความ สามารถกำหนดเป็น left,center,right หรือ justify ก็ได้

text-indent เป็นการกำหนดการเยื้องของข้อความในบรรทัดแรก

ตัวอย่างการใช้งาน


HTML CSS


Margins and Padding การจัดการพื้นที่ระหว่างสิ่งต่างๆ


margin และ padding เป็น property ที่ใช้สำหรับกำหนดช่องว่างระหว่าง element โดยที่
margin จะเป็นการกำหนดข่องว่างภายนอก element ส่วน padding เป็นการกำหนดช่องว่าง
ภายใน element

เปลี่ยน CSS โค้ดสำหรับห้วข้อรองหรือ h2 ดังนี้


HTML CSS


จากโค้ดด้านบนจะเป็นการกำหนดช่องว่างภายนอก element h2 เท่ากับ 10 pixels ด้วย margin
และกำหนดช่องว่างภายในด้วย padding เท่ากับ 15 pixels

นอกจากนั้นแต่ละด้านของ element ก็สามารถกำหนดค่าเฉพาะได้ ได้แก่ margin-top, margin-right
, margin-bottom, margin-left, padding-top, padding-right, padding-bottom และ padding-left

 

The Box Model


margin , padding และ border เป็นส่วนประกอบหนึ่งของส่ิงที่เรียกว่า Box โมเดล ซึ่งมีลักษณะดังนี้คือ
ภายใน Box โมเดล จะมีเนื้อหาหรือ content ภายใจ และถูกล้อมรอบด้วย padding , border และ margin
ตามลำดับ ดูภาพด้านล่างประกอบ

HTML CSS

จริงๆ แล้วไม่จำเป็นต้องใจ้ทั้งหมดก็ได้ แต่จำไว้ว่า Box โมเดลสามารถนำไปประยุกต์ใช้กับ element อื่นภายใน
เพจได้ทุก element

Borders การจัดการเกี่ยวกับขอบ


borders สามารถนำไปใช้กับแท็ก HTML เกือบทุกตัวที่อยู่ในแท็ก <body>

การกำหนดค่า border ให้กับ element จะกำหนดโดยใช้ border-style โอยค่าอาจกำหนดเป็น
ค่าต่างได้ดังนี้ solid, dotted, dashed, double, groove, ridge, inset และ outset

border-width เป็นกำหนดค่าความกว้างของ border โดยปกติจะกำหนดค่าเป็น pixels ซึ่ง property
นี้ยังเป็นคุณสมบัติของแต่ละด้านของ element ด้วยเช่น border-top-width, border-right-width,
border-bottom-width และ border-left-width.เป็นต้น

สุดท้าย border-color เป็นการกำหนดสีของ border
วิธีการใช้งาน


HTML CSS


จากโค้ดด้านบนเป็นการกำหนด border สีแดง มีลักษณะเป็นเส้นประกว้าง 3 pixels โดยรอบหัวข้อรอง
และมีความกว้าง border ด้านซ้ายและด้านขวา เท่ากับ 10 pixels

รวมส่วนประกอบต่างๆ ข้างบนเป็น CSS


โค้ดข้างล่างเป็นการนำเอา วิธีการ CSS แต่ละตัวของ selector มารวมกัน
และเมื่อเราทำการบันทึกเป็นไฟล์ CSS และนำไปใช้กับไฟล์ HTML ก็จะเห็น
ผลที่เกิดขึ้น


HTML CSS

HTML CSS คำค้นหายอดนิยมในหน้า HTML+CSS


Basic HTML+CSS,Basic,Basic HTML,Basic CSS,HTML,CSS, รับสอน HTML,รับสอน HTML เบื้องต้น,รับสอน HTML ออนไลน์,รับสอน HTML ฟรี,รับสอน โปรแกรม HTML,รับสอน HTML framework,รับสอน HTML 2555,รับสอน HTML 2556,รับสอน เขียน โปรแกรม HTML,รับสอน HTML online,รับสอนภาษา HTML,สอน HTML,สอน HTML เบื้องต้น,สอน HTML ออนไลน์,สอน HTML online,สอน HTML ฟรี,สอนภาษา HTML,สอน โปรแกรม HTML, สอน HTML framework,สอน HTML 2555,สอน HTML 2556,สอน เขียน โปรแกรม HTML,เรียน HTML,เรียน HTML เบื้องต้น,เรียน HTML ออนไลน์,เรียน HTML online,เรียน HTML ฟรี,เรียนภาษา HTML,เรียน โปรแกรม HTML,เรียน HTML framework,เรียน HTML 2555,เรียน HTML 2556,เรียน เขียน โปรแกรม HTML,เรียน HTML ที่ไหนดี,เรียน HTML ฟรี,เรียนภาษา HTML,เรียนภาษา HTML เบื้องต้น,เรียนภาษา HTML ออนไลน์,เรียนภาษา HTML online,เรียนภาษา HTML ฟรี,รับสอน CSS,รับสอน CSS เบื้องต้น,รับสอน CSS ออนไลน์,รับสอน CSS ฟรี,รับสอน โปรแกรม CSS,รับสอน CSS framework,รับสอน CSS 2555,รับสอน CSS 2556,รับสอน เขียน โปรแกรม CSS,รับสอน CSS online,รับสอนภาษา CSS,สอน CSS,สอน CSS เบื้องต้น,สอน CSS ออนไลน์,สอน CSS online,สอน CSS ฟรี,สอนภาษา CSS,สอน โปรแกรม CSS,สอน CSS framework,สอน CSS 2555,สอน CSS 2556,สอน เขียน โปรแกรม CSS,เรียน CSS,เรียน CSS เบื้องต้น,เรียน CSS ออนไลน์,เรียน CSS online,เรียน CSS ฟรี,เรียนภาษา CSS,เรียน โปรแกรม CSS,เรียน CSS framework,เรียน CSS 2555,เรียน CSS 2556,เรียน เขียน โปรแกรม CSS,เรียน CSS ที่ไหนดี,เรียน CSS ฟรี,เรียนภาษา CSS,เรียนภาษา CSS เบื้องต้น,เรียนภาษา CSS ออนไลน์,เรียนภาษา CSS online,เรียนภาษา CSS ฟรี

Facebook

ติดต่อเรา

เลขที่ 2 ซอยลาดพร้าว 65/1 ถ.ลาดพร้าว แขวงสะพานสอง
เขตวังทองหลาง กรุงเทพมหานคร 10310

โทรศัพท์ • 02-933-0427 , 088-807-9770
แฟกซ์ • 02-933-0427
อีเมล์ • contact@itgenius.co.th

Design details

บริการด้าน IT Service ในปัจจุบันมีความสำคัญกับทุุกธุรกิจ ดังนั้น IT Genius จะต้องเป็นผู้ให้บริการ ด้านไอทีอย่างสมบูรณ์แบบ ครบวงจร เพื่อตอบสนองทุกความต้องการของลูกค้าในยุคปัจจุบัน