???? HTML

Document Sample
???? HTML Powered By Docstoc
					ภาษา HTML
หลักการออกแบบเว็บ

  กาหนดกลุ่มเป้าหมาย
  จาแนกกลุ่มเนื้อหา
  ทิศทางการไหลของหน้าเว็บ
ทิศทางการไหล
  แบบลาดับขั้น (Hierarchy)
  แบบเชิงเส้น (Linear)
  แบบผสม (Combination)
HTML คืออะไร
   HyperText Markup Language
   เป็นภาษา script ประเภทหนึ่ง ซึ่งใช้ทา Web page เป็นงานหลัก
    ในระบบ World Wide Web
   ถูกเสนอโดยนาย Berners-Lee ซึ่งเป็นนักโปรแกรมเมอร์ทางานที่
    European Center for Particle Physics (CERN)
       เพื่อสร้างสื่อที่นักวิทยาศาสตร์สามารถจะเผยแพร่ผลงาน และใช้อ้างอิง
        ได้ตลอด 24 ช.ม.
       เพื่อสร้างภาษาคอมพิวเตอร์ที่รองรับภาษาท้องถิ่น ที่ไม่ขึ้นกับระบบของ
        เครื่องคอมพิวเตอร์ (Platform) หรือระบบเครือข่ายใดๆ
โครงสร้างของภาษา HTML


 <HTML>
 <HEAD>
 :
 </HEAD>
 <BODY>
 :
 </BODY>
 </HTML>
โครงสร้างของ Tag
   Tags คือ คาสั่งในภาษา HTML โดยจะมีประสิทธิภาพสูงสุด เมื่อ
    กาหนดส่วนขยายให้กับ tags
   Attributes เป็นส่วนประกอบหนึ่งของส่วนขยาย ทาหน้าที่
    กาหนดทิศทางของ tags
   Values เป็นส่วนประกอบสุดท้ายของส่วนขยาย ทาหน้าที่
    กาหนด ขนาด หรือ ลักษณะ ให้กับ attributes
หลักของ Symmetry

 Horizontal Symmetry
 Vertical Symmetry
Tags เพื่อจัดรูปแบบตัวอักษร

   Headings
       เริ่มจาก <H1>…</H1> ถึง <H6>…</H6>
   Paragraph
       <P>…</P>
   Break
       <BR>
   Preformatted Text
       <PRE>…</PRE>
Tags เพื่อจัดรูปแบบตัวอักษร

   Bold
        <B>…</B>
   Italic
        <I>…</I>
   Underlined
        <U>…</U>
คาสั่งที่ล้าสมัย (Deprecated)
   <STRONG>…</STRONG> และ <EM>…</EM>

   <SMALL>…</SMALL>

   <BIG>…</BIG>

   <SUP>…</SUP>

   <SUB>…</SUB>

   <STRIKE>…</STRIKE>
การสร้างลิสต์ (Lists)

   ลิสต์แบบ Bullet (Unordered/ Bullet list)
         <UL>
                           ่
             <LI>ปากกาลูกลืน
             <LI>ดินสอดา 2B
             <LI>ยางลบหรือน้ายาลบคาผิด
           </UL>
   ลิสต์แบบตัวเลข (Ordered/ Numbered list)
         <OL>
             <LI>ทาความเข้าใจในโครงสร้างคาสั่ง
             <LI>ทดลองเขียน tags ลงในโปรแกรม Text editor
             <LI>Save ไฟล์แล้วตั้งชื่อไฟล์
             <LI>ดูผลลัพธ์ของ tags ดังกล่าวด้วยโปรแกรม web browser
             <LI>ถ้าหากไม่ผลลัพธ์ดังตัวอย่าง ให้กลับไปแก้ไข (เรียก debug) คาสั่งที่เขียนผิด
             <LI>กลับไปทาในข้อ 4
           </OL>
การสร้างลิสต์ (Lists)
 ลิสต์แบบ Definition (Definition List)
          <DL>
              <DT>Tag
              <DD>A tag also referred to as an element; can be considered the
            "command center" of HTML document formatting.
            </DL>
การสร้าง Hyperlink
 <A>...</A>
 การเชื่อมโยงแบบเต็ม (Absolute Linking)
       <A HREF="http://www.download.com/linux"> Linux app. at
        Download.com</A>
   การเชื่อมโยงแบบสัมพัทธ์ (Relative Linking)
       <A HREF=“index.html">My home Page</A>
การสร้าง Hyperlink ในหน้าเดียวกัน

   การเชื่อมโยงภายในหน้าเดียวกัน (Intra-Page Linking)
 </HEAD>
 <BODY>
 <A HREF="#linux">Linux Talks</A>
 <P>
 <P>
 <P>
 <A NAME="linux">Linux Talks</A><br>
 ทุกๆ เรื่องที่เกี่ยวกับลีนุกซ์ ถามมาได้เลย... เราพร้อมจะตอบให้ ........
 </BODY>
 </HTML>
การสร้าง Hyperlink สาหรับ email

   การเชื่อมโยงเพื่อส่ง email (Mail Linking)
        <A HREF="mailto: webmaster@swu.ac.th"> ส่ง email ถึงเรา</A>
การใส่รูปกราฟิก (Image Tag)

   <IMG>

       <IMG SRC=“image.gif">
การสร้างตาราง
   <TABLE>...</TABLE> ใช้ระบุถึงการเริ่มต้น และสิ้นสุดของ
    ตาราง
   <TR>...</TR> ใช้กาหนดแถวของ ตาราง (Table rows)
   <TD>...</TD> ใช้กาหนดช่องหรือเซลล์ ของตาราง (Table
    data)
เฟรม (Frames)
   <frameset>...</frameset>
       กาหนดว่า เว็บเพ็จหน้านั้นจะใช้ Frame และกาหนดจานวนคอลัมน์ หรือ
        แถว ของเฟรม
   <frame>
       กาหนดว่า frame ที่จะประกอบกันขึ้นเป็นหนึ่งหน้าเว็บเพ็จ เกิดจากไฟล์
        ที่เป็นเว็บเพ็จใด
เฟรม (Frames)
   ข้อสังเกต <frameset> ทาหน้าที่แทน <body> ...</body> ในหน้าที่ใช้เฟรม หมายความ
                        ่
    ว่า เมื่อสร้างหน้าทีใช้เฟรม <body>...</body> จะถูกแทนที่ด้วย
    <frameset>...</frameset> แทน
       <HTML><HEAD>
       <TITLE>Frame Controls</TITLE>
       </HEAD>
        <FRAMESET cols="140,*">
          <FRAME src="menu.html">
          <FRAME src="main.html">
       </FRAMESET>
        </HTML>
Magic Target Names
   target="_self"
        ใช้เพื่อให้เปิดหน้าเว็บเพ็จในหน้าต่างปัจจุบัน
   target="_top"
        ใช้เพื่อเปิดหน้าเว็บเพ็จในหน้าต่างปัจจุบัน แบบเต็มหน้าจอ
   target="_blank"
        ใช้เพื่อให้เปิดหน้าเว็บเพ็จในหน้าต่างใหม่
   target="_parent"
        ใช้เพื่อเปิดหน้าเว็บเพ็จในหน้าต่างที่ทาลิงค์มายังหน้าต่างปัจจุบัน
ไม่ควรลืม
   TITLE
       <title>หลักสูตรบัณฑิตศึกษา – บันทิตวิทยาลัย – มหาวิทยาลัยศรีนครินทรวิ
        โรฒ </title>


   META
       <meta name=”keywords” content=”Srinakharinwirot University,
        Humanity Faculty, Science Faculty, Graduate School, Computer Center”>

       <meta name=”description” content=”……..”>
ไม่ควรลืม
   IMG
       Width และ Height
       Alternative
   encoding
       <meta http-equiv="Content-Type" content="text/html; charset=TIS-620">

        หรือ
       <meta http-equiv="Content-Type" content="text/html; charset=windows-
        874">
สไตล์ (Cascading Style Sheet)

   วิธีการกาหนดรูปแบบ (Format) ของเอกสาร HTML ด้วยการใช้
    attribute “Style” กับ tags บางประเภทในภาษา HTML
ประเภทของ Style Sheets

 Inline
 Embedded
 Linked บางครั้งเรียก External Style Sheet
Inline Style

   เป็นวิธีกาหนดรูปแบบด้วยการใส่ Style attribute เข้ากับ tag
<P>
รูปแบบและขนาดของตัวอักษรในย่อหน้านี้ จะมีขนาดและรูปแบบตัวอักษร
เป็นไปตามค่า default ของ web browser
</P>
<P STYLE="font: 16pt BrowaliaUPC;">
รูปแบบและขนาดของตัวอักษรในย่อหน้านี้ จะมีขนาด 16 point และรูปแบบ
ตัวอักษรเป็น BrowaliaUPC
</P>
Embedded style

   วิธีกาหนดรูปแบบให้กับทั้งหน้าเว็บเพ็จ โดย การใช้ <STYLE>
    วางไว้ในส่วน <HEAD>
    <html><head>
    <style>
    h1       { font-family: Tahoma; color: #00FF00 }
    </style>
    </head>
    <body>
    <h1>Embedded Style Sheet</h1>
    </body>
    </html>
External Style Sheet

   เป็น CSS ที่เรียก ใช้ด้วยการเชื่อมโยง (Linked) เข้าสู่เอกสาร
    HTML มักใช้เพื่อเป็นแม่แบบให้กับเอกสารหลายๆ หน้า
 <HTML>
 <HEAD>
 <TITLE>กาหนดรูปแบบด้วย Linked Style Sheet</TITLE>
 <LINK rel=stylesheet href="style.css" type="text/css">
 </HEAD>

  <BODY>
 <H1>ประเภทของ Style Sheets</H1>
 :
 </BODY>
 </HTML>
นา CSS ทั้ง 3 แบบมาใช้ร่วมกัน
 ได้ผลอย่างไร???
 จดจาลักษณะตาม Linked CSS เป็นลาดับแรก แล้วจึงมองหา
  ลักษณะ เพิ่มเติมจาก Embedded และ Inline CSS ตามลาดับ
  แล้วจึงกาหนดค่าให้กับ tag ที่เกี่ยวข้อง ถ้าหากมีการกาหนด
  ลักษณะซ้าด้วย Embedded และ/หรือ Inline CSS ให้กับ tag ที่ได้
  กาหนดไว้แล้วใน Linked CSS โปรแกรม web browser จะ
  override ค่าที่กาหนด
Class
 วิธีกาหนดลักษณะเฉพาะแตกต่างไปจากส่วนอื่นๆ วิธีการนี้เรียกว่า
  Style class
 กาหนด class ด้วยการตั้งชื่อให้กับ tag ที่ เราต้องการ โดยเพิ่ม .
  (period) แล้วตามด้วยชื่อ
                                                        ่
 เรียกใช้ด้วย tag นั้น ตามด้วย class="x" เมื่อ x เป็นชือที่กาหนด
ตัวอย่างการใช้ Class
<HTML>
<HEAD>
                                           <BODY>
<TITLE>Style sheet sample: class</TITLE>   <P class="center">
<STYLE>                                    Let my first words in this book be an apology
<!--                                       for whatever errors do appear here, and for whatever
P.center {                                 overlooked toics don't. I have done my darnedest to
font-family: garamond, times, serif;       make this the most useful book possible, the book that
font-size: 10pt;                           I would have wanted when I began digging past the </P>
text-align: center;                        <P class="right">
}                                          The author and publisher
P.right {                                  connection with, or arising
font-family: garamond, times, serif;       out of, the furnishing,
font-size: 8pt;                            performance, or use of these programs.
text-align: right;                         </P>
}                                          <P class="name">
P.name {                                   -- Michael B. Little
font-family: garamond, times, serif;       </P>
font-size: 8pt;                            </BODY>
text-align: center;
text-weight: bold;                         </HTML>
text-style: italic;
}
-->
</STYLE>
</HEAD>
หลักการ Include

   การเรียกใช้ file จากภายใน Homepage เป็นการลดความซ้าซ้อน

   คาสั่ง include ใน ASP
       <!--#include file="../path/file.htm"-->


   คาสั่ง include ใน PHP
       <?include("../path/file.htm"); ?>
สรุป
 หลักการออกแบบเว็บเพจ
 HTML (คาแนะนาในการใช้บาง attribute)
 การใช้สไตล์
 การ include

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:28
posted:12/13/2011
language:Thai
pages:32