Bai1 : Giới thiệu về ngôn ngữ HTML và Nguyên lý Internet

Nguyên lý Internet :
Là mạng diện rộng có phạm vi truy cập trên toàn cầu
1)Ngôn ngữ HTML (HyperText Mark up Language):
Là một ngôn ngữ đánh dấu siêu văn bản,phần đuôi mở rộng cua html là:.html
2)Cách vào màn hình soạn thảo Notepad:
Bạn có thể sử dụng Notepad,front page để soạn thảo html.
Cách vào đơn giản : Start / Program / Accessories / Notepad
3)Cấu trúc của ngôn ngữ html:
<html>
      <head>
             <title>tiêu đề</title>
     </head>
   <body bgcolor=màu nền Text=màu chữ>
    Nội dung
</body>
</html>
VD : vidu.html
   <body bgcolor=red text=white>
   <marquee>Chao ban</marquee>
</body>
4)Một số cặp thẻ cơ bản
<b>in đậm</b>
<u>Gạch chân</u>
<I>in nghiêng</I>
<font size=cỡ>Tạo cỡ chữ</font>
<font color=mầu>Tạo mầu chữ</font>
<font face="kiểu">Tạo kiểu chữ</font>
<br>Xuống 1 dòng
<p>Xuống hai dòng</p>
Chèn hình ảnh : <img src="đường dẫn ảnh" width=cỡ chiều rộng height=cỡ chiều cao>
Căn lề:
<h1 align=center>Căn giữa</h1>
<h2 align=right>Căn phải</h2>
<h3 align=left>Căn trái</h3>
Tạo thụt đầu dòng : <blockquote>nội dung </blockquote>
Tạo đường kẻ ngang : <hr color=mầu size=kích thước chiều cao width=cỡ chiều rộng>
Chèn Film : <embed src="film" width=cỡ height=cỡ>
hoặc : <img dynsrc="film.dat">
Chèn nhạc nền : <bgsound src="nhạc nền.mp3">
Chèn ảnh nền : <body background="fileảnh">

Bài 2: Tạo mối siêu liên kết trong trang web
1)Siêu liên kết có nghĩa là bạn có thể tạo ra một khả năng
kết nối từ trang nay sang trang khác hoặc từ một mục nhỏ đến các mục lớn

2)Liên kết trong cùng trang:
cú pháp:

3)Liên kết đến nhiều trang:
<a href="url">Tên liên kết</a>

vd:

<a href="trang1.html">Trang 1</a>

4)Tạo chữ chạy :
<marquee>nội dung</marquee>
Chạy trong vùng :
<marquee width=cỡ height=cỡ scrollamount=tốc độ bgcolor=mầu_nền>nội dung</marquee>
Chạy theo hướng :
<marquee direction=left, right, up, down width=cỡ height=cỡ scrollamount=tốc độ bgcolor=mầu_nền>nội dung</marquee>
Chạy luân phiên :
<marquee behavior=alternate width=cỡ height=cỡ scrollamount=tốc độ bgcolor=mầu_nền>nội dung</marquee>
Chạy sau đó dừng :
<marquee behavior=slide width=cỡ height=cỡ scrollamount=tốc độ bgcolor=mầu_nền>nội dung</marquee>
5)Tạo chỉ số :
<Sub>Chỉ số trên</sup>
<sub>chỉ số dưới</sub>
6)Tạo Danh sách :
<ol type="kiểu">

<li>Thành phần 1

<li>Thành phần 2

</ol>

Bài 3: Tạo Bảng (Table)
1)Cấu trúc bảng:
<table border=cỡ viền>
<tr> khai báo hàng
        <th> khai báo ô tiêu đề ô này thường in đậm và căn dữ liệu vào giữa</th>
        <td>Khai báo ô dữ liệu</td>
</tr>
</table>
VD:
<table border=1>
<tr>
   <th>Họ tên</th>
<th>Nơi Sinh</th>
</tr>
<tr>
   <td>Nguyễn Văn a</td>
   <td>Hà nội</td>
</tr> </table>
2. Thuộc tính của bảng :
-border : Kích thước đường viền
-bordercolor : Mầu viền
-bordercolorlight : Mầu viền sáng
-bordercolordark : Mầu viền tối
-width : Cỡ chiều rộng của bảng
-height : Cỡ chiều cao của bảng
-cellspacing : khoảng trống của bảng
-cellspadding : Vùng đệm của bảng
< caption align=top,bottom > Tiêu đề bảng
< th align=left,right, center > Căn lề cho bảng theo chiều ngang </td>
< th valign=top, middle, bottom > Căn lề cho bảng theo chiều dọc </td>
3)Gộp Bảng theo hàng:
<th rowspan=số hàng> nội dung</th>
4)Gộp bảng theo cột:
<th colspan=số cột>Nội dung</th>

Bài 4: Thiết lập biểu mẫu (Form)
1)Cấu trúc Form:
<form name="tên" action="url" method="post">
Thành phần Form
</form>
1)Tạo trường Text: <input type="text" name="tên" size=cỡ maxlength=ddxkt>
2)Tạo Mật khẩu : <input type="password" name="tên" size=cỡ maxlength=ddxkt>
3)Tạo nút chọn Button :<input type="button" value="tên" name="tên">
4)Tạo nút Resset : <input type="reset" value="tên">
5)Tạo nút Submit :<input type="submit" value="tên">
6)Tạo Hộp kiểm Checkbox: <input type="checkbox" name="tên" value="giá trị">
7)Tạo nút chọn Radio: <input type="Radio" name="tên" value="giá trị">
8)Tạo vùng văn bản: <textarea name=tên cols=số cột rows=số hàng></textarea>
9)Tạo menu thả xuống : <select name="tên"><option value=giá trị>Tên </select>

Bài 5: Tạo Frame (khung)
1)Cấu trúc Frame:
1.2)Frame theo cột:
<Frameset cols="n,*">
<frame name="tên" src="url">
</frameset>
trong đó:
+ n: độ rộng cột
+ dấu ',' :là số cột
+ '*': là độ rộng còn lại của cột
1.3)Frame theo hàng:
<Frameset rows="n,*">
<frame name="tên" src="url">
</frameset>
trong đó:
+n: độ rộng hàng
+ dấu ',' :là số hàng
+ '*': là độ rộng còn lại của hàng

Bài 6: Hiệu ứng stylesheet và css
1. Stylesheet :
Cú pháp :
<style>
a{color:red;background-color:violet;font-size:10}
a:hover{color:red;background-color:violet;font-size:10}
</style>
<a href="url">Viet nam</a>
2. CSS :
Tạo File Css gồm 2 bước
Bước 1: Tạo file a.css với nội dung sau:
b{color:red;font-size:100}
.viet{color:red;font-size:100}
Bước 2: Vào trang web bất kỳ liên kết CSS như sau:
<Link href="a.css" rel="stylesheet" type="text/css">
<b>Viet nam</b>
<h1 class="viet">Hello!</h1>
3. Định dạng trang web bằng thẻ Div:
Cú pháp:
<div style="position:absolute;top:0;left:0;color:red"> nội dung </div>
4. Các sự kiện trong html:
- onClick(): nhấn đơn chuột
- ondblClick(): nhấn đúp chuột
- onMouseMove(): Di chuyển chuột
- onMouseover() và onMouseout(): 2 hành động xảy ra trái ngược nhau
- onChange() :Dùng cho menu thả xuống
- onLoad() :khởi tạo sự kiện ban đầu
VD : <body onload="window.status='chao ban';">
5. Hoán chuyển hình ảnh băng Frame:
-B1: tạo trang Frame la home.html với nội dung sau:
<frameset cols="100,*">
<frame src="a.html">
<frame src="b.html" name="c">
-B2: tạo trang a.html như sau:
<a href="#" onClick="parent.c.document.cat.src='anh.jpg';">ảnh 1</a>
<a href="#" onClick="parent.c.document.cat.src='anh1.jpg';">ảnh 2</a>
-B3: tạo trang b.html như sau:
<img src="anh.jpg" width=100 height=200 name=cat>