HTML Note 1

HTML đóng vai trò gì trong website?

Như mình đã nói, HTML là một ngôn ngữ đánh dấu siêu văn bản nên nó sẽ có vai trò xây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các tập tin kỹ thuật số (media) như hình ảnh, video, nhạc.
Vai trò của từng ngôn ngữ trong website
Vai trò của từng ngôn ngữ trong website
Điều đó không có nghĩa là chỉ sử dụng HTML để tạo ra một website mà HTML chỉ đóng một vai trò hình thành trên website. 
  • HTML – Xây dựng cấu trúc và định dạng các siêu văn bản.
  • CSS – Định dạng các siêu văn bản dạng thô tạo ra từ HTML thành một bố cục website, có màu sắc, ảnh nền,….
  • Javascript – Tạo ra các sự kiện tương tác với hành vi của người dùng (ví dụ nhấp vào ảnh trên nó sẽ có hiệu ứng phóng to).
  • PHP – Ngôn ngữ lập trình để xử lý và trao đổi dữ liệu giữa máy chủ đến trình duyệt (ví dụ như các bài viết sẽ được lưu trong máy chủ).
  • MySQL – Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc (SQL – ví dụ như các bài viết sẽ được lưu lại với dạng dữ liệu SQL).
Nhưng ở đây, tạm thời bạn chỉ cần quan tâm đến HTML mà thôi. Dễ hiểu hơn, bạn hãy nghĩ rằng nếu website là một cơ thể hoàn chỉnh thì HTML chính là bộ xương của cơ thể đó, nó như là một cái khung sườn vậy.
Như vậy, dù website thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu thì vẫn phải cần HTML để hiển thị nội dung ra cho người truy cập xem.
Nhân tiện đây mình cũng nói luôn, website có hai loại chính:
  • Website tĩnh (static web) – Là một website không giao tiếp với máy chủ web để gửi nhận dữ liệu mà chỉ có các dữ liệu được khai báo sẵn bằng HTML và trình duyệt đọc.
  • Website động (dynamic web) – Là một website sẽ giao tiếp với một máy chủ để gửi nhận dữ liệu, các dữ liệu đó sẽ gửi ra ngoài cho người dùng bằng văn bản HTML và trình duyệt sẽ hiển thị nó. Để một website có thể giao tiếp với máy chủ web thì sẽ dùng một số ngôn ngữ lập trình dạng server-side như PHP, ASP.NET, Ruby,..để thực hiện. Ví dụ như một website làm bằng WordPress là website động.

Các thẻ chính của HTML?

Một tài liệu web bằng HTML hoàn chỉnh sẽ bao gồm 4 phần chính là thẻ khai báo loại tập tin <!DOCTYPE>, thẻ <html>, thẻ khai báo thông tin website <head> và thẻ <body>

Khai báo dữ liệu vĩ mô với thẻ <meta>

Thẻ <meta> là một thẻ đặc biệt vì nó không có thẻ đóng như các thẻ khác mà sẽ có dấu gạch chéo như / ở đằng trước ký tự > cuối cùng. Thẻ này có mục đích khai báo các dữ liệu vĩ mô trong tài liệu web HTML của bạn như mô tả, từ khóa, tên tác giả, bảng mã ký tự sử dụng,…
Thẻ meta luôn được khai báo kèm theo ít nhất là một thuộc tính và mỗi thuộc tính phải luôn có giá trị. Ví dụ: <meta charset="utf-8" />
Trong đó, charset là tên thuộc tính và utf-8 là giá trị của thuộc tính charset.

Thuộc tính charset

Thuộc tính charset trong thẻ <meta> có nhiệm vụ khai báo cho trình duyệt biết bảng mã ký tự siêu văn bản bên trong tài liệu là gì. Và hiện nay hầu hết chúng ta đều sử dụng bảng mã UTF-8 cho tất cả ngôn ngữ bao gồm các ngôn ngữ tiếng latin, chữ Hán – Nôm và các ngôn ngữ đọc từ phải sang trái (Right to Left – RTL) như tiếng Ả-Rập chẳng hạn.

Thuộc tính name

Đối với thuộc tính name thì thẻ meta của bạn phải có hai thuộc tính, đó là thuộc tính name và content, trong đó thuộc tính content được xem là thiết lập nội dung cho thuộc tính name. Ví dụ:
<meta name="author" content="Thach Pham" />
Trong đó, giá trị của thuộc tính name là một giá trị có sẵn vì hiện tại thuộc tính name hỗ trợ một số giá trị như:
  • author: Khai báo tên tác giả của tài liệu.
  • description: Khai báo mô tả của tài liệu.
  • keyword: Khai báo từ khóa của tài liệu, các từ khóa này sẽ đóng vai trò hỗ trợ các trình tìm kiếm văn bản hoặc máy tìm kiếm website dò tìm.
Đó là các giá trị quan trọng thường dùng, ngoài ra còn một số giá trị khác như:
  • application-name: Tên ứng dụng đại diện của tài liệu web.
  • generator: Khai báo tên ứng dụng tạo ra tài liệu.

Thẻ phụ của thẻ Text <h>, <p>...?

  • <strong>: In đậm chữ viết.
  • <i>: In nghiêng chứ viết.
  • <u>: Gạch chân chữ viết.
  • <strike>: Gạch ngang chữ viết.
  • <em>: Nhấn mạnh câu.
  • <code>: Định dạng cho một đoạn mã nào đó.
  • <hr>: Thước kẻ ngang trên tài liệu.
  • <mark>: Tô sáng chữ viết.

Thẻ trích dẫn

Trích dẫn (Quote) là một thẻ có thể bạn sẽ thường sử dụng nếu thường xuyên viết báo hay phóng sự, mục đích của nó là định dạng một câu nói như một câu trích dẫn và có thể định dạng thêm tên người trích dẫn một cách chuyên nghiệp hơn, thẻ trích dẫn được quy định là <quote> và tên tác giả trích dẫn được quy định là <cite>.
Lưu ý rằng thẻ <cite> thường chỉ nên dùng đặt trong thẻ <quote> thôi chứ dùng tùy tiện nó lại mất hay. Và mặc định thì các trình duyệt sẽ tự quy định nội dung nằm trong thẻ <cite> sẽ được in nghiêng, còn thẻ <quote> thì không có gì cả nhưng sau này bạn làm tới phần CSS rồi thì có thể tự thêm tí “phong cách” cho thẻ quote đẹp hơn.

Thẻ định dạng sẵn

Trong HTML hiện tại nó có một thẻ được gọi là thẻ định dạng sẵn (preformatted), thẻ này sẽ được viết là <pre> </pre>. Sở dĩ nó được gọi là thẻ định dạng sẵn vì mặc định trình duyệt đã tự động định dạng cho các nội dung nằm bên trong thẻ đó như kích thước chữ, khoảng cách, kiểu chữ.
Thẻ <pre> </pre> này thường được dùng để đăng một câu đối thoại hoặc in một đoạn mã để cho dễ phân biệt với các văn bản thông thường. Xem ví dụ:
Ngoài ra cũng lưu ý rằng khi viết văn bản trong cặp thẻ <pre> thì việc xuống hàng thông thường vẫn sẽ được định dạng ra mà không cần thêm thẻ <p>.

Thuộc tính style để định dạng chữ viết

Mặc dù việc lên màu sắc trên website là do CSS đảm nhận, nhưng nếu là một văn bản HTML thông thường thì bạn vẫn có thể thêm màu sắc cho chữ viết bằng thuộc tính style. Thuộc tính style có thể đặt trong bất cứ thẻ nào và giá trị của thuộc tính đó là các thuộc tính của CSS (mình sẽ liệt kê một số thuộc tính hay dùng bên dưới).
Cấu trúc viết thuộc tính sẽ là <tên thẻ style="tên thuộc tính: giá trị">.

Màu chữ

Để thiết lập màu chữ, bạn có thể sử dụng thuộc tính color. Giá trị của nó là tên màu trong tiếng Anh hoặc mã màu HEX.
01
<span style="color: red">chữ màu đỏ</span>

Màu nền

Màu nền có cách thiết lập giống hệt màu chữ, tức là bạn có thể dùng giá trị là tên màu trong tiếng Anh hoặc mã màu HEX. Tên thuộc tính của màu nền là background-color.
01
<span style="color: white; background-color: red">Chữ có nền màu đỏ và màu chữ là trắng</span>

Kích thước chữ

Kích thước chữ bạn có thể sử dụng thuộc tính font-size và giá trị là số kèm đơn vị. Bạn có thể sử dụng đơn vị px, %, pt hoặc em tùy thích, đơn giản nhất là dùng px.
01
<span style="font-size: 32px">Chữ có kích thước 32px</span>

Font chữ

Nếu bạn có nhu cầu sử dụng font chữ khác so với font chữ mặc định thì hãy dùng thuộc tính font-family với giá trị là tên font chữ có trên máy tính. Một số tên font chữ phổ biến nhất là Arial, Helvetica, Time New Roman, Verdana.
01
<span style="font-family: Arial">Font chữ Arial</span>
Ngoài ra bạn có thể thêm font chữ dự phòng bằng cách khai báo nhiều tên font chữ khác nhau được ngăn cách bởi dấu phẩy, ví dụ:
01
<span style="font-family: Helvetica, Arial">Font chữ Arial</span>
Có nghĩa là nếu máy người đọc không có font chữ Helvetica thì nó sẽ sử dụng font chữ Arial.

Căn lề văn bản

Để canh lề, chúng ta sử dụng thuộc tính text-align với giá trị là left,center, right hoặc justify.
01
<span style="text-align: center">Canh giữa văn bản</span>

Thẻ <a> và thuộc tính:

Ý nghĩa các thuộc tính:
  • href: Địa chỉ của tài liệu muốn liên kết đến, đây có thể là một đường dẫn thư mục hoặc địa chỉ website. Nếu bạn muốn truy cập một tài liệu trên cùng một cấp thư mục thì chỉ cần ghi tên-tập-tin.định dạng (ví dụ: gioi-thieu.html).
  • title: Tiêu đề của liên kết, tiêu đề sẽ hiển thị như một thông tin thêm khi rê chuột vào liên kết.
  • target: Xác định nơi mở tài liệu, nó có các giá trị như _blank (mở tài liệu trên cửa sổ mới), _self (mở tài liệu trên cửa sổ hiện tại, nếu bạn không khai báo thuộc tính target thì nó sẽ sử dụng giá trị này làm mặc định),  _top (mở tài liệu trong nội dung trang hiện tại), _parent (mở tài liệu trên khung trình duyệt mẹ của nó).

Thẻ ảnh, video:

- Giải thích các thuộc tính của thẻ <img>:
  • src: Đường dẫn đến tập tin hình ảnh.
  • title: Tiêu đề của hình ảnh.
  • alt: Tên định danh của hình ảnh.
Bonus: Nếu bạn muốn upload ảnh lên internet để lấy link trực tiếp thì có thể dùng dịch vụ Imgur.
- Thẻ <video> </video>
trong cặp thẻ <video> </video> sẽ có một thẻ <source> với các thuộc tính nhằm khai báo đường dẫn tập tin video và loại tập tin.
- Để chèn âm thanh vào tài liệu HTML thì bạn có thể sử dụng thẻ <audio>

Chèn đối tượng kỹ thuật số với thẻ <object>

Nhúng tài liệu HTML vào web bằng thẻ <iframe>

Các thuộc tính trong thẻ <form>:

  • action: Đường dẫn đến một trang xử lý dữ liệu sau khi người dùng ấn nút gửi dữ liệu.
  • method: Phương thức gửi dữ liệu.
  • name: Tên của form.

Các thuộc tính trong thẻ <input>:

Thẻ này sẽ đại diện cho các trường nhập dữ liệu, mỗi thẻ là một trường nhập dữ liệu khác nhau. Tuy nhiên, kiểu nhập liệu của mỗi thẻ sẽ khác nhau dựa vào thuộc tính type bên trong nó vì hiện tại HTML đang hỗ trợ đến 23 kiểu nhập liệu, tương ứng với 23 giá trị của thuộc tính type.
Danh sách các giá trị của thuộc tính type:
  • button
  • checkbox
  • color
  • date
  • datetime
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

#7 Phương pháp xác định nhanh 6 mẫu âm giai trong Guitar Lead

Hình ảnh
Phương pháp xác định nhanh 6 mẫu âm giai trong Guitar Lead Vị trí 6 mẫu âm giai tone C/Am trong Guitar Lead TH1: Chọn nốt C trên dây 6 - Xác định nốt chủ C trên dây 6 ngăn 8 --> Có thể chọn mẫu ngăn 7, hoặc 5 nhưng bắt đầu từ nốt C (để chạy nốt trong mẫu). (trong trường hợp chơi ở đô trưởng). - Nếu chơi ở rê trưởng ta dịch lên 2 ngăn, la trưởng dịch xuống 3 ngăn, tương tự như vậy với các giọng khác, dịch theo quãng. - Từ các âm giai trưởng dịch xuống 3 ngăn sẽ ra thế bấm của âm giai thứ song song với nó. --> Chỉ cần xác định từ âm giai C trưởng là ra hết các âm giai khác. --> Điểm khác biệt của âm giai trưởng và thứ là nốt bắt đầu tương ứng với việc chơi ngón giữa cho âm giai trưởng và ngòn trỏ cho âm giai thứ. TH1: Chọn nốt C trên dây 5 - Nốt C này thuộc 2 mẫu âm giai đầu tiên và ngăn 3. - Tương tự lấy nốt C là nốt bắt đầu khi chạy hai âm giai trên. - Dịch theo quãng để ra các tone khác. - Dịch để suy ra âm giai thứ song song với nó. - Vẫn nốt bắt đầu ...
Đọc thêm

Làm Chủ 7 Mode Trong Guitar Lead [Chơi ở tất cả các Tone]

Hình ảnh
Làm Chủ 7 Mode Trong Guitar Lead [Chơi ở tất cả các Tone] 7 mode Mode 3 : Tone chủ Em: E - G - B Các nốt dừng/nối câu lead (màu đỏ): Tone chủ Em: E - G - B Mode 4:  Tone chủ F:  F - A - C (bậc 4 - 6 -1) Khi chơi chỉ cần nhớ mẫu hình mode, sau đó tìm node vào theo bậc của nó (1,3,5) của hợp âm đó. Mỗi Mode khi xê dịch sẽ lại cho ra các tông khác nhau dùng mode đó.
Đọc thêm

Hướng dẫn Django - Python - Day 5: Static Files

Hình ảnh
Hướng dẫn Django - Python - Day 5: Static Files - Trong bài trước ta đã dùng template để insert text vào page. Tuy nhiên, thực tế chúng ta cần import nhiều loại file như video, nhạc, ảnh... - Trong bài trước ta đã tiếp xúc với cú pháp {{...}} nhằm sử dụng để gọi các đoạn text thuần túy, trong bài này ta sẽ có cú pháp {% ... %} để gọi các cấu trúc logic và phức tạp hơn. - Tạo folder first_project/static: để lưu trữ static files - Tạo thư mục con của static: static/images. - Chỉnh sửa trong first_project/setting.py: Khai báo biến đường dẫn cho static folder. BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) #Đây là phương thức để sử dụng template của mình cho người dùng khác TEMPLATE_DIR = os.path.join( BASE_DIR , "templates" ) STATIC_DIR = os.path.join( BASE_DIR , "static" ) - Vẫn trong file setting, kéo xuống để tìm vị trí hướng dân #static file, và sửa như sau: # Static files (CSS, JavaScript, Images) # https://doc...
Đọc thêm