Bài 2: Thêm các thành phần cơ bản vào trang web
Thêm các đoạn chữ
Phần lớn các trình duyệt bỏ qua các khoảng trắng thừa và các kí tự hết dòng.
Để có thể tách thành các dòng (đoạn) như mong muốn ta phải dùng thẻ chứa <p>
<HTML>
<Head>
<Title>Tách các đoạn </Title>
</Head>
<Body>
<p> các dòng này </p>
<p> không được viết liền</p>
</Body>
</HTML>
Ngắt dòng
Dùng Tag rỗng <Br>
vd:
<HTML>
<Head>
<Title> Ngắt rời các dòng</Title>
</Head>
<Body>
các dòng này <Br>
bị ngắt rời
</Body>
</HTML>
Kí tự khoảng trống không ngắt dòng
Khi đặt kí tự này giữa hai từ thì chúng không bao giờ bị ngắt rời xuống dòng
vd: love you
sẽ được hiển thị love you chứ không hiển thị là
love
you
Định dạng văn bản
Tag chứa <I> để chuyển chuỗi thành in nghiêng
Tag chứa <B> để chuyển chuỗi thành in đậm
Tag chứa <U> để gạch chân cho chuỗi
vd:
<Body>
<I> chữ in nghiêng </I>
<B> chữ in đậm <B>
<U> chữ gạch chân </U>
</Body>
Đường kẻ ngang
Dùng Tag rỗng <HR>
vd:
<Body>
phần 1
<HR color=blue size=2>
phần 2
</Body>
Các tiêu đề
Thay đổi kích cỡ đoạn văn bản theo mức chuẩn
Có 6 mức từ H1-->H6 theo kích cỡ giảm dần
vd:
<Body>
<H1> Heading 1 </H1> <Br>
<H2> Heading 2 </H2> <Br>
<H3> Heading 3 </H3> <Br>
<H4> Heading 4 </H4> <Br>
<H5> Heading 5 </H5> <Br>
<H6> Heading 6 </H6> <Br>
</Body>
Thẻ giữ nguyên định dạng văn bản
Nội dung văn bản trong thẻ chứa <pre> sẽ được giữ nguyên vị trí khi hiển thị trên Browser
vd:
<Body>
<pre>
các
dòng này
sẽ
được
giữ nguyên
</pre>
</Body>
Thay đổi font hiển thị
Thẻ chứa <Font> được dùng để thay đổi một số thuộc tính hiển thị cho đoạn văn bản
Face: tên font được chọn choh đoạn văn
color: màu chữ
size: kích cỡ
vd:
<Font face=".VnExotic" color="#00CCFF" size=18>
công nghệ word wide web
</Font>
Thêm hình ảnh
Để thêm hình ảnh vào trang ta dùng thẻ rỗng <IMG>
Một số thuộc tính :
src: đường dẫn file ảnh (phần mở rộng của ảnh phải thuộc một trong ba loại: GIF,JPG,PNG)
alt: chuỗi văn bản thay thế khi ảnh không được tải về
height: chiều cao của ảnh (có thể theo điểm ảnh hoặc theo phần trăm)
width: chiều rộng của ảnh
border: độ rộng đường biên của ảnh
vd:
<IMG src='logo.gif' width="50%" height="50%">
<IMG src='http://tnu.edu.vn/logo.jpg' border=2 alt="rat tiec khong the hien thi anh nay" height=300 width=400>
Người ta chèn ảnh trong suốt(PNG) để làm bố trí trang không bị co giãn khi độ phân giải của màn hình thay đổi. Dùng Height và Width làm bố trí trang không bị thay đổi khi ảnh không được tải về.
Thêm siêu liên kết
Dùng thẻ chứa <a href={địa chỉ liên kết}> {dòng chữ liên kết}</a>
vd:
<a href='http://tintuc.vnn.vn/3vn'>
hãy vào đây để cùng nhau trao đổi mọi chủ đề
</a>
Dùng trang khung ảnh làm nền cho trang web
<html>
<body bgcolor="# màu mà bạn thích" background="back.jpg">
</body>
</html>
Code đưa trang ảnh vào một trang web
<html>
<body bgcolor="#ffffff">
<center>
<img src="myphoto.jpg" width="200"
height="400" border="0" alt="here is my first photo">
</center>
</body>
</html>
Cách trang trí chữ bố cục một trang web
Muốn có một trang mà tranh ở bên phải, chữ ở bên trái thì phải dùng đến table
Có thể dùng cặp <p></p> để tạo ra từng khổ của bài viết
code:
<p align="left"> toàn bộ khổ chữ này sẽ hướng về phía trái</p>
<p align="center">toàn bộ khổ chữ này sẽ hướng về trung tâm</p>
<p align="right">toàn bộ khổ chữ này sẽ hướng về bên phải</p>
Lưu ý:
có thể bỏ </p> ở các dòng trên (vì đây là tag đơn)
Các trang trí chữ cơ bản
<b> dòng chữ này đậm</b>
<strong>dòng chữ này cũng đậm </strong>
<i>dòng chữ này nghiêng</i>
<big>dòng chữ này to hơn</big>
<b><i><u><big>dòng chữ này vừa to vừa đậm vừa in nghiêng vừa gạch chân</big></u></i></b>
<small>dòng chữ này bé hơn</small>
<u>dòng chữ này gạch chân</u>
Tổng bình phương hai cạnh góc vuông bằng bình phương cạnh huyền:
a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
Các trích dẫn từ câu nói của ai đó
<cite>học, học nữa.....hộc máu...;))</cite>
Chỉ dành riêng cho Nescape Browese:
chữ nhấp nháy <blink> look at me now! i am blinking</blink>
Chỉ dành riêng cho internet Explorer:
Chữ chạy <Marquee border="0" behavior="slide" width="239" height="17" align="middle" scrolldelay="600" scrollamuont="50">
look at me now, i am scrolling</marquee>
Khi cần một dòng kẻ ngang qua trang web bạn có thể dùng tag <hr> để kẻ
<hr> có thể mang những giá trị sau:
:noshare"(không có bóng); width="x"
width:chiều rộng; x: có thể là % hoặc pixcel
color="green"
Thêm các đoạn chữ
Phần lớn các trình duyệt bỏ qua các khoảng trắng thừa và các kí tự hết dòng.
Để có thể tách thành các dòng (đoạn) như mong muốn ta phải dùng thẻ chứa <p>
<HTML>
<Head>
<Title>Tách các đoạn </Title>
</Head>
<Body>
<p> các dòng này </p>
<p> không được viết liền</p>
</Body>
</HTML>
Ngắt dòng
Dùng Tag rỗng <Br>
vd:
<HTML>
<Head>
<Title> Ngắt rời các dòng</Title>
</Head>
<Body>
các dòng này <Br>
bị ngắt rời
</Body>
</HTML>
Kí tự khoảng trống không ngắt dòng
Khi đặt kí tự này giữa hai từ thì chúng không bao giờ bị ngắt rời xuống dòng
vd: love you
sẽ được hiển thị love you chứ không hiển thị là
love
you
Định dạng văn bản
Tag chứa <I> để chuyển chuỗi thành in nghiêng
Tag chứa <B> để chuyển chuỗi thành in đậm
Tag chứa <U> để gạch chân cho chuỗi
vd:
<Body>
<I> chữ in nghiêng </I>
<B> chữ in đậm <B>
<U> chữ gạch chân </U>
</Body>
Đường kẻ ngang
Dùng Tag rỗng <HR>
vd:
<Body>
phần 1
<HR color=blue size=2>
phần 2
</Body>
Các tiêu đề
Thay đổi kích cỡ đoạn văn bản theo mức chuẩn
Có 6 mức từ H1-->H6 theo kích cỡ giảm dần
vd:
<Body>
<H1> Heading 1 </H1> <Br>
<H2> Heading 2 </H2> <Br>
<H3> Heading 3 </H3> <Br>
<H4> Heading 4 </H4> <Br>
<H5> Heading 5 </H5> <Br>
<H6> Heading 6 </H6> <Br>
</Body>
Thẻ giữ nguyên định dạng văn bản
Nội dung văn bản trong thẻ chứa <pre> sẽ được giữ nguyên vị trí khi hiển thị trên Browser
vd:
<Body>
<pre>
các
dòng này
sẽ
được
giữ nguyên
</pre>
</Body>
Thay đổi font hiển thị
Thẻ chứa <Font> được dùng để thay đổi một số thuộc tính hiển thị cho đoạn văn bản
Face: tên font được chọn choh đoạn văn
color: màu chữ
size: kích cỡ
vd:
<Font face=".VnExotic" color="#00CCFF" size=18>
công nghệ word wide web
</Font>
Thêm hình ảnh
Để thêm hình ảnh vào trang ta dùng thẻ rỗng <IMG>
Một số thuộc tính :
src: đường dẫn file ảnh (phần mở rộng của ảnh phải thuộc một trong ba loại: GIF,JPG,PNG)
alt: chuỗi văn bản thay thế khi ảnh không được tải về
height: chiều cao của ảnh (có thể theo điểm ảnh hoặc theo phần trăm)
width: chiều rộng của ảnh
border: độ rộng đường biên của ảnh
vd:
<IMG src='logo.gif' width="50%" height="50%">
<IMG src='http://tnu.edu.vn/logo.jpg' border=2 alt="rat tiec khong the hien thi anh nay" height=300 width=400>
Người ta chèn ảnh trong suốt(PNG) để làm bố trí trang không bị co giãn khi độ phân giải của màn hình thay đổi. Dùng Height và Width làm bố trí trang không bị thay đổi khi ảnh không được tải về.
Thêm siêu liên kết
Dùng thẻ chứa <a href={địa chỉ liên kết}> {dòng chữ liên kết}</a>
vd:
<a href='http://tintuc.vnn.vn/3vn'>
hãy vào đây để cùng nhau trao đổi mọi chủ đề
</a>
Dùng trang khung ảnh làm nền cho trang web
<html>
<body bgcolor="# màu mà bạn thích" background="back.jpg">
</body>
</html>
Code đưa trang ảnh vào một trang web
<html>
<body bgcolor="#ffffff">
<center>
<img src="myphoto.jpg" width="200"
height="400" border="0" alt="here is my first photo">
</center>
</body>
</html>
Cách trang trí chữ bố cục một trang web
Muốn có một trang mà tranh ở bên phải, chữ ở bên trái thì phải dùng đến table
Có thể dùng cặp <p></p> để tạo ra từng khổ của bài viết
code:
<p align="left"> toàn bộ khổ chữ này sẽ hướng về phía trái</p>
<p align="center">toàn bộ khổ chữ này sẽ hướng về trung tâm</p>
<p align="right">toàn bộ khổ chữ này sẽ hướng về bên phải</p>
Lưu ý:
có thể bỏ </p> ở các dòng trên (vì đây là tag đơn)
Các trang trí chữ cơ bản
<b> dòng chữ này đậm</b>
<strong>dòng chữ này cũng đậm </strong>
<i>dòng chữ này nghiêng</i>
<big>dòng chữ này to hơn</big>
<b><i><u><big>dòng chữ này vừa to vừa đậm vừa in nghiêng vừa gạch chân</big></u></i></b>
<small>dòng chữ này bé hơn</small>
<u>dòng chữ này gạch chân</u>
Tổng bình phương hai cạnh góc vuông bằng bình phương cạnh huyền:
a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
Các trích dẫn từ câu nói của ai đó
<cite>học, học nữa.....hộc máu...;))</cite>
Chỉ dành riêng cho Nescape Browese:
chữ nhấp nháy <blink> look at me now! i am blinking</blink>
Chỉ dành riêng cho internet Explorer:
Chữ chạy <Marquee border="0" behavior="slide" width="239" height="17" align="middle" scrolldelay="600" scrollamuont="50">
look at me now, i am scrolling</marquee>
Khi cần một dòng kẻ ngang qua trang web bạn có thể dùng tag <hr> để kẻ
<hr> có thể mang những giá trị sau:
:noshare"(không có bóng); width="x"
width:chiều rộng; x: có thể là % hoặc pixcel
color="green"
Nhận xét
Đăng nhận xét