Giáo trình HTML và CSS (Nghề: Lập trình viên máy tính - Cao đẳng) - Trường CĐ Nghề Kỹ thuật Công nghệ

(NB) Giáo trình HTML và CSS cung cấp các kiến thức căn bản về HTML và CSS. Học phần cũng giúp sinh viên tiếp cận với kỹ thuật lập trình web. Mời các bạn cùng tham khảo!

Giới thiệu HTML

HTML Development

HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu chủ yếu để tạo ra các trang web trên Internet Cùng với CSS và JavaScript, HTML đóng vai trò quan trọng trong thiết kế website Được phát triển từ SGML, HTML phục vụ cho các tổ chức có nhu cầu xuất bản phức tạp và đã trở thành chuẩn mực của Internet do W3C duy trì Phiên bản chính thức mới nhất của HTML là HTML5, thay thế cho HTML 4.01 (1999) và XHTML.

Lưu ý: HTML không phải là ngôn ngữ lập trình.

Bằng cách sử dụng HTML động hoặc Ajax, lập trình viên có thể phát triển và quản lý nhiều công cụ khác nhau, từ những chương trình soạn thảo văn bản cơ bản cho đến các công cụ xuất bản phức tạp.

WYSIWYG phức tạp.Hypertext là cách mà các trang Web (được thiết kế bằng

HTML là ngôn ngữ đánh dấu bằng thẻ (Markup Language) cho phép bạn đánh dấu tài liệu văn bản bằng các thẻ (tag) Điều này giúp trình duyệt Web hiểu cách cấu trúc và hiển thị nội dung Các đường link trên trang Web được gọi là Hypertext, thể hiện mối liên kết giữa các phần của tài liệu.

Sử dụng thẻ Metal

Thẻ HTML cung cấp metadata cho tài liệu HTML, không hiển thị trên trình duyệt nhưng được bộ máy tìm kiếm sử dụng để phân tích thông tin cơ bản về trang web Nó định nghĩa các thông tin như mô tả trang, từ khóa, tác giả, thời gian chỉnh sửa cuối cùng và các metadata khác.

Metadata đóng vai trò quan trọng trong việc tối ưu hóa nội dung trên các trình duyệt, giúp cải thiện cách hiển thị và tải lại trang, đồng thời hỗ trợ các bộ máy tìm kiếm trong việc xác định từ khóa và nâng cao hiệu quả của các dịch vụ web khác.

HTML5 cung cấp cho các nhà thiết kế web khả năng kiểm soát khung nhìn của người dùng trên trang web thông qua việc sử dụng thẻ.

Thẻ meta được định nghĩa trong thẻ

Các ví dụ về thẻ meta trong HTML

Ví dụ 1: định nghĩa các từ khóa cho bộ máy tìm kiếm.

1

Ví dụ 2: định nghĩa một mô tả cho trang web.

1

Ví dụ 3: định nghĩa tác giả của trang web.

1

Ví dụ 4: tự động tải lại trang web sau 30s.

Ví dụ 5: Thiết định khung nhìn để trang web dễ nhìn trên tất cả các thiết bị.

1

Sử dụng các siêu liên kết

Giới thiệu các siêu liên kết và URL

Trong HTML, liên kết được xác định bởi cặp thẻ :

text hiển thị

Thăm trang web trường cao đẳng nghề kỹ thuật công nghệ của chúng tôi

Thuộc tínhhref xác định địa chỉ đích

Sử dụng siêu liên kết

Các liên kết cục bộ

Trong ví dụ trên, một URL tuyệt đối được sử dụng, tức là địa chỉ web đầy đủ Ngược lại, một liên kết cục bộ, chỉ dẫn đến các trang trong cùng một website, được xác định bằng một URL tương đối, không bao gồm phần http://www….

Liên kết trong HTML – Màu sắc

Khi di chuyển chuột qua một liên kết, mũi tên chuột thường chuyển thành hình bàn tay nhỏ và màu sắc của liên kết sẽ thay đổi.

Theo mặc định, liên kết trên các trình duyệt hiển thị với các đặc điểm như sau: liên kết chưa được ghé thăm có màu xanh và được gạch dưới, liên kết đã được ghé thăm có màu tía và cũng được gạch dưới, trong khi liên kết đang được kích hoạt có màu đỏ và được gạch dưới.

Bạn có thể thay đổi các màu sắc mặc định, bằng cách sử dụng các định kiểu:

Sure, please provide the article you'd like me to rewrite.

Liên kết trong HTML – Thuộc tính target

Thuộc tínhtarget chỉ định nơi để mở của các tài liệu được liên kết

Ví dụ dưới đây sẽ mở các tài liệu liên kết trong một cửa sổ trình duyệt mới hoặc trong một tab mới:

Visit Timoday!

Giá trị target Mô tả

_blank Mở tài liệu liên kết trong một của sổ mới hoặc một tab mới

Mở tài liệu liên kết trong cùng frame như mà nó được kích(đây là

trang web httc!

Liên kết trong HTML – Liên kết dùng hình ảnh

Nó rất phổ biến sử dụng các hình ảnh cho các liên kết :

CÁC THẺ CƠ BẢN

Thẻ khối <Span>, <div>

4 Các thẻ định dạng ký tự thường dùng

4 Bài 4: Sử dụng biểu mẫu và khung

1 Giới thiệu biểu mẫu(Form)

3 Một số weblayout thường dùng

5 Bài 5: CSS (cascading style sheet)

3 Các selector trong style sheet

4 Kết hợp, liên kêt và chèn một style sheet vào tài liệu HTML

5 Thiết lập thuộc tính trong stylesheet

Thi kết thúc mô đun 2 1 1

* Ghi chú: Thời gian kiểm tra lý thuyết được tính vào gìơ lý thuyết, Thời gian kiểm tra thực hành được tính vào giờ thực hành.

BÀI 1: TỔNG QUAN VỀ HTML

Mã bài: MĐLTV 16.01 Giới thiệu:

HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ đánh dấu dùng để tạo ra các trang web trên internet Nó được gọi là ngôn ngữ đánh dấu vì sử dụng các thẻ để xác định các thành phần khác nhau trên trang Siêu văn bản, khác với văn bản thông thường, cho phép các đoạn văn bản được liên kết và tham chiếu thông qua các liên kết, tạo nên trải nghiệm tương tác cho người dùng trên các thiết bị điện tử.

Trình bày được những khái niệm cơ bản về internet, HTML

Nắm vững cấu trúc một trang HTML

Trình bày và sử dụng được các siêu liên kết của HTML

- Giới thiệu chức năng, tầm quan trọng của Internet

Internet là một mạng lưới toàn cầu kết nối hàng tỷ máy tính và thiết bị điện tử khác nhau Nhờ có Internet, người dùng có thể dễ dàng truy cập thông tin phong phú, giao tiếp với mọi người trên khắp thế giới và thực hiện nhiều hoạt động đa dạng khác.

Bạn có thể kết nối máy tính với Internet, hay còn gọi là "going online" Khi nói máy tính đang trực tuyến, điều đó có nghĩa là nó đang được kết nối với Internet.

HTML (viết tắt của Hypertext Markup Language) là ngôn ngữ đánh dấu chính để tạo ra các trang web trên World Wide Web, cùng với CSS và JavaScript Được định nghĩa như một ứng dụng đơn giản của SGML, HTML phục vụ cho các tổ chức có yêu cầu xuất bản phức tạp HTML đã trở thành tiêu chuẩn của Internet do tổ chức W3C duy trì, với phiên bản chính thức mới nhất là HTML5, thay thế cho HTML 4.01 (1999) và XHTML.

Bằng cách sử dụng HTML động hoặc Ajax, lập trình viên có khả năng tạo ra và quản lý nhiều công cụ khác nhau, từ những chương trình soạn thảo văn bản đơn giản cho đến các công cụ xuất bản phức tạp.

HTML là ngôn ngữ đánh dấu bằng thẻ (Markup Language) cho phép người dùng đánh dấu tài liệu văn bản bằng các thẻ (tag) Điều này giúp trình duyệt Web hiểu cách cấu trúc và hiển thị nội dung Các đường link trên trang Web được gọi là Hypertext, thể hiện mối liên kết giữa các phần của thông tin.

Thẻ HTML là công cụ quan trọng để cung cấp metadata về tài liệu HTML, giúp các bộ máy tìm kiếm hiểu rõ hơn về nội dung trang web của bạn Mặc dù metadata không hiển thị trên trình duyệt, nhưng nó định nghĩa các thông tin cơ bản như mô tả trang, từ khóa, tác giả và thời gian chỉnh sửa cuối cùng, góp phần tối ưu hóa SEO cho trang web.

Metadata đóng vai trò quan trọng trong việc cải thiện cách trình duyệt hiển thị nội dung và tải lại trang, đồng thời hỗ trợ bộ máy tìm kiếm trong việc xác định từ khóa, cũng như phục vụ cho các dịch vụ web khác.

HTML5 cung cấp cho các nhà thiết kế web khả năng kiểm soát khung nhìn, cho phép điều chỉnh khu vực hiển thị của người dùng trên trang web thông qua thẻ.

1

2.3 Sử dụng kí tự đặc biệt trong HTML

Khi học lập trình HTML, bạn sẽ gặp nhiều ký tự đặc biệt không thể nhập trực tiếp từ bàn phím Để hiển thị những ký tự này trên website, bạn cần sử dụng các mã HTML tương ứng.

HTML Symbol Numeri c Description Hex CSS

@ @ @ at sign; commercial at u+0040

¬ ơ ¬ not sign %AC \00ac \254

soft hyphen %AD \00ad \255

® ® ® registered sign %AE \00ae \256

± ± ± plus-or-minus sign %B1 \00b1 \261

» ằ » angle quotation mark, right %BB \00bb \273

¼ ẳ ¼ fraction one- quarter %BC \00bc \274

½ ẵ ½ fraction one- half %BD \00bd \275

¾ ắ ¾ fraction three- quarters %BE \00be \276

¿ ¿ ¿ inverted question mark %BF \00bf \277

Ä Ä Ä capital A, dieresis or umlaut mark

Æ ặ Æ capital AE diphthong (ligature)

Ë Ë Ë capital E, dieresis or umlaut mark

Ì Ì Ì capital I, grave accent %CC \00cc \314

Í Í Í capital I, acute accent %CD \00cd \315

Ï ẽ Ï capital I, dieresis or umlaut mark

Ú Ú Ú capital U, acute accent %DA \00da \332

Ü ĩ Ü capital U, dieresis or umlaut mark

Ý Ý Ý capital Y, acute accent %DD \00dd \335

ß ò ß small sharp s, German (sz ligature)

ä ọ ä small a, dieresis or umlaut mark %E4 \00e4 \344

æ ổ æ small ae diphthong (ligature)

ë ở ë small e, dieresis or umlaut mark %EB \00eb \353

ì ì ì small i, grave accent %EC \00ec \354

í í í small i, acute %ED \00ed \355

ï ù ï small i, dieresis or umlaut mark %EF \00ef \357

ö ử ö small o, dieresis or umlaut mark %F6 \00f6 \366

ú ú ú small u, acute accent %FA \00fa \372

ü ü ü small u, dieresis or umlaut mark %FC \00fc \374

ý ý ý small y, acute accent %FD \00fd \375

JS (Octal) letter s with caron

š š š latin small letter s with caron u+0161

Ÿ Ÿ Ÿ latin capital letter y with diaeresis u+0178

ƒ ƒ ƒ latin small f with hook u+0192

ˆ ˆ modifier letter circumflex accent u+02C6

Α Α Α greek capital letter alpha u+0391 \0391 \u0391

Β Β Β greek capital letter beta u+0392 \0392 \u0392

Γ Γ Γ greek capital letter gamma u+0393

Δ Δ Δ greek capital letter delta u+0394

Ε Ε Ε greek capital letter epsilon u+0395 \0395 \u0395

Ζ Ζ Ζ greek capital letter zeta u+0396 \0396 \u0396

Η Η Η greek capital letter eta u+0397 \0397 \u0397

Θ Θ Θ greek capital letter theta u+0398

Ι Ι Ι greek capital letter iota u+0399 \0399 \u0399

Κ Κ Κ greek capital letter kappa u+039A \039a \u039a

Λ Λ Λ greek capital letter lambda u+039B

Μ Μ Μ greek capital letter mu u+039C \039c \u039c

Ν Ν Ν greek capital letter nu u+039D \039d \u039D

Ξ Ξ Ξ greek capital letter xi u+039E

Ο Ο Ο greek capital letter omicron u+039F \039f \u039f

Π Π Π greek capital letter pi u+03A0

Ρ Ρ Ρ greek capital letter rho u+03A1 \03a1 \u03a1

Σ Σ Σ greek capital letter sigma u+03A3

Τ Τ Τ greek capital letter tau u+03A4 \03a4 \u03A4

Υ Υ Υ greek capital letter upsilon u+03A5

Φ Φ Φ greek capital letter phi u+03A6

Χ Χ Χ greek capital letter chi u+03A7 \03a7 \u03A7

Ψ Ψ Ψ greek capital letter psi u+03A8

Ω Ω Ω greek capital letter omega u+03A9

α α α greek small letter alpha u+03B1

β β β greek small letter beta u+03B2

γ γ γ greek small letter gamma u+03B3

δ δ δ greek small letter delta u+03B4

ε ε ε greek small letter epsilon u+03B5

ζ ζ ζ greek small letter zeta u+03B6

λ λ λ greek small letter lambda u+03BB

μ μ μ greek small letter mu u+03BC

ν ν ν greek small letter nu u+03BD

ξ ξ ξ greek small letter xi u+03BE

ο ο ο greek small letter omicron u+03BF

π π π greek small letter pi u+03C0

ρ ρ ρ greek small letter rho u+03C1

ς ς ς greek small letter final sigma u+03C2

σ σ σ greek small letter sigma u+03C3

τ τ τ greek small letter tau u+03C4

υ υ υ greek small letter upsilon u+03C5

φ φ φ greek small letter phi u+03C6

χ χ χ greek small letter chi u+03C7

ψ ψ ψ greek small letter psi u+03C8

ω ω ω greek small letter omega u+03C9

ϑ ϑ ϑ greek small letter theta symbol u+03D1

ϒ ϒ ϒ greek upsilon with hook symbol u+03D2

3 Sử dụng các siêu liên kết

3.1.Giới thiệu các siêu liên kết và URL

text hiển thị

3.2 Sử dụng siêu liên kết

Trong ví dụ trên, một URL tuyệt đối được sử dụng, tức là một địa chỉ web đầy đủ Ngược lại, một liên kết cục bộ, mà liên kết đến các trang web trong cùng một website, được xác định bằng một URL tương đối, không bao gồm phần http://www….

Khi di chuột qua một liên kết, mũi tên chuột sẽ chuyển thành hình bàn tay nhỏ và màu sắc của liên kết sẽ thay đổi.

Theo mặc định, các liên kết trong trình duyệt hiển thị với ba trạng thái khác nhau: liên kết chưa được ghé thăm có màu xanh và được gạch dưới, liên kết đã được ghé thăm có màu tía và cũng được gạch dưới, trong khi liên kết đang được kích hoạt có màu đỏ và được gạch dưới.

Certainly! Please provide the content of the article you'd like me to rewrite.

Visit Timoday!

trang web httc!

BÀI 2: CÁC THẺ CƠ BẢN

Bài viết này sẽ giới thiệu cho bạn các thẻ cơ bản trong HTML, bao gồm thẻ dùng để trình bày đoạn văn bản, thẻ ngắt dòng và thẻ căn chỉnh nội dung ở giữa Những thẻ này rất quan trọng trong việc xây dựng cấu trúc và định dạng trang web.

- Liệt kê được các thẻ HTML và các thuộc tính về ý nghĩa và cách sử dụng cơ bản

- Trình bày được ý nghĩa các loại thẻ

- Tạo được tài liệu HTML và hiển thị được các tài liệu trên các trình duyệt khác nhau

- Vận dụng vào thiết kế 1 nội dung cụ thể của website

- Rèn luyện tính thẩm mỹ, khả năng làm việc nhóm

- Tích cực chủ động làm các bài tập thực thành theo đúng nội dung

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à

Thẻ đường kẻ ngang

4 Bài 4: Sử dụng biểu mẫu và khung

1 Giới thiệu biểu mẫu(Form)

3 Một số weblayout thường dùng

HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu dùng để tạo ra các trang web trên internet Được gọi là ngôn ngữ đánh dấu vì HTML sử dụng các thẻ để xác định các thành phần khác nhau trên trang Siêu văn bản, khác với văn bản thông thường, cho phép các đoạn văn bản được liên kết và tham chiếu thông qua các liên kết.

Internet là một mạng lưới toàn cầu kết nối hàng tỷ máy tính và thiết bị điện tử, cho phép người dùng truy cập thông tin, giao tiếp với mọi người trên khắp thế giới và thực hiện nhiều hoạt động khác.

Bạn có thể kết nối máy tính với Internet, hay còn gọi là "going online" Khi một người nói rằng máy tính đang trực tuyến, điều đó có nghĩa là máy tính đang được kết nối với Internet.

HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ đánh dấu chính dùng để tạo ra các trang web trên Internet Cùng với CSS và JavaScript, HTML là một trong những ngôn ngữ quan trọng trong thiết kế website Được định nghĩa là ứng dụng đơn giản của SGML, HTML phục vụ cho các tổ chức có yêu cầu xuất bản phức tạp HTML đã trở thành tiêu chuẩn của Internet do W3C duy trì, với phiên bản chính thức mới nhất là HTML5, thay thế cho HTML 4.01 (1999) và XHTML.

Bằng cách sử dụng HTML động hoặc Ajax, lập trình viên có thể tạo ra và xử lý nhiều công cụ khác nhau, từ những chương trình soạn thảo văn bản đơn giản cho đến các công cụ xuất bản phức tạp.

HTML là ngôn ngữ đánh dấu bằng thẻ (Markup Language) cho phép người dùng đánh dấu tài liệu văn bản bằng các thẻ (tag) Điều này giúp trình duyệt Web hiểu cách cấu trúc và hiển thị nội dung của trang Web Các liên kết trên trang Web được gọi là Hypertext, cho phép kết nối thông tin một cách linh hoạt và dễ dàng.

Thẻ HTML là công cụ quan trọng trong HTML để cung cấp metadata cho tài liệu, giúp bộ máy tìm kiếm hiểu rõ hơn về nội dung trang web Mặc dù metadata không hiển thị trực tiếp trên trình duyệt, nhưng nó định nghĩa các thông tin cơ bản như mô tả trang, từ khóa, tác giả và thời gian chỉnh sửa cuối cùng, góp phần nâng cao khả năng tối ưu hóa SEO cho website của bạn.

Metadata đóng vai trò quan trọng trong việc cải thiện cách hiển thị nội dung trên trình duyệt, tối ưu hóa từ khóa cho bộ máy tìm kiếm và hỗ trợ các dịch vụ web khác.

HTML5 cung cấp cho các nhà thiết kế web khả năng kiểm soát khung nhìn, tức là khu vực hiển thị của người dùng trên trang web, thông qua việc sử dụng thẻ.

1

Khi học lập trình HTML, bạn sẽ gặp nhiều ký tự đặc biệt không thể nhập bằng bàn phím thông thường Để hiển thị những ký tự này trên website, bạn cần biết cách sử dụng ngôn ngữ lập trình HTML.

text hiển thị

Một liên kết cục bộ được xác định bằng URL tương đối, không bao gồm http://www…, trong khi đó, một URL tuyệt đối cung cấp địa chỉ web đầy đủ.

Khi di chuyển chuột qua một liên kết, mũi tên chuột thường chuyển thành hình bàn tay nhỏ và màu sắc của liên kết sẽ thay đổi.

Theo mặc định, liên kết trong tất cả các trình duyệt sẽ hiển thị như sau: liên kết chưa được ghé thăm sẽ có màu xanh và được gạch dưới, liên kết đã được ghé thăm sẽ có màu tía và cũng được gạch dưới, trong khi liên kết đang được kích hoạt sẽ có màu đỏ và được gạch dưới.

Sure, please provide the content of the article you'd like me to rewrite.

Visit Timoday!

trang web httc!

Bài viết này sẽ giới thiệu về các thẻ cơ bản trong HTML, bao gồm thẻ trình bày văn bản, thẻ ngắt dòng và thẻ căn chỉnh nội dung ở giữa, giúp bạn hiểu rõ hơn về ý nghĩa và cách sử dụng chúng.

Sử dụng font

Thẻ được dùng để định dạng cho văn bản như: màu sắc, kích cỡ, kiểu chữ,

Size Number (trong khoảng từ 1 đến 7)

Chỉnh kích cỡ văn bản

Face Tên kiểu chữ Chỉnh kiểu chữ văn bản

< font color= “red” size =”7” face =”verdana” laptrinhcss

Sử dụng màu sắc

Quy tắc màu sắc trong HTML và CSS rất quan trọng để tạo ra giao diện hấp dẫn Việc sử dụng mã màu sắc trong văn bản HTML thuần túy giúp cải thiện trải nghiệm người dùng Các công cụ chọn màu sắc hỗ trợ lập trình viên lựa chọn mã màu phù hợp, từ đó nâng cao tính thẩm mỹ cho trang web Sử dụng mã màu đúng cách trong CSS và HTML không chỉ làm nổi bật nội dung mà còn tạo sự nhất quán trong thiết kế.

Màu sắc trong HTML và CSS được tạo ra bằng cách trộn ba màu cơ bản: đỏ (RED), xanh lá (GREEN) và xanh dương (BLUE) với các cường độ khác nhau Nguyên tắc này, được gọi là trộn màu RGB, cho phép tạo ra tất cả các màu sắc khác Cường độ màu được biểu diễn bằng số nguyên trong khoảng từ 0 đến 255.

Quy tắc trộn màu theo quy luật về màu sắc trong hội họa

Tất cả các ngôn ngữ lập trình đều cung cấp hàm để trộn màu RGB, bao gồm cả HTML và CSS Hàm này cho phép người dùng pha trộn ba thành phần màu sắc: đỏ, xanh lá cây và xanh dương Ví dụ, với màu đỏ có cường độ 128, màu xanh lá cây có cường độ 100 và màu xanh dương có cường độ 50, ba màu này sẽ được trộn lại để tạo ra một màu sắc mới.

Dùng phổ biến trong HTML, CSS là cách màu sắc được biểu diễn bằng giá trị thập lục phân hexadecimal Tức là dùng 16 chữ số:0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C,

D, E, F để biểu diễn những thành phần màu được pha trộn RGB

Giá trị màu Hex được biểu diễn bằng ký tự hashtag (#) và theo sau là sáu ký tự HEX Hai ký tự đầu tiên thể hiện cường độ màu đỏ (RED), tiếp theo là hai ký tự cho cường độ màu xanh lá (GREEN), và hai ký tự cuối cùng đại diện cho cường độ màu xanh (BLUE) Màu sắc cuối cùng là sự pha trộn của ba thành phần này.

Hoặc màu đỏ và màu green (cường độ cao nhất 255) trộn với nhau (không có màu blue) thì sẽ ra màu vàng

Màu nền rgb(255, 255, 0)

Thẻ thể hiện hình ảnh IMG

Thẻ img là thẻ đặc biệt không có thẻ đóng, đóng thẻ trên chính nó

Cú pháp:

Trong đó: src: Đường dẫn của ảnh Đường dẫn của ảnh có hai cách:

- Tên ảnh Phần mở rộng ảnh (jpg hoặc png) (nếu ảnh nằm cùng thư mục với file code html)

Thư mục chứa ảnh và tên ảnh cần được xác định, bao gồm phần mở rộng như jpg hoặc png nếu ảnh nằm trong một thư mục Để tối ưu hóa SEO, cần cung cấp mô tả cho ảnh (alt), cùng với thông tin về chiều rộng (width) và chiều cao (height) của ảnh.

Ví dụ: Code trên visual studio: Lưu file: html image.html

Khi điều chỉnh kích thước ảnh, chỉ cần xem xét thuộc tính chiều rộng hoặc chiều cao để đảm bảo ảnh không bị vỡ Nếu bạn đặt cả hai thuộc tính, hãy chú ý đến tỷ lệ giữa chiều rộng và chiều cao để ảnh được cân đối, trừ khi bạn đã xác định chính xác cả hai kích thước.

SỬ DỤNG BẢNG VÀ LỚP

Cách tạo bảng

1.1 Thẻ dùng để tạo bảng -Thẻ Table

Thẻ table trong HTML được sử dụng để tạo bảng, và trước đây, nó đóng vai trò quan trọng trong việc xây dựng layout cho trang web Tuy nhiên, hiện nay, việc sử dụng thẻ table để thiết kế bố cục trang web đã không còn phổ biến do nó tiêu tốn nhiều tài nguyên.

Bảng được cấu trúc bởi các dòng (row), cột (column) và tiêu đề (heading) Giao điểm giữa dòng và cột tạo thành các ô (cell) Để đảm bảo tính nhất quán, số cột trong mỗi dòng phải bằng nhau; nếu không, bảng sẽ bị vỡ.

1

Thuộc tính dùng chung cho table, tr và td

+ width: Qui định độ rộng của trang

+align: (left|right|center) canh lề table so với trình duyệt

+border: Qui định đường viền

+ bgcolor: Qui định màu nền

Thuộc tính cho td valign: (top|midlle|bottom) Canh nội dung trong cột theo chiều dọc

Thẻ và được sử dụng để chèn theo thứ tự các hàng và các cột trong 1 bảng

1.3 Xóa hàng và cột Để có thể xóa một hàng và xóa thẻ Tr tương ứng với các thẻ TD thì bên trong nó từ 1 file mã HTML để xóa dòng thứ 2 chúng ta cần xóa thẻ TD

1.4 Trộn ô: Kết hợp giữa các cột hay dòng

* Gộp dòng và gộp cột trong table sử dụng thuộc tính colspan= “số dòng gộp cột”

Lưu file với tên "html table.html" và thiết lập bảng có đường viền 1px, chiều rộng 900px, căn giữa trình duyệt Mỗi hàng có chiều cao 70px và màu nền của bảng là màu xám.

Họ Và Tên

Đỗ Thị Lan Anh

lananh2@gmail.com

Lạc Long Quân - Hà Nội

Đỗ Mai Trang

lananh2@gmail.com

Lạc Long Quân - Hà Nội

Dưới đây là danh sách các thuộc tính thường được sử dụng trong việc tạo bảng Bạn có thể nhấn vào hình ảnh để tìm hiểu chi tiết về chức năng và cách sử dụng của từng thuộc tính.

2.1 Lớp là gì Định nghĩa: định nghĩa một lớp được bắt đầu bởi dấu chấm (.) bên trong khai báo nhiều thuộc tính css để áp dụng cho bất kỳ thẻ nào chỉ định bới thuộc tính class của nó.

Tất cả các thuộc tính class có giá trị là sẽ được áp dụng cho các phần tử Lưu ý rằng thuộc tính class của mỗi thẻ có thể chứa nhiều class khác nhau, được phân cách bằng khoảng trắng.

Sau khi định nghĩa hai bộ chọn lớp, thẻ được áp dụng cho một lớp, trong khi thẻ được sử dụng cho cả hai lớp, nhằm tận dụng các đặc điểm tổng hợp của chúng.

VD bộ chọn lớp

Để tùy chỉnh bảng trong HTML, bạn có thể sử dụng các thuộc tính như: `border` để thiết lập độ dày của đường viền, `cellspacing` để điều chỉnh khoảng cách giữa các đường viền, và `cellpadding` để tạo khoảng đệm bên trong các ô Ngoài ra, thuộc tính `bgcolor` cho phép bạn chọn màu nền cho bảng hoặc ô, trong khi `width` và `height` xác định kích thước của bảng hoặc ô Để canh lề nội dung, sử dụng `align` cho chiều ngang và `valign` cho chiều dọc Đối với kiểu chữ, bạn có thể thiết lập `font-family`, `font-weight`, `font-style`, `font-size`, và `color` để tạo phong cách cho văn bản trong bảng.

myboder{ border: 3px double blue; font-size: 20px; display: inline;

CHÀO MỪNG ĐẾN VỚI WEB

In web design, key CSS properties include font-family for specifying the font type, font-weight for adjusting the boldness of the text, font-style for defining the text style, font-size for setting the text size, color for determining the text color, border for outlining the text, and display for controlling the layout of the text element.

Hình: Bộ chọn lớp 2.2 Sử dụng các lớp

Bộ chọn định danh (ID selector)

The CSS code defines the styling for a paragraph with the ID "myparagraph." It sets a red background color and justifies the text alignment, ensuring the text appears evenly distributed The font color is black, and there are margins of 10px around the element, along with 5px padding between the border and the content The border is styled with a dotted blue line, and the font size is set to 20px with a line height of 2 for better readability Additionally, the content is centered with a margin of 0 auto, and the width is specified to be 1024 pixels.

Mưa lớn liên tục trong những ngày qua đã gây ngập lụt nghiêm trọng tại nhiều khu vực miền Trung, khiến nhiều làng mạc bị cô lập hoàn toàn Trận lũ năm nay được đánh giá là tương đương với "đại hồng thủy" xảy ra vào năm 2010.

Tại xã Tân Ho, huyện Minh Hoá, Quảng Bình, mưa lớn kéo dài đã khiến nước lũ dâng cao nhanh chóng, nhấn chìm hơn 600 ngôi nhà, nhiều trong số đó bị ngập tới nóc.

Hình: Bộ chọn định danh

Bộ chọn cho liên kết là định nghĩa CSS áp dụng cho siêu liên kết Liên kết có bốn trạng thái: chưa click, đã click, có chuột và đang chọn Để định nghĩa CSS cho liên kết, cần chỉ định không chỉ cho thẻ mà còn cho cả bốn trạng thái của nó Dưới đây là cách định nghĩa CSS cho siêu liên kết.

A: {}

A:link {}

A: visited {}

A:hover {}

A: active {} Áp dụng: Tất cả các liên kết trong trang có định nghĩa Css cho liên kết.

Bộ chọn liên kết

a{ font-family: Arial, Helvetica, sans-serif; font-size: 20px;

/* thuộc tính bỏ dấu gạch chân */ text-decoration: none;

/* Khoảng cách giữa lề trái, phải là 10px giữa các thẻ a */ padding: 0 10px;

} a:hover { text-decoration: underline; color: saddlebrown; border: 1px dotted red; background: yellow;

Kết quả thực hiện: Link 3 đang có chuột, Link 2 đã bị click chuột trước đó.

3 Chèn Multimedia vào tài liệu HTML

3.1 Chèn ảnh động (.Gif) vào tài liệu HTML

Truy cập trang web có chứa ảnh động Gif mà bạn muốn sao chép và lưu.

Mở cửa sổSettings trên trình duyệt, sau đó chọnSave Page (trên trình duyệt Firefox) hoặcMore tools => Save page as (trên Google Chrome).

Mở Windows Explorer hoặc File Explorer và điều hướng đến vị trí lưu trang Bạn sẽ thấy một thư mục mới được tạo với cùng tên, nhưng được lưu dưới định dạng HTML.

Mở thư mục đó lên và tìm kiếm*.gif - nó sẽ hiển thị kết quả tìm kiếm là ảnh động gif mà bạn muốn.

Bạn có thể dán ảnh Gif đã tải về vào file Microsoft Word, email hoặc trang web.

SỬ DỤNG BIỂU MẪU VÀ KHUNG

Một số weblayout thường dùng

HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ đánh dấu dùng để tạo ra các trang web trên internet Nó được gọi là ngôn ngữ đánh dấu vì sử dụng các thẻ để xác định các thành phần khác nhau trên trang Siêu văn bản, hay hypertext, là loại văn bản hiển thị trên các thiết bị điện tử, khác với văn bản thông thường ở chỗ nó được liên kết với nhau thông qua các liên kết.

Internet là một mạng lưới toàn cầu kết nối hàng tỷ máy tính và thiết bị điện tử, cho phép người dùng truy cập thông tin đa dạng, giao tiếp với mọi người trên khắp thế giới và thực hiện nhiều hoạt động khác.

Bạn có thể kết nối máy tính với Internet, hay còn gọi là "đi trực tuyến" Khi một máy tính được cho là đang trực tuyến, điều đó có nghĩa là nó đang kết nối với Internet.

HTML (Ngôn ngữ Đánh dấu Siêu văn bản) là ngôn ngữ đánh dấu chủ yếu để tạo ra các trang web trên World Wide Web Cùng với CSS và JavaScript, HTML là một trong những ngôn ngữ thiết yếu trong thiết kế website Được phát triển từ SGML, HTML phục vụ cho các tổ chức có nhu cầu xuất bản phức tạp và đã trở thành tiêu chuẩn Internet do W3C duy trì Phiên bản chính thức mới nhất của HTML là HTML5, thay thế cho HTML 4.01 (1999) và XHTML.

Bằng cách sử dụng HTML động hoặc Ajax, lập trình viên có khả năng tạo ra và xử lý nhiều công cụ khác nhau, từ những chương trình soạn thảo văn bản đơn giản đến các công cụ xuất bản phức tạp.

HTML là ngôn ngữ đánh dấu bằng thẻ (Markup Language) được sử dụng để cấu trúc tài liệu văn bản Các thẻ (tag) trong HTML giúp trình duyệt web hiểu cách hiển thị nội dung Đường link trên trang web được gọi là Hypertext, cho phép người dùng kết nối giữa các tài liệu khác nhau.

Thẻ HTML là một công cụ quan trọng trong HTML, dùng để cung cấp metadata cho tài liệu Mặc dù metadata không hiển thị trên trình duyệt, nhưng nó được các bộ máy tìm kiếm phân tích để thu thập thông tin cơ bản về trang web Thẻ meta giúp định nghĩa các thông tin thiết yếu như mô tả trang, từ khóa, tác giả, thời gian chỉnh sửa cuối cùng và nhiều loại metadata khác.

Metadata đóng vai trò quan trọng trong việc hỗ trợ trình duyệt hiển thị nội dung và tải lại trang, đồng thời giúp các bộ máy tìm kiếm tối ưu hóa từ khóa và cải thiện hiệu suất của các dịch vụ web khác.

HTML5 cung cấp cho các nhà thiết kế web khả năng kiểm soát khung nhìn, tức là khu vực hiển thị của người dùng trên trang web, thông qua việc sử dụng thẻ.

1

Khi học lập trình HTML, bạn sẽ gặp nhiều ký tự đặc biệt không thể gõ trực tiếp trên bàn phím Để hiển thị những ký tự này trên website bằng ngôn ngữ lập trình HTML, cần sử dụng các mã ký tự tương ứng.

text hiển thị

Trong ví dụ trên, một URL tuyệt đối được sử dụng, tức là một địa chỉ web đầy đủ Ngược lại, một liên kết cục bộ, chỉ dẫn đến các trang trong cùng một website, được xác định bằng một URL tương đối, không bao gồm phần http://www….

Khi người dùng di chuyển chuột qua một liên kết, mũi tên chuột sẽ chuyển thành hình bàn tay nhỏ, đồng thời màu sắc của liên kết cũng sẽ thay đổi.

Theo mặc định, trong tất cả các trình duyệt, liên kết chưa được ghé thăm sẽ được gạch dưới và có màu xanh, liên kết đã được ghé thăm sẽ có màu tía và cũng được gạch dưới, trong khi liên kết đang được kích hoạt sẽ có màu đỏ và được gạch dưới.

Sure! Please provide the content of the article you'd like me to rewrite.

Visit Timoday!

trang web httc!

Bài viết này sẽ giúp bạn hiểu rõ về ý nghĩa và cách sử dụng các thẻ cơ bản trong HTML, bao gồm thẻ định dạng văn bản, thẻ ngắt dòng và thẻ căn chỉnh nội dung ở giữa.

CSS (Cascading Style Sheet)

Tiêu đề	Giáo Trình Mô Đun: HTML+CSS
Tác giả	Trần Thị Vinh, Tập Thể Giảng Viên Khoa CNTT
Trường học	Trường Cao Đẳng Nghề Kỹ Thuật Công Nghệ
Chuyên ngành	Lập Trình Viên Máy Tính
Thể loại	giáo trình
Năm xuất bản	2021
Thành phố	Hà Nội

Định dạng
Số trang	90
Dung lượng	1,12 MB