", "", "", "", "" , "This puts in the closing tags when your document is complete." ) jBold = new HTMLtag ( "B", "2", "Enter the text to be BOLD", " ", "", "", "This will be bold", "" , "The text placed between the and the will be BOLD" ) jItalics = new HTMLtag ( "I", "2", "Enter the text to be ITALICIZED", " ", "", "", "This will be in italics", "" , "The text placed between the and the will be ITALICIZED" ) jPre = new HTMLtag ( "PRE", "2", "Enter the text to be PREformatted", "

", "", "

", "This will be PREformatted", "" , "The text placed between the

 and the

will be PREformatted" ) jPara = new HTMLtag ( "P", "2", "Enter the text for a PARAGRAPH", "

", "", "

", "Start of a PARAGRAPH that continues until the start of next PARAGRAPH.", "" , "The text placed after the

will be a separate PARAGRAPH until the next

" ) jBreak = new HTMLtag ( "BR", "1", "", "
", "", "", "", "" , "This tag forces a line break, start of the next line." ) jRule = new HTMLtag ( "HR", "1", "", "

", "", "", "", "" , "This tag puts a (horizontal rule) line on the page." ) jH1 = new HTMLtag ( "H1", "2", "Enter the text for the HEADLINE", "

", "", "

", "This will be a top level HEADLINE", "" , "The text placed between the

and the

will be the HEADLINE." ) jH2 = new HTMLtag ( "H2", "2", "Enter the text for the HEADLINE", "

", "", "

", "This will be a next to top level HEADLINE", "" , "The text placed between the

and the

will be the HEADLINE." ) jH3 = new HTMLtag ( "H3", "2", "Enter the text for the HEADLINE", "

", "", "

", "This will be a third from top level HEADLINE", "" , "The text placed between the

and the

will be the HEADLINE." ) jCenter = new HTMLtag ( "Center", "2", "Enter the text to be CENTERED", " ", "", "", "This will be a CENTERED", "" , "The text placed between the and the will be the CENTERED." ) jOL = new HTMLtag ( "OL", "3", "Enter FIRST item for (Numbered) ORDERED LIST", "

", "
", "

", "This is one item in the numbered list", "Next item in the numbered list" , "Create an ORDERED LIST by placing multiple items between

and

" ) jOL.inserttext2 = "Enter NEXT item for ORDERED LIST" jUL = new HTMLtag ( "UL", "3", "Enter FIRST item for (Plain) UNORDERED LIST", "

", "
", "

", "This is one item in the plain list", "Next item in the plain list" , "Create an ORDERED LIST by placing multiple items between

and

" ) jUL.inserttext2 = "Enter NEXT item for UNORDERED LIST" jLI = new HTMLtag ( "LI", "2", "Enter the text for an item in a LIST", "

", "", "

", "This is an item in a LIST", "" , "The text placed between the and the will one item in a LIST. Requires OL or UL." ) jDL = new HTMLtag ( "UL", "4", "Enter item for DEFINITION LIST", "

", ": ", "

", "Item to be defined", "Definition of the item" , "DEFINITION LISTS have two elements: item and definition. Enter the item." ) jDL.inserttext2 = "Enter the definition " jDL.tagmiddle2='

' jDT = new HTMLtag ( "DT", "2", "Enter item for a DEFINITION LIST", "

", "", "

", "This is item for a DEFINITION LIST", "" , "The text placed between the

and the

will one item in a LIST. Requires DL." ) jDD = new HTMLtag ( "DD", "2", "Enter definition for a DEFINITION LIST", "

", "", "

", "This is definition in a DEFINITION LIST", "" , "The text placed between the

and the

will one item in a LIST. Requires DL." ) jImageL = new HTMLtag ("Image", 2, "Enter the URL (e.g., sample.gif)", '

', "URL to graphic (e.g. sample.gif)" , "", "Enter the URL for the graphic (e.g., sample.gif) for LEFT alignment" ) jImage = new HTMLtag ("Image", 2, "Enter the URL (e.g., sample.gif)", '

', "URL to graphic (e.g. sample.gif)" , "", "Enter the URL for the graphic (e.g., sample.gif)" ) jImageR = new HTMLtag ("Image", 2, "Enter the URL (e.g., sample.gif)", '

', "URL to graphic (e.g. sample.gif)" , "", "Enter the URL for the graphic (e.g., sample.gif) for RIGHT alignment" ) jAnchor = new HTMLtag ("Anchor", 5, "Enter the URL (e.g., http://www.yahoo.com)", ' ', '', "http://www.yahoo.com", "Yahoo (description here)", "Enter the URL (e.g., http://www.yahoo.com/index.html) followed by the description." ) jAnchor.inserttext2 = "Enter description (e.g., Yahoo)" function About (form) { alert('HTMLjive 1.2 (C) 1996 Ray Daly www.cris.com/~raydaly/htmljive.html') } function Save (form) { alert('No SAVE function is available. You must "cut & paste" your document into another application.') } function HjButton (form,selection) { // ...all HTML button call this routine if (helpon) { if (confirm(selection.helptext)){ addHTML (form,selection) } }else{ addHTML (form,selection) } } function addHTML (form,selection) { // ...add text to value ot TextArea cancel = false addText=selection.tagstart if (modeindex==2) { // ...insert mode if (selection.insertmode != 1 ) { // ...if none, skip it all addText += addHTMLinsert (selection, addText, form) if (addText == selection.tagstart) { cancel = true } } } if (modeindex==1) { // ...sample mode addText = addText + selection.sampletext + selection.tagmiddle + selection.sampletext2 } if (modeindex==0) { // ...simple mode addText += selection.tagmiddle } addText += selection.tagend if (cancel == false) { // ...put text into TextArea unless canceled form.TEXT.value += addText } } function addHTMLinsert (selection, addText, form) { // ...insert mode // ...addText alread as .tagstart, cancel=false // ...insertmodes 1=none, 2=insert, 3=lists (UL and OL), 4=DL list, 5=anchor if (selection.insertmode ==2) { // ...simple insert (eg.... i = "" i = prompt (selection.inserttext, "") if ((i != null) && (i != "")) { // ...if input add addText = i }else{ addText = "" } } if (selection.insertmode == 3) { // ...UL and OL lists addText = "" i = "" i = prompt (selection.inserttext, "") if ((i != null) && (i != "")) { addText = i while ((i != null) && (i != "")) { // ...get next until null i=prompt (selection.inserttext2, "") if ((i != null) && (i != "")) { addText=addText + selection.tagmiddle + i } } } } if (selection.insertmode == 4) { // ...DL list i= "dummy" j = i addText = "" count = 0 while ((i != null) && (i != "") && (j != null) && (j !="")) { // ...get next until null ++count i = "" i = prompt (selection.inserttext, "") // ... used for debugging form.TEXT.value += "-->" + i + "<--" if ((i != null) && (i != "")) { j = "" j=prompt (selection.inserttext2, "") if ((j != null) && (j != "")) { if (count > 1){ addText += selection.tagmiddle2 } addText=addText +i + selection.tagmiddle + j } } } } if (selection.insertmode == 5) { // ...Anchor addText = "" i = "" i = prompt (selection.inserttext, "") // ... used for debugging form.TEXT.value += "-->" + i + "<--" if ((i != null) && (i != "")) { j = "" j=prompt (selection.inserttext2, "") if ((j != null) && (j != "")) { addText=i + selection.tagmiddle + j } } } return addText } function preview(form) { msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=yes"); msg.document.write(form.TEXT.value); }

HTMLjive Document:

นี่คือเครื่องมือเขียนเว็ปเพจ (HTML editor) โดยใช้ JavaScript ! สามารถช่วยให้คุณเข้าใจการทำงานของ HTML TAG ได้ง่ายขึ้น เพื่อง่ายในการศึกษาต่อไป คุณสามารถทดลองสร้างเว็ปเพจของคุณเองได้ โดยมีเพียงความรู้ด้าน HTML บ้างเล็กน้อย เท่านั้น ซึ้งคุณสามารถหาศึกษาได้ในหมวด Library ของเรา. หรือถ้าคุณไม่มีความรู้ HTML อยู่เลย. ก็สามารถทดลองใช้หน้านี้เขียนเล่นดูได้ หรือประกอบไปกับการ เริ่มต้นศึกษาการเขียน เว็ปของคุณ. เพียงอ่านคู่มือการใช้ด้านล่าง แล้วคลิกปุมคำสั่งต่างๆด้านบน พิมพ์ข้อความ ที่ต้องการเขียนลงไประหว่างเทคที่ต้องการ แล้วคลิกปุ่ม Preview ดูก็จะสามารถเช็ค ผลงาน ของคุณดูได้บนเบลาเซอร์ของคุณ. และถ้าคุณชอบหน้านั้นๆแล้วก็สารถก๊อบปี้ HTML TAG ที่คุณเขียนสำเร็จแล้วในช่อง HTML Live Document ไปใช้ หรือทำการ save โดยเลือก File บนเมนูบาขณะที่ทำการ Preview แล้วเลือก หมวด save as ทำการตั้งชื่อ file ที่ต้องการแล้ว ทำการ Save หน้านั้นๆของคุณไว้. เพื่อนำไปใช้ประโยชน์ต่อไป.

วิธีการใช้ปุ่มคำสั่งต่างๆ อย่างคร่าวๆ:

ปุ่ม Start = ใช้เมื่อเริ่มเขียนเพจทุกครั้งก่อนจะเขียนแทกต่างๆ ลงไป โดยปุ่ม Start จะเขียน <HTML><HEAD><TITLE></TITLE></HEAD><BODY> ขึ้นในช่อง HTML Live Document แล้วคุณควรจะตั้งชื่อหน้านั้นๆลงในระหว่างแทก <TITLE></TITLE> โดยข้อความนั้นจะไม่ปรากฏบนเบลาเซอร์ คุณจึงไม่สามารถมองเห็นได้เมื่อกด Preview ดู. แล้วแทกต่างๆที่ต้องการเขียนลงไปจะต้องต่อท้ายในส่วน <BODY>

ปุม End = จะต้องกดทุกครั้งที่เสร็จสิ้นการเขียนเพจ เพื่อทำกำหนด คำสั่ง HTML ปิด </BODY></HTML> หลังจากที่เขียนแทคเปิด <HTML><BODY> ไว้เมื่อเริ่ม ต้นเขียนโดยกดปุ่ม Start.

ปุ่ม B, I, Pre = ประเภทของตัวอักษร เน้นคำ, ต้วเอียง และตัวอักษรธรรมดา.

ปุ่ม P = ขึ้นบรรทัดใหม่โดยรักษาช่องว่างระหว่างแถวไว้ติดกันเหมือนเดิม. ใช้เวลาต้องการเขียนบรรทัดใหม่โดยยังไม่จบพารากราฟ.

ปุ่ม BR = ขึ้นบรรทัดใหม่เมื่อต้องการจะขึ้นย่อหน้าใหม่. ช่องว่างระหว่างแกวจะมากกว่าเดิม.

ปุ่ม HR = เส้นแบ่งข้อความตามแนวนอน.

ปุ่ม H1, H2, H3 = ขนาดของต้วอักษรต่างที่คุณสามารถกำหนดได้ อย่างเช่นถ้าต้องการขนาด H1 ก็กดปุ่ม H1 แล้วพิมพ์ข้อความที่ต้องการเขียนลงไประหว่างแทก <H1></H1> ที่จะปรากฏ ขึ้นในช่อง HTML Live Document เช่นถ้าต้องการเขียนคำว่า My Web ก็พิมพ์ลงไปเป็น <H1>My Web</H1> แล้วลองกด Preview ดูก็จะเห็นข้อความนั้น ปรากฏขึ้นบนเว็ปเพจ ของคุณ.

ปุ่ม Ancho = ใช้กำหนดลิ้งข้อความนั้นๆไปยังเว็ปไซร์หรือ เพจอื่นๆ ที่ต้องการ โดยพิมพ์ข้อ ความที่ต้องการทำลิงค์ลงไประหว่างแทกในส่วนที่ขีดเส้น</A><A HREF="">___1__ </A> แล้วพิมพ์ที่อยู่ของเว็ปเพจหรือ ชื่อเพจที่ต้องการสร้างลิ้งไปยัง ลงในส่วน<A HREF="____2____"> ส่วนทีขีดเส้น. แล้วจะได้แทกที่สมูรณ์ด้งนี้ <A HREF="___2_____">____1____ </A> หรือ <A HREF="http://go.to/spooker">web design</A> ในกรณีที่ต้องการทำลิ้งจากของความ web design ไปยังเว็ปเพจ http://go.to/spooker

ปุ่ม Image = คุณสามารถใส่ชื่อไฟล์รูปของคุณลงไปเช่น j.jpg ระหว่างแทก <IMG SRC="j.jpg"> แล้วลอง กด Preview ดูจะเห็น รูปปรากฏขึ้นตรงกลางหน้า ถ้าต้องการให้รูปอยู่ทางด้าน ซ้ายของหน้าให้กดปุ่ม L ถ้าต้องการให้อยู่ด้านขวาให้กดปุ่ม R

OL = ต้วเลขกำกับหัวข้อต่างๆ

UL และ IL = จุดกำกับหน้าหัวข้อแต่เว้นช่องว่างต่างกัน.

DL, DT, DD = การกำหนดต้วย่อหน้าและตำแหน่งข้อความต่างๆ.

Center = การกำหนดตำแหน่งข้อความไว้ตรงกลางหน้า.

ปุ่ม Erase and Restart Document = ลบแทกทั้งหมดเพื่อเริ่มต้นเขียนใหม่.

หวังว่าคงได้ความรู้จากเพจนี้นะครับ ถ้าลองคลิกปุ่มต่างๆเล่น พิมพ์ข้อความลงในแทก แล้วหมั้นคลิก Preview ดูจะเห็นการเปลี่ยนแปลง เมื่อเปลียบเทียบผลงานดูจะสามารถเข้าใจ การทำงานของ HTML ได้ด้วยตนเองครับ. เพื่อง่ายในการเรียนส่วนอื่นๆต่อไปครับ. ได้ผลอย่างไรอีเมล์มาบอกกันบ้างน๊ะครับ. เพือเราจะได้พัฒนาผลงานให้ดีๆ ขึ้นไป!