Upload
samart-phetdee
View
868
Download
0
Embed Size (px)
DESCRIPTION
เขียนเว็บไซต์ด้วย Html 5
Citation preview
HTML
Hypertext Markup Language
อ.เอกชย วอสงเนน
โครงสรางของภาษา HTML
<html><head><title>Title of the document</title></head>
<body>That’s all I need to create my first HTML page</body></html>
สวนหว
สวนเนอหา
HTML เบองตน
Headings
<h1>This is a heading</h1>
<h2>This is a heading</h2>
Paragraphs
<p>This is a paragraph.</p>
Line Breaks
First Line<br> Second Line
Links
<a href="http://www.google.com">This is a link</a>
Images
<img src="w3schools.jpg" width="104" height="142">
Elements
ภาษา HTML ใช Element หรอ Tag ในการก าหนดรปแบบ
Empty Elements คอ Element ทeไม มเนอหา เชน
<br>
<img src="boat.gif">
Open tag Element content Close tag<p> This is a paragraph </p>
<a href=“default.html”> This is a link </a>
<br>
HTML Tip: ควรใช Lowercase Tags
HTML Tag จะไม สนใจตวพพมใหญ หรอเลก
<P> เหมอนกบ <p>
World Wide Web Consortium (W3C) แนะน าใหใชชอ Tag เปนตวพพมเลก
Attributes
แตละ Elements สามารถม Attribute ได
Attribute คอ ขอมลเสรมเกยวกบ Element
Attribute จะถกก าหนดใน start tag เทานน
Attribute จะอยในรปแบบคของ name/value เชน name="value“
ตวอยาง Attribute
ใน Tag การสราง Link จะใช Attribute ชอ href ในการระบ URL
<a href="http://www.w3schools.com">This is a link</a>
Headings
Heading นยามดวย Tab <h1> ถง <h6>
<h1> มความส าคญมากทสด <h6> มความส าคญนอยทส ด
ตวอยาง
<h1>This is a heading</h1>
<h2>This is a heading</h2> <h2>This is a heading</h2>
<h3>This is a heading</h3>
ไม ควรใช Heading ในการท าใหตวอกษรมขนาดใหญ เทานนควรใชในการก าหนด
ล าดบความส าคญของหวขอ เพราะ Search Engine จะท า Index ตามโครงสราง
Heading
HTML Tips
Comments คอ สวนของค าอธบายทeไม ตองการใหแสดงผล
<!-- This is a comment -->
ปดดโคด HTML ดวย
Chrome คลกขวา > View page source
IE คลกขวา > View source
ดวาสวนของเอกสารหมายถง Element ใด
Chrome คลกขวา > Inspect element
Text Formatting
<b>This text is bold</b>
<strong>This text is strong</strong>
<i>This text is italic</i>
<i>This text is italic</i>
<em>This text is emphasized</em>
<code>This is computer output</code>
This is<sub> subscript</sub> and
<sup>superscript</sup>
Hyperlinks (Links)
Link ไปยงเวบอน
<a href="url">Link text</a>
<a href="http://www.google.com/">Google</a> ไปยงเวบ Google โดยอย
หนาตางเดม
<a href="http://www.google.com/" target="_blank">Google</a> ไปยงเวบ
Google โดยเปดหนาตางใหม
Link ในหนาเดยวกน
1. เพมจด Link <a id="tips">Useful Tips Section</a>
2. สราง Link ไปสวนนน <a href="#tips">Visit the Useful Tips Section</a>
หรอ <a href="http://www.pantip.com/cafe/blueplanet/topic/E12851477/E12851477.html#5">
Visit the Useful Tips Section</a>
HTML <head>
ใชเกบ scripts หรอ style
ค าสงในการโหลดไฟล scripts หรอ style
ขอมลของเวบส าหรบใชในการท า Index ใน Search Engine
Title Element Title Element
<head><title>Title of the document</title></head>
Link Element
<link rel="stylesheet" href="mystyle.css">
Meta Element
นยาม keywords ให search engines ท า Index
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
อธบาย web page
<meta name="description" content="Free Web tutorials on HTML and CSS">
ระบชอผ เขยน
<meta name="author" content="Hege Refsnes">
ก าหนดให Refresh เอกสารทกๆ 30 วนาท
<meta http-equiv="refresh" content="30">
การสรางตาราง
รปแบบ<table>
<tr><td>… </td>
</tr></tr></table>
ตวอยาง<table border="1">
<tr><td>Name</td><td>Age</td>
</tr><tr>
<td>John</td><td>23</td></tr>
</table>
Row
Column
การแสดงผลแบบรายการ
<ul> … </ul> รายการใชจดก ากบ<ol> ... </ol> รายการแบบตวเลขก ากบ<li> สมาชกของรายการ ตองใชอยภายใน <ul> หรอ <ol>
ตวอยาง<ol> A girl in my dream:<li>Tall</li><li>White</li><li>Neat and Cute</li></ol>
Output
Span และ Div Element
ใชแบงเอกสารออกเปนสวนยอยๆ ใชก าหนดขอบเขตของรปแบบทจดดวย CSS สามารถใช JavaScript จดการคณสมบตตางๆภายใน Element ได Div ตางกบ Span Element ในสวนการแสดงผล Div จะใส Enter กอนและหลงเสมอ ตวอยาง Div
My mother has <span style="color:blue">blue</span> eyes.
ตวอยาง SpanMy mother has <div style="color:blue">blue</div> eyes.
HTML Form
ใชในการสงขอมลไปยง Server รปแบบ
<form>…
input elements…
</form>
HTML Form
Text FieldsFirst name: <input type="text" name="firstname" size="15"><br>Last name: <input type="text" name="lastname" size="15">
Password FieldPassword: <input type="password" name="pwd">
Radio Buttons<input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female
HTML Form
Checkboxes<input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">Ihave a car
Submit Button<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user"><input type="submit" value="Submit">
</form>
HTML Form
Drop-down list<select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option><option value="audi">Audi</option></select>
Drop-down list group<select><optgroup label="Swedish Cars"><option value="volvo">Volvo</option><option value="saab">Saab</option></optgroup></optgroup><optgroup label="German Cars"><option value="mercedes">Mercedes</option><option value="audi">Audi</option></optgroup></select>
HTML Form
Textarea<textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>
Button<input type="button" value="Hello world!">
Fieldset<fieldset><legend>Personal information:</legend>
Name: <input type="text" size="30"><br>E-mail: <input type="text" size="30"><br>Date of birth: <input type="text" size="10">
</fieldset>
HTML5
ความส าเรจของ HTML 4.01 และ XHTML 1.1
ใชฐานเทคโนโลยเดม คอ HTML, CSS, DOM, และ JavaScript
ลดความตองการในการใช Plug-in เชน Flash
จดการกบ Error ตางๆ ไดดขน
ใชการ markup แทนการใช script
HTML5 เปนอสระตออปกรณทeหลากหลาย
HTML5
วาดภาพ 2 มต ดวย Element <canvas>
เลนไฟลภาพและเสยงดวย Element <video> และ <audio>
สนบสนน local storage
พมพ Element ระบต าแหนงของเนอหา <article>, <footer>, <header>, <nav>, <section>
พมพ Element ในการสรางฟอรม เชน ปฏทน, วนและเวลา, Email, URL, search
เครองมอสนบสนน HTML5
ยงไมม Browser ใดทสนบสนน HTML5 ครบทก Element แต ทกBrowser มการเพมคณสมบต HTML5 ในรนลาสดตลอดเวลา
ChromeFirefox3.5+IE9Safari Safari
Text editor เชนNotepad++EditplusTextmateDreamweaver
HTML5 ≈ HTML 5 + CSS 3 + JavaScript
Element ใหมของ HTML5
28 new elements:<section>, <article>, <aside>, <hgroup>, <header>,<footer>,<nav>, <figure>, <figcaption>, <video>, <audio>, <source>,<embed>, <mark>,<progress>, <meter>, <time>, <ruby>, <embed>, <mark>,<progress>, <meter>, <time>, <ruby>,<rt>, <rp>,<wbr>, <canvas>, <command>, <details>,<summary>, <datalist>, <keygen>, <output>
ment ท_ถ กยกเลก Element ท_ถ กยกเลก
12 removed elements:<acronym>, <applet>, <basefont>, <big>, <center>, <dir>,<font>, <frame>, <frameset>, <noframes>, <strike>, <tt>
ตวอยางเวบ HTML5 http://thehtml5herald.com
HTML4 vs HTML5
HTML4<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta content="text/html; charset=utf-8"><meta content="text/html; charset=utf-8"><title>Title of the document</title><script src="scrp.js" type="text/javascript"></script></head><body>That’s all I need to create my first HTML page</body></html>
HTML5<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Title of the document</title><script src="scrp.js"></script></head><body>That’s all I need to create my first HTML5page</body></html>
มหรอไม มก ได
Empty Element
เพอให code ดสะอาด empty element จงไม ตองม / ดานหลง
<img src="boat.gif" alt="Big Boat">
<input type="text" name="firstname">
Minimum HTML5 Document
<!DOCTYPE html><html><head><title>Title of the document</title></head>
<body>The content of the document......
</body>
</html>
Element ในการก าหนดโครงสรางเวบ
Element ในการก าหนดโครงสรางเวบ
Mark Element
ใชเนน Keyword ทคนหาเจอ<mark> ….</mark>
ตวอยาง<p>Do not forget to buy <mark>milk</mark> today.</p>
Output
Progress และ Meter Element
Progress Element ใชแสดงสถานะความคบหนาทไม ทราบขอบเขตแนนอน เชน ความคบหนาการ download
max – ก าหนดคาทท างานส าเรจvalue – คาทท าส าเรจไปแลว
ตวอยาง <progress value="22" max="100"></progress>
Meter Element ใชแสดงสถานะความคบหนาททราบขอบเขตmax, min – ก าหนดคาทท างานเสรจ และคาเรมตน
ตวอยาง<meter value="2" min="0" max="10">2 out of 10</meter><meter value="0.6">60%</meter>
Details Element
ซอนสวนยอยของเอกสาร และสามารถคลกเพอดสวนทซอนไดตวอยาง
<details><summary>Copyright 1999-2011.</summary><p>by Refsnes Data. All Rights Reserved.</p> <p>by Refsnes Data. All Rights Reserved.</p><p>All content and graphics on this web site are the property of the companyRefsnes Data.</p>
</details>Output
HTML5 New Input Types
color date email number number range search tel url
Input Type: color
การท างาน: เลอกสจากรายการตวอยาง
Select your favorite color: <input type="color" name="favcolor">Output
การเขยนภายใต Element Form<form action="demo_form.php">
Select your favorite color: <input type="color" name="favcolor"><br><input type="submit">
</form>
Input Type: date
การท างาน: เลอกวนทจากปฏทนตวอยาง
Birthday: <input type="date" name="bday">Output
Input Type: email
การท างาน: รบเฉพาะขอมลทอยในรปแบบอเมลเทานนตวอยาง
E-mail: <input type="email" name="usremail">Output
Input Type: number
การท างาน: รบเฉพาะตวเลขทอยในชวงทก าหนดAttribute:
max - คาสงสด min - คาต าสด step - ชวงหางแตละคาตวอยาง
Quantity (between 1 and 5):<input type="number" name="quantity" min="1" max="5">
Output
Input Type: range
การท างาน: เลอนเลอกคาตามชวงทก าหนดAttribute:
max - คาสงสด min - ค าต าสด step - ชวงหางแต ละคา value – default valueตวอยาง
Points: <input type="range" name="points" min="1" max="10">Output
Input Type: search
การท างาน: แสดง Textbox ส าหรบการคนหาตวอยาง
Search Google: <input type="search" name="googlesearch">Output
Input Type: url
การท างาน: รบเฉพาะขอมลทeอยในรปแบบ URL เทานนตวอยาง
Add your homepage: <input type="url" name="homepage">Output
<datalist> Element
การท างาน: Textbox แบบ Autocompleteตวอยาง
<form action="demo_form.asp" method="get"><input list="browsers" name="browser"><datalist id="browsers"> <datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist><input type="submit">
</form>
<output> Element
การท างาน: แสดงผลลพธจากการค านวณ (ท างานควบคก บ Script)ตวอยาง
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" name="a" value="50">100 + <input type="number" name="b" value="50">=<output name="x" for="a b"></output>
</form>
Output
HTML5 New Form Attributes New attributes for <form>:
autocomplete novalidate
New attributes for <input>: autocomplete autofocus form formaction formenctype formmethod formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step
<form> / <input> autocomplete Attribute การท างาน: ใชในการระบใน Form หรอ Input Element เพอเปดหรอปด autocomplete
ตวอยาง<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname"><br> First name:<input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br>E-mail: <input type="email" name="email" autocomplete="off"><br><input type="submit">
</form>
<form> novalidate Attribute
การท างาน: ใชในการปดตรวจสอบคาในฟอรมตวอยาง
<form action="demo_form.asp" novalidate>E-mail: <input type="email" name="user_email"> E-mail: <input type="email" name="user_email"><input type="submit">
</form>
<input> autofocus Attribute
การท างาน: ก าหนดให Focus ไปท Inputตวอยาง
First name:<input type="text" name="fname" autofocus>
<input> form Attribute
การท างาน: ระบวาเปนสมาชกของฟอรมใดตวอยาง<form action="demo_form.asp" id="form1">
First name: <input type="text" name="fname<input type="submit" value="Submit">
</form>Last name: <input type="text" name="lname" form="form1">
<input> formaction Attribute
การท างาน: ระบให Submit Form ไปทต าแหนงอนทแตกตางกนตวอยาง
<form action="demo_form.asp">First name: <input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br><input type="submit" value="Submit"><br><input type="submit" formaction="demo_admin.asp" value="Submit as admin">
</form>
<input> multiple Attribute
การท างาน: ก าหนดให File หรอ Email สามารถกรอกหรอเลอกไดหลายคา ตวอยาง
<form action="demo_form.asp">Select images: <input type="file" name="img" multiple="multiple"><input type="email" multiple><input type="submit">
</form>
<input> placeholder Attribute
การท างาน: ก าหนดค าอธบายใหกบ textbox ชนดตางๆตวอยาง
<form action="demo_form.asp"><input type="text" name="fname" placeholder="First name"><br><input type="text" name="lname" placeholder="Last name"><br> <input type="text" name="lname" placeholder="Last name"><br><input type="submit" value="Submit">
</form>Output
<input> required Attribute
การท างาน: ก าหนดใหตองกรอก หรอเลอกตวอยาง
Username: <input type="text" name="usrname" required>Output
<input> pattern Attribute
การท างาน: ก าหนดเงอนไขการกรอกขอมลดวย regular expressionตวอยาง
<form action="demo_form.asp">Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><input type="submit">
</form>Output
Regular Expression
\\, \/, \* Match a special character literally, ignoring or escaping its special meaning[…] Match any one character between the brackets[^…] Match any one character not between the brackets. Match any character other than the newline\w, \W Match any word\non-word character\s, \S Match any whitespace/non-whitespace \s, \S Match any whitespace/non-whitespace\d, \D Match any digit/non-digit^, $ require match at beginning/end of a string or in multi-line mode, beginning/end of a line\b, \B require a match at a word/non-word boundary? Optional term : Match zero or one time+ Match previous term one or more times
Regular Expression
* Match term zero or more times{n} Match pervious term n times{n,} Match previous term n or more times{n,m} Match prev term at least n time but no more than m timesa | b Match either a or b a | b Match either a or b(sub) Group sup-expression sub into a single term and remember the text that itmatched\n Match exactly the same chars that were matched bysup-expression number n$n In replacement strings, substitute the text that matched the nth subexpression
Example
^(cat) -- matches cat at the start of a string(cat)$ -- matches cat at the end of a string(cat)|(dog) -- matches cat or dog in the string[0-9] -- matches any digit[0-9]{5} -- matches 5 digits[0-9]{1,2} --matches 1 or 2 digits [0-9]{1,2} --matches 1 or 2 digits[a-z]? -- matches 0 or 1 letter[a-z]* -- matches 0 or any number of letters[a-z]+ -- matches 1 or more letters, -- matches any single character