Web Cơ Bản

* Danh sách tất cả các thẻ trong HTML
1) Basic
Thẻ Mô tả chức năng
Xác định cho trình duyệt biết phiên bản HTML mà bạn đang sử
<!DOCTYPE>
dụng
<html> Xác định một tài liệu HTML
Xác định phần đầu của tài liệu HTML

<head>
(chứa các thẻ cung cấp thông tin cho trang web)
<title> Xác định tiêu đề của trang web
Xác định phần thân của tài liệu HTML

<body>
(chứa những phần tử sẽ được hiển thị lên màn hình trình duyệt)
<h1> - <h6> Tạo những đề mục quan trọng trong trang web
<p> Xác định một đoạn văn bản

<br> Chèn một ngắt xuống dòng
<hr> Tạo một đường kẻ phân cách nằm ngang
 Xác định một đoạn chú thích
2) Formatting
<abbr> Định nghĩa một từ viết tắt
Xác định thông tin liên hệ của tác giả (hoặc chủ sở hữu) trang
<address>
web
<b> Xác định đoạn văn bản được in đậm
<bdo> Điều hướng một đoạn văn bản được chỉ định
<big> Xác định một đoạn văn bản có kích thước chữ to hơn văn bản
bình thường
<blockquote> Xác định một "đoạn trích dẫn" từ một website khác
<code> Xác định một đoạn văn bản mang ý nghĩa là các mã lệnh
<del> Tạo một đường kẻ ngang lên văn bản
<em> Xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng
<i> Xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng
<ins> Tạo một đường gạch chân lên văn bản
Xác định một từ (hoặc cụm từ) mang ý nghĩa là một phím hoặc
<kbd>
tổ hợp phím
<mark> Đánh dấu màu nền nổi bật cho văn bản
<meter> Tạo phần tử có ý nghĩa giống như: thước đo, ổ đĩa, ....
Giúp cho nội dung mà bạn muốn hiển thị lên màn hình được
<pre>
giữ nguyên định dạng giống như trong lúc soạn thảo
<progress> Tạo một thanh tiến trình

<q> Xác định một câu trích dẫn ngắn
<s> Tạo một đường kẻ ngang lên văn bản
Xác định một đoạn văn bản có kích thước chữ nhỏ hơn văn bản
<small>
bình thường
<strong> Xác định đoạn văn bản được in đậm
Tạo văn bản có kích thước nhỏ, nằm ở khoảng nửa dưới văn
<sub>
bản bình thường
Tạo văn bản có kích thước nhỏ, nằm ở khoảng nửa trên văn bản
<sup>
bình thường
Đánh dấu những phần văn bản là: thời gian, ngày tháng, ngày
<time>
lễ, ....
<u> Tạo một đường gạch chân lên văn bản
Ngắt bớt ký tự của một từ xuống dòng.

<wbr>
(trong trường hợp chiều rộng của phần tử không đủ để chứa
hết từ đó)
3) Frames
<frame> Xác định một khung trong một bộ khung
<frameset> Xác định một bộ khung
Xác định một nội dung sẽ được hiển thị khi trình duyệt không
<noframes>
hỗ trợ thẻ <frame>
<iframe> Nhúng một trang web khác vào trang web hiện tại
4) Images
<img> Chèn hình ảnh vào trang web
<map> Tạo một bản đồ ảnh

&
<area>
Tạo một tiêu đề cho nội dung được đặt bên trong phần tử
<figcaption>
<figure>
<figure> Xác định một nội dung cần được tách biệt rõ ràng
5) Audio / Video
<audio> Tạo một "trình phát nhạc" cho trang web
<source> Chỉ định tài nguyên cho trình nghe nhạc hoặc trình xem phim
<track> Chèn một bản phụ đề vào video
<video> Tạo một "trình xem phim" cho trang web
6) Links
Tạo một liên kết đến một tài liệu nào đó

<a> (khi người dùng bấm vào liên kết thì sẽ được chuyển đến tài
liệu đó)
Xác định một tập hợp các liên kết & thường được sử dụng kết
<nav>
hợp với CSS để tạo một thanh menu
7) Lists
<ul> Xác định một danh sách không có thứ tự
<ol> Xác định một danh sách có thứ tự
<li> Xác định một "danh mục" trong danh sách

8) Tables
<table> Xác định phần tử là một cái bảng
<caption> Tạo tiêu đề cho bảng
<th> Xác định phần tử là một ô tiêu đề trong hàng
<tr> Xác định phần tử là một hàng trong bảng
<td> Xác định phần tử là một ô trong hàng
<thead> Xác định những dòng nào thuộc "phần đầu" của bảng
<tbody> Xác định những dòng nào thuộc "phần thân" của bảng
<tfoot> Xác định những dòng nào thuộc "phần chân" của bảng
9) Styles and Semantics

<style> Dùng để làm thùng chứa cho các đoạn mã CSS
Nhóm các phần tử lại với nhau để tiện cho việc định dạng cũng
<div>
như thiết kế bố cục của trang web
Nhóm các phần tử nội tuyến lại với nhau để tiện cho việc định
<span>
dạng CSS
<header> Xác định phần đầu của trang web
<footer> Xác định phần chân của trang web
<main> Xác định phần thân của trang web
<dialog> Tạo một hộp thoại
<summary> Tạo phần tử có dạng:

& "chỉ hiển thị tiêu đề còn chi tiết bị ẩn, khi bấm vào tiêu đề thì
<details> chi tiết mới hiển thị"
10) Meta Info

Xác định phần đầu của tài liệu HTML

<head>
(chứa các thẻ cung cấp thông tin cho trang web)
Cung cấp thêm "thông tin về trang web" cho trình duyệt và các
<meta>
công cụ tìm kiếm
Xác định "đường dẫn cơ sở" trong trang web và kiểu mở liên
<base>
kết mặc định
11) Programming
<script> Dùng để làm thùng chứa cho các câu lệnh JavaScript
Xác định một nội dung HTML sẽ được hiển thị khi trình duyệt
<noscript>
không hỗ trợ JavaScript hoặc đã tắt JavaScript
<embed> Dùng để nhúng một "tài liệu" nào đó vào trang web
<object> Dùng để nhúng một "tài liệu" nào đó vào trang web
 Attribute? – Thuộc tính của HTML nằm trong thẻ mở

 Cách sử dụng css trong HTML
- Internal – Bên trong sử dụng cặp thẻ style ngay trong chính file HTML
- External – sử sụng link lk file css với HTML
- Inline – Viết luôn trong thẻ mở sử dụng attribute style
 ID và CLASS (css selectors – gọi thẻ HTML)
- ID: Không được chùng nhau
+ <h1 id = “first – heading”> CSS selectors?</h1>
# first – heading
+ <h1 class = “second – heading”> CSS selectors?</h1>
<h1 class = “second – heading”> CSS class?</h1>
<h1 class = “second – heading”> CSS id?</h1>
* THẺ FRAME
Thẻ `<frame>` trong HTML được sử dụng để tạo một khung trong một bộ
khung. Nó được sử dụng để nhúng một tài liệu vào trang web hiện tại. Thẻ
`<frame>` phải được đặt bên trong một phần tử `<frameset>`. Để sử dụng
thẻ `<frame>`, chúng ta sử dụng cú pháp sau: `<frame src="đường dẫn đến
tài liệu mà bạn muốn nhúng vào trang web">` .
Ví dụ:
```html
<frameset cols="40%,60%">
<frame src="http://webcoban.vn/file/ban-khai-nhan-khau.pdf">
<frame src="http://webcoban.vn/css/default.html">
</frameset>
```
Thẻ `<frame>` có ba thuộc tính cơ bản: `src`, `scrolling` và `noresize` .

Thuộc tính `src` được sử dụng để chỉ định đường dẫn đến tài liệu bạn muốn
đặt trong khung . Thuộc tính `scrolling` chỉ định liệu có hiển thị thanh cuộn
hay không . Thuộc tính `noresize` ngăn chặn hành động kéo thả để thay đổi
kích thước của phần tử `<frame>` .
* THẺ FORM
Thẻ `<form>` trong HTML được sử dụng để tạo một mẫu HTML để nhập
liệu từ người dùng. Nó chứa các phần tử nhập liệu như các trường văn bản,
các trường mật khẩu, các checkbox, các radio button, nút submit, các menu,
v.v. Một mẫu HTML là một phương tiện cho người dùng nhập dữ liệu được
gửi đến máy chủ để xử lý .
Để tạo một mẫu trong HTML, chúng ta sử dụng cú pháp sau:

```html
<form action="server url" method="get|post">
//input controls
</form>
```
* PHÍM TẮT
CTR +D: bỏ chọn
+ J: tạo vùng chon mới , đưa vùng chọn về 1 lớp
+ : phóng to
-: thu nhỏ
ship +tab: Bỏ bảng
Tab: bỏ thanh công cụ
Ctr + alt + d:
Alt + del: tô theo mầu trước
Ctr + del: tô theo mầu sau(background)
Ctr + ship + I: đảo chọn
Ctr + []: đưa lớp lên xuống thanh aline
[]: tăng giảm cọ vẽ
Thực hành các bước với màn hình làm việc
CTRL + 0: Đưa màn hình thực hiện công việc của bạn ở kích thước bất
kỳ về đúng bằng với kích thước hiển thị màn hình của máy tính.
ALT + con lăn chuột: Giúp đỡ và hỗ trợ phóng to hoặc thu nhỏ màn
hình thực hiện công việc. Thực ra là nó cũng giống như là phím tắt Crtl
+ - và Ctrl + + đấy các bạn.
Space (phím cách) + giữ chuột trái, và di chuyển: Giúp đỡ và hỗ
trợ di chuyển màn hình thực hiện công việc đến vị trí mà bạn muốn.
Nó giống như là khi sử dụng công cụ Hand tooL (H).
Các phím tắt trong photoshop khi thực hiện công việc với layer
Lưu ý: Trên Windows bạn sử dụng phím Ctrl, trên Mac sẽ là phím
Cmd
 Ctrl/Cmd + Shift + N: Phím tắt tạo layer mới. Lần tới khi bắt tay thực
hiện 1 sản phẩm, hãy dùng tổ hợp phím tắt tiện ích này để thêm 1 layer
mới nhanh chóng.
 Ctrl/Cmd + biểu tượng New Layer: Phím tắt tạo layer mới sau layer
đang chọn. Làm chủ layer mới không phải việc chông gai, khi đã sẵn
sàng thêm layer mới sau layer đang chọn, hãy sử dụng tổ hợp phím này.
 Alt + Delete (màu foreground) hoặc Ctrl/Cmd + Delete (màu
background): Đổ màu cho layer (fill layer). Lệnh này giúp cho bạn đổ
màu cho layer trắng với màu foreground (màu nền trước) hoặc màu
background (màu nền sau) hiện tại đang dùng.
 Ctrl/Cmd + Alt + Shift + E: Phím tắt gộp layer (Flatten layers). Một
khi thêm 1 layer trắng mới trên cùng tất cả các layer hiện có,
bạn dùng tổ hợp phím trên để gộp tất cả layer thành 1 layer mới. Thực
hành các bước này làm ra 1 phiên bản ảnh Flatten cho layer mới tuy
nhiên vẫn giữ nguyên các layer cũ.
 Ctrl/Cmd + Shift + E: Phím tắt gộp các layer hiển thị (Merge visible
layers). Lệnh này cho phép trộn tất cả các layer hiện có và hình thành 1
layer mới. Hãy cẩn thận với thao tác này vì tất cả các layer cũ sẽ không
còn và 1 khi đã trộn vào thì sẽ rất khó tách chúng ra.
 Ctrl/Cmd + Alt + E: Gộp các layer được chọn. Một khi chọn lựa các
layer mong muốn gộp, bạn sử dụng tổ hợp phím này để trộn chúng
lại. Một khi gộp chúng sẽ mang tên của layer trên cùng (kèm theo từ
“merged” trong ngoặc). Nếu muốn hiển thị với tên layer mới bạn chỉ
phải thêm phím Shift
 Ctrl/Cmd + J: Thêm layer bằng cách sao chép. Lệnh này giúp tạo layer
mới bằng việc sao chép từ layer có sẵn.
 Ctrl/Cmd + Shift + J: Thêm layer bằng cách cắt. Cũng như tạo layer
mới bằng cách sao chép. Tuy nhiên, lệnh này không thực hiện với cả
layer mà với 1 vùng chọn. Ngoài ra, vùng chọn này một khi được đưa
vào layer mới cũng sẽ bị cắt khỏi layer cũ
 Ctrl/Cmd + Shift + ]: Đưa layer lên đầu
 Ctrl/Cmd + Shift + [: Đưa layer xuống dưới cùng
 Ctrl/Cmd + ]: Đưa layer lên trên layer trước nó
 Ctrl/Cmd + [: Đưa layer xuống dưới layer sau nó
 Ctrl/Cmd + Shift + C: Sao chép nhiều layer. Sau khi chọn 1 vùng chọn,
lệnh này có thể giúp bạn sao chép vùng chọn đấy trên toàn bộ các layer
thay vì chỉ trên 1 layer như lệnh sao chép thường thường
 ATL + Giữ chuột trái và di chuyển: Khi mà bạn chọn một Layer và
bạn dùng tổ hợp phím và chuột như thế này thì bạn có thể đạt
được một đối tượng mục tiêu mới.
Các phím tắt trong photoshop hỗ trợ làm việc với File
 Ctrl + N: Tạo một tập tin mới
 Ctrl + O: Mở một tập tin đã có sẵn trên máy tính
 Ctrl + Alt + O: Mở tập tin từ Adobe Bridge
 Ctrl + P: In ảnh
 Ctrl + S: Lưu tập tin
 Ctrl + Alt + S: Lưu thêm 1 bản sao với một tên mới
 Ctrl + Shift + S: Lưu tập tin bằng định dạng khác
 Ctrl + W: Đóng tập tin đang mở
Các phím tắt trong photoshop với Selecting
 Ctrl/Cmd + Shift + D: Chọn lại vùng chọn đã hủy. Phím tắt tuyệt
vời này vô cùng hữu ích khi mà bạn lỡ tay bỏ vùng chọn, nó sẽ giúp thu
thập lại vùng chọn nhanh chóng.
 Ctrl/Cmd + Shift + I: Phím tắt đảo ngược vùng chọn. Lệnh này sẽ giúp
bạn đảo ngược vùng chọn, từ đấy giúp chọn các khu vực lân cận vùng đã
chọn.
 Ctrl + Alt + A (Cmd + Opt + A đối với Mac): Chọn toàn bộ các layer.
Một lệnh hoàn hảo và đơn giản để chọn tất cả các layer để thực hành các
bước (không bao gồm layer background).
 Alt/Opt + dấu phẩy (,): Chọn layer dưới cùng
 Alt/Opt + dấu chấm (.): Chọn layer trên cùng
 Alt/Opt + kéo thả: Sao chép vùng chọn. sau khi chọn lựa 1 vùng chọn,
bạn chọn công cụ di chuyển Move Tool và vừa nhấn giữ phím Alt và
kéo thả vùng chọn để sao chép.
 Shift + Alt/Opt + kéo thả: Sao chép vùng chọn thẳng hàng. Tương tự
lệnh thứ 19 tuy nhiên khi thêm phím Shift, bạn không thể kéo vùng chọn
đi mọi địa điểm mà nó sẽ được tự động dóng thẳng hàng theo hàng dọc
hoặc ngang.
 Ctrl/Cmd + D: Bỏ chọn.Công cụ này giúp bỏ chọn khẩn trương.
 Ctrl/Cmd + T sau đấy Ctrl + 0: Hiển thị công cụ thay đổi kích thước
ảnh. Khi dán 1 layer hay vùng chọn vào 1 hình ảnh khác, nếu như kích
thước của nó lớn hơn ảnh sẵn có thì sẽ rất khó nhìn thấy các góc
để chỉnh sửa kích thước ảnh. Tổ hợp phím này sẽ giúp chọn
lựa Transform, sau đó là thu nhỏ hình ảnh cho vừa cửa sổ để dễ
dàng chỉnh sửa kích thước.
 Spacebar + Marquee Tool: Vừa vẽ vừa di chuyển vùng chọn. Phím
tắt hữu ích này cho phép bạn vừa sử dụng công cụ tạo vùng chọn vừa di
chuyển. Khi đang tạo vùng chọn (chưa nhả chuột ra) bạn nhấn và giữ
phím cách rồi đưa vùng chọn tới địa điểm mình mong muốn. Khi nhả
chuột thì vùng chọn có thể được tạo, còn khi nhả phím cách thì bạn tiếp
tục tạo vùng chọn ở khu vực đấy mà không di chuyển nữa.
 Ctrl/Cmd + 3 (Red), 4 (Green) hoặc 5 (Blue): Chọn từng kênh
màu nhất định (Channel). Chọn lựa kênh màu sẽ giúp loại bỏ các đối
tượng phức tạp ở hình nền đơn giản hơn.
 Alt/Opt + Brush Tool: Chọn 1 màu nhất định từ ảnh. Khi đang làm
việc với công cụ Brush mà muốn thu thập 1 mẫu màu thay vì sử
dụng công cụ Eyedropper thì bạn chỉ phải chọn phím Alt hoặc Option
trên máy Mac. Nhả phím này ra sẽ quay trở lại công cụ Brush.
Các phím tắt trong photoshop với nhóm lệnh Edit
 [: Phóng to nét bút Brush
 ]: Thu nhỏ nét bút Brush
 Ctrl + X: Cắt đối tượng được chọn
 Ctrl + C: Sao chép đối tượng được chọn
 Ctrl + Shift + C: Sao chép Merged
 Ctrl + V: Dán đối tượng vừa sao chép
 Ctrl + Shift + Ctrl + V: Dán chồng lên nhau
 Ctrl + Z: Quay lại bước ngay trước đây
 Ctrl + Alt + Z: Quay lại nhiều bước trước đó
 Ctrl + T: Chỉnh kích thước và xoay hình
 Ctrl + Shift + T: Làm lại bước Free Transform
Các phím tắt trong photoshop để lưu file
 Ctrl+ Shift + Alt + S (Mac: Cmd + Shift + Opt + S): Lưu ảnh
cho website
 Ctrl/Cmd + Shift + W: Tắt và đi tới Adobe Bridge
 Shift + Alt + P: Chuyển sang công cụ Airbrush
Các phím tắt trong photoshop với nhóm lệnh chỉnh sửa
 A: Chọn công cụ Path Selection Tool
 B: Chọn nhanh công cụ Brush
 C: Mở khung cắt ảnh
 D: Đưa Foreground Color và Background Color về màu căn bản
 E: Chọn nhanh công cụ Tẩy, Xoá
 G: Chọn công cụ đổ màu Gradient Tool
 .: Chọn màu đổ cho công cụ Gradient Tool
 H: Công cụ Hand Tool
 I: Chấm màu, thước kẻ
 J: Chấm sửa chỗ chưa đầy đủ
 L: Chọn công cụ Laso
 M: Công cụ tạo vùng chọn
 O: Công cụ làm sáng/tối ảnh
 P: Mở công cụ Pen (Vẽ đường path)

 T: Viết text
 S: Thu thập mẫu từ 1 ảnh
 V: Di chuyển đối tượng trong file làm việc
 U: Vẽ các hình cơ bản
 X: Đảo ngược màu giữa Forebackground color và Background Color
 Y: Gọi lại chỉ số cũ của ảnh
 Z: Phóng to/thu nhỏ hình ảnh
 W: Thu thập vùng chọn nhanh
 &: Đổi màu trong bảng màu
Công cụ của các phím tắt trong photoshop từ F1 đến F9 trên bàn
phím
 F1: Mở trình duyệt Help
 F2: Cắt đối tượng
 F3: Copy (tương đương với Ctrl + C)
 F4: Paste (Tương đương với Ctrl + V)
 F5: Mở Pallete Brush
 F6: Mở Pallete màu
 F7: Mở Pallete Layer
 F8: Mở Pallete Info
 F9: Mở Pallete Action
Phím tắt View
 Ctrl + Y: Xem hệ màu CMYK
 Ctrl + Shift + Y: Để coi gam màu ngoài hệ CMYK
 Ctrl + 0: Phóng to hình ảnh tràn màn hình
 Ctrl + R: Hiện thước đo Rulers
 Ctrl + +: Phóng to hình ảnh
 Ctrl + -: Thu nhỏ hình ảnh
 Ctrl + ;: Ẩn Guides
 Ctrl + Shift + ;: Nhẩy bằng Guides
 Ctrl + Alt + ;: Khoá Guides
 Ctrl + Shift + ‘: Nhẩy bằng lưới
 Ctrl + “: Hiện khung lưới
 Ctrl + Shift + H: Ẩn các đường Path trên hình ảnh

Web Cơ Bản

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Cơ Bản

Uploaded by

Copyright:

Available Formats

* Danh sách tất cả các thẻ trong HTML

Thẻ Mô tả chức năng

<html> Xác định một tài liệu HTML

Xác định phần đầu của tài liệu HTML

<title> Xác định tiêu đề của trang web

Xác định phần thân của tài liệu HTML

<p> Xác định một đoạn văn bản

<hr> Tạo một đường kẻ phân cách nằm ngang

Xác định một đoạn chú thích

Thẻ Mô tả chức năng

<abbr> Định nghĩa một từ viết tắt

<b> Xác định đoạn văn bản được in đậm

<del> Tạo một đường kẻ ngang lên văn bản

<ins> Tạo một đường gạch chân lên văn bản

<progress> Tạo một thanh tiến trình

<s> Tạo một đường kẻ ngang lên văn bản

<strong> Xác định đoạn văn bản được in đậm

<u> Tạo một đường gạch chân lên văn bản

Ngắt bớt ký tự của một từ xuống dòng.

<frame> Xác định một khung trong một bộ khung

<frameset> Xác định một bộ khung

Thẻ Mô tả chức năng

<img> Chèn hình ảnh vào trang web

<map> Tạo một bản đồ ảnh

Thẻ Mô tả chức năng

<audio> Tạo một "trình phát nhạc" cho trang web

<track> Chèn một bản phụ đề vào video

<video> Tạo một "trình xem phim" cho trang web

Tạo một liên kết đến một tài liệu nào đó

Thẻ Mô tả chức năng

<ul> Xác định một danh sách không có thứ tự

<ol> Xác định một danh sách có thứ tự

<li> Xác định một "danh mục" trong danh sách

Thẻ Mô tả chức năng

<table> Xác định phần tử là một cái bảng

<caption> Tạo tiêu đề cho bảng

<th> Xác định phần tử là một ô tiêu đề trong hàng

<tr> Xác định phần tử là một hàng trong bảng

<td> Xác định phần tử là một ô trong hàng

9) Styles and Semantics

<style> Dùng để làm thùng chứa cho các đoạn mã CSS

<header> Xác định phần đầu của trang web

<footer> Xác định phần chân của trang web

<main> Xác định phần thân của trang web

<dialog> Tạo một hộp thoại

<summary> Tạo phần tử có dạng:

10) Meta Info

Xác định phần đầu của tài liệu HTML

Thẻ Mô tả chức năng

 Attribute? – Thuộc tính của HTML nằm trong thẻ mở

Thẻ `<frame>` có ba thuộc tính cơ bản: `src`, `scrolling` và `noresize` .

Để tạo một mẫu trong HTML, chúng ta sử dụng cú pháp sau:

 P: Mở công cụ Pen (Vẽ đường path)

You might also like