14
หหหหหหหหหหหหหหหหหหห 2 หหหหหหหหหหหหหหหหหหหหหหห หหหห HTML

หน่วยการเรียนรู้ที่ 2

  • Upload
    -

  • View
    19

  • Download
    0

Embed Size (px)

Citation preview

หน่�วยการเรยน่ร��ที่� 2เร��มต้�น่การสร�างเว�บเพจด้�วย HTML

การใช้�คำ�าส��ง <H> 

คำ�าส��ง <Hn> เป็ น่คำ�าส��งที่�ใช้�ส�าหร�บก�าหน่ด้ห�วเร!�อง (Heading Tag) ใช้�ส�าหร�บก�าหน่ด้ขน่าด้ให�ก�บข�อคำวามที่�มการต้�$งไว�เป็ น่ห�วข�อเร!�อง มร�ป็แบบการใช้�คำ�าส��งด้�งน่$<Hn>..............ข�อคำวามที่�ต้�องการ.................</Hn>* n คำ!อต้�วเลขที่�ใช้�ส�าหร�บก�าหน่ด้ขน่าด้ของห�วเร!�องจะอย��ใน่ช้�วงต้�วเลข 1-6 โด้ยเลข 1 จะเป็ น่ห�วข�อเร!�องที่�ใหญ่�ที่�ส+ด้ หร!อส�าคำ�ญ่ที่�ส+ด้ต้�วอย�างการก�าหน่ด้ห�วเร!�องต้ามขน่าด้ 1-6

       เม!�อพ�มพ,ข�อม�ลเสร�จแล�วจ�ด้เก�บช้!�อ HEAD.HTML และที่ด้สอบบน่เว�บเบราว,เซอร,ก�จะได้�ผลล�พธ์, ด้�งน่$

การใช้�คำ�าส��ง <BR>คำ�าส��ง <BR> เป็ น่คำ�าส��งที่�ก�าหน่ด้ให�ม

การข0$น่บรรที่�ด้ใหม� (Line Break) ป็กต้�เอกสารที่�เป็ น่ HTML จะถู�กพ�มพ,ต้�อเน่!�องไป็เร!�อย ๆ จน่ส+ด้บรรที่�ด้ของ เว�บบราว,เซอร, จ0งจะข0$น่บรรที่�ด้ใหม�ให� ถู0งแม�จะมการจ�ด้ข�อคำวามข0$น่บรรที่�ด้ใหม�โด้ยการกด้ป็+3ม Enter ไว�ใน่ Notepad แล�วก�ต้าม แต้�ถู�าหากต้�องการให�ข�อคำวามข0$น่บรรที่�ด้ใหม�ใน่ภาษา HTML จะต้�องใช้�คำ�าส��ง <BR> บอกให�โป็รแกรมร��ว�าต้�องการข0$น่บรรที่�ด้ใหม�มร�ป็แบบการใช้�คำ�าส��งด้�งน่$ข�อคำวาม..................<BR>

* ข�อคำวามที่�อย��หล�งคำ�าส��ง <BR> จะถู�กน่�าไป็ข0$น่บรรที่�ด้ใหม� การส��งให�ข�อคำวามที่�ต้�องการข0$น่บรรที่�ด้ใหม� ต้�วอย�างแรกน่$จะแสด้งให�เห�น่ถู0งการส��งให�ข�อคำวามข0$น่บรรที่�ด้ใหม�โด้ยจ�ด้ข�อคำวามไว�ที่� Notepadโด้ยไม�ใช้�คำ�าส��ง <BR> ให�พ�มพ,ข�อคำวามต้ามต้�วอย�างต้�อไป็น่$

จะส�งเกต้เห�น่ว�าไม�ว�าพ�มพ,ข�อคำวามแบบใด้เม!�ออกมาที่�เว�บบราวเซอร,ข�อคำวามที่�$งหมด้ก�จะ ถู�กน่�ามาเรยงต้�อก�น่จน่หมด้ต้ามขน่าด้ของหน่�าจอ เว�บเบราว,เซอร,ไม�ยอมข0$น่บรรที่�ด้ใหม� ต้ามที่�ต้�$งไว�เหม!อน่ใน่ Notepad ถู�าหากต้�องการให�ข�อคำวามข0$น่บรรที่�ด้ใหม�ต้�องใช้�คำ�าส��ง <BR>

การใช้�คำ�าส��ง <P> และ <P Align = n>

คำ�าส��ง <P> และ <P Align> เป็ น่คำ�าส��งที่�ใช้�ส�าหร�บจ�ด้วางต้�าแหน่�งข�อคำวาม (Paragraph Break หร!อ Alignment) แม�จะมการใช้�คำ�าส��ง <BR> ช้�วยใน่การจ�ด้ข�อคำวามข0$น่บรรที่�ด้ใหม�แล�วบางคำร�$งย�งไม�ต้รงต้ามร�ป็แบบที่�ผ��เขยน่โป็รแกรมต้�องการ เช้�น่ จ�ด้ข0$น่บรรที่�ด้ใหม�และเว�น่บรรที่�ด้ หร!อจ�ด้ย�อหน่�า จ�ด้ข�อคำวามช้�ด้ซ�าย จ�ด้ข�อคำวามให�อย��ก0�งกลาง ใน่โป็รแกรม HTML สามารถูที่�าได้�โด้ยใช้�ร�ป็แบบคำ�าส��งด้�งน่$

ร�ป็แบบการจ�ด้วางย�อหน่�าข�อคำวาม

<P> ............ ข�อคำวาม ............</P>ร�ป็แบบการจ�ด้วางต้�าแหน่�งข�อคำวาม<P Align = n> .............ข�อคำวาม ..........</P>* n คำ!อต้�าแหน่�งการจ�ด้วางข�อคำวาม คำ!อLEFT = จ�ด้ข�อคำวามช้�ด้ซ�าย (คำ�าป็กต้�)CENTER = จ�ด้ข�อคำวามก0�งกลางบรรที่�ด้RIGHT = จ�ด้ข�อคำวามช้�ด้ขวาของบรรที่�ด้ต้�วอย�างการข0$น่ย�อหน่�าใหม�โด้ยใช้�คำ�าส��ง <P> เพ!�อให�ข�อคำวามที่�ได้�ด้�สวยงามเป็ น่ระเบยบมากย��งข0$น่

เมื่��อพิ�มื่พิ�ข้อมื่�ลเสร็�จแลวให้จ�ดเก็�บและทดลองด�ผลล�พิธ์�ทางเว�บเบร็าว�เซอร็�จะไดผลล�พิธ์�ด�งนี้"#

ตั�วอย่&างก็าร็จ�ดวางตั'าแห้นี้&งข้อความื่แบบ ตั&าง ๆ

เมื่��อพิ�มื่พิ�ข้อมื่�ลเสร็�จจะจ�ดเก็�บโดย่ใช้ช้��อว&า TEST_PALIGN.HTM แลวให้ทดสอบโดย่ก็าร็แสดงผลล�พิธ์�ทางเว�บเบร็าว�เซอร็� ซ-�งจะไดผลล�พิธ์�ด�งนี้"#