Lập trình Web với ngôn ngữ HTML - Giáo trình inter- 123docz.net

2.2.1 Các thành phần cơ bản của html

Thể (tag): là một tập các ký hiệu được định nghĩa trong HTML có ý nghĩa đặc biệt. Thẻ bắt đầu bằng ký hiệu < và kết thức bởi ký hiệu >

• Cú pháp <tênthể thuộctính=“giátrị”,…>Nội dung</tênthể>

• Ví dụ: <bg clear = “left”> Nôi dung</bg>

Phần tử (element): có 2 loại phần tử trong HTML

• Phần tử chứa nội dung: bao gồm thể đóng và thẻ mở o Ví dụ: <p>Nội dung </p>

• Phần tử rỗng: bao gồm 1 thể o Ví dụ: <br>

Thuộc tính(properties): mỗi thể bao gồm một hoặc nhiều thuộc tính đi kèm. Thuộc tính được nhập vào ngày trước dấu ngoặc đóng(>) của thẻ. Có thể sử dụng nhiều thuộc tính trong một thể. Thuộc tính này kế tiếp thuộc tính khác, phân cách nhau bởi khoảng trắng.

• Ví dụ: <table border=“1”>

Giá trị: Ngoài các thuộc tính không có giá trị còn có các thuộc tính của tag có giá trị. Ví dụ: thuộc tính CLEAR của tag <BR> có ba giá trị lựa chọn: left,right, all.

Thể lồng nhau: dùng để chỉnh sửa cách trình bày nội dung trong một trang Web. Trật tự sắp xếp của những tag lồng nhau đó là thể được mở đầu tiên sẽ là thẻ đóng sau cùng

• Ví dụ: <H1> Phần <I>Nội dung</I><H1>

Khoảng trắng: Trình duyệt bỏ qua các khoảng trắng.

Tên tệp tin: phải đặt tên tệp tin với phần mở rộng là “.htm” hoặc “.html” điều này giúp trình duyệt định ra loại tài liệu khi duyệt. Để tạo một trang Web, chúng ta có thể sử dụng bất kỳ một trình soạn thảo nào để tạo ra một trang Web

2.2.2 Cấu trúc tệp HTML

Một trang Web luôn bắt đầu bằng thể <HTML> và kết thúc bởi thể </HTML> Các trang Web được chia thành 2 phần

• Phần đầu: được đặt giữa hai thẻ <HEAD> và thể </HEAD> - định ra tiêu đề, nội dung của tiêu để.

• Phần thân: đặt giữa 2 thể <BODY> và </BODY> - chứa nội dung của trang Web Ví dụ:

<title>Tiêu đề trang Web</title> </head>

<body>

Xin chào mừng đến với khóa học HTML </body>

</html>

2.3 Các tag cơ bản trong HTML2.3.1. Thẻ giải thích 2.3.1. Thẻ giải thích

• Tác dụng: Giải thích hoặc chú thích các dòng lệnh. Trình duyệt sẽ không hiển thị nội dung nằm giữa các thẻ ghi chú

• Cú pháp: <!– Nội dung chú thích-->

2.3.2 Các thẻ định dạng văn bản

• Định dạng chữ

 Cú pháp <FONT Face = “fontname1,fontname2,..></Font>

 Trong đó:

o fontname1 là phông chữ được chọn

o fontname2 được sử dụng khi trên máy người dùng không tôn tài fontname1 o Ví dụ: <font face = “Arial, Time new roman”, bold>

 Cú pháp: <Basefont size = “n”>

 n mang giá trị từ 1 đến 7. Giá trị mặc định là 3.

• Định màu cho văn bản

 Cú pháp: <Font color = “Giá trị”></Font>

 Color: là màu dùng cho chữ. Giá trị màu có thể gõ bằng chữ hoặc hệ số hexa (16)

 Ví dụ: <Font color=“red”> Lớp lập trình Web </font> <Font color=“#FF000”> Lớp lập trình Web</font>

• Định dạng chữ

 Thẻ <B>nội dụng</B> hoặc <Strong>Nội dung</Strong>

 Thẻ <I>nội dụng</i> hoặc <em>nội dụng</em>

• Định dạng chỉ số trên mà dưới  Chỉ số trên: <SUP></SUP>  Ví dụ: AX2+BX+C =0 AX<SUP>2</SUP>+BX+C=0  Chỉ số dưới: <SUB></SUB> - Ví dụ: C+02=C02 C+O<SUB>2</SUB>=CO<SUB>2</SUB>

• Phân đoạn văn bản

 Cú pháp <P thuộc tính=“giá trị”>

 Thuộc tính align: canh đoạn văn bản. Align có thể nhận các giá trị sau – Left: nội dụng trong đoạn được canh trái

– Righ: nội dung trong đoạn được canh phải – Center: nội dung trong đoạn được canh giữa

• Thẻ phân cấp đề mục: Trong HTML cho phép sử dụng 6 cấp đề mục trong trang Web

 Cú pháp: <Hn>Nội dung</Hn> với n mang giá trị từ 1 tới 6

 Ví dụ:

 <H1> Giám đốc </H1>

 <H2> Phó giám đốc </H2>

 <H3> Nhân viên </H>

• Chèn hình ảnh vào trang Web

 Cú pháp: <IMG SRC= “tên tập tin chứa hình ảnh>

 Tên tệp tin chứa hình ảnh có cả đường dẫn thư mục. Nếu tệp tin hình ảnh được đặt cùng thư mục với thư mục chứa trang Web thì không cần đường dẫn thư mực

 Ví dụ <IMG SRC=“images/anh1.jpg”>

• Thêm đường viên xung quanh hình ảnh

 Cú pháp: <IMG SRC=“tên file” Border=“n”>

 Với n là độ dày của đường biên ảnh, tính bằng pixel

 Ví dụ <IMG SRC=“images/anh1.jpg” border=“2”>

• Canh chỉnh hình ảnh

 Cú pháp: <IMG align=“giá trị”>Nội dung

 Giá Trị:

o left: hình ảnh nằm bên trái màn hình o right: hình ảnh nằm bên phải màn hình o center: hình ảnh nằm giữa màn hình

o Ví dụ <image src="IBM.jpg" align=“left">Xin chào

• Thêm chữ xung quanh hình ảnh

 Cú pháp: <IMG SRC=“tên file” align=“giá trị”> Nội dung

 Giá trị

o Top: ví trí văn bản nằm ở phái trên hình ảnh o middle: vị trí văn bản nằm ở giữa hình ảnh

o bottom: vị trí văn bản nằm ở dưới hình ảnh

• Chèn ảnh nèn <html>

<body background="background.jpg"> <h3>Look: A background image!</h3>

<p>Both gif and jpg files can be used as HTML backgrounds.</p> <p>If the image is smaller than the page, the image will repeat itself.</p> </body>

</html>

• Đường kẻ ngang trang Web

 Thẻ <HR>: dùng để kẽ đường ngang trên trang Web, giúp trang Web rõ ràng hơn.

 Cú pháp:

o <HR size=“n” width=“w” align=“giá trị”>

 Size: độ dày/mỏng của đường kẻ tính bằng pixel

 Width: chiều rộng của đường kẻ tính bằng pixel

 Align: canh đường kẻ. Có 3 giá trị left,right, center

• Định màu nền cho trang Web

 Để đình mầu nền cho trang Web, bổ sung thuộc tính bgcolor vào trong thẻ BODY

 Cú pháp <BODY bgcolor=“color”>

 Color là màu cần định cho trang Web

• Định ảnh nền cho trang Web

 Dùng hình ảnh làm nền cho toàn trang Web thày vì sử dụng màu nền

 Cú pháp <BODY background=“tên tệp”>

 Tên tệp là tên tệp tin hình ảnh càn làm nền cho trang Web

• Xuống dòng trong trang Web

 Cú pháp <BR>

• Tạo danh sách theo thứ tự

 Cú pháp

<OL Type = X START=n>

<LI> Nội dung mục 1 <LI> Nội dung mục 2 …..

<LI> Nội dung mục N

</OL>

 Trong đó X đỉnh kiểu ký hiệu sẽ được sử dụng trong danh sách o A là chữ hoa

o a danh sách được đanh theo thứ tự chữ thường o I,I,1

o N là giá trị bắt đầu của danh sách

• Tạo dấm tròn (bullet) cho danh sách

 Cú pháp

<UL Type=“kiểu chấm tròn”> <LI> Nội dung mục 1

<LI> Nội dung mục 2 …..

 Trong đó “kiểu chấm tròn” mang một trong 3 giá trị sau: o disc: kiểu dấu chấm tròn đậm

o Circle: kiểu dấu chấm tròn rỗng o Square: kiểu dấu chấm vuông đặc

• Tạo danh sách định nghĩa: là loại danh sách có dạng một từ hay một cụm từ kèm theo nội dung dài, rất thích hợp giải thích ý nghĩ của nội dung

 Cú pháp: sử dụng các thẻ <DL>, <DT>, <DD> o <DL>: để tạo danh sách định nghĩa

o <DT> :đánh dấu thuật ngữ được định nghĩa trong danh sách o <DD>: giải thích thuật ngữ ở trên

 Ví dụ <DL>

<DT><B>Hướng công nghệ phần mềm></B> <DD>

Đào tạo ra những lập trình viên, đáp ứng nhu cầu cần thiết của xã hội </DD>

</DL>

2.3.3 Tạo liện kết (link)

Liên kết là đặc trưng WWW, cho phép người dùng chuyển từ mục này sang mục khác trong cùng một trang hoặc chuyển sang một trang Web này sang một trang Web khác

a. Liên kết trong cùng một trang Web: cho phép liên kết đến các mục bên trong một trang Web.

• Các bước thực hiện

 Tạo một điểm neo (bookmark)

o Cú pháp: <a name=“tên điểm neo cần tạo”>NDung</A>

 Tạo liên kết đến điểm neo

o Cú pháp: <a href=“#tên điểm neo cần liên kết đến”</A> o Dấu # báo cho trình duyệt biết liên kết này là nội bộ

 Ví dụ: `

b.Tạo liên kết đến các trang Web khác

 Cú pháp <A href=“URL”>Nội dung</A> o Ví dụ

 <a herf=http://www.vimaru.edu.vn>DHHH</A> o Thuộc tính

 Target=“giá trị”: mở liên kết ở vị trí nào?phụ thuộc giá trị – _blank:nạp liên kết vào một cửa sổ trống mới

– _parent: nạp liên kết vào cửa sổ cha gần nhất của trang Web hiện thời

– _self: nạp liên kết vào cùng cửa sổ với trang Web hiện hành – _top: nạp liên kết vào cửa sổ cao nhất

2.3.4 Một số kí tự đặc biệt trong HTML

HTML dùng các kí từ < và > để mở và đóng 1 thể, do đó không thể hiện các ký tự đặc biệt này. Vì vậy cần có một nhóm ký tự thay thế

2.3.5 Các tag dùng thiết kế bảng

• Cú pháp:

 <Table ></Table>: Bắt đầu một bảng mới với các thuộc tính đi kèm

 Thuộc tính:

o Bgcolor: đình màu nền cho bảng

o Border: định đò dày, mảnh của đường viền o Bordercolor: định màu cho đường viền

o Bordercolordark: định màu sậm cho phần hắt bóng của đường viền o Cellpadding: định khoảng cách giữa nội dung và đường viền o Cellspacing: định khoảng cách giữa các ô

o Frame: hiển thị đường viền ngoài o Height: định chiều cao bảng o Width: định chiều rộng bảng o Rules: hiển thị đường viền trong

 <TR>Nội dung</TR> bắt đầu một hàng mời trong bảng với các thuộc tính: o Align/valigh: canh chỉnh nội dung hàng theo phương ngang/dọc

o Bgcolor: thay đổi màu nền của bảng

 <TH></TH>,<TD></TD>: bắt đầu một đề mục mới cho bảng vớic ác thuộc tính sau

o Align/valigh: canh chỉnh nội dung hàng theo phương ngang/dọc o Bgcolor: thay đổi màu nền của ô

o Colspan: mở rộng ô qua nhiều cột o Rowspan: kéo dài ô xuống nhiều hàng o Nowrap: giữ nội dung ô nằm trên một dòng o Width, height: đình chiều rộng, cao cho ô

o <Table border=“n”>

 Thay đổi màu khung

o <Table bordercolor=“mầu”>

 Thiết lập độ rộng

o <table width = “giá trị”>

 Thiết lập tiêu đề cho bảng

o <caption>Nội dung</caption>

2.3.6 Các tag tạo Frame

Khung (Frame) là thành phần cơ bản của Web, một trang Web có thể được chia thành nhiều khung, mỗi khung sẽ chứa một trang Web riêng

a. Tạo Frame có dạng hàng

• Cú pháp:

• Trong đó:

o a: chiều cao frame đầu tiên

o *:chiều cao của frame thứ 2 là khoảng trống còn lại o b:chiều cao của frame thứ 3

b.Tạo Frame có dạng cột

• Cú pháp:

</Frameset>

o Scorlling = “yes/no”: ẩn/hiện thanh cuộn o Frameboder=“yes/no”: ẩn/hiện viền khung o Border=“n”: chỉnh độ dày/mỏng của viền khung o Noresize: không cho thay đổi kích thước của khung

2.3.7 Các tag dùng tạo Form

Form là thành phần giao tiếp cơ bản giữa người duyệt Web với người tạo Web. Dữ liệu được nhập vào Form thông qua các hộp điều khiển.

Cú pháp: <FORM>…</FORM>

• Tạo Textbox

o Cú pháp: <input type = “text” name=” name” value = “value” size = n maxlength = n>

o Trong đó: “name” là chuỗi kí tự nhận diễn dữ liệu nhập vào, “value” là dữ liệu đầu tiên hiển thị trong Textbox và được gửi đến máy chủ khi người duyệt không gõ thông tin gì, size định kích thước của Textbox, maxlength giới hạn số kí tự nhập vào Textbox

• Tạo Textboxx với vùng văn bản chứa nhiều dòng

o Cú pháp: <textarea name = “name” rows = “n”, cols = “m” wrap><textarea> o Trong đó “name” là chuỗi kí tự nhận diện dữ liệu nhập vào, n là chiều cao của

vùng văn bản tính bằng dòng (mặc định = 4), m là chiều rộng của vùng văn bản tính bằng kí tự (mặc định = 40).

• Tạo nút Radio button: Radio là nút chì được họn một trong số đó, không thể chọn lựa hai nút cùng lúc

o Cú pháp <input type = “radio name = “name” value = “data” checked>

• Tạo ô chọn (checkbox): khác với Radio, checkbox cho phép chọn nhiều nút trong một nhóm.

o Cú pháp <input type = “checkbox” name = “set” value = “value” checked>

• Tạo nút Push button (nút nhấn)

o Cú pháp<input type = “button” value = “nhãn”>

o Để tạo nút nhấn khi người dùng nhấn vào, dữ liệu của các điều khiển khác đều được đặt giá trị mặc định lúc khởi tạo, có thể chỉ định thuộc tính type =”reset” trong tag <input>. Tạo nút nhấn đề kết thục việc nhập dữ liệu của một Form, ta chỉ định thuộc tính type = “submit” trong thẻ <input>

• Tạo Dropdown Listbox: là danh sách chứa nhiều mục o Cú pháp

Chương III Cascading style sheets 2.1 Căn bản về CSS (Cascading style sheets)

CSS là một chuẩn để định dạng các trang Web. CSS mở rộng ngôn ngữ HTML truyền thống với hơn 70 thuộc tính về kiểu dáng có thể áp dụng cho các thẻ HTML.Với CSS, các nhà lập trình Web có thêm nhiều lựa chọn về màu sắc, khoảng cách, vị trí, biên, lề, con trỏ.

Ví dụ:

<html>

<span style=”cursor:hand;”> Chuyển con trỏ thành bàn tay </span>

</html>

2.2 Cú pháp CSS

Cú pháp của CSS được tạo nên bởi 3 thành phần: - Phần tử chọn (thường là một thẻ HTML) (Selector) - Thuộc tính (Property)

- Giá trị (Value)

Cú pháp của CSS được thể hiện như sau: Selector { Thuộc tính 1: giá trị; Thuộc tính 2: giá trị; …… Thuộc tính n: giá trị; }

Selector thường là các thẻ HTML mà bạn muốn định nghĩa thêm. Property là thuộc tính mà bạn muốn thay đổi; mỗi một thuộc tính cần phải có một giá trị. Một thuộc tính và giá trị của nó được phân cách nhau bởi dấu hai chấm (:). Hai cặp thuộc tính-giá trị được phân cách nhau bởi dấu chấm phảy (;). Toàn bộ các cặp thuộc tính-giá trị của một thẻ HTML được đặt trong cặp dấu ngoặc nhọn ({}).

2.2.1 Phần tử chọn – Seclector

a. Dùng các phần tử HTML làm phần tử chọn: là cách tuyệt vời để áp dụng CSS nếu muốn tất cả các phần tử thuộc một kiểu nào đó xuất hiện với cùng một định dạng. Cách làm này là cứng nhắc nhất trong 3 cách nhưng nó là cách tốt nhất để đảm bảo tính nhất quán của việc định dạng suốt tài liệu. Một trong những cách dùng HTML làm phần từ chọn thường đuợc dùng là định dang các siêu liên kết trong tài liệu.

<STYLE TYPE=”text/css”> <!--

A {text-decoration:none;} -->

Ví dụ

body{color: black} /*Phần chữ trong thẻ body sẽ có màu đen*/ hay:

p {text-align: center} /*tất cả các thẻ <P> trong trang HTML sẽ được canh giữa.*/ hay định nghĩa nhiều thuộc tính:

p { text-align: center; color: red; font-family: arial }

Style sheet giới thiệu một số tùy chọn để các nhà thiết kế có thêm quyền điều khiển style cho các phần tử

a. Dùng CLASS làm phần tử chọn

Bằng việc tạo ra các lớp, có thể định nghĩa nhiều kiểu thể hiện khác nhau cho cùng một thẻ HTML và áp dụng mỗi lớp vào một vị trí cần thiết trên trang web. Có 2 cách thức dùng CLASS:

Các CLASS gắn với 1 thẻ cụ thể

Ví dụ: Trên trang web có 3 loại đoạn văn: Đoạn văn canh lề trái, đoạn văn canh lề giữa và đoạn văn canh lề phải. Khi đó có thể định nghĩa 3 lớp riêng biệt cho 3 loại đoạn văn này như sau:

p.trai {text-align: left} p.phai {text-align: right} p.giua {text-align: center}

Tiếp theo, trong trang HTML sử dụng như sau:

Chú ý:

- CSS phân biệt chữ hoa và chữ thường giống như C++ do đó khi viết cần phải cẩn thận trong việc sử dụng chữ hoa, chữ thường.

- Trong trang HTML, chỉ được phép khai báo 1 thẻ thuộc duy nhất một lớp. Trái điều này mặc dù trình duyệt không báo lỗi nhưng các lớp sẽ không hoạt động được.

Ví dụ về sử dụng lớp sai:

<p class="trai" class="phai">Đây là đoạn định nghĩa sai</p>

Các ví dụ ở trên là ví dụ về việc tạo các lớp bị "gắn chặt" với một thẻ nào đó, tức là không sử dụng được lớp này trong thẻ khác. Theo các khai báo ở trên, ví dụ dưới đây sẽ không hoạt