Webpage by html

การสรางเวบเพจดวยภาษา HTML HTML ยอมาจากค าวา "HyperText Markup Language" เปนภาษาทใชในการเขยนโปรแกรมภาษาหนงของคอมพวเตอร ทแสดงผลในลกษณะของเวบเพจ ซงสามารถแสดงผลไดในรปแบบตางๆ ไมวาเปนภาพกราฟก ภาพนง ภาพเคลอนไหว เสยง หรอการเชอมโยงไปยงเวบไซตอนๆ ภาษา HTML เปนภาษาทมลกษณะของโคด กลาวคอ จะเปนไฟลทเกบขอมลทเปนตวอกษรในมาตรฐานของรหสแอสก (ASCII Code) โดยเขยนอยในรปแบบของเอกสารขอความ จงสามารถก าหนดรปแบบและโครงสรางไดงาย

การสรางเวบเพจ เราสามารถสรางเวบเพจได 2 ทาง คอ

1. TextEditor โดยเราตองรค าส งของภาษา HTML แลวพมพโปรแกรมเขาไปทางTextEditor เชน Notepad เปนตน 2. ตวชวยสราง โดยใชโปรแกรมทมความสามารถในการสรางเวบเพจโดยเราไมจ าเปนตองรภาษา HTML เพราะ

โปรแกรมเหลานจะท าการแปลงใหเราอตโนมต

ขนตอนในการสรางเวบเพจ 1. เปดโปรแกรม TextEditor แลวท าการพมพค าสง HTML แลวเซฟเปนไฟลนามสกล .htm หรอ .html 2. เปดโปรแกรม WebBrowser เพอใชในการดผลลพธทไดจากการเขยนภาษา HTML จากทไดเขยนจาก

TextEditor

โครงสรางภาษา HTML การเขยนภาษา HTML นนมสวนประกอบหลกอย 2 สวน คอ สวนทเปนเนอหา และสวนทเปนค าสง สวนทเปนค าสงนนจะอยในรปของ Tag ซงจะเขยนอยในเครองหมาย มากกวา และ นอยกวา < > แตละ Tag มหนาททแตกตางกนออกไป ซงจะกลาวในบทตอไป Tag แบงออกเปน 2 ประเภท คอ

1. แทกเดยว คอ ค าสงทมค าส งเพยงอยางเดยว ซงสามารถใชและสนสดค าสงไดดวยตวของมนเอง เชน ขอความ.... <br> <hr> <! - ขอความ - >

2. แทกค คอ ค าสงทตองมสวนเรมตนและสวนจดจบของค าสงนนๆ โดยแทกทเปนสวนจบนนจะมเครองหมาย slash / ตดเอาไว เชน <html> สวนของเนอหา ..... </html> <center> ขอความ..... </center> <p> ขอความ.... </p>

*** ถาหากมการใชแทกคหลายๆ ค าสง เชน ค าสงตวขดเสนใต <U> .... </U> และตามดวย ค าสง ตวเอยง <I>....</I> จะตองปดค าสงตวเอยงกอน แลวจงจะมาปดค าสงตวหนา*** <I> U> ขอความ.... </U> </I>

การก าหนดโครงสรางหลก

การจดวางทเหนเปนการจดวางแบบมาตรฐาน ซงประกอบไปดวย 4 สวน ซงเวลาเรมเขยนภาษาHTML ควรเรมจากตรงนกอนทกครง

ค าสงหลก <HTML> .... </HTML> เปนค าสงทไวก าหนดจดเรมตนและจดจบของเอกสาร

ค าสงหลก <HEAD> .... </HEAD> เปนค าสงทท าหนาทก าหนดสวนหวเรอง โดยภายในค าสงนจะประกอบไปดวย

o ค าสงหลก <TITLE> .... </TITLE> เปนค าสงทใชก าหนดขอความทตองการใหขนอยในสวนของ Title Bar

โดยสามารถพมพไดยาว 64 ตวอกษร

ค าสงหลก <BODY> .... </BODY> เปนค าสงทใชในการก าหนดรปแบบของเอกสารทงหมด วาจะใหมลกษณะอยางไร

ตวอยาง

การจดรปแบบเอกสาร

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

ค าอธบาย

ใชในการก าหนดขนาดใหกบขอความทเปนหวขอเรอง ในเอกสารทมหวขอเปนปลกยอย สามารถแยกเปนล าดบของหวเรองไดอยางชดเจน

รปแบบ

ตวอยาง

<html>

<head>

<title> Education Technology </title>

</head>

<body>

<h1>Test Heading if x=1</h1>

<h2>Test Heading if x=2 </h2>

<h3> Test Heading if x=3 </h3>

<h4> Test heading if x=4 </h4>

</body>

</html>

การก าหนดจดสนสดบรรทด (Break Rule)

ใชในการก าหนดจดสนสดบรรทด และขนบรรทดใหม ค าสงนเหมอนการกด Enter บน keyboard นนเอง

รปแบบ

..... <br>

ตวอยาง

<html>

<head>

<title> Break Rule Tag </title>

</head>

<body>

Test Normal Message

Test Break Rule Tag <br>

</body>

</html>

การขนยอหนาใหม (Paragraph)

ใชแสดงขอความในลกษณะพารากราฟ หรอยอหนาในเวบเพจ และยงสามารถใชในการขนบรรทดใหมครงละ 2 บรรทด

รปแบบ

ตวอยาง

<html>

<head>

<title> Paragraph Tag </title>

</head>

<body>

<p> Test Normal Paragraph Tag

<p align="right"> Test Righ Paragraph Tag

<p align="center"> Test Center Paragraph Tag

<p align="left"> Test Left Paragraph Tag

</body>

</html>

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

ใชแสดงขอความหรอรปภาพใชจดกงกลางเวบเพจ

รปแบบ

ตวอยาง

<html>

<head>

<title> Paragraph Tag </title>

</head>

<body>

Test Normal Message

<center> Test Center Message </center>

</body>

</html>

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

ใชแสดงเสนคนแนวนอน โดยใชในการแบงเนอหาหรอคนเพอความสวยงามและความเปนระเบยบของเนอหา

รปแบบ

<hr align="left/center/right"> ก าหนดต าแหนงเสน

<hr width="pixels or %"> ก าหนดความยาวเสน

<hr size="pixels"> ก าหนดขนาดเสน

<hr noshade> ก าหนดลกษณะเสน

ตวอยาง

<html>

<head>

<title> Horizontal Rule Tag </title>

</head>

<body>

</body>

</html>

การก าหนดรปแบบตวอกษร (FONT)

ใชก าหนดรปแบบตวอกษร ในขอความทอยภายใน เชน ฟอนต ส และ ขนาดตวอกษร

รปแบบ

<font face="text"> ..... </font> ก าหนดแบบอกษร <font size="number"> ..... </font> ก าหนดขนาดอกษร <font color="color"> ..... </font> ก าหนดสอกษร

ตวอยาง <html>

<head>

</head>

<body>

</body>

</html>

การก าหนดขอความแบบตวหนา (Bold)

ใชก าหนดขอความทอยภายใจค าสงใหแสดงผลดวยตวอกษร ตวหนา โดยมจดประสงคกเพอเนนขอความในประโยคนนๆ

รปแบบ

<head>

</head>

<body>

Normal Text <br>

</font>

</body>

</html>

การก าหนดขอความแบบตวเอยง (Italic)

ใชก าหนดขอความใหตวอกษรเอน โดยมจดประสงคเพอเนนขอความนนๆ

รปแบบ

<head>

<title>Italic Tag</title>

</head>

<body>

Normal Text <br>

<i> ItalicText</i>

</font>

</body>

</html>

การก าหนดขอความขดเสนใต (Underline)

ใชแสดงความแบบขดเสนใต เพอเนนขอความในประโยคนนๆ

รปแบบ

<head>

<title>Underline Tag</title>

</head>

<body>

Normal Text <br>

<u> Underline Text</u>

</font>

</body>

</html>

การก าหนดขอความตวขดเสนทบ (Strikeout)

ใชแสดงขอความแบบมเสนขดฆา โดยใชเมอตองการยกเลกขอความทไมใชแลว โดยค าสงนสามารถใชแทนค าสง STRIKE ได

รปแบบ

<head>

<title>Strikeout Tag</title>

</head>

<body>

Normal Text <br>

<s> Strikeout Text</s>

</font>

</body>

</html>

การแสดงรายการแบบไมมเลขล าดบ (Unorder List)

ใชแสดงรายการขอมลแบบแจกแจงเปนขอๆ โดยไมมเลขล าดบ จะมสญลกษณน าหนาขอมลแตละหวขอแทน โดยใชค าสง <LI> ในการสรางหวขอแตละหลายรายการ

รปแบบ

<ul> ขอความสวนหว <li> ขอความยอย <li> ขอความยอย <li> ขอความยอย </ul>

<head>

<title>Unnorder List Tag</title>

</head>

<body>

<ul> Unnorder List

<li> First Item

<li> Second Item

<li> Third Item

</body>

</html>

การแสดงรายการแบบไดเรคทอร (DIRectory)

ใชแสดงขอมลแบบแจกแจงเปนขอๆ ทมความยาวไมเกน 20 ตวอกษรตอ 1 รายการ และใชกบค าสง <LI> เพอใช

แสดงแถวรายการ

รปแบบ

<dir> ขอความสวนหว <li> ขอความยอย <li> ขอความยอย <li> ขอความยอย </dir>

<head>

<title>Directory Tag</title>

</head>

<body>

<b>HARDWARE</b>

<li>ROM

<li>RAM

<li>CD-ROM

<li>HardDisk

</dir>

</body>

</html>

การแสดงรายการแบบเมนลสต (MENU)

ใชแสดงรายการขอมลแบบแจกแจงเปนขอๆ ทไมซบซอน มลกษณะคลายกบค าสง <UL> แตมซบซอนนอยกวา ใชค าสง <LI> เชนเดยวกบค าสงอนๆ

รปแบบ

<menu> ขอความสวนหว <li> ขอความยอย <li> ขอความยอย <li> ขอความยอย </menu>

<head>

</head>

<body>

<u>Software</u>

<menu>

<li>Word

<li>Excel

<li>PowerPoint

<li>Access

</menu>

</body>

</html>

การแสดงรายการแบบใชตวเลข (Order List)

การแสดงรายการแบบแจกแจงเปนขอๆ โดยใชหมายเลขก ากบในการเรยงล าดบ โดยสรางรายการจากค าสง <LI> และยงสามารถก าหนดรปแบบของหมายเลขก ากบไดดวยใหเปนเลขอารบก, เลขโรมน หรอตวอกษร

รปแบบ

<ol type="1 / a / A / i / I" start="number"> ขอความสวนหว <li> ขอความยอย <li> ขอความยอย <li> ขอความยอย </ol>

<head>

<title>Order List Tag</title>

</head>

<body>

<h1>Order List</h1>

<li>Item One<li>Item Two<li>Item Three

<li>Item Four<li>Item Five

<li>Item Six<li>Item Seven

</ol></ol>

</body>

</html>

การแสดงรายการโดยก าหนดหวขอ (Definition List)

ใชแสดงรายการแบบใหค านยาม โดยแบงองคประกอบเปน 2 สวน สวนทอยบนคอหวขอ (Definition Term) โดยใชค าสง <DT> สวนทอยลางคอ ค าอธบาย (Definition Description) ใชค าสง <DD> โดยหากจะให

สวนหวขออยทางซาย แลวค าอธบายอยทางขวากใหใช attribute COMPACT ในกรณทรายการเปนขอความสนๆ

รปแบบ

<dl> ขอความสวนหว <dt> หวขอ <dd> ค าอธบาย <dt> หวขอ <dd> ค าอธบาย <dt> หวขอ <dd> ค าอธบาย </ol>

<head>

<title>Definition Tag</title>

</head>

<body>

<h1> Definition List</h1>

<dt>com<dd>องคการเอกชน (Commercial Organization)

<dt>edu<dd>สถาบนการศกษา (Education Organization)

<dt>net<dd>องคกรใหบรการเคลอขาย (Network Organization)

<dt>org<dd>องคกรไมแสวงผลก าไร (Non-Commercial Organization)

<dt>gov<dd>องคการของรฐ (Government Organization)

<dt>mil<dd>องคกรทางทหราร (Millitary Organization)

</body>

</html>

การสรางตาราง (TABLE)

ใชในการสรางตารางขอมล โดยจะมค าสงทใชรวมกนคอ ค าสง <TR> ในการสรางแถวเซลลขอมล, ค าสง <TD> ในการสรางเซลลขอมล, ค าสง <TH> ในการสรางหวตาราง

รปแบบ

<table bgcolor="color"> .... </table> ก าหนดสพนในตาราง <table border="pixels"> .... </table> ก าหนดขนาดของขอบตาราง <table width="pixels/%"> .... </table> ก าหนดความกวางของตาราง

<head>

<title> Table Tags </title>

</head>

<body>

<table>

</table>

</body>

</html>

การก าหนดขอความก ากบตาราง (table CAPTION)

ใชแสดงค าอธบาย หรอ ขอความประกอบตารางไวบนสวนบนหรอสวนลางของตารางขอมล

รปแบบ

<caption align=" top | bottom | left | right "> ก าหนดต าแหนงของค าอธบายตาราง

<head>

</head>

<body>

<caption align="bottom">ตารางรายรบรายจายประจ าเดอน</caption>

<th>มกราคม</th>

<th>กมภาพนธ</th>

<th>มนาคม</th>

<td>รายรบ</td>

<td>รายจาย</td>

</table>

</body>

</html>

การสรางแถวของตาราง (Table Row)

เปนการสราง แถวเซลขอมล เพอไวสราง เซลขอมล และ การสรางหวเรองของตาราง

รปแบบ

<tr align=" left | center | right "> .... </tr> ก าหนดต าแหนงของขอความ

<tr bgcolor="color"> .... </tr> ก าหนดสของพนหลงในตาราง

<head>

</head>

<body>

<th>โทรทศน</th>

</table>

</body>

</html>

การสรางหวเรองของตาราง (Table Heading)

เปนการสรางเซลล หวตาราง ซงท าหนาทก ากบเซลขอมลในแนวคอลมนทก าหนด

รปแบบ

<th align="left | right | center | justify | char"> .... </th> ก าหนดต าแหนงของขอความในตารางตามแนวนอน

<th valign="top | middle | bottom | baseline"> .... </th> ก าหนดต าแหนงของขอความในตารางตามแนวตง <th bgcolor="color"> .... </th> ก าหนดสพนของตาราง <th height="pixels | %"> .... </th> ก าหนดความสงของตาราง <th width="pixels | %"> .... </th> ก าหนดความกวางของตาราง <th rowspan="number"> .... </th> ก าหนดการรวมชองเซลลในแนวตง <th colspan="number"> .... </th> ก าหนดการรวมชองเซลลในแนวนอน

การสรางเซลลขอมล (Table Data)

ใชสรางเซลลขอมลเพอใชในการแสดงขอมลรายละเอยดตางๆของเอกสาร

รปแบบ

<td align="left | right | center | justify | char"> .... </td> ก าหนดต าแหนงของขอความในตารางตามแนวนอน

<th valign="top | middle | bottom | baseline"> .... </td> ก าหนดต าแหนงของขอความในตารางตามแนวตง <td bgcolor="color"> .... </td> ก าหนดสพนของตาราง <td height="pixels | %"> .... </td> ก าหนดความสงของตาราง <td width="pixels | %"> .... </td> ก าหนดความกวางของตาราง <td rowspan="number"> .... </td> ก าหนดการรวมชองเซลลในแนวตง <td colspan="number"> .... </td> ก าหนดการรวมชองเซลลในแนวนอน

<head>

</head>

<body>

</table>

</body>

</html> การใสรปภาพลงไปในเอกสาร (IMaGe)

ใชในการแสดงรปภาพกราฟฟก โดยจะตองเปนไฟลกราฟฟกทเวบบราวเซอรรจก เชน GIF,JPEG,XPM,XBM เปนตน

รปแบบ

<head>

<title> Image Tags</title>

</head>

<body>

</body>

</html>

รปแบบ (ตอ)

<img align="top | middle | bottom | left | right"> การก าหนดต าแหนงใหกบรปภาพ

<img width="pixels"> การก าหนดความกวางรปภาพ

<img height="pixels"> การก าหนดความสงรปภาพ

<img border="number"> การก าหนดความสงรปภาพ

<img hspace="number"> การก าหนดชองวางแนวนอนระหวางรปภาพกบขอความ

<img vspace="number"> การก าหนดชองวางแนวตงระหวางรปภาพกบขอความ

<head>

</head>

<body>

<p><p>

<img src="love.jpg" align="top" hspace="2">TEST IMAGE TAG

</body>

</html>

การท าพนฉากหลง (body BACKGROUND)

การน ารปภาพน ามาท าเปน วอลเปเปอร

รปแบบ

<head>

</head>

<h1>TEST Wallpaper</h1>

</body>

</html> การสรางจดเชอมโยง (A)

ท าหนาทก าหนดขอความหรอภาพกราฟฟกทอยภายในใหท าหนาทเปนจดเชอมโยงไปยงเวบเพจอน หรอขอมลชนดตางๆ

รปแบบ

<head>

</head>

<body>

<a href="page06c.html">Click Here</a><br>

</body>

</html>

การก าหนดสใหจดเชอมโยง

เปนการก าหนดสอกษรทจดเชอมโยง โดย link คอสจดเชอมโยงทยงไมไดท าการคลกเปาหมาย vlink คอสจดเชอมโยงทไปยงเปาหมายแลว alink คอสจดเชอมโยงทไปอยขณะนน

นอกจากนยงม

text สตวหนงสอธรรมดา bgcolor คอสพนหลงของเอกสาร

รปแบบ

<head>

</head>

<a href="page06c.html">Click Here</a>

<a href="page06d.html">Click Here</a>

</body>

</html>

แหลงอางองขอมล ขอขอบคณ http://www.yupparaj.ac.th/CAI/create_web/

Webpage by html

Documents

Transcript of Webpage by html

HTML€¦ · 3 Introduction: Abbreviation for Hyper Text Markup Language, HTML is used for creating webpages. Creating a Webpage Using Notepad: To open Notepad click on Start | All

HTML By K.Sasidhar

Html by tanbircox

Webpage Markup with HTML 5

HTML Step by Step by khan

Predictive Models and Analysis For Webpage Depth‐level ...sz255/papers/jasist2018.pdf · quencies of HTML tags, webpage keywords, page size, the number of secondary URLs, and so

Creating And Publishing A Webpage You will learn the basic html ‘tags’ for formatting a webpage as well including internal and external content.

Webpage Designing in HTML

HTML::Mason by example

HTML+JQuery by Rio

Communication Studies By Leah Eister My Webpage leister.

Creating a webpage using html - University of …pages.cpsc.ucalgary.ca/.../203W/notes/pdf/webpages_html.pdf3/7/2016 Creating a webpage using html James Tam Making A University Webpage

Webpages & HTML Sara Imam HTML! What??? HTML is a type of code language that a computer can understand & turn into a webpage design. HEH??? ?

Creating a webpage using htmlpages.cpsc.ucalgary.ca/.../notes/pdf/webpages_html.pdf · Creating a webpage using html James Tam Viewing The Page In A Web Browser The text appears but

The Web and HTML Tutorial Building a Webpage. Chapter Overview m The World Wide Web – Web servers, Web browsers and Web pages m HTML Introduction m Using.

KRAD makes it easy to handle HTML events in your webpage. Kuali University: Apply Now Lab 6: Fun with HTML Events Lab Objectives HTML Events – what are.

Basic Webpage Design Mark-up html document with images.

Build a HTML 5 App Octobershiner. What is a HTML 5 app ? What is a Web application ? Sth. In your browser Maybe a webpage or a game Multiple type of OS.

Content To Date Review Course Work/Labs Assigned to Date Review HTML Image Tag Editing code for image folder Introduce HTML Color Tags Webpage Safe Colors.

Web Template Extraction Based on Hyperlink Analysisusing the textual information of the webpage (i.e., the HTML code), (ii) using the rendered image of the webpage in the browser,