Các thẻ HTML cơ bản ~ Tài liệu học thiết kế web

Tài liệu dành cho những bạn mới làm quen với ngôn ngữ PHP và muốn trở thành một lập trình viên về ngôn ngữ PHP thì chúng ta có rất nhiều cách học khác nhau như: Học PHP online, học PHP qua tài liệu....vì thế quyển tài liệu này sẽ giúp các bạn hiểu được điều cơ bản nhất nếu muốn học ngôn ngữ PHP thì chúng ta cần biết những gi?
Phần A: Cơ Bản Về HTML & Javascript

I – Các Thẻ HTML cơ bản

1- Cấu trúc chung:

<HTML>

<HEAD>

<TITLE>Tiêu đề Website</TITLE>

</HEAD>

<BODY> Nội dung website </BODY>

</HTML>

+ Một cấu trúc HTML luôn bao gồm những thẻ đóng và thẻ mở.

Ví dụ : <B> đây là thẻ mở

</B> đây là thẻ đóng - 2 thẻ này khác nhau bởi dấu /

+ Các thẻ HTML hoàn toàn có thể viết hoa hoặc thường. Tuy nhiên nên theo 1 quy tắc chung (viết hoa thì cùng viết hoa hoặc viết thường thì nên viết thường tất cả).

+ Một website càng ít thẻ thì càng chạy nhanh hơn.

2- Các thẻ cơ bản :

+ Tiêu đề : <H>Nội Dung</H>

(ví dụ: <H1>Welcome, admin</H1>). Thẻ H bao gồm các thuộc tính từ (H1--> H6). Nhưng chỉ Sử dụng thẻ H1 H3.

+ In đậm: <B>Nội Dung</B> (ví dụ: <b>Welcome, admin</b>)

+ In Nghiêng: <I>Nội Dung</I> (ví dụ: <i>welcome, Admin</i>)

+ Gạch chân : <U>Ni Dung</U> (Ví dụ: <u>welcome, Admin</u>)

+ Xuống 1 Dòng : <BR> - Thẻ này không có thẻ đóng.

+ Xuống 2 Dòng : <P> - không bắt buộc thẻ đóng có hay không cũng được

- Định dạng chữ bằng thẻ <FONT>

+ Kích thước chữ: <font size = 'thông số'>Nội dung </font>

Ví dụ : <font size = '14'> Nguyễn Văn A </font>

+Kiểu chữ : <font face = "kiểu chữ"> nội dung</font>

Ví dụ <font face = "Arial"> Tôi đang bận</font>
+ Màu chữ: <font color = " màu chữ" > nội dung </font>

Ví dụ: <font color = "red"> tôi đang làm việc</font>

+ Tạo liên kết : <a href = " link đường dẫn"> nội dung </a>

Ví dụ : <a href = "google.com"> tìm kiếm </a>

+ Mở cửa số mới với liên kết: <a href = "link đường dẫn" target = _blank></a>

Ví dụ : <a href = "google.com" target = _blank> tìm kiếm </a>

+ Mở liên kết đó ngay trên trang hiển thị : <a href ="link đường dẫn" target = _seft> nội dung</a>

Ví dụ : <a href = "24h.com.vn" target = _seft> thông tin 24h hàng ngày</a>

+ Định dạng thuộc tính <p align = thuộc tính(thuộc tính left(căn trái), right (căn phải ), center(căn giữa), justify (căn đều 2 bên ))>
Ví dụ : <p align = center> nội dung (phần nội dung sử dụng thẻ này sẽ được căn giữa)

+ Chèn hình ảnh vào Website : cú pháp <IMG SRC = "URL hình ảnh" BORDER ="thông số"

HSPAGE ="thông số" VSPAGE = "thông số" ALIGN = "thông số" WIDTH = "thông số"

HEIGHT = "thông số">

<IMG SRC = "URL"> cú pháp chính để xuất hình ảnh

<IMG SRC = "URL hình ảnh" BORDER ="thông số"> cú pháp khi hình ảnh đi kèm với liên kết

Giải thích : BORDER : đường viền bao quanh

HSPAGE : Khoảng cách từ lề phải của hình ảnh tới lề trái của văn bản

VSPAGE : khoảng cách từ trên của hình tới phía dưới của văn bản

ALIGN : định dạng canh lề

WIDTH: chiều rộng tấm hình

HEIGHT : chiều cao tấm hình

II. Tạo Form trong HTML

Form nhập liệu được dùng để lấy dữ liệu từ người truy cập, khách hàng....Thông qua Website của chúng ta. Cú pháp cơ bản trong Form cũng có thẻ đóng thẻ mở:

Cú pháp chính: <form method="POST" action = "link" name ="tên" >

Nội dung của form

</form>
+ Methot : Là phương thức truyền nhận dữu liệu. Gồm 2 phương thức là POST và GET

+ action : Là đường dẫn liên kết xử lí form

+ name: tên của form đó

- Cơ cấu của Form :

1. Dạng Text (Ví dụ như : Nhập họ tên,địa chỉ, số điện thoại, email.....)

Cú pháp: <input type = "thuộc tính" name = "tên" size = "chiều dài" value = "giá trị" >

+ type : định dạng dữ liệu nhập vào gồm 2 loại (text: có thể nhìn thấy được, password: không nhìn thấy)

+ name: tên của textfiel nhập vào

+ size: chiều dài của textfiel

+ value: giá trị (ít sử dụng với textfiel)

2. Dạng văn bản - TextArea :(Ví dụ : nhập thông tin cá nhân, ghi chú, nhật kí.......)

Cú pháp : <textarea name= "textarea" cols="thông số" rows="thông số"></textarea>

+ name: tên textarea

+ cols: độ rộng của textarea

+ rows: chiều cao của textarea

3. Dạng lựa chọn (Ví dụ đơn giản như lựa chọn giới tính)

Cú pháp: <input type = "radio" name="tên" value = " giá trị" checked>nội dung</input>
Ví dụ : <input type = "radio" name ="sex" value = "M" checked>Nam</input>

4. Dạng thanh cuộn (Lựa chọn quê quán, năm sinh, quốc tịch.....)

Cú pháp: <select size = "Thông số" name = "tên" >

</select>

+ size kích thước hộp thoại bạn muốn

+ name : tên thanh quận

+ option thuộc tính lựa chọn

+ thuộc tính selected thêm vào sẽ mặc định lựa chọn

+ giá trị là thông số bạn muốn truyền vào

Ví dụ :

</select>

5. Dạng chọn nhiều

Cú pháp

6. Dạng nút ấn

Bài tập về nhà

Bài tập PHP cơ bản

Tài liệu học thiết kế web

Pages

Thứ Ba, 24 tháng 12, 2013