วันจันทร์ที่ 22 เมษายน พ.ศ. 2556

หน้าแรกของเว็บเพจ


จะว่าไปแล้วก็เหมือนกับการเลี้ยงลูกบาสเก็ตบอลที่กระเด้งได้, ก่อนอื่นให้คุณ เปิดโปรแกรม Notepad และเริ่มต้นกันด้วย การพิมพ์ข้อความตามผมดังนี้
<HTML>
</HTML>
แต่ละข้อความที่พิมพ์มานี้เราเรียกมันว่า แท็ก (Tag) ซึ่งแท็กแรก เป็นแท็กที่ใช้บอกว่าเป็นการเริ่มต้นเอกสาร และต่อมาก็คือแท็กที่ใช้บอกจุดสิ้นสุด การกำหนดว่าแท็กใด เป็นแท็กสิ้นสุด สามารถทำได้โดยการใส่เครื่อง หมาย "/" ไว้ที่หน้าแท็ก เป็นส่วนใหญ่, แต่ก็ไม่ได้หมายความว่าทุกแท็ก จำเป็นจะต้องมีแท็กปิดเสมอไป
เมื่อเรานึกถึง "แท็ก" ก็เหมือนกับว่า เราได้พูดคุยกับ โปรแกรมเบราส์เซอร์ หรือไม่ก็ เป็นการ บอกรายละเอียด ให้กับมัน แล้วอะไรละที่คุณบอก สิ่งแรกก็คือ "นี่คือการเริ่มต้นเอกสาร <HTML> และสิ่งต่อมาก็คือ "นี่คือการสิ้นสุดเอกสาร" </HTML> เมื่อมาถึงตรง นี้แล้ว สิ่งที่จะต้องทำต่อไปก็คือเริ่มใส่แท็กอื่น ๆ เข้าไปอีก
ในเอกสาร HTML โดยทั่วไปมักจะต้องมีแท็ก HEAD เพื่อกำหนดรายละเอียดในส่วนหัวของเอกสาร

การกำหนด Font ที่จะใช้ในเว็บเพจ


<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
   <FONT FACE="AngsanaUPC">
   Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
   </FONT>
   <FONT FACE="JasmineUPC">
   Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
   </FONT>
   <FONT FACE="IrisUPC">
   Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
   </FONT>
</BODY>
</HTML>

การกำหนดรูปแบบตัวอักษร


<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
    Hello World, นี่คือเว็บเพจแรกของฉัน<P>
    <B> Hello World, นี่คือเว็บเพจแรกของฉัน</B><P>
    <I> Hello World, นี่คือเว็บเพจแรกของฉัน</I><P>
    <S> Hello World, นี่คือเว็บเพจแรกของฉัน</S><P>
    <U> Hello World, นี่คือเว็บเพจแรกของฉัน</U><P>
    ข้อความแบบ Super Script E=MC<SUP>2</SUP><P>
    ข้อความแบบ Sub Script H<SUB>2</SUB>O<P>
</BODY>
</HTML>
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
ข้อความแบบ Super Script E=MC2
ข้อความแบบ Sub Script H2O

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


<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
    <FONT SIZE=6>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
    <FONT SIZE=5>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
    <FONT SIZE=4>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
   <FONT SIZE=2>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
</BODY>
</HTML>

การเน้นสีไห้กับข้อความหรือตัวอักษร


<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
    <FONT COLOR=RED>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
    <FONT COLOR=GREEN>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
    <FONT COLOR=BLUE>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
    <FONT COLOR=VIOLET>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
    <FONT COLOR=YELLOW>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
</BODY>
</HTML>

การกำหนดสีตัวอักษรและแบล็คกราว์


<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY TEXTCOLOR="black" BGCOLOR="lightblue">
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</BODY>
</HTML>
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน
อธิบายคำสั่ง
<BODY TEXTCOLOR="ชื่อสี" BGCOLOR="ชื่อสี">
TEXTCOLORใช้กำหนดสี Default ให้กับตัวอักษรทั้งหมดภายในเอกสาร
BGCOLORใช้กำหนดสีแบล็คกราวด์ของเอกสาร กำหนดได้เพียงครั้งละหนึ่งสี

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


<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
    <P ALIGN=LEFT>Hello World, นี่คือเว็บเพจแรกของฉัน</P>
    <P ALIGN=CENTER>Hello World, นี่คือเว็บเพจแรกของฉัน</P>
    <P ALIGN=RIGHT>Hello World, นี่คือเว็บเพจแรกของฉัน</P>
</BODY>
</HTML>
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
อธิบายคำสั่ง
<P>เป็นการสั่งให้ขึ้นย่อหน้าใหม่ (ปกติจะอยู่ชิดซ้ายเสมอ)
<P ALIGN=LEFT>กำหนดให้ข้อความอยู่ชิดด้านซ้าย
<P ALIGN=CENTER>กำหนดให้ข้อความอยู่กึ่งกลางเอกสาร
<P ALIGN=RIGHT>กำหนดให้ข้อความอยู่ชิดด้านขวา
</P>เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ (เมื่อใช้ <P ALIGN>)