Giáo trình HTML5 và CSS3 (có bài tập thực hành) phiên bản đầy đủ

Những khái niệm về HTML 5,Giáo trình HTML5 css3,HTML căn bản,giáo trình html cơ bản,định dạng HTML,ngôn ngữ HTML, HTML, CSS, HTML và CSS, JAVASCRIPT, JAVA, cơ bản về HTML, kiến thức cơ bản về HTML, lập trình tin học, công nghệ thông tin,Làm việc với thành phần mở rộng của CSS3,Làm việc với CSS3, Giáo trình HTML5 và CSS3 Làm việc với các thành phần VIDEO, AUDIO, CANVAS của HTML5

BÀI 1 NHỮNG KHÁI NIỆM ĐẦU TIÊN VỀ HTML5

ĐỊNH NGH Ĩ A HTML5

  Thành phần của HTML5:

HTML5

•  Tác dụng của công nghệ mới:

–  Cung cấp tính năng mạnh mẽ cho bộ công cụ –  Tạo ra website hữu dụng & tinh xảo

  Phạm vi sử dụng HTML5:

  PC

 

TỔNG QUAN VỀ CÚ PHÁP HTML5

  Ngôn ngữ HTML5 giới thiệu một số thẻ/ thành phần mới giúp cấu trúc trang web được logic thiết thực hơn

< < header /

header

header

  Tên của thành phần mới dựa theo tên các thành

phần thông dụng được sử dụng trong phần bố cục trang web hiện nay (div id="footer",div

id="nav", )

  Tác dụng của các thành phần mới trong HTML5:

  Giảm bớt sự phụ thuộc vào thẻ <div>

  Thay thế bởi một cấu trúc trang web thống nhất, dễ đọc hơn

vào danh sách hiện có

MỘT SỐ THÀNH PHẦN MỚI CỦA

HTML5

  Một số thành phần mới:

THÀNH PHẦN MỚI CỦA HTML5

  <canvas>:

  Cung cấp các tính năng vẽ và hoạt hình

  Làm việc giống như một bảng vẽ trên trang web

  Có thể thêm các mã JavaScript hoặc các tính năng

tạo ra trên bảng vẽ di chuyển, biến mất, thay đổi tỷ

lệ,

  Lưu hình ảnh vừa vẽ dưới dạng png

  Khai báo <canvas>:

THÀNH PHẦN MỚI CỦA HTML5

  Web form:

  Thành phần form mới trong HTML khi được thực thi

sẽ giúp quá trình làm việc với các form trở nên dễ

dàng hơn so với hiện tại

<input type="email" required>

  Một số thành phần mới khác:

  <figure>, <figurecaption>: gán nhãn (hoặc chú thích ảnh) cho các hình ảnh trên trang web

  <hgroup>: nhóm một tập các thành phần vào một thành phần hợp lý

  …

TỔNG QUAN VỀ HTML5 API

  API (Application Programming Interfaces – giao diện lập trình ứng dụng):

  Là cách tạo ra các ứng dụng sử dụng các thành phần được dựng sẵn

  Không chỉ được áp dụng trong phát triển web mà

còn cả với các ngôn ngữ kịch bản

  Mục đích chính của API là để chuẩn hóa cơ chế làm

  Một số HTML5 API: Drag and Drop, Web storage,

Microdata,và Geolocation

TỔNG QUAN VỀ HTML5 API

  API Geolocation:

  Giúp xác định vị trí địa lý của trình duyệt web

  Thông tin này được sử dụng để gửi dưới dạng dữ

liệu liên quan dựa trên vị trí

  Geolocation hiện tại đang được kích hoạt trong một

số trình duyệt hiện đại

  Ví dụ : flickr.com/map

  Cải tiến cookie của trình duyệt

các nhà thiết kế để có thể sử dụng

  Web storage nâng cấp mô hình này để cung cấp

không gian lưu trữ lớn hơn cho các ứng dụng web hiện đại

sessionStorage

CSS3

  CSS3 không phải là một thành phần của HTML5,

nhưng lại có mối liên quan mật thiết với HTML5

  CSS3 được phát triển song song với HTML5

  Web font: @font-face

  HTML5 cung cấp các thành phần mới, dựa theo tên các thành phần thông dụng được sử dụng trong

phần bố cục trang web: footer, nav, section, article, aside, footer

  Một số thành phần mới của HTML5: <video>,

  CSS3 không phải là một thành phần của HTML5,

nhưng lại có mối liên quan mật thiết với HTML5

WEB302_ HTML5 & CSS3 Lab1

1

Bài thực hành số 1 – Những khái niệm

đầu tiên về HTML5

Chú ý chung với toàn bộ các buổi lab:

- Toàn bộ bài tập trong các buổi lab, bắt buộc sinh viên phải viết mã bằng tay, sử dụng một trong các chương trình soạn thảo mã sau:

Bài 1

<Bài tập này bắt buộc phải làm trước & nộp trước buổi thực hành>

Dựa vào SGK & tài liệu Internet, trình bày theo cách hiểu của mình về những điểm mới nổi bật nhất của HTML5 (không cần thiết phải viết theo dạng bài luận, có thể viết theo dạng gạch đầu dòng)

Sinh viên nộp file theo tên:noteHTML5.doc

WEB302_ HTML5 & CSS3 Lab1

Chú ý:

- Kích thước khai báo chuẩn theo hình sau:

- Định nghĩa trong file common.css cho thành phần <h1> như sau:

Sinh viên nộp file theo tên sau:

- index.html

- common.css

Yêu cầu nộp bài

Cuối giờ thực hành, sinh viên tạo thư mục theo tên <Tên đăng nhập SV>_Lab2, chứa tất cả

sản phẩm của những bài lab trên, nén lại thành file zip và upload lên mục nộp bài tương ứng trên LMS.

Đánh giá bài lab

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

PHẦN FORM

  Làm việc với thành phần form mới trong HTML5

NGÔN NGỮ Đ ÁNH DẤU HTML5

  Cú pháp HTML5 rất mở:

  Không phân biệt kiểu chữ in hoa, in thường

  Các phần tử không bắt buộc phải có thẻ đóng

  Không bắt buộc phải có dấu nháy kép cho thuộc tính

<H1> Đoạn tiêu đề 1</h1>

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

<img src=imageone.jpg alt=landscape>

  Cấu trúc file mã HTML5:

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

"hOp://www.w3.org/TR/html4/

  Vùng mã nội dung (content) HTML5

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

các tài liệu HTML

  Thường chứa các từ khóa hoặc mô tả cho trang web, và được các bộ máy tìm kiếm sử dụng để phân loại trang web

  Được đặt trong thành phần <head>

  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

  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

  Trong HTML5 có thể sử dụng phần tử này nhiều lần

< header >

<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

< section id="introduction-content">

<p><small>&copy;

copyright 2038 </small></p>

</ section >

  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

< /aside

< aside

< /aside

  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

<

< /footer

FORM VỚI HTML5

  Các thành phần mới của form HTML5 bổ sung thêm chức năng mà các nhà thiết kế cũng như các nhà

phát triển web thường phải kết hợp thông qua các phương tiện khác như JavaScript và Flash

  Cách làm việc của form

Tương tác

POST/ GET

Trả về

FORM VỚI HTML5

  Cấu trúc mã form:

  ID: cho phép định kiểu form với CSS

  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>

  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>

  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>

  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ú pháp của HTML5 mở hơn các phiên bản trước: không phân biệt chữ in hoa – thường, không bắt

buộc phải có thẻ đóng, không bắt buộc phải có dấu nháy kép cho thuộc tính

  Cách khai báo của HTML5 đơn giản, rút gọn hơn rất

html>, <input>,

  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

WEB302_ HTML5 & CSS3 Lab2

1

Bài thực hành số 2 – Khởi tạo, làm việc

với mã HTML5 & thành phần Form

Chú ý chung với toàn bộ các buổi lab:

- Toàn bộ bài tập trong các buổi lab, bắt buộc sinh viên phải viết mã bằng tay, sử dụng một trong các chương trình soạn thảo mã sau:

Bài 2

Sử dụng kiến thức được học về cấu trúc mã lệnh, kiểm tra mã HTML5, hãy kiểm tra những lỗi không theo chuẩn HTML5 có trong file TaiNguyen\Lesson02\index.html & common.css

1 Sinh viên sử dụng cách comment trong HTML để đánh dấu những chỗ sai

2 Sửa lại những lỗi sai đó theo đúng chuẩn HTML5

Sinh viên lưu file theo tên: index_done.html

Bài 3

Sử dụng layout đăng ký thành viên trong thư mục TaiNguyen\Lesson03\register.psd để thực hiện dàn theo chuẩn HTML5 cho trang đăng ký

WEB302_ HTML5 & CSS3 Lab2

3

Yêu cầu:

- Độ tuổi trung bình chạy từ 18  45, giá trị mặc định là 20

- Sử dụng datalist cho tùy chọn thành phố (tên thành phố sinh viên tùy ý nhập, ít nhất 5 thành phố)

- Yêu cầu phải có validator kiểm tra tính hợp lệ của các input khi nhấn nút sự kiện “Đăng ký”

Sinh viên lưu file theo tên: register.html

Yêu cầu nộp bài

Cuối giờ thực hành, sinh viên tạo thư mục theo tên <Tên đăng nhập SV>_Lab3, chứa tất cả

sản phẩm của những bài lab trên, nén lại thành file zip và upload lên mục nộp bài tương ứng trên LMS.

BÀI 3 LÀM VIỆC VỚI JAVASCRIPT VÀ JQUERY

MỤC TIÊU BÀI HỌC

  Tổng quan về Javascript và Jquery

  Làm việc với Javascript

  Làm việc với thư viện Jquery

  Học Javascript, jQuery với w3schools

  Thường được nhúng trực tiếp vào trang HTML

  Sử dụng rộng rãi, không cần bản quyền

  Javascript có thể làm được gì?

  Cung cấp cho nhà thiết kế HTML công cụ lập trình

  Phản ứng được với các sự kiện, ví dụ: trang web vừa load xong, sự kiện nhấn chuột, …

  Có thể đọc, thay đổi nội dung của phần tử HTML

  Xác nhận dữ liệu, ví dụ: dữ liệu đầu vào

  Phát hiện trình duyệt của người dùng

  Được sử dụng để tạo ra các cookie

LÀM VIỆC VỚI JAVASCRIPT

  Khai báo javascript:

  Sử dụng cặp thẻ <script>…</script> để chèn

javascript vào trang HTML

  Trong cặp thẻ chứa các thuộc tính để xác định ngôn ngữ kịch bản

  Mã javascirpt được thực hiện bởi trình duyệt

LÀM VIỆC VỚI JAVASCRIPT

  Câu lệnh javascript:

  Được thực hiện bởi trình duyệt

  Thực hiện theo thứ tự câu lệnh

tố đầu tiên với ID xác định

document.getElementById("demo").innerHTML="Hello Dolly";

document.getElementById("myDIV").innerHTML="How are you?";

LÀM VIỆC VỚI JAVASCRIPT

  Lệnh javascript được nhóm lại trong dấu { } để các chuỗi lệnh thực hiện cùng nhau

function myFunction() {

document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?";

}

  Truy vấn tới mã lệnh javascript:

•  Thực hiện khai báo hàm js

•  Gán hàm đó với một sự kiện trong HTML

LÀM VIỆC VỚI JAVASCRIPT

  Sự kiện trong javascript:

•  Là hành động được phát hiện bởi javascript

•  Tất cả các yếu tố trên trang web đều có sự kiện được kích hoạt bởi javascript

•  Các sự kiện được thường được sử dụng kết hợp với các chức năng, và các chức năng sẽ không được thực hiện trước khi sự kiện xảy ra!

•  Một số sự kiện: onMouseOver, onSubmit, onFocus, onBlur, onChange, onClick, …

  Biến trong javascritpt:

  Được sử dụng để giữ các giá trị hoặc biểu thức

  Một biến phải được gắn tên (ví dụ: x, orderlist, …)

  Quy tắc đặt tên biến:

•  Bắt đầu bằng chữ cái, các ký tự hoặc ký tự gạch dưới

•  Tên biến phân biệt chữ hoa và chữ thường (ví dụ: x và

LÀM VIỆC VỚI JAVASCRIPT

  Javascript framework:

  Là giải pháp tốt nhà thiết kế

  Cung cấp một số thư viện có sẵn

  Bao gồm các hàm đã được xây dựng và kiểm tra bởi nhà thiết kế và phát triển

  Bao gồm nhiều hàm có sẵn và sử dụng được ngay

JQUERY

  Là thư viện mới của javascript

  Dễ dàng tiếp cận đối với người thiết kế

  Thư viện JQuery làm việc với thành phần sau:

  Khai báo jQuery:

  Download Jquery: hiện tại có 2 phiên bản JQuery

<script type=“text/javascript” src=“ jquery.js”></script>

http://docs.jquery.com/Downloading_jQuery#Download_jQuery