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

HTMLHypertext 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>
LineBreaks
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
Closetag
<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 textisbold</b>
<strong>This textisstrong</strong>
<i>This textisitalic</i>
<i>This textisitalic</i>
<em>This textisemphasized</em>
<code>This iscomputeroutput</code>
Thisis<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="HegeRefsnes">
กาหนดให้ 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 girlinmydream:
<li>Tall</li>
<li>White</li>
<li>Neat andCute</li>
</ol>
Output

Span และ DivElement
ใช้แบ่งเอกสารออกเป็นส่วนย่อยๆ
ใช้กาหนดขอบเขตของรูปแบบที่จัดด้วย CSS
สามารถใช้ JavaScript จัดการคุณสมบัติต่างๆภายใน Element ได้
Div ต่างกับ Span Element ในส่วนการแสดงผล Div จะใส่ Enter ก่อนและหลังเสมอ
ตัวอย่าง Div
Mymotherhas<span style="color:blue">blue</span> eyes.
ตัวอย่าง Span
Mymotherhas<div style="color:blue">blue</div> eyes.

HTML Form
ใช้ในการส่งข้อมูลไปยัง Server
รูปแบบ
<form>
…
input elements
…
</form>

HTML Form
Text Fields
Firstname: <input type="text" name="firstname" size="15"><br>
Lastname: <input type="text" name="lastname" size="15">
PasswordField
Password: <input type="password" name="pwd">
RadioButtons
<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 havea bike<br>
<input type="checkbox" name="vehicle" value="Car">Ihave a car
SubmitButton
<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-downlist
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> Drop-downlistgroup
<select>
<optgroup label="SwedishCars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
</optgroup>
<optgroup label="GermanCars">
<option value="mercedes">Mercedes</option>
</optgroup>
</select>

HTML Form Textarea
<textarea rows="10" cols="30"> The catwasplayinginthe garden. </textarea> Button
<input type="button" value="Helloworld!"> Fieldset
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Dateofbirth: <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 ในรุ่นล่าสุดตลอดเวลา
Chrome
Firefox3.5+
IE9
Safari Safari Text editor เช่น
Notepad++
Editplus
Textmate
Dreamweaver

HTML5 ≈ HTML 5 + CSS 3 + JavaScript

Element ใหม่ของ HTML5 28newelements:
<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 removedelements:
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>,
<font>, <frame>, <frameset>, <noframes>, <strike>, <tt>

ตัวอย่างเว็บ HTML5 http://thehtml5herald.com

HTML4 vsHTML5HTML4
<!DOCTYPE HTML PUBLIC"-//W3C//DTD
HTML 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 ofthe document</title>
<script src="scrp.js"
type="text/javascript"></script>
</head>
<body>
That’sallI needtocreatemyfirstHTML
page
</body>
</html> HTML5
<!doctypehtml>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="scrp.js"></script>
</head>
<body>
That’sallI needtocreatemyfirstHTML5
page
</body>
</html>
มีหรือไม่ มีก็ ได้

Empty Element
เพื่อให้ code ดูสะอาด empty element จึงไม่ ต้องมี / ด้านหลัง
<img src="boat.gif" alt="BigBoat">
<input type="text" name="firstname">

Minimum HTML5 Document
<!DOCTYPE html>
<html>
<head>
</head>
<body>
The content ofthe document......
</body>
</html>

Element ในการกาหนดโครงสร้างเว็บ

Mark Element
ใช้เน้น Keywordที่ค้นหาเจอ
<mark> ….</mark>
ตัวอย่าง
<p>Do notforgettobuy<mark>milk</mark> today.</p>
Output

Progress และ Meter Element
ProgressElement ใช้แสดงสถานะความคืบหน้าที่ไม่ ทราบขอบเขตแน่นอน เช่น ความคืบหน้าการ
download
max–กาหนดค่าที่ทางานสาเร็จ
value–ค่าที่ทาสาเร็จไปแล้ว
<progress value="22" max="100"></progress>
MeterElement ใช้แสดงสถานะความคืบหน้าที่ทราบขอบเขต
max, min–กาหนดค่าที่ทางานเสร็จ และค่าเริ่มต้น
<meter value="2" min="0" max="10">2 outof10</meter>
<meter value="0.6">60%</meter>

Details Element
ซ่อนส่วนย่อยของเอกสาร และสามารถคลิกเพื่อดูส่วนที่ซ่อนได้
<details>
<summary>Copyright 1999-2011.</summary>
<p>by RefsnesData. AllRightsReserved.</p> <p>by RefsnesData. AllRightsReserved.</p>
<p>All content andgraphicsonthiswebsitearethe propertyofthe company
RefsnesData.</p>
</details>
Output

HTML5 New Input Types
color
date
email
numbernumber
range
search
tel
url

Input Type: color การทางาน: เลือกสีจากรายการ
Selectyourfavoritecolor: <input type="color" name="favcolor">
Output การเขียนภายใต้ Element Form
<form action="demo_form.php">
Selectyourfavoritecolor: <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(between1 and5):
<input type="number" name="quantity" min="1" max="5">
Output

Input Type: range การทางาน: เลือนเลือกค่าตามช่วงที่กาหนด
Attribute:
max-ค่าสูงสุด min-ค่าต่าสุดstep -ช่วงห่างแต่ ละค่า value–defaultvalue
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 เท่านั้น
Addyourhomepage: <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="InternetExplorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</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
heightandwidth
list
minandmax
multiple
pattern (regexp)
placeholder
required
step

<form> / <input> autocomplete Attribute การทางาน: ใช้ในการระบุใน Form หรือ Input Element เพื่อเปิดหรือปิด autocomplete
<form action="demo_form.asp" autocomplete="on">
Firstname:<input type="text" name="fname"><br> Firstname:<input type="text" name="fname"><br>
Lastname: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
</form>

<form> novalidateAttribute การทางาน: ใช้ในการปิดตรวจสอบค่าในฟอร์ม
<form action="demo_form.asp" novalidate>
E-mail: <input type="email" name="user_email"> E-mail: <input type="email" name="user_email">
</form>

<input> autofocus Attribute การทางาน: กาหนดให้ Focus ไปที่ Input
Firstname:<input type="text" name="fname" autofocus>

<input> form Attribute การทางาน: ระบุว่าเป็นสมาชิกของฟอร์มใด
<form action="demo_form.asp" id="form1">
Firstname: <input type="text" name="fname
</form>
Lastname: <input type="text" name="lname" form="form1">

<input> formactionAttribute การทางาน: ระบุให้ SubmitForm ไปที่ตาแหน่งอื่นที่แตกต่างกัน
<form action="demo_form.asp">
Firstname: <input type="text" name="fname"><br>
Lastname: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp" value="Submitasadmin">
</form>

<input> multiple Attribute การทางาน: กาหนดให้ Fileหรือ Email สามารถกรอกหรือเลือกได้หลายค่า
Selectimages: <input type="file" name="img" multiple="multiple">
<input type="email" multiple>
</form>

<input> placeholder Attribute การทางาน: กาหนดคาอธิบายให้กับ textboxชนิดต่างๆ
<input type="text" name="fname" placeholder="Firstname"><br>
<input type="text" name="lname" placeholder="Lastname"><br> <input type="text" name="lname" placeholder="Lastname"><br>
</form>
Output

<input> required Attribute การทางาน: กาหนดให้ต้องกรอก หรือเลือก
Username: <input type="text" name="usrname" required>
Output

<input> pattern Attribute การทางาน: กาหนดเงื่อนไขการกรอกข้อมูลด้วย regularexpression
Countrycode: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Threelettercountrycode">
</form>
Output

Regular Expression
, /, * Matcha specialcharacterliterally, ignoringorescapingitsspecialmeaning
[…] Matchanyonecharacterbetweenthe brackets
[^…] Matchanyonecharacternotbetweenthe brackets
. Matchanycharacterotherthanthe newline
w, W Matchanywordnon-wordcharacter
s, S Matchanywhitespace/non-whitespaces, S Matchanywhitespace/non-whitespace
d, D Matchanydigit/non-digit
^, $ requirematchatbeginning/endofa stringorinmulti-linemode,
beginning/endofa line
b, B requirea matchata word/non-wordboundary
? Optionalterm: Matchzerooronetime
+ Matchprevioustermoneormoretimes

Regular Expression
* Matchtermzeroormoretimes
{n} Matchpervioustermn times
{n,} Matchprevioustermn ormoretimes
{n,m} Matchprevtermatleastn timebutnomorethanm times
a | b Matcheithera orb a | b Matcheithera orb
(sub) Groupsup-expressionsubintoa singletermandrememberthe textthatit
matched
n Matchexactlythe samecharsthatwerematchedbysup-expressionnumbern
$n Inreplacementstrings, substitutethe textthatmatchedthe nthsub
expression

Example
^(cat) --matchescatatthe startofa string
(cat)$ --matchescatatthe endofa string
(cat)|(dog) --matchescatordoginthe string
[0-9] --matchesanydigit
[0-9]{5} --matches5 digits
[0-9]{1,2} --matches1 or2 digits[0-9]{1,2} --matches1 or2 digits
[a-z]? --matches0 or1 letter
[a-z]* --matches0 oranynumberofletters
[a-z]+ --matches1 ormoreletters
,--matchesanysinglecharacter

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a เขียนเว็บไซต์ด้วย Html 5

Similar a เขียนเว็บไซต์ด้วย Html 5 (20)

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