เขียนเว็บไซต์ด้วย html 5

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>


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> มความส าคญนอยทส ด

ตวอยาง


<h2>This is a heading</h2> <h2>This is a heading</h2>


ไม ควรใช Heading ในการท าใหตวอกษรมขนาดใหญ เทานนควรใชในการก าหนด

ล าดบความส าคญของหวขอ เพราะ Search Engine จะท า Index ตามโครงสราง

Heading

HTML Tips

Comments คอ สวนของค าอธบายทeไม ตองการใหแสดงผล



ปดดโคด 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 ในการก าหนดโครงสรางเวบ

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

เขียนเว็บไซต์ด้วย html 5

Education