Home Explore หน่วยที่2HTML

หน่วยที่2HTML

Published by วิรยา สีขาว, 2019-05-26 23:36:25

Description: หน่วยที่2HTML

Read the Text Version

Pages:

ภาษา HTML5 ครวู ริ ยา สขี าว

ความหมายของ HTML 2  HTMLหรือ HyperText Markup Language เปนภาษาคอมพิวเตอรรูปแบบ หนึ่ง ที่มีโครงสรางการเขียนโดยอาศัยตัวกํากับ (Tag) ควบคุมการแสดงผล ขอความ, รูปภาพ หรอื วตั ถอุ ืน่ ๆ ผา นโปรแกรมเบราเซอร  แตละ Tag อาจจะมีสวนขยายที่เรียกวา Attribute สําหรับระบุ หรือควบคุม การแสดงผล ของเวบ็ ไดด วย  HTML เปนภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C) จาก แมแบบของภาษา SGML (Standard Generalized Markup Language) โดยตัด ความสามารถบางสว นออกไป  เพ่อื ใหส ามารถทําความเขา ใจและเรียนรูไดงาย และดวยประเด็นดังกลาว ทํา ใหบริการ WWW เติบโตขยายตวั อยา งกวา งขวางตามไปดวย Tag

Tag 3  Tag เปน ลักษณะเฉพาะของภาษา HTML ใชใ นการระบุรปู แบบคาํ สั่ง หรือการลงรหสั คาํ สั่ง HTML ภายในเครอ่ื งหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยท่ี Tag HTML แบงได 2 ลักษณะ คอื  Tag เดี่ยว เปน Tag ที่ไมตองมีการปด รหัส เชน , เปน ตน  Tag เปด /ปด เปน Tag ท่ปี ระกอบดวย Tag เปด และ Tag ปด โดย Tag ปด จะมีเคร่ืองหมาย slash ( / ) นําหนาคาํ สงั่ ใน Tag นน้ั ๆ เชน …, <BLINK>…</BLINK> เปนตน

Attributes 4  Attributes เปนสว นขยายความสามารถของ Tag จะตองใสภายใน เครื่องหมาย < > ในสว น Tag เปดเทา นนั้  Tag คําสง่ั HTML แตล ะคําส่ัง จะมี Attribute แตกตา งกันไป มีจํานวนไม เทา กัน การระบุ Attribute มากกวา 1 Attribute ใหใ ชชอ งวา งเปน ตวั ค่ัน เชน Attributes ของ Tag เกย่ี วกบั การจัดพารากราฟ คือ ประกอบดว ย ALIGN=\"Left/Right/Center/Justify\" ซง่ึ สามารถเขียนไดดังนี้ ... หรือ ... หรอื ...

โครงสรา งพื้นฐานของภาษา HTML <HTML> <HEAD> <TITLE> ขอ ความจะแสดงที่ title bar </TITLE> </HEAD> <BODY>สวนของเน้อื หา </BODY></HTML>

 <HTML> <HEAD> <TITLE> นค่ี อื เว็บเพจแรกของฉนั </TITLE> </HEAD> <BODY>  น่ีคือเว็บเพจแรกของฉัน  </BODY> </HTML>

อธิบายคําสัง่  <HTML></HTML> เปนคาํ ส่ังทีใ่ ชกาํ หนดวาเปนเอกสาร HTML <HEAD></HEAD> เปน คาํ สงั่ ทีใ่ ชก ําหนดสวนอธิบายเอกสาร <TITLE> </TITLE> เปนคําสั่งทใี่ ชกาํ หนดชือ่ หรือไตเต้ลิ ของ เอกสาร <BODY></BODY> เปน คาํ สง่ั ท่ีใชบ อกวา เปนสว นของ รายละเอยี ด เปนคาํ สัง่ ทใี่ ชก ําหนดใหข ้ึนบรรทัดใหม  ใชบอกใหร วู า เปนหมายเหตุไมต อ งแสดง ออกมาในเว็บเพจ

The HTML <head> Element  <!DOCTYPE html><html><head>  <title>My First HTML</title>  <meta charset=\"UTF-8“></head>  <body>  The HTML head element contains meta data.Meta data is data about the HTML document.  </body></html>

การกาํ หนด FONT ที่จะใชใ นเว็บเพจ

<BODY> นคี่ ือเว็บเพจแรกของฉนั นี่คอื เวบ็ เพจแรกของฉนั นีค่ ือเวบ็ เพจแรกของฉนั </BODY>

อธบิ ายคาํ สงั่  เปนคําส่งั ที่ใช กาํ หนดฟอนตทจี่ ะใชในเว็บเพจ เปน คําสง่ั ปดท่ีตองใชคกู ันเสมอ

การกาํ หนดรปู แบบของตวั อักษร

<BODY> นี่คือเว็บเพจแรกของฉัน นี่คือเว็บเพจแรกของฉนั น่คี ือเวบ็ เพจแรกของฉัน <S> น่ีคอื เวบ็ เพจแรกของฉนั </S> นี่คือเวบ็ เพจแรกของฉนั ขอ ความแบบ Super Script E=MC2 ขอความแบบ Sub Script H2O </BODY>

อธิบายคําสัง่ เปน คาํ สง่ั ที่ใชกําหนดรูปแบบตัวอกั ษร-ตัวเขม เปนคาํ สง่ั ทใี่ ชกาํ หนดรูปแบบตัวอกั ษร-ตัวเอยี ง <S></S> เปนคาํ สงั่ ทใ่ี ชกําหนดรูปแบบตัวอกั ษร-ตวั ขีดฆา เปน คาํ สั่งทีใ่ ชกาํ หนดรูปแบบตวั อกั ษร-ตัวขดี เสน ใต เปนคาํ สงั่ ท่ใี ชกําหนดรปู แบบ Super Script เปนคาํ สั่งทใ่ี ชก ําหนดรปู แบบ Sub Script

 - ขอ ความสาํ คญั - เนนขอความ - ทําเครือ่ งหมายเนนขอ ความ - ขอ ความขนาดเลก็ <del> - ขีดทับขอความแสดงวา ลบ </del> <ins> - ขดี เสน ใตขอ ความแสดงวา เพิม่ </ins>

 <html><body>  This text is normal.  This text is emphasized.  <h2>HTML Small Formatting</h2>  <h2>HTML Marked Formatting</h2>  My favorite color is <del>blue</del> red.  My favorite <ins>color</ins> is red.  </body></html>

การกําหนดขนาดของตวั อักษร ที่จะใชใ นเวบ็ เพจ

แบบที่ 1  <BODY> นี่คอื เวบ็ เพจแรกของฉนั นี่คือเว็บเพจแรกของฉัน นค่ี อื เวบ็ เพจแรกของฉัน นคี่ อื เวบ็ เพจแรกของฉัน </BODY>

แบบที่ 2  <BODY> นค่ี ือเวบ็ เพจแรกของฉนั นี่คือเวบ็ เพจแรกของฉัน น่คี ือเว็บเพจแรกของฉัน นีค่ ือเว็บเพจแรกของฉัน </BODY>

อธิบายคําสั่ง เปน คาํ สัง่ ท่ใี ช กาํ หนดขนาดตัวอกั ษรทจ่ี ะใชใ นเว็บเพจ ขนาดตวั อกั ษร สามารถกําหนดไดต งั้ แต 1 - 7 เปน คาํ ส่ังปดที่ตอ งใชคกู ันเสมอ สามารถเพิ่มขนาดดวยการใส + ดานหนาตัวเลข

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

 <BODY> นคี่ ือเว็บเพจแรกของฉัน นี่คือเวบ็ เพจแรกของฉนั น่ีคือเว็บเพจแรกของฉนั นีค่ ือเว็บเพจแรกของฉนั นค่ี ือเว็บเพจแรกของฉนั </BODY>

อธิบายคําสงั่ เปนคําสงั่ ท่ใี ชก าํ หนดสี ใหก บั ตวั อกั ษรท่ีจะใชใ นเวบ็ เพจ เปนคาํ สง่ั ปด ทตี่ อ งใชคกู นั เสมอ

Colors  9. White สขี าว  10. Dark Blue สนี า้ํ เงินเขม  1. Blue สนี ้าํ เงนิ  11.Turquoise สีน้าํ เงนิ อมเขยี ว  2. Red สีแดง  12. Grey สีเทา  3. Pink สชี มพู  13. Purple สีมวง  4. Orange สสี ม  14.Indigo สีคราม  5. Yellow สเี หลอื ง  15. Light blue สีฟา  6. Black สีดํา  7. Green สเี ขยี ว  8. Brown สนี ํา้ ตาล

การจัดวางตําแหนงขอความ

<BODY> น่ีคอื เว็บเพจแรกของฉัน นค่ี อื เว็บเพจแรกของฉัน นค่ี อื เว็บเพจแรกของฉัน </BODY>

อธบิ ายคาํ สัง่ เปน การสง่ั ใหข นึ้ ยอ หนา ใหม (ปกติจะอยชู ิดซายเสมอ) กาํ หนดใหขอ ความอยชู ิดดานซา ย กําหนดใหขอความอยูก งึ่ กลางเอกสาร กําหนดใหข อ ความอยชู ดิ ดานขวา เปนคาํ สั่งปด ที่ตองใชค กู นั เสมอ (เม่ือใช )

การกําหนดหัวขอ (Heading)

<head> <title> Test Heading </title> </head> <body> <h1> หวั ขอ (Heading)ระดบั 1 </h1> <h2>Test Heading if x=2 </h2> <h3> Test Heading if x=3 </h3> <h4> Test heading if x=4 </h4> <h5> Test heading if x=5 </h5> <h6> Test heading if x=6 </h6> </body>

คําอธิบาย ใชในการกาํ หนดขนาดใหกบั ขอความทเี่ ปนหวั ขอ เร่อื ง ในเอกสารทมี่ ีหัวขอเปนปลกี ยอ ย สามารถ แยกเปน ลาํ ดบั ของหวั เร่ืองไดอ ยา งชดั เจน รูปแบบ<hx> ..... </hx> X = หมายเลขของหัวทตี่ อ งการ 1 - 6

การกําหนดสตี ัวอักษรและ สีแบลค็ กราวดใ นเอกสาร

<BODY TEXTCOLOR=\"black\" BGCOLOR=\"lightblue\"> นค่ี ือเวบ็ เพจแรกของฉนั </BODY>

<BODY TEXTCOLOR=\"ช่อื ส\"ี BGCOLOR=\"ชอื่ ส\"ี > TEXTCOLOR ใชกําหนดสี Default ใหก บั ตัวอักษร ทั้งหมดภายในเอกสาร BGCOLOR ใชกาํ หนดสแี บล็คกราวดของเอกสาร

การกาํ หนดสีแบบเลขฐาน 16

ในการใชส ีของเอกสารHTMLนั้น จะใชสแี บบ RGB (R=RED สีแดง,G=GREEN สีเขยี ว,B=BULE สีนาํ้ เงนิ ) โดยจะใชอยูใน รหสั เลขฐาน16 คือ #FFFFFF โดยที่จะใชเ ลข 00,33,66,99,CC,FF แทนสีในเฉยี ดตา งๆ

แสดงขอ ความแบบจัดก่ึงกลาง (Center)

<title> Paragraph Tag </title> </head> <body> Test Normal Message <center> Test Center Message </center> </body>

คาํ อธบิ าย ใชแ สดงขอ ความหรือรปู ภาพใชจ ดั กึง่ กลางเวบ็ เพจ รูปแบบ<center> ... </center>

การแสดงเสน คั่นทางแนวนอน (Horizontal Rule)

<body> <hr> <hr width=\"100%\"> <hr width=\"50%\"> <hr width=\"200\"> <hr size=\"3\"> <hr size=\"7\"> <hr align=\"right\"> <hr align=\"center\" width=\"75%” size=\"3\"> <hr noshade> </body>

คําอธิบาย ใชแ สดงเสน ค่นั แนวนอน โดยใชใ นการแบงเนื้อหาหรอื คัน่ เพอ่ื ความสวยงามและความเปนระเบยี บของเน้อื หา รูปแบบ<hr> <hr align=\"left/center/right\"> กาํ หนดตําแหนง เสน <hr width=\"pixels or %\"> กาํ หนดความยาวเสน <hr size=\"pixels\"> กาํ หนดขนาดเสน <hr noshade> กําหนดลักษณะเสน

คําส่งั ตวั อกั ษรวงิ่ <marquee >ยนิ ดตี อนรบั เขาสเู ว็บไซต </marquee>

คาํ ส่งั ทิศทางการวิ่งทิศทางการว่ิงมี 4 อยาง คอื <marquee direction=\"left\">ขอความวิง่ จากขวาไปซา ย </marquee> <marquee direction=\"right\">ขอ ความวง่ิ จากซายไปขวา </marquee> <marquee direction=\"up\">ขอความวิ่งจากลา งขึ้นบน </marquee> <marquee direction=\"down\">ขอความวิ่งจากบนลงลาง </marquee>

คําสง่ั ความเรว็ ในการว่ิง <marquee scrollamount=\"เลข\">และตัวปดคอื </marquee> <marquee scrollamount=\"5\">ความเร็วในการว่งิ 5</marquee>ความเร็วในการวงิ่ 5 ตัวอยางวง่ิ เร็ว <marquee scrollamount=\"70\">ความเรว็ ในการวง่ิ 70 </marquee

คาํ สัง่ พเิ ศษ <marquee width=\"เลข\">และตวั ปด คือ</marquee>ใส ตัวเลขเปนพิกเซลหรอื เปอรเชน็ กไ็ ด เพอื่ กําหนดวาจะใหว ิ่งเต็ม หนา กระดาษ หรือครงึ่ หนากระดาษ ตัวอยา งวิง่ แคครึ่งหนา กระดาษ <marquee width=\"50%\">width=\"50% คอื วิง่ คร่ึง หนากระดาษ</marquee> <marquee behavior=\"alternate\">ขอ ความวิ่งไป </marquee>

ขอความวิ่งไป ว่ิงมา ขอ ความทเี่ ริ่มว่ิงจากซายมาขวา ว่งิ มาสลับกัน <marquee behavior=\"alternate\">ขอ ความวง่ิ ไป </marquee> การทํารูปภาพวง่ิ <marquee direction=\"left\"><img src=\"ช่อื รูป.สกุล รูป\"></marquee>

ขอ ความวงิ่ จากซายมาขวาแลวหยุด <marquee behavior=\"slide\">คอื ขอความทีว่ ่ิงมา จากมมุ ขวาแลว มาหยุดท่มี ุมซาย และจะไมไปไหนอีก </marquee> ขอความวิ่งและมีสพี น้ื หลัง <marque bgcolor=\"blue\">ขอ ความและสพี นื้ หลงั </marquee>

ตวั อักษรวงิ่ แบบมเี ง่ือนไข <MARQUEE onmouseover=this.stop() onmouseout=this.start() scrollAmount=1 scrollDelay=60>ขอความ </MARQUEE>

Pages:

วิรยา สีขาว

หน่วยที่2HTML

Like this book? You can publish your book online for free in a few minutes!

Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

หน่วยที่2HTML

Description: หน่วยที่2HTML

Read the Text Version

วิรยา สีขาว

TOP SEARCH

RELATED PUBLICATIONS