Day 3 - 24/8
<head>: thẻ chứa metadata - dữ liệu định nghĩa tính chất cho dữ liệu khác<title>: tiêu đề của web, hiển thị trên tab<style>: định nghĩa đặc điểm của dữ liệu trong 1 trang web duy nhất<link>: liên kết thư mục hiện tại với 1 nguồn dữ liệu bên ngoài<meta>: làm rõ các thông tin của trang web về: bộ ký tự được sử dụng (charset), từ khóa dành cho công cụ tìm kiếm (keywords), mô tả trang web (description), tên tác giả (author), thiết lập giao diện dễ nhìn trên mọi thiết bị (viewport). Metadata không hiển thị trên web mà được sử dụng bởi trình duyệt, các công cụ tìm kiếm, ...<meta name="viewport" content="width=device-width, initial-scale=1.0">nên được dùng trên mọi website. Chiều rộng của trang web sẽ được tự động thay đổi theo thiết bị trong khi kích thước các thành phần trong web được giữ ở tỷ lệ 1:1<base>: thiết lập 1 địa chỉ nguồn và/hoặc target duy nhất cho toàn bộ đường dẫn phụ nằm trong web.
Ex: <base href="http://abc.com/" target="_self">
Khi trình duyệt tìm kiếm 1 đường dẫn có trong web, nó sẽ tìm kiếm và đưa ra đề xuất tìm kiếm trong web. Các đường dẫn tới 1 trang web mới không được định nghĩa target sẽ có target giống như target được định nghĩa trong <base>
Problem: cách gọi relative link không hoạt động khi đang dùng base URL, gọi absolute link thì vẫn có thể. Có cách gọi relative link nào không hay bắt buộc phải gọi absolute link?
Responsive:
sử dụng thẻ picture để thay đổi ảnh hiển thị khi kích thước cửa sổ web thay đổi: thiết lập max-width cho ảnh muốn hiển thị khi cửa sổ có kích thước nhỏ; min-width cho ảnh muốn hiển thị khi cửa sổ có kích thước lớn hơn.
thay đổi font-size của 1 đoạn text với đơn vị vw để kích thước của nó thay đổi theo kích thước viewport width: 1vw = 1% viewport width
Computercode:
<kbd></kbd>(biểu diễn dữ liệu nhập từ bàn phím),<samp></samp>(biểu diễn ví dụ về kết quả sẽ nhận được),<code></code>(biểu diễn 1 đoạn code dấu xuống dòng hoặc ngắt đoạn sẽ bị xóa),<var></var>(biểu diễn các biến),<pre></pre>(giữ nguyên cấu trúc các thành phần bên trong nó). Đây là các tag sử dụng các font chữ định sẵn để thay đổi text.Semantic elements: là các thẻ cho trình duyệt và cả dev biết ý nghĩa của nó là gì như
<form>, <table>,... còn như<div>, <span>thì không. Các trang web sử dụng semantic element có thể cho phép các thông tin đó được chia sẻ và tái sử dụng với các mục đích, doanh nghiệp hay các cộng động khác nhau.
<section></section>: gộp 1 bộ phận nội dung trong trang thành 1 phần, ví dụ khi dùng với các ChapteChapter, intro, ...<article></article>: tương tự như section nhưng phần tạo bởi article có nội dung rõ ràng và hoạt động độc lập với các bộ phận khác. Ví dụ: các bài post, bình luận của người dùng,...hoàn toàn có thể lồng article vào trong section và ngược lại
<header></header>: thẻ chứa thông tin giới thiệu hoặc các link điều hướng. Có thể có nhiều header nhưng ko được có header lồng nhau, hoặc header nằm trong address, footer<footer></footer>: thẻ chứa thông tin tổng kết như thông tin tác giả, bản quyền, đường dẫn trở về đầu trang, tài liệu liên quan, ... Có thể có nhiều footer<nav></nav>: thẻ chứa 1 tập hợp các đường dẫn liên kết<aside></aside>: thẻ chứa thông tin ngoài lề của nội dung trước nó, nội dung sẽ không liên quan trực tiếp tới nội dung toàn thể<figure></figure>: định nghĩa 1 khối gồm hình ảnh/bảng biểu/đồ thị/code và tiêu đề cho nó<figcaption></figcaption>: tiêu đề cho khối figure, có thể nằm trên hoặc dưới
Entity : việc sử dụng các ký tự đặc biệt đôi khi có thể gây nhầm lẫn cho trình duyệt, do đó nên sử dụng các entity name hoặc entity number được định danh cho ký tự đó. Ví dụ sử dụng '<' hoặc '<' thay cho '<' và '>' hoặc '>' thay cho '>'
Non-breaking space: 1 entity đặc biệt không thể bị tách thành dòng mới. Ví dụ 10 km/h thay bằng 10
 km/h thì 10 và km/h sẽ ko bị tách dòng. Ngoài ra   cũng giữ nguyên số lượng dấu cách sử dụng mà ko bị lược bớt còn 1Combining Diacritical marks: các dấu thanh có thể thêm vào trên dưới trái phải và cả bên trong ký tự
Emoji và các chữ cái đều là ký tự trong bảng UTF-8 định nghĩa bởi
<meta charset="UTF-8">; trong đđó, tất cả được thể hiện bằng số và được gọi đến bằng cú pháp &#số
URL: trình duyệt sử dụng url để yêu cầu nhận các trang web từ server. Chỉ có thể truyền url sử dụng bảng mã ASCII, các ký tự không thuộc mã ASCII sẽ được chuyển đổi sang dạng (% + chuỗi mã hexa)
scheme://prefix.domain:port/path/filename
scheme - loại dịch vụ internet (http , https)
prefix - mặc định cho http là www
domain - tên miền
port - chỉ số của port tại máy chủ, mặc định cho http là 80
path - define a path at the server ?
filename - tên của tài liệu hoặc nguồn dữ liệu
Form : form được dùng nhiều nhất là input form với các dạng như textbox, checkbox, radio, button, submit
type="text" : cho 1 dòng duy nhất để nhận input từ người dùng, và phải thiết lập width ban đầu là 20 ký tự do ko được hỗ trợ
checkbox và radio cho người dùng lựa chọn từ vài option cho trước; checkbox có thể không chọn hoặc chọn nhiều hơn 1 opt, radio bắt buộc chọn 1 opt.
submit chuyển dữ liệu input cho trang xử lý dữ liệu được khai báo trước tại tag <form>
text, checkbox và radio đều phải có thành phần <name> trong tag <input> để có thể gửi dữ liệu đi
thành phần <label> sẽ hiển thị trên giao diện; người dùng có thể thao tác với ô text hoặc các option khi click vào label mà không cần click trực tiếp vào chúng
Last updated