วันอาทิตย์ที่ 22 กรกฎาคม พ.ศ. 2555


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

การกำหนดแบบอักษร
     รูปแบบแท็ก Code  คือ   

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

ตัวอย่าง 

<font  face  = " Cooper Black "> Tongtang </font>





ขนาดตัวอักษร
     รูปแบบแท็ก Code  คือ 

<font size = " ขนาดตัวเลขที่ต้องการ "> ข้อความที่ต้องการ </font>

ตัวอย่าง


<font size = " 5 "> Tongtang </font>
<font size = " 7 "> Tongtang </font>





สีตัวอักษร

     รูปแบบแท็ก Code  คือ 


<font color = " สีที่ต้องการ ">  ข้อความที่ต้องการ </font>
หรือ
<font color = " รหัสสี "> ข้อความที่ต้องการ </font> 

ตัวอย่าง


<font color = " Red "> Tongtang </font> 
<font color= " #48D1CC "> Tongtang </font>







ตัวเอียง ตัวหนา ตัวขีดเส้นใต้

     รูปแบบแท็ก Code  คือ 

   -ตัวเอียง
<i> ข้อความที่ต้องการ </i>
   -ตัวหนา
<b> ข้อความที่ต้องการ </b>
   -ตัวขีดเส้นใต้ 
<u> ข้อความที่ต้องการ </u> 

ตัวอย่าง

<i>  Tongtang  </i>
<b>  Tongtang  </b>
<u>  Tongtang  </u> 






ตัวขีดฆ่า ตัวยก ตัวห้อย
     รูปแบบแท็ก Code  คือ 


   - ตัวขีดฆ่า
<del> ข้อความที่ต้องการ  </del>
   - ตัวยก
ข้อความที่ต้องการ <sup> ข้อความที่ต้องการ </sup> 
   - ตัวห้อย
ข้อความที่ต้องการ <sub> ข้อความที่ต้องการ </sub>


ตัวอย่าง  


<del>  Tongtang  </del> 
2 <sup> 5 </sup>
H <sub> 3 </sub> 





ตัวอักษรวิ่ง ตัวอักษรกระพริบ

     รูปแบบแท็ก Code  คือ 


   -ตัวอักษรวิ่ง
<marquee> ข้อความที่ต้องการ </marquee>
  
  -ตัวอักษรกระพริบ
<blink> ข้อความที่ต้องการ </blink>

ตัวอย่าง


<marquee>  Tongtang  </marquee>
<blink>  Tongtang  </blink>







การจัดตัวแหน่งข้อความ

     รูปแบบแท็ก Code  คือ 


   - การจัดย่อหน้าแบบซิดซ้าย
<p align=left> การจัดย่อหน้าแบบชิดซ้าย </p>


   - การจัดย่อหน้าแบบกึ่งกลาง
<p align=center> การจัดย่อหน้าแบบกึ่งกลาง </p>


   - การจัดย่อหน้าแบบชิดขวา
<p align=right> การจัดย่อหน้าแบบชิดขวา </p>

ตัวอย่าง


<p align=left>  Tongtang  </p>
<p align=center>   Tongtang   </p>
<p align=right>   Tongtang   </p>





ที่มา :
                http://wemahidol.mahidol.ac.th/comm/space.php?uid=36&do=blog&id=63
                http://www.thaiall.com/learn/htmchr.htm
                http://www.bkk2.in.th/Topic.aspx?TopicID=7177



ลงวันที่ : 4 กรกฎาคม 2555




ขอบคุณครับ :))
เขียนโดย ที่ ไม่มีความคิดเห็น:

วันอังคารที่ 3 กรกฎาคม พ.ศ. 2555

โครงสร้างพื้นฐาน HTML

    
   HTML (ชื่อเต็มคือ Hypertext Markup Language ภาษามาร์กอัปข้อความหลายมิติ) คือภาษามาร์กอัปออกแบบมาเพื่อใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์ เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee) สำหรับภาษา SGML ในปัจจุบัน HTML เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C) ในปัจจุบัน ทาง W3C ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่งที่มีหลักเกณฑ์ในการกำหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบัน

ใช้อะไรในการเขียน HTML

    
   การสร้างไฟล์   HTML  เราสามารถสร้างจาก Text  Editor เช่นจาก Notepad หรือ  Wordpad ก็ได้แต่สำหรับการ Save ไฟล์ เราจำเป็นต้องใส่  " ชื่อไฟล์ . html "   ซึ่งถ้าหากคุณไม่ใส่  " " จะ กลายเป็นไฟล์   .TXT แทน  ในปัจจุบัน มีโปรแกรมต่าง ๆ มากมายที่พัฒนาขึ้นมาเพื่อช่วยอำนวยความสะดวกในหารเขียนโค้ด html เช่นโปรแกรม Macromedia Dreamweaver ปัจจุบันเวอร์ชั่น CS4 แล้ว มีความง่ายและสะดวกในการสร้าง html ขึ้นมา ด้วย Tool ต่าง ๆ ของโปรแกรมครับ


Text Editor

   

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


การเขียน HTML


    รูปแบบคำสั่ง <HEAD>..........</HEAD>  คำสั่ง <HEAD> เป็นคำสั่งที่ใช้ในการกำหนดข้อความส่วนที่เป็นชื่อเรื่องซึ่งภายใต้ของคำสั่งนี้จะมีคำสั่งย่อย  อีกคำสั่งหนึ่งคือ คำสั่ง <TITLE>........</TITLE>   
    รูปแบบคำสั่ง <TITLE>.........</TITLE>
คำสั่ง <TITLE>.....</TITLE> จะเป็นส่วนของการแสดงชื่อของเอกสาร จะปรากฎในขณะที่ไฟล์ HTML ทำงานการแสดงผลจะแสดงในส่วนของไตเติลบาร์ ( Title Bar )

ส่วนโครงสร้างภายในจะประกอบด้วยส่วนหลักๆดังนี้
   Headers <h1>,<h2>
   Paragraph <p>
   Lists <ul><li>,<ol><li>,<dl><dt><dd>
   Tables <table>
   Media เช่น images <img src=”"? alt=”">
   Links <a href=”"? title=”">
   Form <form>

Header
   คือหัวข้อเรื่องเพื่อบ่งบอกว่า หน้า page นั้น เกี่ยวกับเรื่องอะไร ลำดับความสำคัญสูงสุด คือ <h1> เราควรจะมี <h1> เพียงอันเดียว ต่อ 1 หน้า ส่วน <h2> <h3> มีได้หลายๆอัน เลือกใช้ตามลำดับความสำคัญของหัวเรื่อง
*** ไม่ควรใช้ เกินกว่า <h6>


Paragraph
   ใช้ <p> ครอบส่วนที่เป็นเนื้อหา text ไม่ควรมีสิ่งที่เป็นบล็อกอยู่ภายใน เช่น table, div, header และควรรปิดแท็ก </p> เสมอ

List
   ใช้ในลักษณะที่มี text เป็นข้อๆ เช่น ส่วนเมนู เนวิเกชั่น ต่างๆ มี 3 รูปแบบให้เลือกใช้
Unorder list <ul><li></li></ul>
Order list <ol><li></li></ol>
Definition list <dl><dt></dt><dd></dd></dl>

Table
   อย่ารู้สึกผิดครับ เมื่อจะใช้ table มันไม่ใช่ของต้องห้ามสำหรับ css และ เราก็จะไม่เถียงกันว่าอันไหนดีกว่ากันระหว่างเว็บใช้ div กับเว็บใช้ table เพียงแต่เราคือ webdesign ที่นอกจากจะดีไซน์ หน้าตาให้ถูกใจผู้ชมแล้ว เรายังดีไซน์โค้ดได้ถูกต้อง เบราเซอร์ชอบ search engine ชอบ และวางตำแหน่งโค้ดส่วนต่างๆได้อย่างถูกต้อง (อันนี้โปรแกรมเมอร์ที่เอางานไปทำต่อ คงจะชอบ เพราะโค้ดไม่มั่ว จะลูป ตรงไหน ครอบได้ดั่งใจ)

Media
   รูปใน img จะต้องมี alt=”คำบรรยาย” เสมอ ถ้าเป็นไอคอนเล็กๆหรือ ขอบโค้ง หรืออะไรก็ตาม ถ้าไม่มีความหมาย ให้ใส่ alt=”" เปล่าๆไว้

Link
   ลิ้งค์นั้น ให้ใช้ title=”" ในลิ้งค์ ที่อธิบายไม่ชัดเจน

Form
tag ที่จะต้องมี สำหรับ form คือ
  <fieldset> ใช้เพื่อรวมกลุ่ม label ในกลุ่มเดียวกัน
  <legend> ใช้เพื่อบรรยาย fieldset
  <label> ใช้เพื่อบรรยาย input

รูปแบบโค้ด
  <B>WebThaiDD.COM</B> //โค้ดกำหนดตัวอักษรให้หนา
  <I>WebThaiDD.COM</I> //โค้ดกำหนดตัวอักษรให้เอียง
  <U>WebThaiDD.COM</U> //โค้ดกำหนดตัวอักษรให้ขีดเส้นใต้
  <STRIKE>WebThaiDD.COM</STRIKE> //โค้ดกำหนดตัวอักษรให้ขีดฆ่าตัวอักษร

รูปแบบอื่นๆ
  <BLINK>...</BLINK>//กำหนดให้ตัวอักษรกระพริบ
  <BIG>...</BIG>//กำหนดให้ตัวอักษรใหญ่ขึ้นกว่าปกติ
  <SMALL>...</SMALL>//กำหนดให้ตัวอักษรเล็กลงกว่าปกติ 
  <SUB>...</SUB>//กำหนดให้ตัวอักษรเป็นตัวห้อย
  <SUP>...</SUP>//กำหนดให้ตัวอักษรเป็นตัวยกกำลัง


แหล่งอ้างอิง :
http://www.webthaidd.com/html/webthaidd_article_290_.html
http://school.obec.go.th/pp_school/html/editor.html
http://www.divland.com/blog/2007/05/01/html-coding-standards/
http://www.mindphp.com/modules.php?name=News&file=article&sid=84
http://www.xvlnw.com/knowledge-readknowledge-id40.html

ลงวันที่ :
23 มิถุนายน 2555


ขอบคุณครับ!!! :))



เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)