Ebook lập trình html5 và css3 phần 2

Lý thuyết lập trình ngôn ngữ html5 và css3 từ cơ bản đến nâng cao phần 2.

BËI 2 KHỞI TẠO, LËM VIỆC VỚI MÌ HTML5 VË THËNH

PHẦN FORM

NHẮC LẠI BËI TRƯỚC

NGïN NGỮ çNH DẤU HTML5

<p> Đoạn văn bản cho phần nội dung

<img src=imageone.jpg alt=landscape>

NGïN NGỮ çNH DẤU HTML5

!   Khai b‡o DOCTYPE:

!   DOCTYPE được sử dụng để kiểm tra hợp lệ c‡c tˆi liệu

embedded  interac1ve 

NGïN NGỮ çNH DẤU HTML5

!   V•ng nội dung Metadata:

!   Lˆ phần nội dung thiết lập c‡ch tr“nh bˆy hoặc hˆnh vi của c‡c nội dung c˜n lại tr•n trang

!   C— thể sử dụng nội dung metadata để thiết lập quan hệ giữa

NGïN NGỮ çNH DẤU HTML5

!   V•ng Flow:

!   Đại diện cho c‡c phần tử được coi lˆ nội dung của

trang web

!   C‡c thẻ ‡nh dấu nội dung đều thuộc v•ng nˆy

!   Những phần tử được th•m mới trong HTML5:

<article>, <aside>, <audio>, <canvas>,

<hgroup>,

<h3> This is flow content </h3>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

ex ea commodo consequat </p>

NGïN NGỮ çNH DẤU HTML5

!   V•ng Sectioning:

!   Lˆ v•ng nội dung mới của HTML5

!   Bao gồm 4 phần tử: <article>, <aside>, <nav>, vˆ

</aside>

<h2>Top Rated Smoothies</h2>

<h3>The Funky Orange</h3>

</hgroup>

NGïN NGỮ çNH DẤU HTML5

!   V•ng Phrasing:

!   Lˆ v n bản của tˆi liệu bao gồm c‡c phần tử ‡nh

dấu v n bản b•n trong một oạn v n

!   Lˆ tập con của v•ng flow

!   V•ng Embedded:

!   Lˆ nội dung nhập một tˆi nguy•n kh‡c như h“nh ảnh hay video vˆo trong tˆi liệu

<p> The advantage of having <strong> good </strong> hiking boots

ecomes <em>extremely</em> clear after your third day of walking.</p>

<audio src="high_seas_rip.mp3" controls preload="auto" autobuffer> </audio>

PHẦN TỬ NỘI DUNG (CONTENT) CỦA

HTML5

PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5

!   Hỗ trợ sự tương th’ch tr•n c‡c tr“nh duyệt cho

thˆnh phần HTML5:

!   Sử dụng file reset.css: khai b‡o để buộc c‡c phần tử mới của HTML5 hiển thị như một khối (block) thay v“ hiển thị inline

!   Sử dụng javascript (đối với phi•n bản IE 6,7,8)

header, section, aside, nav, footer, figure, figcaption {

display:block;}

<link rel="stylesheet" media="screenÓ href="reset.css" type="text/css" />

<link rel="stylesheet" media="screenÓ href="base.css" type="text/css" />

<script src="modernizr-1.7.jsÓ type="text/javascript"></script>

PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5

<h1> The web's #1 resource for smoothie recipes </h1>

<img src="images/smoothieworld_logo.jpg width="200"

height="150 alt="smoothieworld_logo" />

</header>

PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5

PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5

PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5

!   Thˆnh phần <section>:

!   biểu diễn một v•ng chung của tˆi liệu hoặc ứng dụng

!   N•n sử dụng một section khi muốn ph‰n chia nội

dung quan trọng như v n bản vˆ h“nh ảnh, thˆnh c‡c v•ng

PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5

<section id="introduction-content">

<p><small>&copy;

copyright 2038 </small></p>

</section>

PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5

!   Thˆnh phần <article>:

!   Lˆ thˆnh phần tự chứa trong một tˆi liệu, trang, ứng dụng hoặc site

!   C— thể lồng phần tử <article> vˆo trong phần tử <section>

!   Lˆ lựa chọn tối ưu để chứa nội dung sẽ được ng tải trong những ngữ cảnh kh‡c nhau hay thậm ch’ tr•n c‡c thiết bị

PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5

!   Thˆnh phần <aside>:

!   C‡ch sử dụng:

¥  Sử dụng cho v•ng sidebar của website

¥  Sử dụng cho một v•ng nội dung li•n quan b•n trong phần tử <section>

</aside>  

PHẦN TỬ NỘI DUNG (CONTENT) CỦA HTML5

!   Thˆnh phần <footer>:

!   Kh™ng thuộc lớp c‡c phần tử chia oạn; c— thể c—

nhiều footer tr•n một trang web

      width:960px; 

      height:118px; 

      padding‐top:10px; 

}  

FORM VỚI HTML5

FORM VỚI HTML5

!   Cấu trœc m‹ form:

!   Action :

¥  nơi gửi dữ liệu của người d•ng để xử l!

¥  Thường lˆ URL trỏ tới m‹ kịch bản được lưu tr•n m‡y chủ

!   Method :

¥  X‡c định phương thức gửi dữ liệu

¥  gi‡ trị POST/ GET

<form id="contactform" action=ÒÓ method="post">

< code>

</form>

FORM VỚI HTML5

!   Lˆm việc với thˆnh phần<label>:

!   Lˆ thˆnh phần kh™ng bắt buộc

!   T ng khả n ng truy cập cho form

!   Lˆm việc với thˆnh phần < fieldset>:

<label>First name:<input type="textÓ name="firstname"> </label> <br />

<label>Last name:<input type="textÓ name="lastname"> </label>

<fieldset>

<legend> Personal Information </legend>

<label>First name:<input type="textÓ name="firstname"> </

label><br />

</fieldset>

FORM VỚI HTML5

!   Kết hợp với thˆnh phần <legend> để th•m ti•u đề cho form

FORM VỚI HTML5

!   Th•m iều khiển <input> mới vˆ thuộc t’nh:

!   Cho phŽp c‡c nhˆ thiết kế sắp xếp dữ liệu từ c‡c

FORM VỚI HTML5

<label for="website">Website:<input id="website" type="urlÓ

name="customerwebsite"></label>

<label for="firstname">First name:<input id="firstname" type="text"

name="firstname" placeholder="Enter Your First Name" required></label>

<label for="lastname">Last name:<input id="lastname" type="text"

name="lastname" placeholder="Enter Your Last Name" required></label>

FORM VỚI HTML5

!   Lˆm việc với thˆnh phần <datalist>:

!   X‡c định một danh s‡ch t•y chọn cho

<option value="Strawberry Smoothie">Strawberry Smoothie</option>

<option value="Banana Smoothie">Banana Smoothie</option>

</datalist>

FORM VỚI HTML5

!   Một số thˆnh phần mới trong iều khiển input:

<input type="range" min= 0" max= 100 value= 0 step="10">

<input type= date >

<input type = ÒcolorÓ>

!   Cấu trœc m‹ HTML5 gắn liền với cấu trœc bố cục

trang: <header>, <nav>, <article>,

!   HTML5 cung cấp nhiều iều khiển trong form hơn,

dễ dˆng hơn cho người thiết kế & ph‡t triển