Khoanglang89
Bạn hãy đăng nhập hoặc đăng ký
Khoanglang89
Bạn hãy đăng nhập hoặc đăng ký
Khoanglang89

NHẬN THIẾT KẾ WEBSITE/ SOFTWARE - LÀM ĐỒ ÁN TỐT NGHIỆP, ĐỒ ÁN CHUYÊN MÔN NGÀNH CÔNG NGHỆ THÔNG TIN


You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

Admin

Admin

Admin
Admin
Loading
Trong một văn bản, tiêu đề (header) thường được viết đậm và lớn để phân
biệt với nội dung của văn bản. Để tạo tiêu đề trong trang HTML sử dụng
cặp tags (Thẻ): <font color=red><h<sub>n</sub>>
</h<sub>n</sub>></font>
I-Cặp Tags tiêu đề: Header (h) tag

Trong một văn bản, tiêu đề (header) thường được viết đậm và lớn để
phân biệt với nội dung của văn bản. Để tạo tiêu đề trong trang HTML sử
dụng cặp tags (Thẻ): <hn> </hn>

1-Cú pháp:


<hn>Tên của tiêu đề</hn>

Trong đó:


  • h: dùng để khai báo tag tiêu đề sẽ được dùng
  • n: là số nguyên 1--> 6 luôn đi sau h để xác định kích thước chữ tiêu đề. Đơn vị tính: pixel. Theo thứ tự:

    • h1: 20px
    • h2: 18px
    • h3:16px
    • h4: 14px
    • h5:12px
    • h6: 10px

    </li>

Lưu ý: Các giá trị trên chỉ tượng trưng cho khả năng của
HTML. Với CSS, bạn có thể định dạng thẻ <H> và cho giá trị độ lớn
(pixels) tùy ý.

Tag đóng tiêu đề tương ứng với tag mở nhưng phải có thêm dấu /: </hn>

Xem ví dụ:

Viết: <h1>Đây là Header 1</h1> Hiển thị:Đây là Header 1

Viết: <h2>Đây là Header 2</h2> Hiển thị:Đây là Header 2

Viết: <h3>Đây là Header 3</h3> Hiển thị:Đây là Header 3

Viết: <h4>Đây là Header 4</h4> Hiển thị:Đây là Header 4

Viết: <h5>Đây là Header 5</h5> Hiển thị:Đây là Header 5

Viết: <h6>Đây là Header 6</h6> Hiển thị:Đây là Header 6

Thực hành: Mở Notepad hoặc coderunner gõ vào đọan code bên dưới:

<html>
<head>
<title>header</title>
</head>
<body>
<h1>Đây là Header 1</h1>
<h2>Đây là header 2</h2>
<h3>Đây là Header 3</h3>
<h4>Đây là Header 4</h4>
<h5>Đây là Header 5</h5>
vh6>Đây là Header 6</h6>
</body>
</html>
Lưu tập tin trên với tên heading.html. Dùng trình duyệt mở để xem kết quả.

2-Thuộc tính và giá trị thuộc tính của h:


Để canh biên trái phải, giữa, cho thẻ h chúng ta dùng thuộc tính đi kèm trong h là align="giá trị".

Cú pháp: <hn align="giá trị">nội dung tiêu đề </hn>

Trong đó: "giá trị" được thay thế bằng:


  • justify :canh đều 2 biên trái phải. Dùng trong trường tiêu đề dài hơn 2 dòng thì 2 biên trái phải đều nhau. Khác với kiểu đánh máy chữ.
  • left :canh trái (mặc nhiên, không cần khai báo)
  • right :canh phải
  • center :canh giữa

Ví dụ:


<h2 align="center">Header này được canh giữa</h2>
Header này được canh giữa


<h2 align="right">Header này được canh phải</h2>
Header này được canh phải


<h2>Header này mặc nhiên là canh biên trái</h2>
Header này mặc nhiên canh biên trái



II-Cặp Tags Đọan Văn: Paragraph <p></p> Tag

Để hiển thị nội dung của một đọan văn bản ta sử dụng cặp tag: <p></p>.
Khác với việc nhập nội dung trực tiếp như trong bài 3, ngòai việc tự
động xuống hàng, cách một dòng khi bắt đầu một đọan văn bản khác, cặp
tags: <p></p>
còn có thể định dạng canh đều 2 biên, canh phải, canh giữa. Mặc nhiên,
khỏang cách giữa các dòng trong văn bản đã được thiết lập trong trình
duyệt. Để định dạng khỏang cách giữa các hàng, các chữ cũng như nhiều
thuộc tính khác của <p> chúng ta phải dùng đến Cascading Style Sheet(CSS).

1-Cú pháp:


<p>Nội dung của đọan văn bản</p>
Ví dụ: Viết:

<p>Nếu chỉ học HTML mà không nắm cách sử dụng của Cascading Style
Sheet thì chưa thể điều khiển được trang web như ý muốn. CSS, ngôn ngữ
với cú pháp riêng giúp chúng ta trình bày một trang web vững và gọn gàng
hơn. Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của
chúng để áp dụng vào từng chữ, biểu bảng... với CSS, bạn chỉ việc gán
thuộc tính và giá trị rồi dùng chúng để định dạng cho tòan bộ trang web
hoặc nhiều trang Web trên cùng một server.</p>
Hiển thị trên trình duyệt:

Nếu chỉ học HTML mà không nắm cách sử dụng của
Cascading Style Sheet thì chưa thể điều khiển được trang web như ý muốn.
CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang web
vững vàng và gọn gàng hơn. Trong khi phải lập đi lập lại việc gõ các tag
và thuộc tính của chúng để áp dụng vào từng chữ, biểu bảng... Với CSS
ta có thể gán thuộc tính và giá trị cho từng elements và tags, rồi lưu
chúng bằng 1 tập tin có phần mở rộng là .css, dùng tập tin này để định
dạng layout một hoặc nhiều trang Web trên Server.


2-Thuộc tính và giá trị thuộc tính của <p>:


Cũng giống như với <h>, thuộc tính của <p> là align= và giá trị của align= là:


  • center :canh giữa.
  • justify:canh đều 2 biên
  • left :hoặc không khai báo align: mặc nhiên
  • right :canh biên phải.


Ví dụ: Đọan văn bản này được canh đều hai biên. Viết:

<p align="justify">Nếu chỉ học HTML mà không nắm
cách sử dụng của Cascading Style Sheet thì chưa thể điều khiển được
trang web như ý muốn. CSS, ngôn ngữ với cú pháp riêng giúp chúng ta
trình bày một trang web vững vàng và gọn gàng hơn. Trong khi phải lập đi
lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng
chữ, biểu bảng... Với CSS ta có thể gán thuộc tính và giá trị cho từng
elements và tags, rồi lưu chúng bằng 1 tập tin có phần mở rộng là .css,
dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên
Server.</p>

Hiển thị trên trình duyệt:


Nếu chỉ học HTML mà không
nắm cách sử dụng của Cascading Style Sheet thì chưa thể điều khiển được
trang web như ý muốn. CSS, ngôn ngữ với cú pháp riêng giúp chúng ta
trình bày một trang web vững vàng và gọn gàng hơn. Trong khi phải lập đi
lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng
chữ, biểu bảng... Với CSS ta có thể gán thuộc tính và giá trị cho từng
elements và tags, rồi lưu chúng bằng 1 tập tin có phần mở rộng là .css,
dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên
Server.

Để ý: hai biên trái phải được canh thẳng đều, không lồi lõm theo kiểu đánh máy chữ.

Ví dụ: Đọan văn bản này được canh phải. Viết:

<p align="right">Nếu chỉ học HTML mà không nắm
cách sử dụng của Cascading Style Sheet thì chưa thể điều khiển được
trang web như ý muốn. CSS, ngôn ngữ với cú pháp riêng giúp chúng ta
trình bày một trang web vững vàng và gọn gàng hơn. Trong khi phải lập đi
lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng
chữ, biểu bảng... Với CSS ta có thể gán thuộc tính và giá trị cho từng
elements và tags, rồi lưu chúng bằng 1 tập tin có phần mở rộng là .css,
dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên
Server.</p>

Hiển thị trên trình duyệt:

Nếu chỉ học HTML mà không nắm
cách sử dụng của Cascading Style Sheet thì chưa thể điều khiển được
trang web như ý muốn. CSS, ngôn ngữ với cú pháp riêng giúp chúng ta
trình bày một trang web vững vàng và gọn gàng hơn. Trong khi phải lập đi
lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng
chữ, biểu bảng... Với CSS ta có thể gán thuộc tính và giá trị cho từng
elements và tags, rồi lưu chúng bằng 1 tập tin có phần mở rộng là .css,
dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên
Server.



III-Cặp Tags Trích Đọan: <blockquote></blockquote>

1-Cú pháp:


<blockquote>Nội dung của trích đọan</blockquote>
Dùng cặp tag này khi muốn trích dẫn một đọan văn bản, và đọan văn bản sẽ thụt lề (indent) tùy theo số lần <blockquote> mở và đóng. Mở bao nhiêu thì đóng bấy nhiêu.


Ví dụ: Viết:


<blockquote><blockquote>Nếu
chỉ học HTML mà không nắm cách sử dụng của Cascading Style Sheet thì
chưa thể điều khiển được trang web như ý muốn. CSS, ngôn ngữ với cú pháp
riêng giúp chúng ta trình bày một trang web vững vàng và gọn gàng hơn.
Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của chúng để
áp dụng vào từng chữ, biểu bảng... Với CSS ta có thể gán thuộc tính và
giá trị cho từng elements và tags, rồi lưu chúng bằng 1 tập tin có phần
mở rộng là .css, dùng tập tin này để định dạng layout một hoặc nhiều
trang Web trên Server.</blockquote></blockquote>


Hiển thị trên trình duyệt:


<blockquote><blockquote>Nếu chỉ học HTML mà không nắm cách sử dụng của
Cascading Style Sheet thì chưa thể điều khiển được trang web như ý muốn.
CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang web
vững vàng và gọn gàng hơn. Trong khi phải lập đi lập lại việc gõ các tag
và thuộc tính của chúng để áp dụng vào từng chữ, biểu bảng... Với CSS
ta có thể gán thuộc tính và giá trị cho từng elements và tags, rồi lưu
chúng bằng 1 tập tin có phần mở rộng là .css, dùng tập tin này để định
dạng layout một hoặc nhiều trang Web trên Server.</blockquote></blockquote>

2-Thuộc tính và giá trị thuộc tính của <blockquote></blockquote>:


Cặp tag này không có thuộc tính và giá trị trừ việc sử dụng trích dẫn ngay trong dòng bằng cú pháp: <q xml:lang="xx"></q>. Và để ghi rõ trích dẫn từ một trang Web khác bạn dùng cú pháp
<blockquote cite="URL">


IV-Tag Xuống Hàng: Break <br> a line tag và chống xuống hàng <nobr>.

1-Tag xuống hàng:


Khi viết thẳng vào HTML không cần sử dụng Paragraph tag (p tag), bạn có thể sử dụng Tag:
<br> để xuống hàng. Tag này không có tag đóng..

Ví dụ: Viết:

Họ:<br>
Tên: <br>
Địa chỉ-email:<br>
Hiển thị trên trình duyệt:

Họ:
Tên:
Địa chỉ e-mail:
2-Tag chống xuống hàng: <nobr>


Tag này thường sử dụng trong một câu lệnh hay môt hành động dài của đọan mã Javascript. . Cú Pháp: <nobr>. Bạn sẽ thấy việc sử dụng hữu hiệu tag này trong các đọan Javascript cao cấp.


3-Thuộc tính và giá trị thuộc tính của <br>


Tag này có một thuộc tính Clear dùng để ngăn việc xuống dòng tự động. Cú pháp: <br clear>

Tag này thường được dùng trong các đoạn Javascript như Rolling
Text hoặc Crossmarque, khi đó lệnh xuống hàng sẽ làm cho đoạn mã hiển
thị không đúng.

V-Tạo khỏang trống: none breaking space &nbsp;

1-Cú pháp:


Để tạo khỏang trống giữa các chữ hoặc nội dung ta dùng &nbsp;. Không có đóng mở cho lệnh này.

Ví dụ: Viết:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Khi chưa biết CSS,
muốn thụt lề tôi phải dùng bao nhiêu là &nbsp; như vậy.
Hiển thị trên trình duyệt:

Khi chưa biết CSS CSS, muốn thụt lề tôi phải dùng bao nhiêu là &nbsp; như vậy.


VI-Tag vẽ đường gạch ngang: Horizontal [b]Rule (HR) tag[/b]

[b]1-Cú pháp:



Để vẽ một đường ngang trong trang dùng tag: <hr>. Đây là một tag đơn và do đó không có Tag đóng.

2-Thuộc tính và giá trị thuộc tính của <hr>


Có 5 thuộc tính cho <hr> đó là:



  • align= :Canh biên. Giá trị là: right,center, left (mặc nhiên)
  • noshade :Khi muốn hiển thị đường ngang không có bóng mờ.
  • size= :Độ dày của đừơng ngang. Giá trị: số 1,2 hoặc 3.
  • width= :Độ rộng(độ dài chiều ngang). Giá trị là px hoặc %
  • color= :Màu Dùng tên màu như red, green, blue hoặc hexadecimal như: #0000FF, #FFCC99...

Ví dụ: Viết:


<hr align="center" size="3" width="400" color="red">

Hiển thị trên trình duyệt:





VII-Canh giữa nội dung: <center></center> tag

Khi không sử dụng <P> hoặc <blockquote> cho đọan văn bản, bạn có thể dùng cặp Thẻ <center></center> để canh giữa nội dung


Ví dụ: Viết:


<center><b>Canh giữa nội dung này</b></center>

Hiển thị trên trình duyệt:


Canh giữa nội dung này

Cặp tag này cũng được dùng để canh ảnh, form vào giữa trang.





VII-Bài Thực Hành Của Bạn:

[/b]Dùng NotePad gõ vào đọan code bên dưới và lưu thành file: baitap4.html. Có thể kiểm tra bằng Coderunner



<html>
<head>
<title>My second page</title>
</head>
<body>
<h1 align="center">Bài Số 4 </h1>
<p align="justify">Với bài học này bạn đã có thể sử dụng được các tag tạo tiêu đề từ h1-h6 như bạn thấy ở trên.
Bạn cũng có thể viết các đọan văn như bạn đang viết. Ngòai ra còn có thể canh biên trái, phải, giữa với
align="left", align="right", align="center". Và nếu cần trích dẫn bạn có thể sử dụng tag blockquote.</p>
<p align="center">Bạn cũng có thể dùng tag <br>
để xuống hàng và &nbsp; để tạo bao nhiêu khỏang trống
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cũng được
</p>
<p>Ngòai ra bạn cũng có thể vẽ một đường ngang với cú pháp:<br>
<hr align=center color="#0000FF" noshade size="3" width=60%>
</p>
</body>
</html>
HẾT BÀI 4.

https://khoanglang89.forumvi.com

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Bài viết mới cùng chuyên mục

      Permissions in this forum:
      Bạn không có quyền trả lời bài viết