Noom' Siam Home Page

คู่มือการเขียนโฮมเพจ อย่างง่าย พร้อมตัวอย่าง ( บทที่ 1)
จัดทำโดย โรงเรียนเพาะปัญญา

สิ่งที่จะต้องเตรียมการก่อนทำการสร้างโฮมเพจ

หา เครื่องมือที่จะใช้ในการเขียนโฮมเพจ โดยใช้โปรแกรม Super Note Tab 4.0 (730 kb ) เพียงอย่าง เดียว
ทำการขอ e-mail จาก hotmail.com โดยทำการกรอกข้อมูลลงในแบบฟอร์ม แล้ว Submit Registration จนท่านได้รับ e-mail Address
ทำการขอพื้นที่เพื่อนำโฮมเพจที่สร้างขึ้นไปไว้ โดยทำการขอที่ geocities.com ซึ่งมีขั้นตอน ดังนี้:-

1. ไปที่ http://www.Geocities.com
2. เลือก Neighborhood จากนั้นเราจะเห็น หมู่บ้านหลายๆหมู่บ้าน
เลือกหมู่บ้านที่ต้องการเข้าไปอยู่ เช่น ResearchTriangle
3. click ที่ Join This neighborhood ในที่นี้คือ ResearchTriangle
4. จากนั้น ลงไปกลางๆหน่อย จะเห็นข้อความซึ่งแสดง ให้รู้ว่า หมู่บ้านนี้มี ที่ว่าง (vacancies) กี่ที่ ให้เลือกที่ๆจะอยู่ครับ เช่น
ResearchTriangle: 1 vacancies in 8450 Block
ResearchTriangle/Lab: 17 vacancies in 7000 Block
จะมีรูปบ้านคนเต็มไปหมด ลองหาคำว่า vacant ดูสิครับ แล้วก็ click เข้าไป ที่บ้านหลังนั้น
5.ทำการกรอกแบบฟอร์ม New Member Application
6. เลือก I agree to these terms and conditions ครับ
7. หลังจากเสร็จแล้ว เขาจะส่ง password มาให้ทาง E-mail นะครับ
8. เปิดรับจดหมายที่ทาง Geocities ส่งมา ซึ่งจะมีทั้ง Login Name และ pass word

เริ่มสร้างโฮมเพจอย่างง่ายๆ

ทำการเปิด Super Note Tab
ไปที่ File เลือก New
ไปที่ช่องซ้ายมือ เลือกหัวข้อ HTML
เลือกรายการ Document Element แล้วไปที่ HTML Begin แล้วทำการ Click
ทำการกรอกข้อความ ใน Clipbook Wizard ดังนี้

ช่อง Web page Title : ให้ตั้งชื่อโฮมเพจของคุณ เช่น Hoondee's Homepage
ช่อง e-mail address : ให้ใส่e-mail address่ ของคุณ เช่น hoondee@scientist.com
ช่อง your name ให้ใส่ชื่อของคุณ
ช่อง web page key word: ให้ใส่ key word เพื่อใช้ในการค้นหาโฮมเพจของคุณ เช่น hoondee,
Noom Siam,Thai,build homepage
ช่อง web page description: ให้อธิบายถึงวัตถุประสงค์ในการสร้างโฮมเพจ สร้างขึ้นเพื่อสอนการสร้างโฮมเพจฟรี
ช่อง body color : ให้เลือกสี White
ช่อง back ground file name: ให้ใส่ Bg.jpg
แล้วกด OK

ทำการเลือกหัวข้อ HTML end แล้ว Save As index.html

ดูSource Code เมื่อทำเสร็จแล้ว

<HTML>
<HEAD>
<TITLE>Hoondee's Homepage</TITLE>

</HEAD>

ดูตัวอย่างเมื่อสร้างเสร็จแล้ว

เปิดแฟ้ม index.html ที่ได้สร้างเสร็จแล้วขึ้นมา
ไปที่ File แล้วเลือก edit page พิมพ์ข้อความว่า :

คำนำ
ในบทเรียนนี้จะสอนวิธีสร้างโฮมเพจ โดยเริ่มต้นจากง่ายๆไปยาก พร้อมทั้งมีตัวอย่างประกอบ
คำจำกัดความ
บทเรียนที่เป็นภาษาไทย
บทเรียนที่เป็นภาษาอังกฤษ
เอกสารอ้างอิง

แล้วทำการ Save As ในแฟ้มเดิม
ดู Source Code เมื่อทำเสร็จแล้ว

<META NAME="author" CONTENT="Noom Siam">
   <META NAME="generator" CONTENT="NoteTab 4.0">
   <META NAME="keywords" CONTENT="Hoondee,Noom Siam,Thai,Build
Homepage">
   <META NAME="description" CONTENT="สอนสร้างโฮมเพจฟรี">
   <META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I)
[Netscape]">
   <TITLE> สร้างโฮมเพจ   โดย Noom Siam</TITLE>

<LINK REV="made" HREF="mailto:hoondee@scientist.com">
</HEAD>
<BODY BGCOLOR="#FFFFFF" BACKGROUND="Bg.jpg">

             คำนำ
ในบทเรียนนี้จะสอนวิธีสร้างโฮมเพจ โดยเริ่มต้นจากง่ายๆไปยาก พร้อมทั้งมีตัวอย่างประกอบ
              คำจำกัดความ
              บทเรียนที่เป็นภาษาไทย
              บทเรียนที่เป็นภาษาอังกฤษ
              เอกสารอ้างอิง
</BODY>
</HTML>

ดูตัวอย่างเมื่อสร้างเสร็จแล้ว

ทำให้โฮมเพจอ่านภาษาไทยออก
   <HEAD>
<!..........ตัดข้อความ ข้างล่างนี้ออก ตั้งแต่..............................................>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=x-user-defined">
<!..........จนถึง......................................................................................>
   <META NAME="author" CONTENT="Noom Siam">
   <META NAME="generator" CONTENT="NoteTab 4.0">
   <META NAME="keywords" CONTENT="Hoondee,Noom Siam,Thai,Build Homepage">
   <META NAME="description" CONTENT="สอนสร้างโฮมเพจฟรี">
   <META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I) [Netscape]">
   <TITLE>Hoondee's Homepage</TITLE>
<LINK REV="made" HREF="mailto:hoondee@scientist.com">
</HEAD>
<BODY BGCOLOR="#FFFFFF" BACKGROUND="Bg.jpg">
<!.......... เพิ่มเติมข้อความ ข้างล่างนี้ ตั้งแต่..............................................>
<FONT FACE="Thonburi, Angsana UPC, AngsanaUPC, AngsanaNew , Angsana New, FixedDB ThaiText New, DB ThaiTextFixed, MS Sans Serif" SIZE=6>
<!..........จนถึง......................................................................................>

คำนำ
ในบทเรียนนี้จะสอนวิธีสร้างโฮมเพจ โดยเริ่มต้นจากง่ายๆไปยาก พร้อมทั้งมีตัวอย่างประกอบ
              คำจำกัดความ
              บทเรียนที่เป็นภาษาไทย
              บทเรียนที่เป็นภาษาอังกฤษ
              เอกสารอ้างอิง
</BODY>
</HTML>
ดูตัวอย่างเมื่อสร้างเสร็จแล้ว

เริ่มหัดใช้ ย่อหน้า Paragraph <P> Tag เท่านั้น
ใช้เมื่อ จะเว้นบรรทัดให้มีช่องว่างระหว่างบรรทัด ให้ใช้ <p> โดยไม่ต้องมี tag อีกอันมาปิด

ทำการเปิด Super Note Tab

ไปที่ Block Formatting ช่องซ้ายมือ

เลือกหัวข้อ Paragraph

ดู Source Code เมื่อทำเสร็จแล้ว

<HTML>

<HEAD>

<META NAME="keywords" CONTENT="Hoondee,Noom Siam,Thai,Build

Homepage">

<META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I)

[Netscape]">

<TITLE> สร้างโฮมเพจ โดย Noom Siam</TITLE>

</HEAD>

<P>
             คำนำ
<P>
ในบทเรียนนี้จะสอนวิธีสร้างโฮมเพจ โดยเริ่มต้นจากง่ายๆไปยาก พร้อมทั้งมีตัวอย่างประกอบ
<P>
              คำจำกัดความ
<P>
              บทเรียนที่เป็นภาษาไทย
<P>
              บทเรียนที่เป็นภาษาอังกฤษ
<P>
              เอกสารอ้างอิง

</BODY>

</HTML>

ดูตัวอย่างเมื่อสร้างเสร็จแล้ว Save As-->index.html

เริ่มหัดใช้ HEADING <H1> และ <H2>Tag เท่านั้น

ทำการเปิด Super Note Tab
    ไปที่ Block Formatting   ช่องซ้ายมือ
      เลือกหัวข้อ    H1 header และ   H2 header

ดู Source Code   เมื่อทำเสร็จแล้ว

<HTML>

<HEAD>

<META NAME="keywords" CONTENT="Hoondee,Noom Siam,Thai,Build

Homepage">

<META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I)

[Netscape]">

<TITLE> สร้างโฮมเพจ โดย Noom Siam</TITLE>

</HEAD>

<P>
<H1>             คำนำ </H1>
<P>
ในบทเรียนนี้จะสอนวิธีสร้างโฮมเพจ โดยเริ่มต้นจากง่ายๆไปยาก พร้อมทั้งมีตัวอย่างประกอบ
<P>
          <H1>    คำจำกัดความ </H1>
<P>
              <H2>บทเรียนที่เป็นภาษาไทย </H2>
<P>
           <H2>   บทเรียนที่เป็นภาษาอังกฤษ </H2>
<P>
             <H1> เอกสารอ้างอิง </H1>

</BODY>

</HTML>

ดูตัวอย่างเมื่อสร้างเสร็จแล้ว Save As-->index.html

ทำการเพิ่มเติมรายการลงในโฮมเพจ

ดู Source Code เมื่อทำเสร็จแล้ว

<HTML>

<HEAD>

<META NAME="keywords" CONTENT="Hoondee,Noom Siam,Thai,Build

Homepage">

<META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I)

[Netscape]">

<TITLE> สร้างโฮมเพจ โดย Noom Siam</TITLE>

</HEAD>

               <P>
<H1>             คำนำ </H1>
<P>
ในบทเรียนนี้จะสอนวิธีสร้างโฮมเพจ โดยเริ่มต้นจากง่ายๆไปยาก พร้อมทั้งมีตัวอย่างประกอบ
<P>
          <H1>    คำจำกัดความ </H1>
                MAIN
                HTML
               TOOLS
                FAQ

<P>
              <H2>บทเรียนที่เป็นภาษาไทย </H2>
                คู่มือสร้างโฮมเพจ โดย Noom Siam
                คู่มือ JavaScript แปล โดย Noom Siam

<P>
           <H2>   บทเรียนที่เป็นภาษาอังกฤษ </H2>
                Lesson on Build Homepage.
                Summary of HTML Tags.

<P>
<H1> เอกสารอ้างอิง </H1>

เวปเพจแรกของฉัน
ชมรมเวปเพจไทย

</BODY>

</HTML>

ดูตัวอย่างเมื่อสร้างเสร็จแล้ว Save As-->index.html

เริ่มหัดใช้ รายการ (LIST) โดยใช้ <UL> และ <Li> Tag เท่านั้น

ทำการเปิด Super Note Tab
    ไปที่ Preformatted List Elements   ช่องซ้ายมือ
      เลือกหัวข้อ    Unorder List

ดู Source Code   เมื่อทำเสร็จแล้ว

<HTML>

<HEAD>

<META NAME="keywords" CONTENT="Hoondee,Noom Siam,Thai,Build

Homepage">

<META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I)

[Netscape]">

<TITLE> สร้างโฮมเพจ โดย Noom Siam</TITLE>

</HEAD>

               <P>
<H1>             คำนำ </H1>
<P>
ในบทเรียนนี้จะสอนวิธีสร้างโฮมเพจ โดยเริ่มต้นจากง่ายๆไปยาก พร้อมทั้งมีตัวอย่างประกอบ
<P>
          <H1>    คำจำกัดความ </H1>
<UL>

               <LI>
MAIN
               <LI>
HTML
               <LI>
TOOLS
                <LI>
FAQ
</UL>

<P>
<H2>บทเรียนที่เป็นภาษาไทย </H2>
<UL>

<LI>
คู่มือสร้างโฮมเพจ โดย Noom Siam
<LI>
คู่มือ JavaScript แปล โดย Noom Siam
</UL>

<P>
<H2> บทเรียนที่เป็นภาษาอังกฤษ </H2>
<UL>

                <LI>
Lesson on Build Homepage.
                 <LI>
Summary of HTML Tags.
</UL>
<P>
             <H1> เอกสารอ้างอิง </H1>
<UL>

<LI> เวปเพจแรกของฉัน
<LI> ชมรมเวปเพจไทย

</UL>
</BODY>

</HTML>

ดูตัวอย่างเมื่อสร้างเสร็จแล้ว Save As-->index.html

เริ่มหัด ใส่รูปภาพ

ไปที่หัวข้อ Image Element แล้วเลือก Image
ใน Clipbook Wizard

ช่อง Image File Name : กรอก eye4.gif
ช่อง Image Text description: กรอก รูปตาของหนุ่มสยาม
แล้วกด OK
แล้วทำการ Save As ในแฟ้มเดิม
ดู Source Code เมื่อทำเสร็จแล้ว

<HTML>

<HEAD>

<META NAME="keywords" CONTENT="Hoondee,Noom Siam,Thai,Build

Homepage">

<META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I)

[Netscape]">

<TITLE> สร้างโฮมเพจ โดย Noom Siam</TITLE>

</HEAD>

<P>
<H2>บทเรียนที่เป็นภาษาไทย </H2>
<UL>

<LI>
คู่มือสร้างโฮมเพจ โดย Noom Siam
<LI>
คู่มือ JavaScript แปล โดย Noom Siam
</UL>

<P>
<H2> บทเรียนที่เป็นภาษาอังกฤษ </H2>
<UL>

                <LI>
Lesson on Build Homepage.
                 <LI>
Summary of HTML Tags.
</UL>
<P>
             <H1> เอกสารอ้างอิง </H1>
<UL>

<LI> เวปเพจแรกของฉัน
<LI> ชมรมเวปเพจไทย

</UL>
<IMG SRC="eye4.gif" ALT="รูปตาของหนุ่มสยาม">
</BODY>

</HTML>
ดูตัวอย่างเมื่อสร้างเสร็จแล้ว Save As-->index.html

เริ่มหัด ใช้รูปภาพ และข้อความ Link ไปยังที่ต่างๆ

ทำการเปิด Super Note Tab
ไปที่ Anchor Elements ช่องซ้ายมือ
เลือกหัวข้อ Link ในกรณีใช้ Link ข้อความ

ช่อง URL : ใส่ URL ที่จะทำการ Link
ช่อง Enter a description for this Link : ทำการกรอกข้อความที่จะเชื่อมโยงไปโฮมเพจอื่น

เลือกหัวข้อ Link Image ในกรณีที่ใช้ภาพเชื่อมโยงไปโฮมเพจอื่น

ช่อง URL : ใส่ URL ที่จะทำการ Link
ช่อง Image File Name: กรอก eye4.gif
ช่อง Image Text description : ทำการกรอกข้อความที่ภาพจะเชื่อมโยงไปโฮมเพจอื่น

ดู Source Code เมื่อทำเสร็จแล้ว

<HTML>

<HEAD>

<META NAME="keywords" CONTENT="Hoondee,Noom Siam,Thai,Build

Homepage">

<META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I)

[Netscape]">

<TITLE> สร้างโฮมเพจ โดย Noom Siam</TITLE>

</HEAD>

               <P>
<H1>             คำนำ </H1>
<P>
ในบทเรียนนี้จะสอนวิธีสร้างโฮมเพจ โดยเริ่มต้นจากง่ายๆไปยาก พร้อมทั้งมีตัวอย่างประกอบ
<P>
          <H1>    คำจำกัดความ </H1>
<UL>

               <LI><A HREF="http://www.oocities.org/ResearchTriangle/3756/">MAIN</A>

               <LI>
<A HREF="http://www.oocities.org/ResearchTriangle/3756/Java01.htm">HTML</A>

               <LI><A HREF="http://www.oocities.org/ResearchTriangle/3756/tool_hp.htm">TOOLS</A>
                 <LI><A HREF="http://www.oocities.org/ResearchTriangle/3756/FAQ_HP.html">FAQ</A>

</UL>

<P>
<H2>บทเรียนที่เป็นภาษาไทย </H2>
<UL>

<LI><A HREF="http://www.oocities.org/ResearchTriangle/3756/Java01.htm">คู่มือสร้างโฮมเพจ
โดย Noom Siam</A>

<LI><A HREF="http://www.oocities.org/Athens/Delphi/5894/welcome1.htm">คู่มือ
JavaScript แปล โดย Noom Siam</A>
</UL>

<P>
<H2> บทเรียนที่เป็นภาษาอังกฤษ </H2>
<UL>

                <LI><A HREF="http://www.mcli.dist.maricopa.edu/tut/lessons.html">Lesson
on Build Homepage.</A>

                 <LI><A HREF="http://www.mcli.dist.maricopa.edu/tut/tags/index.html">Summary
of HTML Tags.</A>

</UL>
<P>
             <H1> เอกสารอ้างอิง </H1>
<UL>

               <LI><A HREF="http://www.oocities.org/Tokyo/Towers/8973/main_index.html">ชมรมเวปเพจไทย</A>
               <LI><A HREF="http://www.oocities.org/ResearchTriangle/3756/"><IMG SRC="eye4.gif" ALT="สอนสร้างโฮมเพจ" BORDER=0 >สอนสร้างโฮมเพจ</A>
</UL>
               </BODY>
</HTML>
ดูตัวอย่างเมื่อสร้างเสร็จแล้ว    Save As-->index.html

ใส่ e-mail ลงในโฮมเพจ

ไปที่หัวข้อ Anchor Element แล้วเลือก Mail to
ใน Clipbook Wizard

ช่อง Mail to : กรอก hoondee@scientist.com
ช่อง Enter Link Text : กรอกว่า มีปัญหากรุณาติดต่อที่ hoondee@scientist.com
แล้วกด OK
แล้วทำการ Save As ในแฟ้มเดิม

ดู Source Code เมื่อทำเสร็จแล้ว

<HTML>

<TITLE> สร้างโฮมเพจ   โดย  Noom  Siam</TITLE>

</HEAD>

คำนำ</FONT>

ในบทเรียนนี้จะสอนวิธีสร้างโฮมเพจ โดยเริ่มต้นจากง่ายๆไปยาก พร้อมทั้งมีตัวอย่างประกอบ</FONT>

คำจำกัดความ</FONT>

<UL>

<LI>

<LI>

<LI>

<FONT SIZE=+3><A HREF="http://www.oocities.org/ResearchTriangle/3756/tool_hp.htm">TOOLS</A></FONT></LI>

<LI>

</UL>

<FONT SIZE=+3>บทเรียนที่เป็นภาษาไทย</FONT>

<UL>

<LI>

<FONT SIZE=+3><A HREF="http://www.oocities.org/ResearchTriangle/3756/Java01.htm">คู่มือสร้างโฮมเพจ

โดย Noom Siam</A></FONT> </LI>

<LI>

<FONT SIZE=+3><A HREF="http://www.oocities.org/Athens/Delphi/5894/welcome1.htm">คู่มือ

JavaScript แปล โดย Noom Siam</A></FONT> </LI>

</UL>

บทเรียนที่เป็นภาษาอังกฤษ</FONT>

<UL>

<LI>

<FONT SIZE=+3><A HREF="http://www.mcli.dist.maricopa.edu/tut/lessons.html">Lesson

on Build Homepage.</A></FONT> </LI>

<LI>

<FONT SIZE=+3><A HREF="http://www.mcli.dist.maricopa.edu/tut/tags/index.html">Summary

of HTML Tags.</A></FONT> </LI>

</UL>

<FONT SIZE=+3>เอกสารอ้างอิง</FONT>

<UL>

<LI>

< <FONT SIZE=+3><A HREF="http://www.oocities.org/Tokyo/Towers/8973/main_index.html">ชมรมเวปเพจไทย</A></FONT> </LI>

<LI>

<A HREF="http://www.oocities.org/ResearchTriangle/3756/"><IMG SRC="eye4.gif" ALT="สอนสร้างโฮมเพจ" BORDER=0 ></A> <FONT SIZE=+3><A HREF="http://www.oocities.org/ResearchTriangle/3756/">สอนสร้างโฮมเพจ</A></FONT></LI>

</UL>

<P> <FONT SIZE=+3><A HREF="mailto:hoondee@scientist.com">มีปัญหากรุณาติดต่อที่

hoondee@scientist.com</A></FONT></FONT>

</BODY>

</HTML>

ดูตัวอย่างเมื่อสร้างเสร็จแล้ว Save As-->index.html

จะทำการ UP LOAD โฮมเพจที่ได้สร้างเสร็จแล้ว ไปไว้ที่ geocities.com

แฟ้มที่เราสร้างโฮมเพจ อยู่ที่ index.html ดูตัวอย่าง
แฟ้มภาพมีทั้งหมด 2 แฟ้ม ได้แก่ Bg.jpg ดูตัวอย่าง

eye4.gif ดูตัวอย่าง

ไปที่http://www.oocities.org/members/tools/file_manager.html
ใส่ Member Name และ Password แล้ว กด Submit
ไปที่ EZ File UPLOAD กด Browse แล้วทำการเลือกแฟ้มที่เราเก็บไว้ คือ index.html,

Bg.jpg ,Smo.gif , eye4.gif จนครบ 4 แฟ้ม แล้วกด Up Load Files

ไปที่ URL ที่โฮมเพจเราอยู่ ตรวจสอบดูว่า ได้โฮมเพจตามที่เราต้องการหรือไม่

ดูตัวอย่างเมื่อเสร็จแล้ว

ถ้ามีปัญหา ติดต่อได้ที่ hoondee@scientist.com

หากมีคำถาม กรุณาใช้ Feed Back Form หรือ e-mail ที่ hoondee@scientist.com
NEXT PAGE

This page is unofficial. If you own the copyright on anything on these pages, and you would like me to
remove it, please identify yourself and the information, and I will. If you own the copyright and you are willing to give me permission to use it, I would like to know that also.