Tự học lập trình web với PHP: Bài 1 - HTML & KHÁI NIỆM CÁC THẺ TRÌNH BẦY VĂN BẢN ĐẦU TIÊN

HTML 1

NHẬP MÔN HTML & KHÁI NIỆM CÁC THẺ TRÌNH BẦY VĂN BẢN ĐẦU TIÊN

Xem video hướng dẫn bài 1 chi tiết

A – LÝ THUYẾT

I – NHẬP MÔN HTML

1 – Giới thiệu về HTML

HTML là từ viết tắt cho HyperText Markup Language, tức là "Ngôn ngữ Đánh dấu Siêu văn bản. Là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web tĩnh.

2 – Công cụ soạn mã HTML

Chúng ta có thể sử dụng rất nhiều phần mềm cũng như các bộ công cụ để làm việc với HTML, nhưng đơn giản nhất đó là sử dụng công cụ soạn thảo Notepad được tích hợp sẵn trong hệ điều hành Windows

II – CẤU TRÚC CƠ SỞ CHUNG CỦA MỘT TRANG VĂN BẢN HTML

1 – Cấu trúc chung

Cấu trúc chung và đơn giản nhất của một trang HTML bao gồm các phần chính như sau:

2 – Xuất bản một trang HTML đầu tiên

Để xuất bản một trang HTML ta gõ một đoạn text vào trong phần body của văn bản và lưu lại với tên tùy ý có thành phẩn mở rộng của File bắt buộc phải là .html. Ví dụ: index.html

3 – Ý nghĩa của các thẻ HTML của trang cơ sở

Từ đây chúng ta bắt đầu làm quen với khái niệm “Thẻ HTML”, việc nghiên cứu HTML chính là nghiên cứu tác dụng của các thẻ HTML và những thuộc tính của các thẻ đó

Thẻ HTML được cấu tạo bởi cặp dấu “<” và “>”, bên trong chúng là chuỗi ký tự được viết liền nhau xác định tên của chúng (Các thẻ này không phải do người dùng tự đặt tên, mà do chính ngôn ngữ HTML đã quy định sẵn, ta chỉ nghiên cứu chúng mà thôi)

Các thẻ HTML có thể là những thẻ đơn hoặc thẻ kép. Nếu là thẻ kép thì chúng có thẻ mở và thẻ đóng. Cặp thẻ này cũng không khác gì so với thẻ đơn về quy tắc đặt tên thẻ, chỉ khác là thẻ đóng của cặp thẻ này có thêm ký tự “/” ngay sau ký tự “<” mà thôi. Ví dụ như <html></html> ở trên

Mỗi một thẻ hay cặp thẻ HTML đều có một tác dụng riêng, có thể khác nhau hoặc giống nhau ở một mức độ nào đó khi chúng ta sử dụng chúng trong văn bản. Ví dụ như chúng tạo ra in đậm, gạch chân, đổi mầu hoặc nhấp nháy,…

Mỗi một thẻ HTML lại có một hoặc nhiều các thuộc tính để bổ sung cho thẻ đó thêm nhiều tính năng nữa. Các thuộc tính được đặt sau tên của thẻ mở và được phân cách với nhau bởi một khoảng trắng. Cú pháp như sau:

Cú pháp:

ten_thuoc_tinh = gia_tri_cua_thuoc_tinh

a) Thẻ <html></html>

Để khai báo bắt đầu một văn bản HTML

b) Thẻ <head></head>

Khai báo phần đầu của văn bản HTML

Dùng để khai báo các thẻ Script, thẻ Style và các thẻ khác nữa sẽ được nghiên cứu trong một bài học khác

c) Thẻ <title></title>

Khai báo tiêu đề của văn bản HTML, phần tiêu đề này hiển thị ngay tại thanh công cụ của trình duyệt

d) Thẻ <body></body>

Khai báo phần thân của một văn bản HTML, đây là vùng làm việc chính của chúng ta.

Trong thẻ này chúng ta nghiên cứu 2 thuộc tính cơ bản của nó đó là

· Bgcolor: Mầu nền trang HTML. Giá trị của nó mà các bạn có thể sử dụng đó là tên mầu hoặc mã mầu

· Background: Ảnh nền của trang HTML. Giá trị của nó chính là đường dẫn đến File ảnh mà các bạn muốn sử dụng là ảnh nền

III – XUỐNG DÒNG, CHIA ĐOẠN, KẺ NGANG TRONG HTML

1 – Thẻ xuống dòng

Khi bạn đánh máy một văn bản trong một chương trình soạn thảo văn bản nào đó, bạn có thể chỉ cần bấm phím Enter để kết thúc một dòng hay một đoạn văn, nhưng bạn sẽ cần phải làm nhiều thao tác hơn khi bạn muốn phân định riêng các đoạn văn khác nhau trong một trang Web. Browser tự động bỏ qua các mã xuống dòng bình thường. Vì vậy bạn phải viết thêm thẻ  để phân đoạn hay viết thẻ   tại vị trí cụ thể mà bạn muốn xuống dòng.

a) Thẻ : Chúng ta sử dụng thẻ đơn này để xuống dòng và cặp thẻ để định nghĩa một đoạn văn

· align: Xác định vị trí tương đối của đối tương so với màn hình hiển thị văn bản. Có 3 giá trị đó là Left, Right, Center

b) Thẻ : Dùng để xuống dòng trong một đoạn văn bản

2 – Đường kẻ ngang

Đường kẻ ngang chủ yếu được dùng để phân định một trang Web thành những phần có tính logic và dễ nhìn. Có không nhiều khả năng đồ hoạ trong ngôn ngữ HTML, bởi vậy đường kẻ ngang là một công cụ rất có ích

a) Thẻ <hr>

· size: Độ dày của đường kẻ. Giá trị thường được tính theo Px

· width: Độ dài cua đường kẻ. Giá trị thường được tính theo Px hoặc %

· color: Màu của đường kẻ. Giá trị có thể sử dụng là mã màu hoặc tên màu

· align: Vị trí của đường kẻ. Giá trị có thể sử dụng đó là: Left, Right, Center

IV – DANH SÁCH TRONG HTML

1 – Danh sách không có trật tự

Danh sách không có trật tự đánh dấu. (xuất hiện các núm tròn màu đen) cho từng yếu tố của danh sách.

a) Thẻ <ul></ul>, <li></li>: Cặp thẻ này luôn đi kèm nhau tạo nên một danh sách

2 – Danh sách có trật tự

Danh sách có trật tự, tự động đánh số từng thành tố của danh sách.

Thẻ <ol></ol>, <li></li>

V – KÝ TỰ ĐỊNH DẠNG, KIỂU CHỮ TRONG HTML

1 – Ký tự định dạng trong văn bản HTML

Kiểu ký tự định dạng trước cho phép bạn có thể bảo toàn các dấu cách và dấu xuống dòng trong trang văn bản HTML y như khi bạn gõ vào trong quá trình soạn thảo. Điều đó có nghĩa là bạn không nên sử dụng các thẻ   cũng như  trong đoạn ký tự định dạng trước.

a) Thẻ <pre></pre>

2 – Các kiểu chữ trong văn bản HTML

Các thẻ kiểu chữ trong ngôn ngữ HTML cho phép bạn điều khiển được vẻ bề ngoài của bản thân các ký tự - chẳng hạn chúng ta có thể định dạng một từ là đậm hoặc nghiêng. Các định dạng này có thể áp dụng từ phạm vi một đoạn hay toàn bộ văn bản cho tới từng ký tự đơn lẻ.

a) Thẻ : Làm đậm

b) Thẻ : Làm nghiêng

c) Thẻ : Gạch chân

d) Thẻ <s></s>: Gạch ngang qua một ký tự

e) Thẻ : Đưa một ký tự thụt xuống dưới ½ của dòng

f) Thẻ : Đưa một ký tự trồi lên trên ½ của dòng

B – THỰC HÀNH

Bài 1:

Sử dụng những kiến thức đã học về các thẻ HTML trong bài học đầu tiên này để thiết kế một trang HTML có nội dung được trình bầy như hình dưới đây

Đáp án
(CÁC BẠN NÊN TỰ LÀM TRƯỚC KHI XEM ĐÁP ÁN)
=> Để chạy bài mẫu và quan sát bạn gõ toàn bộ đoạn code dưới đây vào notepad sau đó lưu file dưới dạng .html rồi chuột phải vào tên file/open with/ chọn trình duyệt bạn muốn xem (ví dụ chrome)

>>Xem bài tiếp theo: Bài 2 - CÁC THẺ ĐỊNH DẠNG FONT, KÍCH CỠ CHỮ - BỐ CỤC & TRANG TRÍ CHO VĂN BẢN HTML

Tự học lập trình web với PHP

Bài 1 - HTML & KHÁI NIỆM CÁC THẺ TRÌNH BẦY VĂN BẢN ĐẦU TIÊN

No comments:

Post a Comment