Giáo trình Thiết kế web (Ngành: Công nghệ thông tin - Trung cấp) - Trường Cao đẳng Xây dựng số 1

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:123

Thêm vào BST

Báo xấu

4
lượt xem 2
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Giáo trình "Thiết kế web (Ngành: Công nghệ thông tin - Trung cấp)" được biên soạn với mục tiêu nhằm giúp sinh viên nắm được các kiến thức về: Kiến trúc của Internet, mô hình của các dịch vụ trên Internet và các thuật ngữ thông dụng trên Internet; công dụng của các thẻ HTML (ngôn ngữ HTML), ngôn ngữ XHTML và các loại profile của ngôn ngữ này; các bước trong việc xây dựng một website và các vấn đề cần lưu ý trong việc xây dựng website;... Mời các bạn cùng tham khảo!

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Giáo trình Thiết kế web (Ngành: Công nghệ thông tin - Trung cấp) - Trường Cao đẳng Xây dựng số 1

BỘ XÂY DỰNG TRƯỜNG CAO ĐẲNG XÂY DỰNG SỐ 1 GIÁO TRÌNH MÔN HỌC: THIẾT KẾ WEB NGÀNH: CÔNG NGHỆ THÔNG TIN ỨNG DỤNG PHẦN MỀM TRÌNH ĐỘ: TRUNG CẤP Ban hành kèm theo Quyết định số: 368ĐT/QĐ-CĐXD1 ngày 10 tháng 08 năm 2021 của Hiệu trưởng trường CĐXD số 1 Hà Nội, Năm 2021
TUYÊN BỐ BẢN QUYỀN Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm.
LỜI NÓI ĐẦU Giáo trình THIẾT KẾ WEB được biên soạn nhằm phục vụ cho giảng dạy và học tập cho trình độ Trung cấp ngành Công nghệ Thông tin ứng dụng phần mềm ở trường Cao đẳng Xây dựng số 1. THIẾT KẾ WEB là môn học chuyên ngành nhằm cung cấp các kiến thức về công nghệ thông tin, kỹ năng thiết kế, xây dựng một giao diện trang web cơ bản. Giáo trình THIẾT KẾ WEB do bộ môn Tin cơ sở gồm: TS.Đỗ Thị Xuân Thắm làm chủ biên đã và đang giảng dạy trực tiếp trong bộ môn cùng tham gia biên soạn. Giáo trình này được viết theo đề cương môn học thiết kế web, tuân thủ theo các quy tắc thống nhất. Ngoài ra giáo trình còn bổ sung thêm một số kiến thức mà trong các giáo trình trước chưa đề cập tới. Nội dung gồm 7 chương sau: Chương 1. Giới thiệu Internet và dịch vụ WWW Chương 2. Ngôn ngữ HTML Chương 3. Qui trình xây dựng website Chương 4. Cascading Style Sheet (CSS) Chương 5. JavaScript Chương 6. MySQL Chương 7. PHP Trong quá trình biên soạn, nhóm giảng viên Bộ môn Tin cơ sở của Trường Cao đẳng Xây dựng Số 1 - Bộ Xây dựng, đã được sự động viên quan tâm và góp ý của các đồng chí lãnh đạo, các đồng nghiệp trong và ngoài trường. Mặc dù có nhiều cố gắng, nhưng trong quá trình biên soạn, biên tập và in ấn khó tránh khỏi những thiếu sót. Chúng tôi xin được lượng thứ và tiếp thu những ý kiến đóng góp. Trân trọng cảm ơn! Hà Nội, ngày……tháng……năm……… Tham gia biên soạn 1. ThS. Đỗ Thị Xuân Thắm - Chủ biên
MỤC LỤC Chương 1: NHỮNG KHÁI NIỆM CƠ BẢN...................................................1 1.1. Giới thiệu Internet và dịch vụ WWW ..............................................1 1.2. Các thành phần của dịch vụ WWW ......................................................1 1.3. Giao thức HTTP ....................................................................................1 1.4. Định vị tài nguyên trên Internet ............................................................1 1.5. Các loại siêu văn bản và mô hình dịch vụ tương ứng ...........................1 Chương 2. Ngôn ngữ HTML ...........................................................................3 2.1. Giới thiệu ngôn ngữ HTML ..................................................................3 2.2. Các công cụ tạo trang web ....................................................................3 2.3. Cấu trúc của một trang web ...................................................................5 2.4. Định nghĩa thông tin chung của trang web ...........................................5 2.4.1 Cấu trúc chung của trang web .........................................................6 2.4.2 Cấu trúc của thẻ HTML ...................................................................6 2.5. Định nghĩa và định dạng các thành phần nội dung ...............................8 2.5.1 Các thẻ tiêu đề heading (h) ..............................................................8 2.5.2 Thẻ văn bản: ....................................................................................9 2.5.3 Thẻ pre trong HTML .....................................................................10 2.5.4 Thẻ liên kết a và địa chỉ tương đối – tuyệt đối và các loại liên kết ...........................................................................................................................11 2.5.5 Thẻ chèn hình ảnh IMG .................................................................12 2.5.6 Thẻ danh sách tuần tự (ol) và bất tuần tự (ul) trong HTML .........13 2.5.7 Thẻ với bảng (table).......................................................................14 2.6 Thẻ Form ..............................................................................................15 2.7 Thẻ div, span và phân loại các kiểu thẻ trong html ..............................16 2.8 Giới thiệu HTML5 ...............................................................................17 BÀI TẬP ........................................................................................................18 Chương 3. Qui trình xây dựng website ..........................................................38 3.1. Qui trình xây dựng một website ..........................................................38 3.2. Một số vấn đề cần lưu ý khi xây dựng website ...................................39 Bài tập ............................................................................................................39 Chương 4. Cascading Style Sheet (CSS) .......................................................44 4.1. Giới thiệu CSS .....................................................................................44 4.2. Các cách sử dụng CSS trong trang web ..............................................44
4.3. Các loại bộ chọn (selector) ..................................................................45 4.4. Một số thuộc tính CSS cơ bản .............................................................46 4.4.1 Thuộc Tính Cho Văn Bản Text .....................................................46 4.4.2 Thuộc tính border (đường viền) ....................................................46 4.4.3 Border và padding .........................................................................50 4.4.4 ........................................................................................................53 4.5. Tạo bố cục (layout) cho trang web ......................................................55 4.6. Mô hình khung (box model) ................................................................64 4.7. Một số lưu ý khi viết CSS ...................................................................64 Bài tập chương 4 ........................................................................................64 Chương 5. JavaScript và Document Object Model (DOM) ..........................72 5.1. Giới thiệu JavaScript ...........................................................................72 5.2 Các cách sử dụng JavaScript trong trang web......................................72 5.3 Ngôn ngữ JavaScript ............................................................................73 5.4 Lập trình hướng đối tượng trong JavaScript ........................................73 5.3. Ngôn ngữ JavaScript ...........................................................................73 5.4. Lập trình Hướng đối tượng trong JavaScript ......................................73 5.5. Mô hình đối tượng văn bản (DOM) ....................................................73 5.5.1 Khái niệm Dom .............................................................................73 5.5.2 Phân loại Dom ...............................................................................74 5.5.3 DOM selector ................................................................................74 5.5.4 Lấy nội dung trong Dom ...............................................................76 5.6. Các hộp thoại hệ thống trong JavaScript .............................................77 5.6.1 Hiển thị thông báoJavascript .........................................................77 5.6.2 Hàm alert(). ....................................................................................77 5.6.3 Hàm Confirm(). .............................................................................77 5.6.4 Hàm Prompt() ................................................................................78 5.6.5 Time events trong javascript..........................................................78 5.7. Biểu thức chính qui (regular expression) ............................................79 Bài tập chương 5 ............................................................................................79 Chương 6. MySQL .........................................................................................89 6.1. Giới thiệu MySQL ...............................................................................89 6.2. Sử dụng giao diện dòng lệnh ...............................................................89 6.3. Các lệnh định nghĩa dữ liệu (DDL) trên CSDL ..................................89
6.4. Các lệnh định nghĩa dữ liệu trên table .................................................89 6.5. Các lệnh thao tác trên dữ liệu (DML) .................................................89 6.6. Một số công cụ quản lý MySQL miễn phí ..........................................89 6.7. Một số nội dung khác liên quan đến MySQL .....................................89 Chương 7. PHP ..............................................................................................90 7.1. PHP là gì? ............................................................................................90 7.2. Cú pháp cơ bản ....................................................................................90 7.3. Định nghĩa hàm trong PHP .................................................................91 7.4. Lập trình Hướng đối tượng trong PHP ................................................92 7.5. PHP và biểu mẫu (form)......................................................................94 7.6. PHP và MySQL ...................................................................................96 7.7. Cookie và session ................................................................................96 7.8. Một số kỹ thuật trong PHP ..................................................................98 Bài tập thực hành ........................................................................................98
CHƯƠNG TRÌNH MÔN HỌC Tên môn học: THIẾT KẾ WEB Mã môn học: MH15 Thời gian thực hiện môn học: 75 giờ; (Lý thuyết: 15 giờ; Thực hành, thí nghiệm, thảo luận, bài tập: 56 giờ; Kiểm tra: 4 giờ) I. Vị trí, tính chất của môn học: 1. Vị trí: Môn học thiết kế và lập trình web là môn học chuyên ngành, môn học này sẽ được học sau khi sinh viên đã học xong môn lập trình căn bản. 2. Tính chất: Môn học nhằm giúp sinh viên bước đầu làm quen với lập trình web, Học phần cung cấp kiến thức căn bản trong việc phát triển ứng dụng web động bằng ngôn ngữ PHP. Ngoài ra, học phần còn giới thiệu các kỹ thuật được sử dụng rộng rãi trong các ứng dụng web động như kỹ thuật tạo giỏ hàng (cart), kỹ thuật phân trang (paging), … và qui trình để phân phối một website lên internet bao gồm việc đăng ký tên miền và web hosting. II. Mục tiêu môn học: Học xong môn học nay, người học có khả năng: - Kiến thức: + Hiểu được kiến trúc của Internet, mô hình của các dịch vụ trên Internet và các thuật ngữ thông dụng trên Internet. + Hiểu được công dụng của các thẻ HTML (ngôn ngữ HTML), ngôn ngữ XHTML và các loại profile của ngôn ngữ này + Hiểu được các bước trong việc xây dựng một website và các vấn đề cần lưu ý trong việc xây dựng website + Hiểu được cách thức phân phối một website lên Internet như đăng ký tên miền, đăng ký web hosting. + Biết cách viết chương trình bằng ngôn ngữ lập trình JavaScript và truy xuất mô hình DOM của trang web + Biết cách nối kết vào hệ quản trị CSDL MySQP, tạo CSDL và truy vấn dữ liệu trong MySQL - Kỹ năng: + Có khả năng tổ chức xây dựng một ứng dụng web động. + Có khả năng phân tích, đánh giá để lựa chọn nơi đăng ký tên miền và hosting website phù hợp. + Có khả năng sử dụng ngôn ngữ HTML để tạo một trang web. + Có khả năng sử dụng ngôn ngữ CSS để tạo bố cục và định dạng trang web. + Có khả năng sử dụng ngôn ngữ JavaScript và mô hình đối tượng dữ liệu để tạo các trang web có tính tương tác bên phía web browser và kiểm tra tính hợp lệ của dữ liệu do người dụng nhập vào.
+ Có khả năng tạo các CSDL và truy vấn dữ liệu trong hệ quản trị CSDL MySQL. + Có khả năng sử dụng ngôn ngữ PHP để tạo các trang web động phía server. + Có khả năng xử dụng AJAX để thực hiện giao tiếp bất đồng bộ giữa web browser và web server. + Có khả năng kết hợp các ngôn ngữ HTML, JavaScript, CSS, mô hình DOM, hệ quản trị CSDL MySQL, AJAX và ngôn ngữ PHP để tạo một ứng dụng web hoàn chỉnh. - Về năng lực tự chủ và trách nhiệm: + Rèn tính tư duy sáng tạo trong học tập, trong công việc. III. Nội dung môn học:
CHƯƠNG 1: NHỮNG KHÁI NIỆM CƠ BẢN Mục tiêu: Trình bày được khái niệm Internet Các dịch vụ trên Internet Quy trình xây dựng web Tìm hiểu web động và web tĩnh Nội dung chương: 1.1. Giới thiệu Internet và dịch vụ WWW Internet là một mạng toàn cầu, kết nối các mạng máy tính sử dụng bộ giao thức (protocol) TCP/IP. Mục tiêu dùng để trao đổi tệp tin và thư điện tử (email), các hoạt động thương mại hóa. Một số dịch vụ cơ bản internet: chat, WWW, telnet,… 1.2. Các thành phần của dịch vụ WWW 1.3. Giao thức HTTP Giao thức HTTP viết tắt Hyper Text Transfer Protocol, là giao thức của dịch vụ WWW, qui định cách thức giao tiếp giữ web server và wev browser, bao gồm một tập các lệnh và quy ước chung giữa web server và web browser dùng để trao đổi dữ liệu, dữ liệu trao đổi là các siêu văn bản. 1.4. Định vị tài nguyên trên Internet URL, viết tắt của Uniform Resource Locator (Định vị Tài nguyên thống nhất), được dùng để tham chiếu tới tài nguyên trên Internet. URL mang lại khả năng siêu liên kết cho các trang mạng. Các tài nguyên khác nhau được tham chiếu tới bằng địa chỉ, chính là URL, còn được gọi là địa chỉ mạng hay là liên kết mạng (hay ngắn gọn là liên kết). 1.5. Các loại siêu văn bản và mô hình dịch vụ tương ứng 1
Siêu văn bản là loại văn bản tích hợp nhiều dạng dữ liệu khác nhau như văn bản, hình ảnh, âm thanh, video,… và các siêu liên kết tới các siêu văn bản khác. Có thể thấy trong khi siêu văn bản (tiếng Anh: hypertext) là loại văn bản tích hợp nhiều dạng dữ liệu khác nhau như văn bản, hình ảnh, âm thanh, video,… và các siêu liên kết tới các siêu văn bản khác còn trang web là một siêu văn bản được gán địa chỉ truy cập trên Internet (hay được gọi là địa chỉ trang web). Đặc trưng của siêu văn bản Siêu văn bản là văn bản của một tài liệu có thể được truy tìm không theo tuần tự. Người đọc có thể tự do đuổi theo các dấu vết liên quan qua suốt tài liệu đó bằng các mối liên kết xác định sẵn do người sử dụng tự lập nên. Trong một môi trường ứng dụng siêu văn bản thực sự, người đọc có thể trỏ vào chỗ tô sáng (highlight) bất kì từ nào của tài liệu và tức khắc nhảy đến những tài liệu khác có văn bản liên quan đến nó. Cũng có những lệnh cho phép người đọc tự tạo cho riêng mình những dấu vết kết hợp qua suốt tài liệu. Các trình ứng dụng dùng siêu văn bản rất hữu ích trong trường hợp phải phải làm việc với số lượng văn bản lớn, như các bộ từ điển bách khoa và các bộ sách nhiều tập. Siêu văn bản có thể chỉ là một từ, tập hợp các từ, một câu, một đoạn hoàn chỉnh, hình ảnh, ảnh hoặc được bao gồm trong một video. Siêu văn bản cho phép người tạo nội dung cung cấp. Một số ngôn ngữ siêu văn bản tiêu biểu Có thể thấy một số ngôn ngữ siêu văn bản tiêu biểu gồm có: – HTML (Hypertext Markup Language): + Siêu văn bản được tạo khi tác giả thêm các loại ký tự văn bản cụ thể vào trang web hoặc tài liệu. Các ký tự này là một phần của ngôn ngữ định dạng được gọi là Ngôn ngữ đánh dấu siêu văn bản. + Ngôn ngữ đánh dấu siêu văn bản HTML là loại ngôn ngữ dùng để định dạng dữ liệu. Tất cả các trang web bạn đang duyệt đều được tạo nên từ các thẻ HTML. + Dù website của bạn được lập trình bằng ngôn ngữ nào đi nữa, thì khi được trả về trình duyệt web, bạn sẽ chỉ nhận được các mã HTML. + Ví dụ để định dạng một đoạn văn bản bạn sử dụng cặp thẻ , để xuống dòng bạn sử dụng thẻ . HTML cùng với HTTP tạo nên nền móng của một loại dịch vụ mà chúng ta gọi là web như ngày nay. XML (Extensible Markup Language) – Ngôn ngữ đánh dấu có thể mở rộng + Khác với HTML, XML không định nghĩa bất cứ thẻ nào cả. Tất cả các thẻ và ý nghĩa của chúng đều do bạn tạo ra. + XML được tạo ra để xác định dữ liệu và do đó được dùng như một công cụ để truyền tải dữ liệu có cấu trúc giữa các ứng dụng, đặc biệt là ứng dụng WEB các kết nối dễ sử dụng đến các vị trí khác mà người đọc hoặc người xem có thể thấy hữu ích hoặc thú vị. 2
CHƯƠNG 2. NGÔN NGỮ HTML Mục tiêu: Phần mềm hướng dẫn viết code Trình bày được cú pháp của HTML Cấu trúc các thẻ HTML Thao tác với các thẻ cơ bản trong HTML Thao tác thẻ form, thẻ liên kết, thẻ chèn hình ảnh,... Xây dựng được cấu trúc chung của một trang web Biết cách tổ chức và tạo các file html - Nội dung chương: 2.1. Giới thiệu ngôn ngữ HTML HTML (Hyper Text Markup Language) là ngôn ngữ đánh dấu, thể hiện bằng các tag (gọi là thẻ), những thẻ này giúp cho trình duyệt đọc được nội dung, có thể là text, image, hay video, form,… và sau đó trình duyệt sẽ hiển thị nội dung cho người dùng xem. HTML có khoảng hơn 80 thẻ, mỗi thẻ có một nhiệm vụ riêng, tuy nhiên sẽ có những thẻ sử dụng thường xuyên và một số thẻ ít khi sử dụng. Tài liệu HTML tạo thành mã nguồn mở của trang Web. Khi được xem trên trình soạn thảo , tài liệu là một chuỗi các thẻ các phần tử, mà chúng xác định trang Web hiển thị như thế nào. Trình duyệt đọc các file từ đuôi .html hay .htm và hiển thị trang web theo các lệnh trong đó. HTML không phải là ngôn ngữ lập trình, html là ngôn ngữ đánh dấu (markup language), ngôn ngữ đánh dấu là một nhóm các thẻ đánh dấu tag. HTML dùng các thẻ để mô tả trang web. Tại sao phải sử dụng HTML khi xây dựng trang Web. HTML là ngôn ngữ duy nhất trình duyệt có thể hiểu và biên dịch được. Biên dịch có nghĩa là gì? Biên dịch là chuyển mã nguồn thành những mã nguồn mà chúng ta có thể nhìn thấy. Tất cả các trình duyệt chỉ có thể hiểu được HTML cho nên dù website xây dựng bằng công nghệ gì đi nữa thì đầu ra vẫn là HTML để đảm bảo trình duyệt có thể đọc được. Tại sao sử dụng các thẻ HTML? Trình duyệt có khả năng biên dịch ngôn ngữ HTML. Dù có chọn ngôn ngữ nào thì cũng phải đưa về HTML. Cấu trúc một trang web Ctrl + U hoặc chuột phải xem nguồn sẽ thấy mã nguồn trang. 2.2. Các công cụ tạo trang web Công cụ soạn thao HTML tốt phải có trình kiểm tra chính tả, số dòng, tự động hoàn thành, xem trước trang và công cụ soạn thảo văn bản và hình ảnh. Có nhiều công cụ soạn thảo: phần mềm NotePad ++, subline text, Visual Studio Code, … Trong bài giảng này sử dụng công cụ Visual Studio Code. Tải công cụ tại trang https://code.visualstudio.com/Download. 3
Thay đổi màu nền Visual Stadio code: File/ Preference/ Color Theme/ Chọn Light (Visual Stadio). Đổi font chữ Visual Stadio code: File/ Preference/ Settings/ Chọn Font size: 16 CÁC BƯỚC KHI CHẠY FILE CODE Bước 1: Mở file mới: Ấn ctrl + N/ Lưu file: tên file.html (luôn luôn có đuôi là .html)/ Trong màn hình soạn thảo Visual Stadio code: Giữ phím Shift + 1 để ra dấu chấm than ! (sử dụng phần viết code là subline text 3 thì gõ
Muốn gõ chú thích: Gõ nội dung/ bôi đen dòng văn bản muốn làm ghi chú/ ấn phím ctrl + / 2.3. Cấu trúc của một trang web Một tài liệu HTML gồm ba phần cơ bản:  Phần HTML: Mọi tài liệu HTML phải bắt đầu bằng thẻ mở HTML và kết thúc bằng thẻ đóng HTML .  Phần tiêu đề: Phần tiêu đề bắt đầu bằng thẻ và kết thúc bởi thẻ . Phần này chứa tiêu đề mà được hiển thị truên thanh điều hướng của trang web. Tiêu đề nằm trong thẻ và kết thúc bằng thẻ . Liên kết với file css.  Phần thân: phần này nằm sau tiêu để. Phần thân bắt dầu bằng thẻ và kết thúc bằng thẻ . Phần thân gồm nội dung trang web, hình ảnh các liên kết muốn hiển thị trong trang web. Liên kết đến file Javascript. Cấu trúc cơ bản Tiêu đề trang
2.4.1 Cấu trúc chung của trang web Mỗi trang web đều có cách thể hiển cấu trúc khác nhau, có trang 1 cột, có trang 2 và có trang có chứa nhiều cột. Dưới đâu là cấu trúc cơ bản của một trang web.  Phần đầu: Header, có thể chwuas logo, câu slogan, các liên kết, các banner liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm,…  Phần liên kết toàn cục: global navigation, dùng để chwuas các liên kết đến những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub navigation).  Phần thân của trang: page body, phần này chứa nội dung chính (content) và phần nội dung phụ (sidebar).  Phần nội dung chính: content, phần thể hiện nội dung chính cần thể hiện cho người dùng xem.  Phần nội dung phụ: sidebar, phần này chứa các liên kết phụ của từng trang (local navigation) hoặc các banner chứa các liên kết liên quan, hoặc có thể dùng để chứ các liên kết quảng cáo,…  Phần cuối trang web: Footer, phần này chứa phần liên hệ như tên công ty, địa chỉ, số điện thoại, mail liên hệ, và đặc biệt là copyright, hoặc chứa các liên kết toàn trang, các banner liên kết. Header Logo Global navigation Page body Content sidebar Footer 2.4.2 Cấu trúc của thẻ HTML Luôn bắt đầu bằng tên thẻ mở và kết thúc một thẻ đóng. 6
Giữa thẻ mở và thẻ đóng thì có “nội dung”. Trong nội dung có thể là: ảnh, text, video, hoặc các thẻ HTML. Một thẻ html có thẻ có, không có hoặc nhiều thuộc tính. Thuộc tính của thẻ nằm ở thẻ mở. Chúng ta có thẻ định nghĩa thuộc tính của thẻ html thẻ ý muốn. Vi dụ number= “1” color= “red” Ngoài ra một số trường hợp đặc biệt sẽ không có thẻ đóng và dấu đóng thẻ nằm trên chính thẻ mở. Ví dụ: Thẻ xuống dòng. Chúng ta có thẻ tạo ra những thẻ HTML theo ý muốn đó chúng là HTML 5. Ví dụ Tiêu đề tài liệu [các mô tả hoặc liên kết dữ liệu khác] Nội dung chính Vậy ta có thể hoàn toàn định nghĩa những thẻ ta muốn và ta cần. Quy luật thẻ ta chỉ cần nhớ tên thẻ là được. Chú ý: Quy luật để định nghĩa một thẻ html: - Luôn luôn bắt đầu bằng thẻ mở - Tên thẻ đóng và thẻ mở luôn luôn luôn giống nhau. - Thuộc tính: Trong 1 thẻ html có thẻ có thuộc tính hoặc không có thuộc tính và thuộc tính luôn luôn nằm ở thẻ mở . + Thuộc tính luôn nằm trên thẻ mở. + Có một, nhiều hoặc không có thuộc tính. + Đặt tên thuộc tính tự do mỗi thuộc tính đều có giá trị cho nó. Phân loại thẻ HTML có 3 loại sau:  Nhóm các thẻ block: các thẻ này dùng để sắp xếp bố cục cho trang web. Một số thẻ block: nhóm thẻ tiêu đề - - - - - , , , , , , , , , ,… 7
 Nhóm các thẻ inline: là những thẻ cơ bản nhất, chỉ chứa các thẻ inline cùng cấp hoặc text. Một số thẻ inline: thẻ liên kết , thẻ chèn hình ảnh , thẻ xuống dòng , thẻ , thẻ chữ đậm và nhấn mạnh ,…  Thẻ không hiển thị (none): Thẻ meta, thẻ link, 2.5. Định nghĩa và định dạng các thành phần nội dung 2.5.1 Các thẻ tiêu đề heading (h) Thẻ : chữ “h” viết tắt của từ “headings” nghĩa là đề mục, hoặc tiêu đề. Sử dụng để định nghĩa tiêu đề cho nội dung HTML, giúp cho trình duyệt nhận biết được tiêu đề của một nội dung. Thẻ h có giá trị từ đến , trong đó mức độ quan trong giảm dần từ tới (hay tiêu đê lớn nhất là nhỏ nhất là .) Cú pháp: H1 đến H6 Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Ví dụ: Code Kết quả web Học lập trình HTML Thẻ H1 Thẻ H2 Thẻ H3 Thẻ H4 Thẻ H5 Thẻ H6 8
Thẻ h1 là thẻ có nội dung chữ lớn nhất. Thẻ h6 có nội dung chữ nhỏ nhất. Kích thước chữ sẽ giảm dần từ h1 đến h6 và có nét chữ màu đậm. Thẻ tiêu để thường dùng ở những trang tin tức ví dụ như danh sách tin tức. Với chuẩn seo: Những từ khóa nên để vào trong thẻ h1 và trên cùng một trang chỉ nên xuất hiện một thẻ h1. Một trang có nhiều tiêu đề thường dùng h2 hoặc h3. Ví dụ thẻ h1 thêm thuộc tính class, name (tên) thẻ H1 . Vậy một thẻ HTML ngoài tên thẻ ra còn có các thuộc tính của thẻ, một thẻ có thể có một, nhiều hoặc không có thuộc tính. Thẻ h1 để hai thuộc tính class và name, những thẻ h2, h3, …, h6 không có thuộc tính. Một thuộc tính của thẻ html luôn luôn nằm ở thẻ mở. 2.5.2 Thẻ văn bản: Những thẻ thể hiện văn bản trong HTML như các bạn đã biết là khi trình bày nội dung trong một trang web giống như là trình bày nội dung file word có bên trái, bên dưới, bên trên, bên phải có gì có nội dung text, có ảnh, có tiêu đề có chữ in đậm, in nghiêng, màu cho chữ. Trong HTML khi dựng giao diện cho một trang HTML nó cũng gần tương tự như vậy nhưng phúc tạp hơn. HTML cung cấp thẻ thể hiện nôi dung text và những thẻ HTML thể hiện nội dung văn bản. + Thẻ in đậm văn bản: Thẻ Nội dung và Nội dung Đối với SEO ưu tiên sử dụng thẻ công cụ tìm kiếm sẽ ưu tiên những key word đặt trong thẻ strong. Cùng là in đậm nhưng nếu để trong strong thì hiệu quả tìm kiếm tốt hơn. Thẻ in gạch chân (underline) : Nội dung . Thẻ in nghiêng văn bản: Nội dung Thẻ thể hiện font chữ và cỡ chữ Thẻ font: Cú pháp: Nội dung Thẻ font có hai thuộc tính size: kích thước font chữ và color: màu chữ. Thẻ này tự động xuống dòng không cần dùng thẻ xuống dòng . Chú ý: thẻ p, I, u, font muốn xuống dòng phải dùng thẻ br chứ trình duyệt không tự xuống dòng. Thẻ thể hiện xóa văn bản: Nội dung Thẻ xuống dòng (br): Để cho văn bản xuống dòng. Cú pháp thẻ: . Thẻ br là thẻ không có thẻ đóng. Dấu đóng thẻ nằm ngay trên chính thẻ đó. Thẻ thể hiện đoạn văn p (viết tắt của từ Pargraphs có nghĩa là đoạn văn). Cú pháp: Nội dung Thuộc tính align: căn nội dung bên trong thẻ p gồm có căn trái, căn phải và căn giữa. 9
Thẻ Nội dung : Giữ được fomat của nội dung khi viết code. 2.5.3 Thẻ pre trong HTML Thẻ pre: Thẻ này dùng nhiều khi debug code, muốn xem cấu trúc một dữ liệu hiển thị. Cú pháp: Nội dung Trong HTML có sử dụng bao nhiêu dấu cách khi gõ thì trình duyệt cũng chỉ hiểu một dấu cách. Ví dụ: Khi để nhiều dấu các và xuống dòng nhưng trình duyệt không hiểu. Vậy nên ta đưa thẻ Pre : thể hiện đúng như chúng ta gõ và thể hiện được xuống dòng như gõ. Vậy thẻ pre là giữ nguyên được định dạng ở trình soạn thảo code khi người dùng gõ code, gõ thế nào thì hiển thị như thế. Thẻ này dùng nhiều khi gỡ lỗi. Ví dụ: Kết quả hiển thị trên web 10
2.5.4 Thẻ liên kết a và địa chỉ tương đối – tuyệt đối và các loại liên kết Địa chỉ tuyệt đối và địa chỉ tương đối Thẻ liên kết có ý nghĩa thế nào với một trang web. Hầu hết các trang web khi ta truy cập thì muốn mở nội dùng hoặc xem hình ảnh hoặc video thì sẽ có một hành động chuyển trang khi click vào đối tượng, ảnh, bài viết nào đó. Để thực hiện được việc chuyển trang phải dùng đến thẻ liên kết. Cú pháp: Nội dung - href: địa chỉ định trang đích sẽ chuyển đến. - title: làm rõ nghĩa hơn cho nội dung hay mô tả, chi tiết hơn cho liên kết - target: mặc định là trống, nếu có giá trị_blank: Quy định về kiểu chuyển trangmở một tab mới và giữ nguyên trang cũ. Khi không sử dụng target là _blank thì mặc định nó ghi đè lên trang cũ. Ví dụ: Kết quả trang Web hiển thị: 11