Thiết kế và xây dựng website bán hàng mỹ phẩm

- Thuộc tính luôn luôn được chi định trong thẻ mờ.- Thuộc tính của một phan tử HTML gồm 2 thành phần: • Tên: là tên cúa thuộc tính • Giá trị: là những gi mà bạn muốn gán cho thuộc tính v

VIỆN ĐẠI HỌC MỞ HÀ NỘI

KHOA CÔNG NGHỆ ĐIỆN TỬ - VIÊN THÔNG -

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

ĐÈ TÀI: “THIẾT KÉ VÀ XÂY DỤNG WEBSITE

BÁN HÀNG MỸ PHÁM

THS QUÁCH THỊ HẠNH NGUYÊN THỊ LOAN K16A

2013-2017 ĐẠI HỌC CHÍNH QUY

Hà Nội, Tháng 5 năm 2017

JVjff Ạ

Giáo viên hướng dẫn

Sinh viên thực hiện

Lóp

Khóa

Hệ

thành thói quen hàng ngày của nhiều người.

Giờ đây, thương mại điện tử đã khăng định được vai trò xúc tiến và thúc

phát triến cùa doanh nghiệp Đối với một cửa hàng hay một công ty, việc

giới thiệu đến khách hàng các sàn phấm mới đáp ứng được nhu cầu của khách

là cần thiết Vậy phải quảng bá thế nào đó là xây dựng được một Website chocừa

hàng của mình quãng bá tất cà các sán phẩm của mình bán

Đế hiểu kỹ hơn về một website thương mại điện tứ nên em chọn đề tài:

Nội dung bao đồ án gồm có 4 chương:

Chương 1: Cơ sở lý thuyết

Chương 2: Phân tích các chức năng của website

Chương 3: Thiết kế website

Chương 4: Tổng kết

em trong suốt quá trình làm báo cáo thực tập.

Em xin chân thành gửi lời cảm ơn đến toàn thể các thầy cô giáo trong KhoaĐiện

tử - Thông tin Trường Viện Đại Học Mớ Hà Nội đã cung cấp cho em đầy đù

thức về chuyên môn cũng như các kinh nghiệm trong cuộc sống hàng ngày

thời gian qua

Tuy nhiên, vì thời gian có hạn cũng như kiến thức và kinh nghiệm thực tiễn

SINH VIÊN THỤC HIỆN

Nguyền Thị Loan

MỤC LỤC DANH MỤC BẢNG

DANH MỤC HÌNH

DANH SÁCH CÁC THUẬT NGŨ VIÉT TẤT

CHƯƠNG 1: CO SỎ LÝ THUYẾT 1

I GIỚI THIỆU CHUNG 1

1 Khái niệm Website 1

2 Tên mien (Domain) 1

3 Hosting 3

4 Mã nguồn (source code) 5

5 Phân loại Website 5

II TÌM HIÉU VÈ CÁC NGÔN NGŨ LẬP TRÌNH WEB 7

ỉ Tìm hiểu về HTML 7

2 Tìm hiểu về css 16

3 Tìm hiếu về Javascrip 17

4 Tìm hiếu về ngôn ngữ lập trình PHP 31

III HỆ CO SỞ DŨ LIỆU MYSQL 41

1 Các khái niệm cơ bản 41

2 Các kiêu dữ liệu 41

3 Các lệnh thao tác với CSDL 43

4 Các câu lệnh truy vẩn dữ liệu 45

5 Kết họp PHP và MYSQL trong ứng dụng website 45

IV QUY TRÌNH THIÉT KẾ MỌT WEBSITE 46

/ Quy trình thiết kế website 46

2 Cách thức xuất bản website 47

3 Lựa chọn và mua tên miền 47

4 Lựa chọn và thiết lập web server 48

5 Upload website 48

6 Cập nhật và chỉnh sửa website 48

7 Quáng bá 48

8 Báo trì 49

CHƯƠNG 2: PHÂN TÍCH CÁC CHỨC NĂNG CỦA WEB 50

I GIỚITHIỆUCHUNGVÈWEBSITE 50

1 Mục tiêu 50

2 Yêu cầu 50

II. CHÚCNÀNGWEBSITE 51

ĩ Những chức năng cơ hán của website 51

2 Sơ đồ phân cấp các chức năng 52

CHƯƠNG 3: THIẾT KÉ WEBSITE 58

I CÔNG CỤ HÒ TRỌ THIẾT KÉ WEBSITE 58

II THIÉTKẾCƠSƠDŨ LIỆU 59

7 Tạo cơ sở dữ liệu 59

2 Thiết kế giao diện 61

CHƯƠNG 4: TÓNG KẾT 70

TÀI LIỆU THAM KHẢO 71

DANH MỤC BẢNG

Bảng 1: các the nhóm inline 13

Bảng 2: thuộc tính của the <frameset> 14

Bãng 3: thuộc tính của thẻ <frame> 15

Bảng 4: thuộc tính của thẻ <table> 15

Bảng 5: thuộc tính của thẻ <tr> 16

Bảng 6: thuộc tính của thẻ <td> 16

Bảng 7: các ký tự đặc biệt và ý nghĩa củatrong javascript 20

Băng 8: các thuộc tính của mảng 26

Bảng 9: các thuộc tính của đối tượng math 28

Bảng 10: các phưong thức của đối tượng math 28

Bảng 11: các phưong thức của đối tượng string 30

Bảng 12: các nhóm phưong thức của đốitượng date 30

Bảng 13: các kiểu dữ liệu số của mysql 42

Bảng 14: các kiểu dữ liệu string cua mysql 43

Bảng 15: các kiểu dữ liệu ngày tháng của mysql 43

Bảng 16: các thuộc tính của the cột trong mysql 44

DANH MỤC HÌNH

Hình 1: cây phân cấp đối tưọTig 27

Hình 2: quá trình thông dịch trang php 31

Hình 3: sơ đồ luồng dữ liệu ngữ cảnh 52

Hình 4: sơ đồ phân cấp chức năng cho khách hàng 53

Hình 5: SO’ đồ phân cấp chức năng của cho quảntrị viên 55

Hình 6: kết nối các bảng trong cơ sở dữ liệu 59

Hình 7: bảng danh mục săn phẩm 59

Hình 8: bảng sản phấm 60

Hình 9: bảng thông tin và nội dung lien hệ cua khách hàng gửi tói cửa hàng 60

Hình 10: bảng tin tức 60

Hình 11: bảng đon hàng 61

Hình 12: bảng thông tin đăng kí của thành viên 61

Hình 13: trang chủ 62

Hình 14: khi trang chủ cuộn lên 62

Hình 15: trang sản phẩm 63

Hình 16: trang chi tiết sản phẩm 64

Hình 17: trang giỏ hàng 64

Hình 18: trang đặt hàng 65

DANH SÁCH CÁC THUẬT NGỮ VIẾT TẮT

WWW World Wide Web

HTTP HyperText Transfer ProtocolHTTPS Hypertext Transfer Protocol SecureHTML HyperText Markup LanguageDHTML Dynamic HyperText Markup LanguageASP Active Server Pages Perl

CMS Content Management System

CGI Common Gateway Interface

XHTML Extensible Hypertext Markup LanguageURL Unform Resource Locator

DNS Domain Name System

PHP Hypertext Preprocessor

CSDL Cơ Sớ Dừ Liệu

CSS Cascading Style Sheets

SQL Structured Query Language

CHƯƠNG 1: CO SÒ LÝ THUYẾT

I GIỚI THIỆU CHUNG

1 Khái niệm Website

Website là một tập hợp các trang web bao gồm văn bán, hình ảnh, video, màthông thường nó chi nằm trong một tên miền hoặc tên miền phụ được quán lý trênWorld Wide Wcb(WWW) cùa internet Một trang wcb bao gồm nhều tệp tin HTMLhoặc XHTML có thể truy nhập bằng giao thức HTTP, HTTPS

Website có the được xây dựng từ các tệp tin HTML( trang mạng tĩnh) hoặc vậnhành bằng các CMS chạy trên máy chú(trang mạng động) Website có thế được xâydựng bằng nhiều ngôn ngữ khác nhau (PHP,.NET, Java, Ruby and Rails, )

Hiện nay, đế một Website có thể vận hành trên môi trường WWW,cần bắt buộcphải có 3 phần chính:

- Tên miền (Domain)

- Hosting

- Mã nguồn (Source code)

2 Tên mien (Domain)

Tên miền chính là địa chi website, là một chuỗi các ký tự trong bảng Alphabetđược sắp xếp giống như tên riêng và có hoặc không có ý nghĩa

2.1 Cấu tạo của tên miền

Tên miền bao gồm nhiều thành phần cấu tạo nên cách nhau bời dấu (.)

Ví dụ: abc.com.vn

- Thành phan thứ nhất “abc” là tên miền cùa máy chủ

- Thành phần thứ 2 “com” thường gọi là tên miền thứ 2(second domain namelevel) đối với các quốc gia noi chung tên miền mức 2 này do tổ chức quản lýcủa quốc gia đó định nghĩa, có thê định nghĩa khác đi nhiều hay ít

- Thành phần cuối cùng “vn” là tên miền ở múc cao nhất (top level domain ) baogồm các mã quốc gia của nước tham gia internet được quy định bàng 2 chữ cáitheo tiêu chuẩn ISO-3166 như Viêt Nam là VN, Mỹ là us, và các linh vựcdùng chung

4- Dùng chung

- COM: thương mại(COMmercial)

- NET: Mạng lưới (NETwork)

- ORG : Các tổ chức(ORGnizations)

- INFO: Thông tin(INFOmation)

- EDU: Giáo dục(EDUcation)

- M0B1: Điện thoại di động

4- Dùng ớ Mỹ

- MIL: Quân Sự (MILitary)

- GOV: Nhà nước (Government)

2.2 Tính chất cơ bản của một tên miền

- Tên miền là duy nhất và được cấp phát cho một chủ thổ nào đăng ký trước

- Tên miền bắt buộc phái có phần tên và phần đuôi

- Tên miền không được vượt quá 63 (ký tự bao gồm cã phan đuôi)

- Tên miền chi bao gồm các ký tự trong bảng chữ cái (a-z) các số(0-9) và dấu(-).Khoáng trắng và các ký tự đặc biệt khác đêu không hợp lệ

- Không bắt đầu hoặc kết thúc tên miền bàng dấu (-)

- Tên miền không cần bắt đầu bằng http:// hoặc WWW hay http://www

2.3 MỘÍ số khái niệm khác liên quan đến tên miền

URL ( Unform Resource Locator ) được dùng đê tham chiểu tới tài nguyên trênInternet URL tạo nên khả năng siêu liên kết cho Website Mồi tài nguyên khác nhaulưu trữ trên internet được tham chiếu tới bàng địa chỉ, đó chính là URL

■ Một URL gồm nhiều phần được liên kết với nhau:

■ URL scheme là tên giao thức ( ví dụ:http,ftp, )

■ Tèn miền ( abc.com.vn)

■ Chi định thêm cổng ví dụ: 80,8080,443, (có thể không cần)

■ Đường dẫn tuyệt đối

miền sẽ được cùa nó chuyền đến một địa chỉ 1P và sẽ báo cho máy tính biết và tìm đến website.

Hosting ( hay Web hosting) là không gian trên máy chú dùng đế chứa file, dữ liệu,nội dung cùa một website Đế hoat động, website cần được lưu trữ trên một máychũ(Server) kết nối mạng Internet và hoạt động 24/2411 mỗi ngày

Có 3 loại hình web hosting thường được dùng :

- Windows hosting: dựa và nền tảng hệ điều hành window của Microsoft

- Linux hosting : dựa vào nền tàng hệ điều hành linux

- Email hosting

- 1 Các loại hosting

■ Shared hosting (chia sẻ)

Là một dịch vụ lưu trữ rất nhiều trang web trên một máy chú kết nối Internet Mỗitrang wcb được lưu trữ ở một phân vùng riêng của mình

■ Free web hosting

Là dịch vụ lưu trừ miễn phí Thường được quáng cáo hồ trợ Free web hostingservice thường sc cung cap một ten mien phụ hoặc một thư mục phụ Ngược lại, dịch

vụ này sẽ cung cấp một tên miền cấp thứ 2 cùng với các máy chủ Nhiều máy chủmiễn phí sẽ không cho phép sử dụng nhiều tên miền riêng

■ Reseller hosting

Là một hình thức lưu trữ cúa máy chù web mà chủ sở hữu tài khoán có khải năng

sử dụng tài khoán của mình để phân bố lại ồ cứng lưu trừ và băng thông để lưu trữ cáctrang web này

■ Email hosting

Là dịch vụ thư điện tử đặc biệt khác với dịch vụ email miễn phí hồ trợ email haywebmail miền phí Email hosting cho phép tùy chinh cấu hình và số lượng lớn tàikhoản

■ Video hosting

Là dich vụ lưu trữ cho phép các cá nhân tài lên các video vào một trang web Sau đó

sẽ lưu trữ video trên máy chú cho phép người khác có the xem video

■ Image hosting

Là dich vụ lưu trữ cho phép các cá nhân tải lên các hình ảnh vào một trang web Sau

đó sẽ lưu trừ hình ánh đó trên máy chủ cho phép người khác có thế xem hình ánh

■ VPS hosting (Virtual Private Server - máy chủ riêng áo)

Là một phương pháp phân vùng một máy chủ vậy lý thành máy tính nhiều máychú áo, trên mỗi máy ào được cài một hệ điều hành như một máy chú thật

■ Dedicated server (máy chủ riêng)

Là máy chủ vật lý dành riêng cho việc lưu trừ website

■ Adult hosting

- 2.Cắc tính năng của hosting

- Tốc độ: một máy chủ chạy dich vụ web cần phải có cấu hình đủ lớn đế đám bảo

sử lý thông suốt, phục vụ cho so lượng lớn người truy cập phải có đườngtruyền kết nối tốc độ cao đe đảm bảo không bị nghẽn mạch dữ liệu

- Dung lượng: Dung lượng của hosting là khoảng không gian bạn được phép lưutrừ dữ liệu trên ổ cứng của máy chủ Đe lưu trừ được đầy đú các thông tin, dữliệu, hình ảnh,., cùa website Hosting cần phải có dung lượng đú lớn (một vàiGB)

- Băng thông: Băng thông của hosting là lượng dữ liệu trao đối giữa web vớingười dùng trong 1 tháng Nó phái đú lớn để phục vụ các hoạt động giao dịch,trao đổi thông tin giữa web với người sử dụng

- Phải hồ trợ truy xuất máy chủ bang giao túc FTP đề truy cập thông tin

- HỖ trợ các ngôn ngừ lập trinh, cơ sở dừ liệu hoặc các công cụ có sẵn đế phụccác hoạt động trên web.

- Có giao diện quản lý để dề dàng quàn lý, cac tài khoăn FTP, Email,

- Phải thường xuyên được chăm sóc, báo dưỡng nhằm tránh các rủi ro và khắcphục kịp thời

4 Mã nguồn (source code)

Website cần được lập trình đế hiện thị hoặc xứ lý thông tin cho người dùng Việclập trình sẽ sử dụng các câu lệnh, truy xuất CSDL, xử lý và hiến thị cho người dùngtrên trinh duyệt Tập hợp những câu lệnh này được gọi là mã nguồn (source code)

Có rất nhiều ngôn ngữ lập trình được sử dụng đe lập trình website Phố biến nhất

mà chúng ta thường gặp là: HTML/CSS, PHP, ASP, ASP.NET Trong đó HTML/CSS

là 2 ngôn ngữ cơ bàn tạo nên giao diện của một website, nó có thế tạo ra các trang webtĩnh Các ngôn ngừ còn lại thường dùng đế lập trình kết nối CSDL và xử lý các yêucầu cao hơn; cần phải kết hợp với HTML/CSS, và thường đi kèm cả với Javascript đếtạo ra giao diện người dùng (frontend)

Từ các ngôn ngữ lập trình cơ bản trên, hình thành các Framework với nhiều thư viênđược xây dựng sằn Các Frameword giúp người lập trinh tiết kiệm nhiều thời giantrong việc xây dựng website Các PHP Framework phố biến gồm: Codeigniter,CakePHP, Yii Framework, Zend Framework,

5 Phân loại Website

Có 2 loại website : - Website tĩnh

- Website động

5.1 Website tĩnh

Website tĩnh là những web chi bao gồm các trang web tĩnh và không có cơ sở dữliệu đi kèm Tức là người dùng không có khả năng tương tác, không thế chinh sửahoặc thay đổi dữ liệu được

- Web tĩnh thường được xây dựng từ css, HTML, Javascript(DHTML Dynamic HTML),

Dùng đế thiết kế các trang web có nội dung ít cần thay đổi và cập nhật

- Nó chi bao gồm các trang wcb tĩnh và không có cơ sở dữ liệu đi kèm

- Web tình thích hợp với cá nhân, tồ chức, doanh nghiệp vừa và nhở mới làmquen với môi trường internet.

4- ưu điếm:

- Thiết kế đồ họa đẹp:

- Tốc độ truy cập nhanh:

- Thân thiện hơn với máy tim kiếm

- Chi phí đầu tư thấp:

4- Nhược điềm:

- Khó khăn trong việc thay đối và cập nhật thông tin

- Khó nâng cấp báo tri

- Mỗi khi thay đổi phải vào file HTML,css hoặc Javascrip để chỉnh sửa

5.2 Website động

Website động là web có cơ sở dữ liệu và được hồ trợ bởi các phần mềm phát triềnweb thống qhuán lý nội dung nên người dùng có thể chinh sứa hoặc thay đổi nộidung được

Thông tin hiến thị ớ web động được gọi là một cơ sở dừ liệu khi người dùng truyvấn tới một trang wcb

Web động được phát triến bằng các ngôn ngữ lập trình PHP, ASP, ASP.NET, Java,CGI, Perl, và sử dụng các cơ sở dừ liệu như Access, My SQL, MS SQL, Oracle, DB2

4- Ưu điếm:

- Dễ dàng quàn lý nội dung

- Dễ dàng nàng cấp và báo trì

- Tương tác với người sữ dụng cao

- Có thể xây dựng được web lớn

- Hiện nay vần SEO tốt bới ta có thế sử dụng chúc năng Rewrite URL đề chuyênURL thân thiện

4- Nhược điềm:

- Chi phí xây dựng cao

- Khi web lớn cần nhiều người để quàn lý

GVHD: THS QUÁCH THỊ HẠNH

11 TÌM HIẾU VÈ CÁC NGÔN NGŨ LẬP TRÌNH WEB

Website thương mại là một trang web động với mã nguồn được viết bằng cácngôn ngữ PHP,ASP.NET, HTML, và trang web đó có kết nối hệ cơ sờ dữ liệu, cóthế cập nhật dừ liệu, truy xuất dừ liệu thường xuyên

Đề thiết kế một website hoàn chinh nó được hình thành bời :

- HTML: Xây dựng cấu trúc và định dạng siêu văn bản

- CSS: Định dạng các siêu văn bản được tạo ra từ HTML ở dạng thô thành một

bố cục website, có màu sắc có ãnh,

- Javascript: Tạo ra các sự kiện tương tác với hành vi của người dùng

- PHP: Ngôn ngữ lập trình đế xử lý và trao đối dữ liệu giữa máy chủ đến trinhduyệt Là ngôn ngữ lập trình được dùng phố biến ngoài ra còn một số ngôn ngữnhư ASP, ASP.NET, Java, CGI, Perl,

- MySQL: Hệ quản trị cơ sờ dữ liệu truy vấn có cấu trúc

1 Tìm hiểu về HTML

HTML( Hyper Text Markup Language) là ngôn ngữ đánh dấu siêu văn bán đượcthiết kế ra để tạo nên các trang wcb Dùng đế định dạng bố cục, các thuộc tính liênquan đến cách hiến thị của một trang Là một tập hợp các thẻ đánh dấu

Các lênh HTML được gọi là các thẻ Các thẻ này được dùng để điều khiển nội dung

và hình thúc trinh bày cùa tài liệu HTML Đe bắt đầu một câu lênh ta dùng thè mớ

- Value : giá trị được thiết lập cho thuộc tính

1.1 Các thuộc tính của the HTML

Thuộc tính của tác động lên nội dung của văn bàn Được sử dụng để xác định đặctrưng cũa một phần tứ HTML

- Một phần tử HTML có thế không có hoặc có nhiều thuộc tính

- Thuộc tính luôn luôn được chi định trong thẻ mờ.

- Thuộc tính của một phan tử HTML gồm 2 thành phần:

• Tên: là tên cúa thuộc tính

• Giá trị: là những gi mà bạn muốn gán cho thuộc tính và được đặt trongcác trích dẫn

Tên và giá trị của thuộc tính không phân biệt chừ hoa hay chữ thường

- Quy tắc viết thuộc tính:

<tên thẻ tên thuộc tính=“giá trị”> Nội dung </tên thẻ>

Các thuộc tính cơ bản có thể sử dụng trong bất kì phần tử nào của HTML:

4- Thuộc tính id

Quy định một định dạng duy nhất cho một the HTML Phải tuân theo luật:

• Phải chứa ít nhất 1 kí tự

• Không có khoảng trắng

• Không phân biệt chữ hoa và chữ thường

Cú pháp: <tên thẻ id= “tên id”> </tên thẻ>

Đế trang trí nội dung hiển thị ngay trên thẻ các tên các class

Cú pháp : <tên thẻ style= “ định nghĩa các kiểu trang trí”>

4- Thuộc tính class

Thuộc tính class cho phép sừ dụng một hay nhiều class trên một thẻ Sử dụng dấu cách

đế phân cách giữa các tên các class Phái tuân theo luật:

• Bắt đau với kí tự chừ không phân biệt hoa hay thường

• Bao gồm ký tự(a-z,A-Z), số(0-9), gạch ngang (-) và gạchdưới(_)-

Cú pháp: <tên thẻ class= “tên>

1.2 Cấu trúc cơ bàn cùa HTML

Cấu trúc của HTML có dạng như sau, gồm 3 phần:

- <!Doctype>: phàn khai báo chuân của html

- <hcad></hcad>: phần đầu cùa html, khai báo về meta, title, css, javascript,

- <body></body>: phần thân chứa nội dung cúa trang web

1.3 Các thẻ định dạng cấu trúc tài liệu

4- Thẻ html

Một tài liệu HTML luôn được bắt đau bằng thè mở <html> và kết thúc bang thè

</html> Toàn bộ nội dung cúa tài liệu sẽ được đặt giữa cặp thẻ này

Có cú pháp như sau: <body>

Phần thân của văn bản

< hó> Tiêu đề 6 </h6>

4- Thé div (division - phân chia)

Thẻ div đế phân chia khu vực hay vùng, giúp cho trình duyệt hiêu rõ những vùng được

- <dl></dl>: (definition list) có nghĩa là xác định danh sách

- <dtx/dt>: (defines an item) có nghĩa là xác định một mục

- <dd></dd>: (defines describe an item) có nghĩa là xác định một mô tả của mộtmục

3 thẻ nay phái luôn tồn tại cùng nhau không thề thiếu 1 trong 3 thẻ

Có cấu trúc như sau:

* <olx/ol>: (ordered list) là danh sách có thứ tự

■ <lix/li>: (list item) là các mục cùa danh sách

■ <li></li>: (list item) là các mục của danh sách

• Nhóm thẻ inline nên được bao ngoài bời nhóm các thẻ block

• Những thẻ trong nhóm này có thế được lồng vào nhau

• Không được sir dụng các thè khác bên trong các thẻ inline

<a></a> Thê dùng đế tạo một liên kết từ tràn wcb này sang trang

web khác, tìr vị trí này sang vị trí khác hay dùng đế mờmột Project nào đó như word, Excel, có một thuộc tínhbắt buộc : href được dùng đe chi địa chi hay URL cúa tàiliệu hoặc file liên kết.Cú pháp:

<a href = “link liên kết”> Hypertext</a>

<img/> Dùng đế nhúng một ánh thông qua thuộc tính src, thè có 2

thuộc tính bắt buộc :

- src: chứa đường dẫn tham chiếu tới image-alt được sử dụng như một văn bán thay thẻ khi imagekhông hiển thị

<b></b> In đậm

<big></big> Tăng kích cỡ phông chữ

<code></code> Dùng để định dạng chữ hiện giống như mã cùa máy tính

<font></font> Quy định giao diện, kích cỡ, màu sắc cho chữ

<sX/s> Dùng đế gạch bỏ một đoạn văn bản

<small></small> Hiển thị một đoạn text nhỏ

<strong></strong> Nhấn mạnh

<textarea></textarea> Dừng để nhập nhiều dòng văn bàn

<var></var> Định nghía một biến

<abbr></abbr> Dùng đế mô tã mộ cum từ viết tắt

<basefont></basefont> Định dạng kích cỡ màu sắc font cho toan bộ text trong văn

bản

<br/> Xuống dòng trong một đoạn văn

<dfn></dfn> Dùng đế mơ tả một thuật ngữ

<em></em> Nhấn mạnh theo kiểu chữ nghiêng

 Hiến thị text lệch bên dưới

 Hiển thị text lệch bên trên

<span></span> Dùng đề nhóm một hay nhiều thẻ thuộc nhóm inline khác

nhau, nó không có ý nghĩa về mặt hiến thị, chi hồ trợ địnhdạng các inline thông qua css và javascript

<citex/cite> Dùng đế trích dẫn một câu nào đó

<dclx/dcl> Xác định vă bán bị gạch ngang

<inputx/input> Dùng cho người nhập thông tin hay chon thông tin, có các

thuộc tính như text, checkbox, password,

<ix/i> Kiếu chữ in nghiêng

<tt></tt> Xác định văn bán kiểu máy

<labelx/label> Định nghĩa cho thẻ <input>

<qx/q> Định nghĩa một đoạn trích dần ngan

<sampx/samp> Định nghía văn bán ngôn ngữ lập trình mẫu

<selectx/select> Tạo một danh sách lựa chọn

<bdo></bdo> dùng đế ghi đè lên dòng chữ hiện tại, có thuộc tính dir

<acronymx/acronym> Để chi một tên lược danh

Bảng 1: Các thẻ nhóm Inline

1.6 Thc <forin >

Thé form dùng để tạo một form trong HTML Đố thu thập thông tin từ người sửdụng như email, tên ,tuổi,

CÚ pháp: <form action= “Script URL’’ method= “GET|POST”>

Các phan tứ font, như input,textarea,

</fonn>

4- Các thuộc tính

- Action: ứng dụng quản trị backend sằn sàng sử lý từ dữ liệu người dùng

- Method: phương thức truyền tài dừ liệu.thường sử dụng GET và POST

- Accept: Thuộc tính này xác định danh sách các kicu MIME được máy chú nhận

ra, trong đó có chứa kịch bản (script) đế xử lý biểu mầu

Cú pháp: ACCEPT = ‘internet media type”

1.7 Frame

Trong HTML được sử dụng đế phân chia cứa sổ trình duyệt thành các khu vựckhác nhau, mồi khu vực tái một tài liệu HTML riêng Một tập hợp các Frame trongcứa số trinh duyệt được biết đen như là một Frameset

Thè <frameset> xác định cách chia cứa số thành các Framct thay thế cho thẽ chobody Thuộc tính rows trong thẻ này xác định chiều ngang của Frame, thuộc tính colsxác định chiều dọc của Frame Mỗi Frame được chi dần bời một thé <frameset> và nóxác định tài liệu nào sẽ được mở trong Frame

4- Thuộc tính cúa thẻ <frameset>

Cols Xác định số cột được chứa trong frameset và kích cỡ mồi cộtRows Xác định số hàng được chứa trong frameset và kích cỡ mỗi

hàngBorder(đường

viền)

Xác định độ rộng border của mồi frame

Frameborder Xác định border có được hiến thị giữa các frame hay khôngFramespacing Xác định khoảng cách giữa các frame trong frameset

Báng 2: thuộc tính của thẻ <frameset>

4- Thuộc tính của thé <frame>

Thuộc

Src File dược tài lên

GVHD: THS QUÁCH THỊ HẠNH

Name Tên của frame

Marginwidt

h xác định độ rộng của khoảng cách giữa bên trái và phải của Border

Frame với nội dung trong Frame Giá trị là pixel

Marginheig

ht

xác định chiều cao của khoảng cách giữa trên và dưới của BorderFrame và nội dung cùa nó Giá trị là pixel

Noresize ngăn cản người sử dụng đặt lại kích cờ

Scrolling điều khiến sự xuất hiện cùa thanh cuốn xuất hiện trên Frame Nó nhận

giá trị "yes", "no", hoặc "auto"

Longdesc cho phép cung cấp một đường link tới trang web khác chứa một sự

miêu tả dài trong nội dung cúa Frame

Bang 3: Thuộc tính của thẻ <frame>

1.8 Thẻ <table>

Thẻ <table> dùng đề tạo bảng Thẻ <tr> được sử dụng đề tạo các hàng và thẻ

<td> được sử dụng để tạo các ô

1.8.1 Thuộc tính của thẻ<table>

Bgcolor Định màu nề trên bảng

Border Định màu cho đường viền

Frame Hienr thị đường viền ngoài

Height Xác định chiều cao của báng

Rules Hiền thị đường viền trong bảng

Width Xác định chiều rộng cùa băng

Báng 4: Thuộc tính của thẻ <table>

1.8.2 Thuộc tính của thẽ<tr>

Thuộc

tính

Mô tảAlign,Vlign Căn chỉnh nội dung theo chiều ngang và dọc

Bordor Mở rộng ô qua nhiều cột

Colspan Định màu sẫm cho phần bóng của đường viền

Nowrap Giữ cho nội dung ô nằm trên một dòng

Rowspan Kéo dài ô xuống nhiều hàng

Width, heigh Định rõ kích thước ô

GVHD: THS QUÁCH THỊ HẠNH

“positive

2.1 Cú pháp css

Gồm 3 phần:

- Selector: trở đến những đối tượng (HTML) chịu ánh hường bởi css Đó có thế

là bất cứ the html nào

- Property (thuộc tính CSS): là thuộc tính quy định cho thẻ html

- Value (giá trị CSS): là các giá trị được gán cho các property

Javascript là một trong những ngôn ngữ lập trinh phố biến nhất thế giới, là ngôn ngữcho HTML,web, Server,PC, laptop, smart phone,

Có 2 cách nhúng javascript vào file HTML :

4- Cách 1: nhúng đoạn javascript vào trong file HTML

Ta sứ dụng the <script> đe chèn đoạn mã javascript vào bất kì nơi nào trong fileHTML

Cú pháp: <script language= “javascript”>

Mã nguồn javascript

</script>

Có 2 vị trí đe đặt thẻ <script>:

• Đặt trong cặp thẻ <head> .</head>

• Đặt trong cặp thẻ <body> </body>

4- Cách 2: viết javascript thành 1 file riêng có đuôi ,js và liên kết với HTML.

Sử dụng thẻ <script> với thuộc tính scr đế liên kết 1 file javascript vào HTML

Cú pháp: <script> language= “javascript”

Scr= “ đường dẫn tói file script.js”>

giá trị mới khi muốn xem, sử dụng hay thay đổi giá trị của biển, ta chi cần đồi tên của

biến Được khai báo bàng từ khóa “var”.

Các biến trong javascript phải tuân theo các qui ước đặt tên su:

- Tên biến phái được bắt đầu bằng một chữ cái, dấu gạch dưới hoặc một dấuđôla

- Các kí tự tiếp theo có thể là số hoặc chữ cái

- Javascript có phân biệt chữ hoa và chữ thường nên tên biến chứa chữ hoa vàchữ thường sẽ khác nhau

Hằng là những giá trị cố định được dùng trong javascript Giá trị cùa hằng không

bị thay đổi trong quá trình thực hiện script Hằng số chì đọc cùng vơi steen của nóbằng cách sử dụng từ khóa “const”

Tuân theo qui tắc sau:

- Tên biến phải được bắt đầu bằng một chữ cái, dấu gạch dưới

- Các kí tự tiếp theo có thế là số hoặc chữ cái

Neu không có từ khóa “const” thì nó sẽ được xem như là một biến Không thể khaibáo một hằng số có tên trùng với tên hàm hoặc biến trong cùng một phạm vi

3.3.3. Các kiếu dữ liệu trong javascript

Javascript la ngôn ngừ có tính định kiếu thấp, chúng ta không cần phải chì ra kiều dữkiệu khi khai báo biến, kiẻu dữ liệu sẽ được tự động chuyến thành kiểu phù hợp khicần thiết

GVHD: THS QUÁCH THỊ HẠNH

( 20 I

SVTH: NGUYÊN THỊ LOAN

Được dùng chỉ 2 điều kiện: đúng và sai

Miền giá trị của kiểu này chi có 2 giá trị: true và false

4- Kiểu chuỗi (string)

Một chuỗi chữ gồm không hoặc nhiều kí tự được đặt trong dấu ngoặc kép (“”)hoặcnháy đơn(‘’) Một chuồi phải được phân định bời các dấu trích dần cùng kiểu

Javascript sẽ tự động chuyến đối chừ thành một đối tượng chuỗi tạm thời, gọi làphương thức yêu cầu sau đó loại bó đối tượng string tạm

Các kí tự đặc biệt và ý nghĩa của nó trong javascript

\b Phim lùi (backspace)

\f Sang trang mới (from feed)

\n Sang dòng mới (new line)

\r Đưa con trỏ về đầu dong hiện tại

\t Cách một khoáng tab(tab)

Bảng 7: Các ký tự dặc hiệt và ý nghĩa của trong javascript

Muốn thêm kí tự đặc biệt vào trong chuồi ta đặt trước nó bằng dấu (\) backslash

5- Kiểu null

Kiểu null chì có duy nhất một giá trị null Nó có nghĩa là không có giữ liệu, thực hiệnchức nawhg là giữ chỗ trong biển với ý nghĩa là ở đó không có hữu dụng gi số 0 và 1xâu rỗng và null là các giá trị khác nhau

Các toán tử so sánh có thế được sử dụng cho các giá trị chuồi, toán tử nối (+)nối hai giá trị chuỗi với nhau, và trả về một chuỗi mới là sự hợp nhất của haichuỗi toán hạng.

Toán từ gán viết gọn += có thế cũng được sử dụng đê nối các chuỗi

Một số toán từ khác:

4- Toán tử điều kiện

Toán tử điều kiện là toán từ cùa javascript cần 3 toán hạng Toán tử có thế có 1 trong 2giá trị tùy thuộc vào điều kiện

Cú pháp: VariablcName=(condition) ? value 1: value2;

4- Toán từ dấu phầy

5- Chuỗi :định giá trị cùa một chuồi giá trị

6- Logic: định giá trị là true hay false

7- Đối tượng: định giá trị là một đối tượng

3.5 Các câu lệnh điều kiện

Một khối lệnh được sứ dụng đế nhóm các lệnh Các lệnh này được gọi là đồng cấp

và sẽ được nhóm lại bởi một cặp dấu ngoặc móc

Bên trong khối lệnh lại có thế lồng các khối lệnh khác Sự lồng nhau theo cách nhưvậy là không hạn che

3.5.2. Câu lệnh switch case

Câu lệnh switch được dùng đế thực hiện các khối lệnh khác nhau tùy vào nhữngtrường hợp khác nhau

- Vònglặp thực hiện lặp đi lặp lại cho đến khi điều kiện là false

- Vònglặp thực hiện lặp di lặp lại cho đen khi điều kiện là true

- Vònglặp thực hiện lặp đi lặp lại các lệnh theo một số lần nhấtđịnh

Câu lệnh for sẽ thực hiện các lệnh lặp đi lặp lại cho đến khi điều kiện là false, sốlần thực hiện vòng lặp thường được điều khiến thông qua một biến đếm

Cú pháp: For (lệnh khởi tạo;điều kiện;lệnh tăng) {statement}

- lệnh khơi tạo: được thục hiện duy nhất một lần và thường dùng để khởi tạo biến đếm

- lệnh điều kiện: điều kiện cùa vòng lặp

- lệnh tăng: thay đối biến đếm trong vòng lặp

- Các câu lệnh javascript định nghĩa hàm nằm trong dấu ngoặc móc{}

Cú pháp: Function tên hàm( danh sách đối số)

-//các câu lệnh cần thục hiện mỗi khi hàm được gọi Return giá trị cần trả về;

}

Trong javascript các hàm không thể long nhau

GVHD: THS QUÁCH THỊ HẠNH

Một hàm có thề dược gọi nhiều lần.

Có 2 cách gọi hàm:

4- Gọi hàm trực tiếp

Gọi hàm trực tiếp là ta đặt câu lệnh gọi hàm vào trực tiếp một vị trí nào đó trongchương trình, khi trình duyệt thực thi đến câu lệnh gọi hàm thi hàm sê được thực thi

5- Gọi hàm thông qua một sự kiện

Gọi hàm thông qua sự kiện là sẽ gám câu lệnh gọi hàm vào bên trong một sự kiện, khi

sự kiện xảy ra thì hàm sẽ được thực thi

Hàm isNaN ddingj giá trị một đối số đề xác định xem nó có phải là “NaN” (Not aNumber) hay không.

Cú pháp: isNaN(test Value)

- isNaN là giá trị cần định giá trị

4- Các hàm parselnt và parseFloat

Hai hàm này trả về một giá trị số khi cho đối số là một chuồi

Cú pháp: - Hàm parselnt: parselnt (str[,radix])

arrayObjectname=new Array(elemento, elementl, )

hay: arrayObjectname=new Array(array length)

với:

- arrayObjectnamc: là ten của đối tượng mới hoặc tên cùa đối tượng cósẵn Khi sử dụng các thuộc tính và các phương thức của Array, thìarrayObjectName là tên của đối tượng mảng mới

- elementO, element 1, : là một danh sách các giá trị cho các phần tửcùa mảng

- arraLength là độ dìa khởi tạo cùa mảng

Đồ gán các giá trị cho phần tử có thế gán giá trị cho một mảng bang cách gán cácgiá trị cho các phần tử đó

Đế truy cập đến các phần tử mảng ta truy cập bằng cách sử dụng số thứ tự(hay chỉsố) của phần tử đó.

3.8.3 Các thuộc tính của mảng

Constructo

r

Trà về một tham chiếu tới hàm mà tạo ra đối tượng đó

Index biểu diễn chi mục dựa trên zero cúa sự so khớp trong chuỗi

Input chi có mặt trong các màng được tạo bởi các so khớp Regular

Expression

Length Phản ánh số phan tử trong một mảng

Prototype cho phép bạn thêm các thuộc tính và phương thức tới một đối tượng

Bảng 8: Các thuộc tính của mảng

3.9 Các đối tượng CO' bản của javascript

Javascript được thiết kế trên mô hình nen tảng đối tượng đơn gián, một đối tượng làmột gói dữ liệu toàn diện, các thuộc tính (là các biến hoặc các đối tượng khác cảujavascript) dung đế ddingj nghĩa đối tượng và các phương thức(là các hàm kết hợp vớiđối tượng) tác động đen dữ liệu đều nam trong đối tượng

Đế truy cập đến các thuộc tính của đối tượng, ta cần phải chi ra tên đối tượng vàthuộc tính của nó:

objectName.propertyName

- objcctName: tên đối tượng

- propertyName: tên thuộc tính

Định nghĩa một thuộc tính bàng cách ta gán cho nó một giá trị

Để truy cập đen các phương thức cùa một đối tượng, chúng ta phải chỉ ra tên đốitượng và phương thức yêu cầu: objectName.method()

Khi tạo ra một trang Web, chúng ta có the chèn:

o Các đối tượng cùa trình duyệt

o Các đối tượng xây dựng sẵn cúa ngôn ngừ kịch bán được sử dụng

o Các phần tử HTML

GVHD: THS QUÁCH THỊ HẠNH

Hình 1: cây phân cấp đồi tượng

Khi tài liệu HTML được hiền thị trong trinh duyệt, một cây phân cấp đối tượngđược tạo ra dựa trên các phan tử trong trang Các đối tượng trinh duyệt chẳng hạn nhưvãn bán (document), cứa sổ (window), khung (frame), vị trí (location), nằm trêncùng cùa cây phân cấp đối tượng Sau đó là các đối tượng xây dựng sần củaJavaScript Các phan tử HTML nằm ở sau cùng và chính là các thè HTML tạo nên vănbàn hiện hành

Một số đối tượng được xây dựng sẵn trong Javascript:

• Math

• String

• Date

Đối tượng Math là một đối tượng được xây dựng sẵn có các phương thức và cácthuộc tính cho các hàm và các hàng số toán học

Math là một đối tượng JavaScript cấp cao Chúng ta có thế tự động truy xuất nó màkhông cần sử dụng một hàm dựng hay gọi một phương thức nào

LOHIOE Logarithm cơ số 10 của E

abs Trà về giá trị tuyệt đối cùa một số

acos Trả về arccos (theo radian) càu một số

asin Trá về arcsin(theo radian) cảu một số

atan Trả về arctang (theo radian) cảu một số

atan2 Trá về arctang cùa thương số của các đối số cùa nó

ceil Trả về số nguyên nhở nhất lớn hơn hoặc bàng một số

cos Trà về cos cùa một số

exp Trà về lũy thừa của số e với một số mũ nào đó

floor Trá về số nguyên lớn nhất nhỏ hơn hoặc bằng 1 số

log Trả về số logarithm tự nhiên (cơ số E)

max Trá về số lớn hơn trong hai số

min Trá về số nhở hơn trong 2 sổ

random Trà về một số giã ngẫu nhiên giữa 0 và 1

round Trà về giá trị của một số được làm tròn đến số nguycn gàn nhấtsin Trả về sin cùa một số

sqrt Trá về căn bậc 2 của một số

tan Trả về tan của một số

Bảng 10: Các phương thức của dối tượng math

GVHD: THS QUÁCH THỊ HẠNH

3.9.2 Đối tưọng string

Đối tượng String được dùng đế thao tác và làm việc với chuồi văn bân Có thếtách nó thành các chuỗi con và biến đối chuỗi đó thành các chuồi chữ hoa hoặc chữthường trong một chương trình

5- Các phương thức

Đối tượng String có hai kiểu phương thức:

• Kiểu trả về sự biến đồi trên bàn thân một chuồi như phương thức substringO vàtoUppcrCascO hay toLowcrCasc()

• Kiểu trả về một chuồi có dạng HTML như phương thức bold() và link()

Phương

thức

mô tảbig Tăng kích thước của một chuỗi văn bàn

blink Tạo hiệu ứng nhấp nháy cho chuồi

concat Nối 2 chuồi và trả về chuỗi mới

fontcolor Xác định màu của font chữ

italics In nghiêng

link Tạo siêu liên kết HTML

small Giảm kích thước cùa một chuỗi văn bản

strike Hiến thị chuỗi có đường gạch ngang ờ giữa

sub Hiển thị vãn bán dưới dạng chi số dưới

Substring,

substr

Trà về chuồi con cụ thể cùa một chuồi bàng cách chi ra chr số đầu vàchỉ số cuối, hoặc chì ra số đầu và độ dài chuỗi so con