การสร้างเว็บด้วย HTML HyperText Markup Language

Slides:



Advertisements
งานนำเสนอที่คล้ายกัน
โครงสร้างและส่วนประกอบภาษา HTML
Advertisements

การสร้างเว็บด้วยภาษา HTML
คำสั่งเริ่มต้น รูปแบบ. <HTML>. </HTML>
บทที่ 7 การใช้ตัวอักษร สื่อชุดนี้เป็นลิขสิทธิ์ของสำนักพิมพ์วังอักษร ใช้เพื่อการศึกษาเท่านั้น.
เรียนรู้และเข้าใจ HTML อย่างง่าย
บทที่ 2 มาตรฐานการเขียนแบบ (The Convention of Drawing)
Chapter 2 : Character and Fonts
ประเภทของข้อมูล Excel 2007
Chapter 2 เริ่มต้นการสร้างเว็บ
HTML Language ภาษา HTML คืออะไร ? HTML (Hyper Text Markup Language) เป็นภาษาที่ใช้ในการพัฒนา web page เพื่อให้โปรแกรม web brower ต่างๆ (Internet Explorer,
Script Programming& Internet Programming
หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา
ตัวอย่างการนำเสนอ Sample Presentation
JavaScript.
HTML เบื้องต้น ธวัชชัย สลางสิงห์.
องค์ประกอบของโปรแกรม
PHP LANGUAGE.
การกำหนดลักษณะของตัวอักษร
HTML (คืออะไร) ภาษา HTML (HyperText Markup Language) เป็นภาษาที่ใช้คำสั่งที่เรียกว่า Tag มีทั้งเปิดและปิด เพื่อกำหนดบริเวณที่มีผลของคำสั่ง คำสั่งภาษา HTML.
โครงสร้าง ภาษา HTML.
ลักษณะพิเศษของ ภายใต้คำสั่ง <BODY>
วิชา การเขียนโปรแกรมบนเว็บ (Web-based Programming)
ภาษา HTML เบื้องต้น เช่น Internet Explorer และ Netscape Navigator
ปฏิบัติการที่ 3 : การสร้างโฮมเพจอย่างง่าย
แนะนำให้รู้จักกับ CSS (Cascading Style Sheets)
วันที่ เมษายน 2553 ณ สำนักหอสมุด มหาวิทยาลัยเชียงใหม่
โครงสร้าง HTML โครงสร้างพื้นฐาน HTML คำสั่งขึ้นบรรทัดใหม่ <BR>
การกำหนดสีของตัวอักษร การกำหนดสีของตัวอักษรเฉพาะส่วน
แก้ไขปรับปรุง Form.
– Web Programming and Web Database
การพิมพ์ข้อความ และการสร้างตาราง
การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป
การพัฒนาเว็บเบื้องต้นด้วย Macromedia Dreamweaver
ภาษาที่ใช้ในการเขียนเว็บไซต์
การสร้างเว็บเพจ HTML.
HTML.
CSS.
การออกแบบและพัฒนาเว็บไซต์
Page: 1 การพัฒนาโปรแกรมประยุกต์บนเว็บ อ. บุรินทร์ รุจจนพันธุ์.. ปรับปรุง 12 กรกฎาคม 2550 HTML (HyperText Markup Language)
รู้จักและใช้งาน Applet
DHTML ง40208 การเขียนเว็บไซต์สไตล์ ป.พ. ศูนย์คอมพิวเตอร์
การจัดการแท็ก โดยใช้ Document Object Model : DOM ง การเขียนได นามิกเว็บเพจ ศูนย์คอมพิวเตอร์ โรงเรียนปลวกแดง พิทยาคม.
การกำหนดลักษณะตัวอักษร
ความรู้เบื้องต้น เกี่ยวกับภาษา PHP ศูนย์คอมพิวเตอร์ โรงเรียนปลวกแดง พิทยาคม.
การแปลงข้อมูลใน Excel เป็นฐานข้อมูลใน Access
HTML, PHP.
ตัวแปรกับชนิดของข้อมูล
คำสั่งภาษา HTML เบื้องต้น
รายวิชา เทคโนโลยีสารสนเทศ และการสื่อสาร. โครงสร้างภาษา HTML หัวข้อเรื่อง เว็บไซต์
Week 2 Variables.
Computer Programming for Engineers
ความรู้เบื้องต้นเกี่ยวกับการเขียนโปรแกรม PHP
SML Report Designer การออกแบบรายงาน.
บทที่ 3 การกำหนดรูปแบบตัวอักษร
หลักการจัดทำ File Presentation
หน่วยที่ 12 Style Sheet and Layers
HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล
หลักการเขียนเว็บไซต์
หลักการเขียนโปรแกรม ( )
พื้นฐานการเขียนโปรแกรมด้วย C#
Introduction to HTML, PHP – Special Problem (Database)
เสริมเว็บให้ดูสวย.
HTML (Hyper Text Markup Language) HTML (Hyper Text Markup Language) เป็นภาษา มาตรฐานสากลที่ใช้นำเสนอข้อมูลแบบ ผสมผสานในการสื่อสารแบบ World-Wide- Web.
ตัวแปร และชนิดข้อมูล.
PHP เบื้องต้น.
สื่อการสอนการเขียนเว็บเพจ ด้วยภาษา HTML
โครงสร้างพื้นฐานของ JavaScript
โครงสร้างของภาษา HTML
โดย ส.อ.ประกาศิต วรนุช วิททยาลัยเฉลิมกาณจนา
HTML HyperText Markup Language
ใบสำเนางานนำเสนอ:

การสร้างเว็บด้วย HTML HyperText Markup Language

Tag Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <P>, <BR> เป็นต้น Tag เปิด/ปิด <B>…</B>, <BLINK>…</BLINK> เป็นต้น

โครงสร้าง HTML

โครงสร้าง คำอธิบาย <HTML> ประกาศว่าต่อไปจะเป็น HTML <HEAD> <TITLE>ข้อความ</TITLE> สั่งให้ TITLE แสดงตัวอักษรที่ต้องการ </HEAD> กำหนดให้สิ้นสุดส่วนของ HEAD <BODY> กำหนดให้เริ่มต้นส่วน BODY ข้อความต่าง ๆ ข้อความที่แสดงในส่วนของ browser </BODY> กำหนดให้สิ้นสุดส่วน BODY ประกาศว่าต่อไปจะเป็นสิ้นสุดคำสั่ง HTML

การกำหนดสีของพื้นหลังของตัวอักษร 1 การกำหนดสีของพื้นหลังของตัวอักษร 1. ระบุชื่อของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็นต้น <HTML> <HEAD>    <TITLE>การกำหนดสีพื้นหลังโดยการกำหนดสี</TITLE> </HEAD> <BODY BGCOLOR="yellow">    การกำหนดสีพื้นหลังโดยการกำหนดสี </BODY> </HTML>

2. การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 หรือเรียกว่า หลักการผสมสีแบบ RBG <HTML> <HEAD>    <TITLE>การกำหนดสีพื้นหลังโดยการกำหนดสี</TITLE> </HEAD> <BODY BGCOLOR="#FF66FF">    การกำหนดสีพื้นหลังโดยใช้หลัก "#RBG" </BODY> </HTML>

การกำหนดสีของตัวอักษร 1 การกำหนดสีของตัวอักษร 1.ระบุชื่อของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็นต้น <HTML> <HEAD>    <TITLE>การกำหนดสีตัวอักษร</TITLE> </HEAD> <BODY BGCOLOR="yellow" text="blue" >    การกำหนดสีตัวอักษร </BODY> </HTML>

2. การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 หรือเรียกว่า หลักการผสมสีแบบ RBG <HTML> <HEAD>     <TITLE>การกำหนดสีตัวอักษร</TITLE> </HEAD> <BODY BGCOLOR="yellow" text="#FF0066" >    การกำหนดสีตัวอักษร </BODY> </HTML>

ข้อความลักษณะหัวเรื่อง (Heading) <HTML> <HEAD>      <TITLE>การกำหนด Heading</TITLE> </HEAD> <BODY>      Computer - Default Size      <H1>Computer - H1</H1>      <H2>Computer - H2</H2>      <H3>Computer - H3</H3>      <H4>Computer - H4</H4>      <H5>Computer - H5</H5>      <H6>Computer - H6</H6> </BODY> </HTML>

ข้อความลักษณะหัวเรื่อง (Heading) ข้อความลักษณะหัวเรื่อง จะกำกับด้วยแท็ก <Hn> โดย n คือตัวเลขแสดงขนาดของตัวอักษร ค่าของ n นั้นจะมีค่าอยู่ที่ 1 - 6 n = 1 จะมีขนาดตัวอักษรหัวเรื่องใหญ่สุด n = 6 จะมีขนาดตัวอักษรหัวเรื่องเล็กสุด สามารถเพิ่ม/ลดขนาดโดยใช้เครื่องหมาย + หรือ - นำหน้าตัวเลขได้ เช่น -1 หรือ +5 เป็นต้น

ผลลัพธ์ Computer - Default Size Computer - H1 Computer - H2

การกำหนดตัวอักษรให้มีความหนา <HTML> <HEAD>              <TITLE>การกำหนดตัวหนา</TITLE> </HEAD> <BODY>      ตัวอักษรปรกติ COMPUTER      ตัวอักษรหนา <B>COMPUTER</B> </BODY> </HTML>

การกำหนดตัวอักษรให้ขีดเส้นใต้ <HTML> <HEAD>              <TITLE>การกำหนดการขีดเส้นใต้</TITLE> </HEAD> <BODY>      ตัวอักษรปกติ COMPUTER      ตัวอักษรที่ขีดเส้นใต้ <U>COMPUTER</U> </BODY> </HTML>

การกำหนดตัวอักษรให้มีการเอน <HTML> <HEAD>              <TITLE>การกำหนดอักษรเอน</TITLE> </HEAD> <BODY>      ตัวอักษรปกติ COMPUTER      ตัวอักษรเอน <i>COMPUTER</i> </BODY> </HTML>

การกำหนดรูปแบบของตัวอักษร ฟอนต์สำหรับข้อความภาษาไทย/อังกฤษ ที่เหมาะสมได้แก่ MS Sans Serif, Microsoft Sans Serif, Thonburi ฟอนต์สำหรับข้อความภาษาอังกฤษที่เหมาะสม คือ Arial, Helvetica, sans-serif

การกำหนดรูปแบบของตัวอักษร (ต่อ) <HTML> <HEAD>        <TITLE>FONT FACE </TITLE> </HEAD> <BODY>      ชนิดของฟอนต์ปกติ<BR> <FONT FACE="MS Sans Serif">ฟอนต์ชื่อ MS Sans Serif</Font> </BODY> </HTML>

การกำหนดสีของตัวอักษร 1. ระบุชื่อของสีที่ต้องการ การกำหนดสีของตัวอักษร 1. ระบุชื่อของสีที่ต้องการ <HTML> <HEAD>       <TITLE>FONT COLOR </TITLE> </HEAD> <BODY text="yellow">      Computer      <FONT COLOR="Red">Computer</FONT>      Computer </BODY> </HTML>

2. การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 <HTML> <HEAD>       <TITLE>FONT COLOR </TITLE> </HEAD> <BODY text="yellow">      Computer      <FONT COLOR ="#FF66FF"> Computer</FONT>      Computer </BODY> </HTML>

การกำหนดขนาดของตัวอักษร 1. กำหนดเป็นตัวเลขซึ่งจะมีค่า 1 - 7 การกำหนดขนาดของตัวอักษร 1. กำหนดเป็นตัวเลขซึ่งจะมีค่า 1 - 7 <HTML> <HEAD>              <TITLE>FONT SIZE </TITLE> </HEAD> <BODY text="Red">      <FONT SIZE="1">Computer</Font>      <FONT SIZE="2">Computer</Font>      <FONT SIZE="3">Computer</Font>      <FONT SIZE="4">Computer</Font> <FONT SIZE=“5">Computer</Font>      <FONT SIZE=“6">Computer</Font>      <FONT SIZE=“7">Computer</Font> </BODY> </HTML>

กำหนดโดยใช้เครื่องหมายบวกและเครื่องหมายลบ โดยสามารถกำหนดได้ดังนี้ ถ้าเป็นการย่อขนาดของตัวอักษรนั้นจะใช้เครื่องหมายลบ ซึ่งจะใช้ไม่เกิน - 2 ถ้าเป็น การขยายขนาดของตัวอักษรนั้นจะใช้เครื่องหมายบวกซึ่งจะใช้ไม่เกิน + 4

<HTML> <HEAD>        <TITLE>FONT SIZE </TITLE> </HEAD> <BODY text="Red">      <FONT SIZE="+4">Computer</Font>      <FONT SIZE="+3">Computer</Font>      <FONT SIZE="+2">Computer</Font>      <FONT SIZE="+1">Computer</Font>      Computer      <FONT SIZE="-1">Computer</Font>      <FONT SIZE="-2">Computer</Font> </BODY> </HTML>

คำสั่งที่กำหนดตัวอักษรยกระดับ <HTML> <HEAD>              <TITLE>SUPERSCRIPT</TITLE> </HEAD> <BODY>      <FONT SIZE="4" color="green" >Computer</Font>      A<Sup>2</Sup> = A2      <FONT SIZE="4" color="green">Computer</Font> </BODY> </HTML>

คำสั่งที่กำหนดตัวอักษรพ่วงท้าย (ตัวห้อย) <HTML> <HEAD>              <TITLE>SUBSCRIPT</TITLE> </HEAD> <BODY>      <FONT SIZE="4" color="green" >Computer</Font>      H<Sub>2</Sub>0 = H2O      <FONT SIZE="4" color="green">Computer</Font> </BODY> </HTML>

การกำหนดตัวอักษรเคลื่อนที่ <HEAD>      <TITLE>MARQUEE</TITLE> </HEAD> <BODY> <Marquee><FONT SIZE="4" color="green“>Computer</Font></Marquee> </BODY> </HTML>

กำหนดตัวอักษร ขนาด และ สี กำหนดตัวอักษร ขนาด และ สี <font face="Impact" size="3" color="#9900CC">

ช่องรับข้อมูล Drop down list คำนำหน้า : <select size="1" name="S_sex"> <option>นาย</option> <option>นาง</option> <option selected>นางสาว</option></select>

การสร้างปุ่มบันทึกและยกเลิก <input type="submit" value=“บันทึก” name="B1" style="font-size: 1em; color: #800080" size="3“> <input type="reset" value=“ยกเลิก” name="B2" style="font-size: 1em; color: #800080“ size=“3”>

การสร้างปุ่ม button <input type=“button" value=“<<back” onclick=“history.go(-1)” name="B1" style="font-size: 1em; color: #800080" size="3“> หรือ <a href="javascript:onclick=history.back()"><font size="3" color="#6600CC">กลับก่อนหน้านี้</a> กลับก่อนหน้านี้

ช่องรับข้อมูล radio เพศ : <input type ="radio" name="gender" checked>หญิง <input type = "radio" name="gender">ชาย

ช่องรับข้อมูล Checkbox ประเภทหนังสือที่ชอบ : <input type = "checkbox">นวนิยาย <input type = "checkbox">วิชาการ <input type ="checkbox">บันเทิง>

ช่องรับข้อมูล text area ความคิดเห็นเพิ่มเติม : <textarea cols = "50" rows ="4"></textarea>

ช่องรับข้อมูล Text และ Password ชื่อผู้ใช้(Username) : <input type ="text" name="S_userName" size="30"> รหัสผ่าน (Password) : <input type ="password" name="S_password" size="15“> ยืนยันรหัสผ่าน(Confirm) : <input type ="password" name="C_password" size="15“>

การแสดงข้อความเตือน <form name="good" method="POST" onSubmit="if(confirm(‘ยืนยันการบันทึกข้อมูล ?')) document.good.action='SaveAddSubject.php'">

การสร้างตาราง <html> <body <p align = center><IMG height=200 width =150 src="images/begonia2.jpeg"> <table width=60% border=1 align=center > <tr bgcolor=#AFCACF ><p align = center> <td width=5%><center><font color=#660099>ลำดับที่</td></center> <td width=10%><center><font color=#660099>รหัสวิชา</td></center> <td width=20%><center><font color=#660099>วิชาสอน</td></center> </tr> <tr bgcolor=#CCCCFF border =1 align = center> <td width=5%><center><font color=#660099>1</td></center> <td width=10%><center><font color=#660099>4122606</td></center> <td width=20%><center><font color=#660099>โปรแกรมประยุกต์ด้านสารสนเทศฯ</td></center> </table> </html>

ผลที่จอภาพ