Tải bản đầy đủ
1Tìm hiểu về HTML

1Tìm hiểu về HTML

Tải bản đầy đủ

Thẻ định dạng khối trong HTML, được sử dụng để định nghĩa một đoạn văn
bản, một tiêu đề hay một định dạng có sẵn.


,

,...,


Thẻ P: Được dùng để định dạng đánh dấu một đoạn văn bản.
Thẻ H1, H2…: Được dùng để đánh dấu đề mục trong văn bản.
Thẻ Br: định dạng xuống dòng văn bản.
Thẻ Pre: Được dùng để giới hạn đoạn văn bản được định dạng sẵn.Văn bản đặt
trong thẻ này sẽ được thể hiện giống như khi chúng được đánh vào.
 Thẻ định dạng danh sách
-

Danh sách không theo thứ tự (Unorder list- UL)
Danh sách theo thứ tự (Ordered List – OL).
Một hoặc nhiều thể phần tử trong danh sách (List Item – LI).
Cấu trúc:




  1. Mục thứ nhất

  2. Mục thứ hai



 Liên kết
Một trang website bao gồm rất nhiều trang web (web page), các web page liên



kết lại với nhau để tạo lên website.


Liên kết trong HTML được định nghĩa bằng cặp thẻ

 Bảng

66

Bảng trong HTML được định nghĩa bởi thẻ . Một bảng được chia
thành các hàng (row, định nghĩa bởi ), và mỗi hàng được chia thành các cột
(column, định nghĩa bởi
).
1.1.2. Multimedia
 Hình ảnh
Hình ảnh khi sử dụng trong web được sử dụng thẻ cách sử dụng như sau.
Code:
Pulpit rock.
 Forms
• Giới thiệu
HTML Form được sử dụng để truyền dữ liệu tới server. Form trong html có
thểchứa nhiều các thẻ input để dịnh nghĩa dữ liệu.
- Thẻ định nghĩa form:
.
input elements.

• Một số thuộc tính của form
Thuộc tính
accept

Giá trị

Giải thích
Chỉ rõ những kiểu file có thể upload

MIME_type

thông qua form
Chỉ rõ những hệ mã hóa kí tự có thể

accept-charset character_set

sử dụng trong form.

application/x-www-formenctype

Chỉ rõ phương thức mã hóa dữ liệu

urlencoded

khi form gửi dữ liệu tới server. (chỉ

multipart/form-data

method
name

text/plain
Get/Post
Name

Action

URL

sử dụng cho method="post")
Chỉ rõ kiểu gửi dữ liệu.
Chỉ rõ tên của form.
Chỉ rõ địa chỉ dữ liệu sẽ gửi tới.
(Thuộc tính bắt buộc)

77

1.2. Tìm hiểu về CSS
1.2.1.Giới thiệu
CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một dạng
file text với phần tên mở rộng là .css. Trong Style Sheet này chứa những câu lệnh
CSS.Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML.
 Các cách nhúng style cho văn bản HTML
Hiện tại có ba cách để định dạng văn bản sử dụng CSS: cục bộ, nhúng vào
trang và liên kết đến một file CSS riêng biệt. Trong thực tế thì cách cuối cùng là liên
kết đến một file riêng biệt được sử dụng phổ biến nhất.
Cục bộ: code CSS được chèn trực tiếp vào trong thẻ HTML. Cách định dạng
cục bộ là bạn sử dụng code CSS chèn trực tiếp vào thẻ HTML và chỉ có tác động lên
thẻ đó.
Nhúng vào trang web.Cách thứ hai là khai báo code CSS nằm trong cặp thẻ
được đặt ở phần của tài liệu.
1.2.2.Các lệnh cơ bản
 Màu chữ và màu nền
Để có thể định dạng nền của một thành phần HTML ta có thể sử dụng các định
dạng sau:
background-color //

background-image //chỉ định hình ảnh được sử dụng trong nền

background-repeat // chỉ định tính lặp lại của nền
background-attachment // chỉ định kiểu di chuyển của nền
background-position // chỉ định vị trí của nền
 Font chữ

Trong CSS hệ thống font chữ có thể định dạng được các thuộc tính sau: loại
font chữ (font family), độ dày của font chữ (font boldness), cỡ fontchữ (font size), kiểu
font chữ (font style)
Font weight
Để định dạng độ dày của chữ ta sử dụng thuộc tính font-weight của CSS. Các
giá trị có thể nhận của thuộc tính này là: normal, bold, bolder, lighter, các giá trị từ 100
tới 900.

88

Cú pháp cho việc định dạng độ dày như sau:
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
Font size
Ta có 2 cách để định giá trị cho cỡ chữ:
-

Cách định giá trị cỡ chữ tuyệt đối: cỡ chữ sẻ được định theo giá trị không thay đổi

-

được.
Cách định giá trị tương đối: cỡ chữ có thể thay đổi dựa theo các thành phần khác của
web.
Font style
Cú pháp như sau:
p.normal {font-style:normal;}
p.italic {font-style:italic;}

 Text

Kiểu văn bản trong CSS có thể được định dạng những thuộc tính sau: Màu sắc
(color), căn lề (text alignment), trang chí (text decoration), kiểu chữ (text
transformation) và định lề chữ đầu (text Indentation).
 Class và Id
Id hay là index(chỉ số) được dùng để xác định một đối tượng duy nhất nào đó.
Class hay còn gọi là lớp dùng để chỉ một lớp các đối tượng có chung các thuộc
tính. Các đối tượng trong cùng một class có tính thừa kế lẫn nhau.
 Box model

Tất cả các thành phần của HTML đều có thể được coi như một hộp (box),
chúng có thể sắp xệp cạnh nhau hoặc chồng lên nhau. CSS Box về cơ bản là hộp bao
quanh một thành phần HTML và nó có các khoảng cách về: lề trong, lề ngoài, độ dày
lề của hộp. Các hộp khi được xắp xếp với nhau sẽ xây dựng nên layout của một
website. Hình sau mô tả về box của HTML:

99

Trong đó:
- Margin: sẽ tạo ra lề ngoài của box, toàn bộ khoảng này sẽ được xây dựng như
khoảng trống và không có màu nền.
- Border: là phần lề bao bọc padding và content, border có thể có các thuộc tính
về màu nền, bo tròn, độ dày…
- Padding: là phần lề trong, padding background có thể bị ảnh hưởng bởi màu
của box.
- Content: Là phần nội dung của box.
 Height và Width

Một block trong CSS có thể định nghĩa được chiều cao và chiêu rộng thông qua
height và width thuộc tính. Dưới đây là bảng các thuộc tính và giá trị có thể có:
Thuộc tính
height

Giải thích

Giá trị

Định chiều cao của đối tượng

Auto,length, %,inherit

max-height Định chiều cao lớn nhất của đối tượng Auto,length, %,inherit
max-width

Định chiều rộng lớn nhất của đối

Auto,length, %,inherit
tượng
min-height Định chiều cao nhỏ nhất của đối tượng Auto,length, %,inherit
Định chiều rộng nhỏ nhất của đối
min-width
Auto,length, %,inherit
tượng
width
Định chiều rộng của đối tượng
Auto,length, %,inherit
 Float và Clear

Float chủ yếu dùng để căn chỉnh hình ảnh sao cho chữ sẽ bao quanh hình ảnh.
Để tạo được hiệu ứng này bạn cần có một thẻ



1010


ball

Box Model


Tạo thẻ div bao quanh là cách để bạn quản lý độ rộng thực
sự của box. cho dù khi tôi thêm giá trị padding bằng 5px vào
mỗi bên trái phải, nó cũng không làm tăng độ lớn. Mà ngược lại,
nó sẽ bị đầy lùi vào biên là 5px .



Clear thực chất chỉ là một tính năng chống không cho đoạn văn ở dưới tràn lên
trên để lấp vào chỗ trống.Như đã nói ở trên, khi dùng float có thể tạo ra hiệu ứng chữ
bao xung quanh hình.Nhưng đôi khi vì dư chỗ, cho nên đoạn văn ở dưới di chuyển lên
trên và lấp vào chỗ trống.Tất nhiên đó không phải là điều mong muốn, do vậy cần sử
dụng Clear để xử lý vấn đề này nó đi.
 Positions

Thuộc tính position xác định phương pháp định vị trí cho thành phần của
HTML. Nó thường sử dụng với các thuộc tính khác như left,right, bottom, top để định
vị vị trí của khối.
tag {
position: giá trị;
}
1.3 Tìm hiểu về ngôn ngữ kịch bản javascript
1.3.1 Giới thiệu ngôn ngữ JavaScript
Javascript là ngôn ngữ kịch bản phổ biến nhất trên thế giới hiện nay.Nó là ngôn
ngữ chuẩn được sử dụng trong các trang web cũng như cho các ứng dụng desktop,
mobile.Javascript được thiết kế thêm các tương tác tới các trang html.
Vậy thế nào là ngôn ngữ kịch bản?Ngôn ngữ kịch bản là ngôn ngữ lập trình
nhẹ hỗ trợ việc viết kịch bản. Kịch bản ở đây là các dòng code có thể được thông dịch
và thực thi nhanh chóng với các bước liên kết và biên dịch rõ ràng.
Javascript có thể làm những gì?
- Javascript cung cấp 1 công cụ lập trình cho các nhà thiết kế web html.

1111

- Javascript có thể thao tác html (đọc và thay đổi nội dung của các thẻ html).
- Javascript có thể thao tác với CSS (đọc và thay đổi định dạng của các thẻ html).
- Javascript có thể xác định tính hợp lệ của dữ liệu (validate data).
- Javascript có thể lưu trữ dữ liệu.
- Javascript có thể thực hiện lại các sự kiện
 Nhúng JavaScript vào trang HTML

Nội dung của javascript được đặt trong cặp thẻ .
Nội dung của javascript có thể được đặt trong thẻ và phần của
trang web, hay có thể được đặt riêng ra 1 file .js
 Biến và đối tượng

-

Khai báo không tường minh: ten_bien = bieu_thuc;

-

Khai báo tường minh:

+ Khai báo biến và không khởi tạo giá trị: var ten_bien;
+ Khai báo biến và khởi tạo giá trị ban đầu: var ten_bien = bieu_thuc;
 Quy tắc đặt tên biến:
-

Ký tự bắt đầu phải là một chữ cái hoặc dấu gạch dưới “_”

-

Trong tên biến không chứa khoảng trắng và các kỹ tự đặc biệt

-

Các biến phân biệt chữ hoa, chữ thường.

 Các toán tử

- Gán (=)
- So sánh
Toán tử
==
!=
>
>=
<
<=

Ý nghĩa
So sánh bằng
So sánh không bằng
So sánh lớn hơn
So sánh lớn hơn hoặc bằng
So sánh nhỏ hơn
So sánh nhỏ hơn hoặc bằng

- Số học

1212