Home » Marketing News & Idea

พื้นฐาน HTML เพื่อการเขียนเว็บไซต์

27 พฤศจิกายน 2010 2 Comments

ในปัจจุบันเว็บไซต์เป็นที่รู้จักมากมาย และมีการพัฒนาเพิ่มมากขึ้น

มีโปรแกรมมากมายที่พัฒนาขึ้นมาเพื่อสร้างเว็บไซต์ภายในเวลาไม่กี่นาที

และสิ่งเหล่านี้มีให้เราใช้ทั้งแบบเสียตังค์ และฟรีค่ะ

ทำให้ผู้คนจำนวนมากสนใจที่จะเข้ามาเรียนรู้ และตั้งใจทำเว็บไซต์กันมากขึ้น

สิ่งสำคัญคงจะไม่พ้นการที่เราเรียนรู้ไปเรื่อยๆๆๆ และจดจำเราก็จะเก่งขึ้น

ถ้าเราพัฒนาความสามารถของเรา วันนี้เราไม่รู้พรุ่งนี้ก็ต้องรู้จนได้ค่ะ

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

ความรู้ก็เช่นกันค่ะ เราพัฒนาทุกวันเราก็เก่งทุกวัน

ทุกครั้งที่เราค้นหาข้อมูลต่างๆ เกี่ยวกับการทำเว็บไซต์

เพื่อนๆ จะเห็นข้อความคำว่า HTML มันคืออะไรหรือค่ะ

บ้างคนอาจสงสัย แต่บ้างคนอ่านไปยิ้มไป เพราะเข้าใจในภาษา HTML ดี

ว่าแต่หละตัวมันหมายถึงอาไรค่ะ

HTML คือ ชุดคำสั่งอีกภาษาหนึ่ง

ที่จะใช้สร้างเว็บไซต์ และมีการกำหนดค่าของคำสั่งเสมอ

ให้ออกมาตามที่เราเป็นผู้กำหนดค่ะ

ภาษา HTML ที่จะมาแนะนำวันนี้ก็เป็นพื้นฐานเล็กๆ น้อยๆ นะค่ะ และจะบอกความหมายให้ทราบด้วยค่ะ

<> สัญญาลักษณ์นี้หมายความว่า Tag เปิดนะค่ะ ส่วน </> หมายความว่า Tag ปิดค่ะ

ก่อนที่เราจะเริ่มต้นการเขียนภาษา HTML เราก็จะต้องกำหนดค่าก่อนค่ะว่า <html> </html>

1. คำสั่ง <head> </head> คือคำสั่งการสร้างหัวเรื่องเว็บค่ะ

<head>

<title>ใส่ชื่อเว็บไซต์เราค่ะ</title>

</head>

2. <boby></boby> คือส่วนในชุดคำสั่งที่เราจะใส่เนื้อหาเข้าไปในเว็บค่ะ

<boby>

<h1>ใส่หัวชื่อของเรื่องที่เราจะเขียนค่ะ </h1> มีหลายขนาดให้เราเลือก h1 h2 h3 h4 h5 h6

<h2>ใส่หัวชื่อของเรื่องที่เราจะเขียนค่ะ </h2>

<h3>ใส่หัวชื่อของเรื่องที่เราจะเขียนค่ะ </h3>

<h4>ใส่หัวชื่อของเรื่องที่เราจะเขียนค่ะ </h4>

<h5>ใส่หัวชื่อของเรื่องที่เราจะเขียนค่ะ </h5>

<h6>ใส่หัวชื่อของเรื่องที่เราจะเขียนค่ะ </h6>

</boby>

3. <hr></hr> คือการขีดเส้นใต้หรือขึ้นบรรทัดใหม่ค่ะ
<h1>ชื่อเรื่องที่เราจะเขียน <hr/></h1>

<hr width=”700x”>  </hr> กำหนดความยาวของเส้น

<hr size=”10x”/> กำหนดเป็นเส้นโปรง

<hr noshade /> กำหนดเป็นเส้นทึบ

4.<br></br>คือการย่อหน้าหรืออขึ้นบรรทัดใหม่

<br><h3> เกรินนำสำหรับจะขึ้นข้อความ</h3><br> เนื้อหาข้อความ </br>

5.กำหนดให้ข้อมความที่ต้องการอยู่ด้านไหนของหน้าเว็บ มี 3 ให้เลือกตามใจชอบค่ะ center,left,right

<p align=”center”> ข้อความ เช่นการทำหน้า Homepage </p>

<p align=”left”> ข้อความ </p>
<p align=”right”> ข้อความ </p>

ตัวอย่างเช่น

<html>

<head>
<title>PM Travel Thailand.com</title>
</head>

<boby>
<h1>Travel <hr/></h1>

<br><h3> การท่องเที่ยวเป็นหัวใจสำคัญ</h3><br> ถ้าเราจะเดินทางไปท่องเที่ยวที่ไหนสักแห่งที่เราต้องการ แน่นอนว่าการเตรียมตัวเป็นสิ่งสำคัญ พร้อมด้วยข้อมูล </br>
<p>เรามาเตรียมความพร้อมกันเถอะค่ะ </p>
<hr width=”700x”>  เป็นอย่างไงกันบ้างค่ะเพื่อนๆๆ </hr>
<hr size=”10x”/>
<hr noshade /

<p align=”center”> หน้าแรก </p>

<p align=”right”> แหล่งท่องเที่ยว </p>

</boby>

</html>

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

ยังมีปัจจัยอื่นๆ ที่เราจะต้องเรียนรู้อีกมากค่ะในการทำเว็บไซต์

อย่างโปรแกรม Photoshop+Dreamweaver+Flash 3 โปรแกรมนี้มีความสามารถพิเศษคนหละด้านกัน

Photoshop เป็นโปรแกรมที่ใช้ออกแบบหน้าตาของเว็บไซต์ สร้างรูปกราฟิก รวมถึงองค์ประกอบอื่นๆ เช่น ปุ่ม เมนู และแบนเนอร์ต่างๆ

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

Flash เป็นโปรแกรมในการใส่ลูกเล่น การ์ตูน สไลด์ และเมนูที่เคลื่อนไหวได้ค่ะ จะทำงานร่วมกันกับ Dreamweaver

แต่สิ่งสำคัญก่อนที่เราจะทำเว็บไซต์เราต้องมีจุดประสงค์ว่าเราจะทำเว็บไซต์เกี่ยวกับอาไร

ถ้าเป็นเว็บเกี่ยวกับเรื่องที่เราชอบมันก็จะส่งผลในการทำบทความเพราะเราจะได้รู้สึกทำในสิ่งที่ตัวเองรักค่ะ

และต้องออกแบบในกระดาษก่อนว่าต้องการจะเสนออาไรบ้างให้คนได้เข้ามาเว็บเราค่ะ

ต้องการเยี่ยมชมเว็บไซต์ที่กำลังพัฒนาไปเรื่อยๆ ได้ ที่นี่ นะค่ะ

เป็นกำลังใจให้กันได้เสมอค่ะ

2 Comments »

  • give.supawat said:

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

  • give.katoon (author) said:

    ตอนนี้กำลังศึกษาอยู่ค่ะ
    ทุ่มเทมาก อุปสรรค์มีทุกวัน
    แต่ก็หาทางออกได้ มีหลายวิธีที่ช่วยได้กับทางออก
    เห็นด้วยกับคำว่า Hi-Tech ทุกประการค่ะ
    ข้อมูลมีอยู่เต็มไปหมดไม่ว่าจะทางออนไลน์
    ร้านหนังสือ เพื่อนๆๆๆเรา
    เว็บไซต์ give.supawat ก็สุดยอดค่ะ
    เข้าไปทีไร มีการเปลี่ยนแปลงเสมอเลย
    ปล.ที่รู้ก็เพราะว่าเข้าทุกวัน อิอิ
    ขอบคุณค่ะ