สอนเขียนเว็บไซต์ HTML,Css,พื้นฐานการทำเว็บไซต์: 2014

วันจันทร์ที่ 24 พฤศจิกายน พ.ศ. 2557

โครงสร้างของเว็บไซต์ html5

โครงสร้างของเว็บไซต์ที่เพิ่มมาของ Html5
1.ส่วนหัว โลโก้ หรือแบนเนอร์ หรือชื่อเรื่อง (header)
2.ส่วนนำทาง หรือแถบนำทาง (nav)
3.ส่วนเนื้อหาที่ถูกแบ่งเป็น3คอลัมน์ (content)
4.บทความ ในแต่ละคอลัมน์ หรือโฆษณา
5.ส่วนท้าย ไว้แสดงเครดิตผู้เขียน หรือลิขสิทธิ์ต่างๆ (footer)

** แท็กส่วนหัว <header> ,แท็กส่วนท้าย <footer> มีไว้เพื่อบอกให้เรารู้ในการแบ่งพื้นที่เขียนโค้ดให้ชัดเจนขึ้น แทนที่ แท็ก <div>ในการเขียนส่วนหัว หรือส่วนท้าย

ตัวอย่างโค้ด

โครงสร้าง html5

การแสดงผลแต่ละส่วนของ Html5

วันอาทิตย์ที่ 19 ตุลาคม พ.ศ. 2557

Css Background,จัดการพื้นหลังด้วย Css

การใส่สีให้พื้นหลังด้วย Css

background-color:สี;

**สามารถใช้กับคำสั่ง body,p,h1-h6,div,span เป็นต้น

ตัวอย่าง

Code Css

Code Html

** ในส่วนการใช้งาน Css สามารถเลือกใช้ได้ทั้ง Class และid โดย1คำสั่งไม่สามารถใส่หลายคลาสได้ แต่สามารถใส่ได้ทั้ง Class และid จึงเป็นเหตุผลที่ให้เลือกใช้ได้ทั้ง Class และ idใน Css

การแสดงผล

การใส่รูปให้พื้นหลังด้วยCss
background-image:url("ชื่อรูปภาพ");

การจัดตำแหน่ง และการกำหนดลักษณะต่างๆ
การวนภาพซ้ำ
background-repeat:ให้เลือก;
** ฟังก์ชันที่มีให้เลือก no-repeat คือ ไม่ต้องการใส่ภาพซ้ำ
repeat คือ ใส่ภาพซ้ำจนเต็มจอ
repeat-x คือ ใส่ภาพซ้ำแกน x หรือแนวนอน
repeat-y คือ ใส่ภาพซ้ำแกน y หรือแนวตั้ง

การจัดตำแหน่ง
background-position:ตำแหน่ง;
**ตำแหน่งที่ให้เลือก center คือ ตรงกลาง
right คือ ทางขวา
left คือ ทางซ้าย

ตัวอย่าง

Code Css

Code Html

การแสดงผล

การจัดการขนาดของรูปภาพพื้นหลังด้วย Css
background-size: 350px 350px;

การใช้งาน Css

การใช้งาน Css มี 2 อย่าง คือ
1.ใช้ใน html เลย
<style type="text/css">
selector{property:value;}
</style>
**เพิ่มโค้ดไว้ภายใต้คำสั่ง head เสมอ

การใช้งานแบบทั่วไป

การใช้Css แบบทั่วไป

การแสดงผล Css แบบทั่วไป

การใช้งานแบบ id

การแสดงผล Css แบบ id

การใช้ Css แบบ id

การใช้งานแบบ class

การใช้ Css แบบ class

การแสดงผล Css แบบ class

2.การดึง Css ที่เขียนไว้อีกไฟล์มาใช้
คือ การที่ได้เขียนไฟล์ Css แยกจาก Html ไว้คนละที่ แต่ได้นำไฟล์Css เข้ามาใช้ใน Html ( แนะนำว่าเอาไฟล์ไว้ใน Folder เดียวกัน)
<link rel="stylesheet" type="text/css" href="ไฟล์ที่เก็บcssไว้.css">
**เพิ่มโค้ดไว้ภายใต้คำสั่ง head เสมอ และตรงไฟล์ที่เก็บให้ใส่นามสกุลด้วย .css

ไฟล์ที่เก็บควรอยู่ที่เดียวกัน

โค้ดส่วน html

โค้ดส่วน Css

การแสดงผล Css

วันเสาร์ที่ 18 ตุลาคม พ.ศ. 2557

CSS และรูปแบบ Css

CSS (Cascading Style Sheets)

โลโก้ Css

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

รูปแบบการใช้งานคำสั่ง CSS

1.รูปแบบทั่วไป
selector{property: value;}
selector คือ คำสั่งในhtml ที่เราต้องการเพิ่มคุณสมบัติ
property คือ คุณสมบัติที่ต้องการเพิ่ม
value คือ ค่าที่ต้องการให้แสดง
** ถ้าประกาศแบบนี้จะใช้ทันทีเมื่อคำสั่งนั้นได้ถูกใช้
ตัวอย่าง
body{ background:red} คือ ในคำสั่งbodyให้เปลี่ยนสีพื้นหลังเป็นสีแดง

2.รูปแบบ class
selector.name{property:value;}
  selector คือ คำสั่งในhtml ที่เราต้องการเพิ่มคุณสมบัติ
property คือ คุณสมบัติที่ต้องการเพิ่ม
value คือ ค่าที่ต้องการให้แสดง
name ให้เราตั้งชื่อเอง เพื่อนำไปใช้
การใช้งาน
   <selector class="name"></selector>
ตัวอย่าง
body.a{background:red;} ส่วนประกาศ
<body class="a"></body> ส่วนการใช้งาน

3.รูปแบบ id
selector#name{property:value}
   selector คือ คำสั่งในhtml ที่เราต้องการเพิ่มคุณสมบัติ
property คือ คุณสมบัติที่ต้องการเพิ่ม
value คือ ค่าที่ต้องการให้แสดง
name ให้เราตั้งชื่อเอง เพื่อนำไปใช้
การใช้งาน
   <selector class="name"></selector>
ตัวอย่าง
body.a{background:red;} ส่วนประกาศ
<body id="a"></body> ส่วนการใช้งาน

วันศุกร์ที่ 17 ตุลาคม พ.ศ. 2557

HTML FORM,Drop down box

รูปแบบคำสั่ง html form

</form>

ขนิดของแต่ละตัวใน html form

1.<input type="text" name="name"> คือ ช่องที่ให้ใส่ตัวอักษร หรือไอดี

2.<input type="password" name="name"> คือ ช่องที่ให้ใส่พาสเวิร์ด

3.<input type="radio" name="name"> คือ จุดให้เลือกตอบ

4.<input type="checkbox" name="name"> คือ ช่องสี่เหลี่ยมให้เราทำการเช็คเครื่องหมาย

5.<input type="submit" name="name"> คือ ปุ่มยืนยัน

โค้ด HTML FORM

การแสดงผล

การทำเมนูให้เลือกลงมา html ( Drop down box)

Code Drop down box

บรรทัดที่ 8,13 การใช้คำสั่ง form

บรรทัดที่ 9,12 เป็นคำสั่ง Select ให้เลือกค่าต่างๆที่เราต้องการ

บรรทัดที่10,11 เป็นคำสั่งในการกำหนดค่าต่างๆที่ให้เลือก และแสดงผลออกมา

การแสดงผล

วันพฤหัสบดีที่ 16 ตุลาคม พ.ศ. 2557

การติดอันดับ Google SEO

3 คำสั่งHTML ในการทำเว็บไซต์ เพื่อที่ Google จะได้เข้ามาเก็บข้อมูล

1.<title>ชื่อ</title>

2.<meta name="keywords" content="รายละเอียด">

3.<meta name="description" content="รายละเอียด">

*** 3 คำสั่งนี้จะอยูู่ภายใต้คำสั่ง <head> เสมอ

คำสั่ง HTML SEO

ความหมายแต่ละคำสั่ง HTML

ดังนั้น keyword เป็นเรื่องที่สำคัญมาก ในการที่เว็บเราจะติดอันดับ google

วันอังคารที่ 14 ตุลาคม พ.ศ. 2557

การใส่สี และรูปภาพพื้นหลัง HTML5

การใส่สีพื้นหลัง HTML

จะใช้ Attribute ของคำสั่ง bodyในการเปลี่ยนสีพื้นหลัง

คือ <body bgcolor="สี"></body>

Code การใส่สีพื้นหลัง HTML5

บรรทัดที่ 1 การใช้ชนิดภาษา HTML5

บรรทัดที่ 2,6 คำสั่งใ นการเขียนภาษา HTML

บรรทัดที่ 4 คำสั่งที่จะให้แสดงผล และเพิ่มคุณสมบัติเปลี่ยนสีพื้นหลัง

ส่วนการแสดงผล

การใส่รูปภาพพื้นหลัง

จะใช้ Attribute ของคำสั่ง bodyในการเพิ่มภาพพื้นหลัง

คือ <body background="ชื่อภาพ"></body>

Code การใส่ภาพพื้นหลัง HTML5

บรรทัดที่ 1 การใช้ชนิดภาษา HTML5

บรรทัดที่ 2,6 คำสั่งใ นการเขียนภาษา HTML

บรรทัดที่ 4 คำสั่งที่จะให้แสดงผล และเพิ่มคุณสมบัติใส่ภาพพื้นหลัง

ส่วนการแสดงผล

วันศุกร์ที่ 10 ตุลาคม พ.ศ. 2557

การเขียน List HTML

การเขียนย่อหน้า HTML มีอยู่ 2 อย่าง ดังนี้
1.การเขียนเป็นโดยไม่เรียงลำดับ HTML
<ul>
<lh>เรื่อง<lh>
<li>ข้อมูล</li>
<li>ข้อมูล</li>
</ul>

ส่วน code

โค้ด list

ส่วนการแสดงผล

2.การเขียนโดยเรียงลำดับ HTML
<ol>
<lh>เรื่อง<lh>
<li>ข้อมูล</li>
<li>ข้อมูล</li>
</ol>

ส่วน code

โค้ด list

ส่วนการแสดงผล

ถ้าต้องการเปลี่ยนสัญลักษณ์ก็สามารถเปลี่ยนได้ โดยเพิ่มคำว่า type="สัญลักษณ์" ในคำสั่ง<ul> หรือ <ol> ดังนี้

สัญลักษณ์การเขียนเป็นโดยไม่เรียงลำดับ HTML

TYPE สัญลักษณ์

disc วงกลมทึบ

circle วงกลมโปร่งใส

square สี่เหลี่ยมทึบ

สัญลักษณ์การเขียนโดยเรียงลำดับ HTML

TYPE สัญลักษณ์

A เรียงแบบ A,B,C

a เรียงแบบ a,b,c

I เรียงแบบเลขโรมัน I,II,III

i เรียงแบบเลขโรมัน i,ii,iii

ส่วน code

โค้ด list

ส่วนการแสดงผล

การสร้างตาราง HTML5

คำสั่ง <table></table>
คือ คำสั่งในการสร้างตารางของเว็บไซต์ ซึ่งจะทำให้เห็นเส้นขอบตาราง หรือไม่เห็นก็ได้

ส่วน code

<table border="1"> </table> คือ คำสั่งการสร้างตาราง และ แอคทิบื้ว border คือ การกำหนดเส้นขอบให้ตาราง มีหรือไม่มีก็ได้

<tr> คือ จำนวนแถว จะอยู่ภายใต้คำสั่ง <table> เสมอ

<td> คือ จำนวนคอลัมน์ จะอยู่ภายใต้คำสั่ง <table> เสมอ

บรรทัดที่ 8,17 เป็นคำสั่ง table เพื่อแสดงว่าส่วนนีเป็นส่วนที่เรากำลังจะสร้างตาราง

บรรทัดที่ 9,12,13,16 เป็นคำสั่ง tr เพื่อสร้างแถว ตอนนี้ผมสร้างแค่ 2 แถวนะครับ

บรรทัดทืี่ 10,11,14,15 เป็นคำสั่ง td เพื่อสร้างคอลัมน์ ตอนนี้ผมก็สร้างแค่ 2 คอลัมน์นะครับ

การแสดงผล

คุณสมบัติ (Attribute) ของคำสั่งตารางhtml

height="" width=""

การกำหนดความกว้าง ความสูงให้กับตาราง

วิธีใช้

<table height="ความสูง" width="ความกว้าง">

<tr>

<td></td>

</tr>

</table>

วันเสาร์ที่ 4 ตุลาคม พ.ศ. 2557

คำสั่ง meta,title,link ใน HTML5

คำสั่ง ( Tag ) ที่อยู่ภายในคำสั่ง <head> ที่เห็นกันบ่อยๆ

แท็ก <meta charset="utf-8">
คือ แท็กสำหรับการแสดงผล ซึ่งสนับสนุนภาษาไทย ถ้าไม่มีการแสดงผลภาษาไทยจะเป็นภาษาต่างดาวนะครับ

แท็ก <title> </title>
คือ ชื่อหัวเว็บไซต์ข้างบนสุดของเว็บบราวน์เซอร์

แท็ก<link rel="stylesheet" type="text/css" href=" ที่อยู่ที่เราเก็บฟังก์ชันนั้นไว้">
คือ แท็กที่นำฟังก์ชันต่างๆที่ได้เขียนไว้มาใช้งาน

ตัวอย่าง

การเขียนเบื้องต้นนะครับ

วันศุกร์ที่ 3 ตุลาคม พ.ศ. 2557

การลิงค์ไปยังเว็บต่างๆ HTML5

การลิงค์ไปเว็บไซต์ต่างๆ
คำสั้ง <a href=" เว็บไซต์ที่ต้องเชื่อมต่อ"> </a>
** ( เว็บไซต์ที่ทำการเชื่อมต้องเขียน http://ตามชื่อเว็บ เสมอ งั้นจะไม่สามารถลิงค์ได้นะครับ)

ตัวอย่าง

บรรทัดที่ 7 จะทำการลิงค์ไปยังเว็บไซต์ที่เราต้องการโดยการกดปุ่ม Go โดยในที่นี้ผมได้ทำการลิงค์ไปยัง http://google.co.th นะครับ

เมื่อทำการกดปุ่ม Go จะทำการลิงค์ไปยังหน้าเว็บที่เราได้ตั้งไว้

ทำการเข้าลิงคเสร็จเรียบร้อย

การลิงค์ภายในเว็บ หรือในไดเรคทอรี่เดียวกัน
คำสั้ง <a href=" ชื้่อไฟล์ที่ต้องการลิงค์"> </a>
** ( ต้องระวังด้วยนะครับ ถ้าไฟล์เราเก็บไว้ในที่เดียวกันก็ใส่ชื่อไฟล์ได้เลย แต่ถ้าคนละที่กันต้องดูว่าจะต้องเข้าหรือโฟล์เดอร์ที่ไฟล์ที่เราต้องลิงค์อยู่ด้วยนะครับ ถ้าออกโฟลเดอร์ จะใช้ .. ถ้าเข้าโฟลเดอร์ จะใช้ / )

ตัวอย่าง

จะสังเกตุเห็นว่าผมได้นำไฟล์ไว้ที่เดียวกันดังนั้นเวลาลิงค์ก็สามารถใส่ชื่อหน้าที่เราต้องการลิงค์ได้เลยในนี้ผมจะลิงค์ไป test1.html

บรรทัดที่ 7 นี้เป็นการลิงค์ไปยัง test1.html โดยจะมีลิงค์ให้กดคำว่า Go to test1

นี้คือหน้าของ test1.html ที่ผมได้ทำการเขียนไว้

ตอนนี้เรากำลังอยู่หน้า test.html แล้่วเมื่อกด GO to test1 ก็จะทำการไปสู่หน้า test1.html ทันที

หลังจากกดลิงค์เสร็จก็จะทำการเข้ามาในหน้าที่เราทำการเชื่อมต่อ

การลิงค์โดยรูปภาพ
คำสั้ง <a href=" เว็บไซต์ หรือไฟล์ที่ต้องการเชื่อม"><img src="ชื่อรูปภาพที่ต้องการ" </a>
**( ไฟล์รูปก็อย่าลืม .jpg กันด้วยละ คือ นามสุกลของไฟล์ที่เราเอามาลงนะครับ)

ตัวอย่าง

ผมเก็บไฟล์รูปกับไฟล์เขียนเว็บไว้ด้วยกัน สามารถนำรูปมาใช้งานได้ทันที

บรรทัดที่ 7 ทำการใส่ชื่อรูป หลัง img src= และผมตั้งให้ลิงค์ไปยังหน้า test1.html

พอกดรูปก็จะทำการแสดงหน้าที่เราได้ทำการลิงค์ไว้

เป็นอันเสร็จพิธี ^^

***** ถ้าเราต้องกดลิงค์แล้วเปิดแท็บใหม้่ ให้ทำการเพิ่ม target="_blank" ลงไปในระหว่างแท็ก <a href></a> เช่น คำสั้ง <a href=" เว็บไซต์ที่ต้องเชื่อมต่อ" target="_blank"> </a>

TYPE	สัญลักษณ์
disc	วงกลมทึบ
circle	วงกลมโปร่งใส
square	สี่เหลี่ยมทึบ

TYPE	สัญลักษณ์
A	เรียงแบบ A,B,C
a	เรียงแบบ a,b,c
I	เรียงแบบเลขโรมัน I,II,III
i	เรียงแบบเลขโรมัน i,ii,iii