การแต่งตัวอักษร

การกำหนดแบบตัวอักษร (Font)

ในเอกสาร HTML ถ้าเราไม่ได้กำหนดแบบตัวอักษร เมื่อแสดงบนบราวเซอร์ จะแสดงตัวอักษรที่เป็น ค่าพื้นฐาน (Default) หากเราต้องการกำหนดแบบตัวอักษรเอกสามารถทำได้โดยใช้ Tag<font>
 
     เราจะใช้ <FONT FACE> เป็นการกำหนดชนิดของตัวอักษร    ชื่อชนิดของตัวอักษรจะใช้ตามชื่อของโปรแกรม Word  เมื่อเราพิมพ์ข้อความเสร็จจะจบด้วย </FONT> เสมอ

อธิบายคำสั่ง

<FONT FACE="ชื่อฟ้อนต์ที่ใช้"> เป็นคำสั่งที่ใช้กำหนดฟ้อนต์ที่จะใช้ในเว็บเพจ
</FONT> เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ

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

<font face="ชื่อแบบตัวอักษรที่ต้องการ">.............ข้อความ............</font>

ตัวอย่าง

การแสดงผล

การกำหนดขนาดตัวอักษร

เราสามารถกำหนดขนาดของมันเองได้ถึง 7 ระดับ โดยกำหนดได้ด้วยตัวเลขเลยหรือแบบที่2 กำหนดโดยใส่ค่า +/- แล้วกำหนดระดับอีกที 

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

<FONT Size="......">......</FONT>

ตัวอย่าง

การแสดงผล

การกำหนดสีตัวอักษร

การกำหนดสีตัวอักษร  สามารถกำหนดให้เป็นสีเดียวกันทั้งเวบเพจ  หรือกำหนดให้มีสีที่แตกต่างกันในเว็บเพจเดียวกันก็ได้

เราสามารถกำหนดค่าสีได้ 2 แบบ คือ

1. สี="#xxxxxx" ระบุเป็นเลขฐาน 16 (0-9 หรือ A-F โดย 0 มีค่าสีน้อยที่สุด และ F มีค่าสีมากที่สุด) ทั้งหมด 3 ชุด           1 ชุดแทนด้วยตัวอักษร 2 ตัว

    แสดงค่าของแม่สี แดง เขียว นํ้าเงิน (RGB)โดยเขียนตามหลังเครื่องหมาย #

    เช่น"#FFFFFF" จะให้ สีขาว ,"#000000" จะให้ สีดำ

2. สี=color ระบุสีลงไปเลย เช่น white,black,blue,red

อธิบายคำสั่ง

<FONT COLOR="ชื่อสี"> เป็นคำสั่งที่ใช้กำหนดสีให้กับตัวอักษรที่จะใช้ในเว็บเพจ

</FONT> เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ

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

<font color="#0000FF">Thanasarun</font> 

ตัวอย่าง

การแสดงผล

การกำหนดลักษณะและแบบของตัวอักษร

        

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

อธิบายคำสั่ง

<B>...</B>

เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเข้ม

<I>...</I>

เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเอียง

<S>...</S>

เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า

<U>...</U>

เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้

<STRIKE>.....</STRIKE>

เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า

<SUP>...</SUP>

เป็นคำสั่งที่ใช้กำหนดรูปแบบ Super Script

<SUB>...</SUB>

เป็นคำสั่งที่ใช้กำหนดรูปแบบ Sub Script

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

แบบตัวอักษร                         โค้ท

ตัวอักษรปกติ                         ไม่ต้องใส่โค้ท

ตัวหนา                                  <B>.....</B>

ตัวเอียง                                 <i>.....</i>

ตัวขีดเส้นใต้                          <U>.....</U>

             ตัวอักษรขีดฆ่า                       <STRIKE>.....</STRIKE>

ตัวอักษรยกกำลัง                    <SUP>.....</SUP>

ตัวอักษรห้อย                         <SUB>.....</SUB>

ตัวอย่าง

 แบบ  ตัวอักษรปกติ,ตัวหนา,ตัวเอียง, ,ตัวอักษรขีดฆ่า,ตัวอักษรยกกำลัง,ตัวอักษรห้อย

การแสดงผล

การทำตัวอักษรวิ่่ง 

          

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

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

HTML ที่ใช้ในการทำตัวอักษรวิ่ง

<MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง"   height="ความสูง"

 scrollamount=ความเร็วในการวิ่ง  scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>

หมายเหตุ  ใช้ได้เฉพาะ Internet Explorer

ตัวอย่าง

การแสดงผล

การทำตัวอักษรกระพริบ

 ใช้กำหนดแสดงข้อความแบบกระพริบ จะมีลักษณะการแสดงผลเป็นแบบติด - ดับ สลับกันไป

หมายเหตุ ในการกำหนดตัวอักษรกระพริบนั้น เราไม่สามารถเปิดในโปรแกรมเว็บเบราเซอร์ที่เป็น Internet Explorer ได้ (สามารถใช้ได้กับ Netscape )

  

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

<BLINK>..........</BLINK>

ตัวอย่าง

การแสดงผล

การขึ้นย่อหน้าใหม่ และกำหนดตำแหน่ง

ข้อความ (Paragraph)

ในการจัด Paragraph ของข้อความ จะใช้ tag <p> สามารถกำหนดการจัดวางตำแหน่งข้อความว่าจะชิดซ้าย / ขวา / กึ่งกลาง ด้วย attribute align  และเมื่อแสดงผลแล้วจะขึ้นบรรทัดใหม่ให้อัตโนมัติ

รูปแบบคำอธิบาย

LEFT จัดชิดซ้าย

CENTER จัดกึ่งกลาง

RIGHT จัดชิดขวา

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

<p align="left | center | right |justify">...</p>

ตัวอย่าง

การแสดงผล

ที่มา 

-http://www.pyayam.com/html/font_blink.php   
                                                                                     
-http://html-language.blogspot.com/2009/05/html.html   

-http://school.obec.go.th/krurenu/html/p2-4.html

-http://school.obec.go.th/krurenu/html/p2-2.html

HTML tag พื้นฐาน

HTML tag พื้นฐาน

HTML ย่อมาจาก : HyperText Markup Language

HTML ใช้โปรแกรม : Text Editor ต่างๆในการสร้าง เช่น Notepad,Editplus
เปิดดูเอกสารได้จาก web browser เช่น IE Microsoft Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เป็นต้น  

Text Editor คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือ
ที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่างๆ เช่น NotePad, EditPlus หรือ Dreamweaver

องค์ประกอบของ HTML

<html> คือ  ภาษาคอมพิวเตอร์ที่ใช่ในการแสดงผลของเอกสารบนเว็บไซต์หรื่อที่เราเรียกกันว่าเว็บเพจ

<head> คือ ส่วนหัวของหน่วยบันทึกที่ใช้อ่าหรือบันทึกข้อมูล

<title> คือ ส่วนที่อยู่ด้านบนสุดขอบราวเซอร์จะปรากฏข้อความขึ้นมาแตกต่างกัน โดยส่วนใหญ่จะเป็นชื่อหรือคำจำกัดความของเว็บไซต์หรือเว็บเพจนั้นๆ

<body>  คือ ส่วนนี้จะเป็นที่เราจะใส่ข้อความต่าง ๆ  ที่เป็นเนื้อหาของเว็บเพจเข้าไป และเรายังสามารถกำหนดคุณสมบัติพื้นฐานของเว็บเพจ

<BR> คือ เป็นคำสั่งขึ้นบรรทัดใหม่โดยตัวคำสั่งจะใช้เพียงตัวเดียวไม่ต้องใช้ 2 ตัวเหมือนคำสั่งอื่นอยู่ภายในคำสั่ง <body>

<P> คือ   การใช้งานของแท็กนี้คือ เปิดแท็ก และก็วางตัวอักษร ที่ต้องการแบ่งเป็นพารากราฟลงไป จากนั้นก็ปิดแท็ก ตัวอย่างการแบ่ง พารากราฟด้วยแท็ก P

แหล่งที่มา

http://gu-ruschool.blogspot.com/2012/07/html.html
http://www.webthaidd.com/html/webthaidd_article_294_.html
http://www.kts.ac.th/kts/kanghan/html/unit105.htm

 คำศัพท์ที่เกี่ยวข้องกับการสร้างเว็บ

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

WWW ย่อมาจากคำว่า World Wide Web คือ พื้นที่ที่เก็บข้อมูลข่าวสารที่เชื่อมต่อกันทางอินเทอร์เน็ต โดยการกำหนด URL คำว่าเวิลด์ไวด์เว็บมักจะใช้สับสนกับคำว่า อินเทอร์เน็ต โดยจริงๆแล้วเวิลด์ไวด์เว็บเป็นเพียงแค่บริการหนึ่งบนอินเทอร์เน็ต

Web Site  คือ แหล่งที่เก็บรวบรวมข้อมูลเอกสารและสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ ของแต่ละบริษัทหรือหน่วยงานโดยเรียกเอกสารต่าง ๆ เหล่านี้ว่า เว็บเพจ (Web Page) และเรียกเว็บหน้าแรกของแต่ละเว็บไซต์ว่า โฮมเพจ (Home Page) หรืออาจกล่าวได้ว่า เว็บไซต์ก็คือเว็บเพจอย่างน้อยสองหน้าที่มีลิงก์ (Links) ถึงกัน ตามหลักคำว่า เว็บไซต์จะใช้สำหรับผู้ที่มีคอมพิวเตอร์แบบเซิร์ฟเวอร์หรือจดทะเบียนเป็นของตนเองเรียบร้อยแล้วเช่น www.google.co.th ซึ่งเป็นเว็บไซต์ที่ให้บริการสืบค้นข้อมูลเป็นต้น

Web Page   คือ สารสนเทศ หรือเอกสารที่อยู่บน อินเตอร์เน็ต  Web Page จะเขียนด้วยภาษา  HTML(Hyper Text Markup Language) ซึ่งจะกำหนดให้ มีเนื้อหาและรูปแบบต่างๆ   เช่น    ข้อความ   รูปภาพ ภาพเคลื่อนไหวที่มีเสียงประกอบ   (video  &  audio files)  hypertext links  

Home Page คือ เว็บเพจหน้าแรกที่เป็นหน้าดัชนีหรือรายการที่บอกรายละเอียดของเว็บไซด์นั้นๆ เราอาจจะเปรียบโฮมเพจเหมือนหน้าบ้านของเว็บไซด์ก็ได้

web browser หรือ โปรแกรมเรียกดูเว็บไซต์ คือโปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเวบที่สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล (html) พีเอชพี (php) ที่จัดเก็บไว้ที่ระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์ หรือระบบคลังข้อมูลอื่นๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ (www)

URL ย่อมาจากคำว่า Uniform Resource Locator หมายถึง ตัวบ่งบอกข้อมูล หรือ ที่อยู่ (Address) ของไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต กล่าวได้ง่ายๆก็คือ ตัวอักษรที่เรากรอกลงไปบนช่องใส่ Address ของโปรแกรมเข้าเว็บเช่น internet explorer, chrome หรือ firefox ในยุคแรกๆ เราใช้ตัวเลขหลายหลัก (เลขไอพี )ในการแทนชื่อเว็บไซต์ ทำให้เวลาจำแล้วกรอกตัวเลขในช่อง URL มักจะผิดกันมาก เลยมีผู้คิดค้นสัญลักษ์แทนตัวเลข จึงเป็นที่มาของชื่อโดเมนเนม

HTTP ย่อมาจาก Hypertext Transfer Protocol คือ โพรโทคอลสื่อสารสำหรับการแลกเปลี่ยนสารสนเทศผ่านอินเทอร์เน็ต โดยหลักแล้วใช้ในการรับเอกสารข้อความหลายมิติที่นำไปสู่การเชื่อมต่อกับ World Wide Web(WWW )จะใช้เมื่อเรียกโปรแกรมweb browser






ที่มา :

http://202.143.137.109/araya/int.html

http://wwwnatnaree11203.blogspot.com/2012/07/www.html

http://school.obec.go.th/kudhuachang/les07.htm

http://ngneservice.wordpress.com/

http://nujoy-sasisaowapa.blogspot.com/2009/11/home-page.html

http://mukdahanknowledge.blogspot.com/2013/04/web-browser.html

http://www.web-worldwide.com/

http://www.mindphp.com/

ชื่อ : นางสาวจรรยาสุข  มงคล
ชื่อเล่น : มาย
เลขที่ 18 ชั้น ม.6/2
อยู่โรงเรียน : ธนบุรีวรเทพีพลารักษ์
แผนการเรียน : คณิตศาสตร์-วิทยาศาสตร์
ชอบเรียนวิชา : เคมี
อาหารที่ชอบ : ต้มยำ
สีที่ชอบ : ฟ้า
สีที่ไม่ชอบ : ม่วง
สัตว์ที่เกลียด : ตะขาบ แมลงสาบ
คติประจำใจ : คนอื่นยังเชื่อมั่นในตัวเรา แล้วทำไมเราถึงไม่เชื่อมั่นในตัวเอง
งานอดิเรก : ฟังเพลง
สิ่งใฝฝัน : อยากเป็นพยาบาล

Line : mymalody...
E-mail : janyasuk@gmail.com
facbook : mild janyasuk