Thứ sáu 19/10/2018 Trang nhất » Kiến thức » Cẩm nang Thiết Kế Website
mua ten mien dep

Thật tuyệt vời khi có tên miền đẹp để kiếm tiền trên internet !

Việc tìm & Mua Tên Miền Đẹp không còn là khó khăn  0912.999.247

 Mua tên miền đẹp Mua tên miền đẹp

Thiết kế trang web

Giới thiệu

Tư vấn Lựa chọn Dịch vụ Thiết kế website

Bạn đang có nhu cầu lựa chọn nhà cung cấp dịch vụ thiết kế website tai Việt Nam?

Mua ten mien Thuong hieu
Mua tên miền Thương hiệu
Mua tên miền đẹp
Mua tên miền Đẹp

Gói thiết kế website

Ngôn ngữ lập trình web

Mã nguồn website

bảo vệ tên miền

Trang Web làm việc như thế nào? - Phần I

Trang Web làm việc như thế nào? - Phần I

Trang Web làm việc như thế nào? - Phần I

Bạn đã bao giờ tự hỏi rằng một trang Web làm việc như thế nào? Bạn đã bao giờ muốn lập một trang Web riêng cho mình, với tiều đề, bài viết và giao diện đồ hoạ trên trang đó chưa?
Tạo các danh sách

Có ba kiểu danh sách mà bạn có thể tạo : Unordered, Ordered và Descriptive

Kiểu danh sách Unordered nhìn như sau
  • California
  • Oregon
  • North Carolina

Danh sách kiểu Unordered là một danh sách kiểu dùng Bullet ở đầu câu được đánh bởi lệnh <ul>. lệnh <li> ( được viết tắt từ List Item ) được sử dụng trước mục trong danh sách. , lệnh đóng </ul> kết thúc danh sách.

Ví dụ:

<ul>
<li>California
<li>Oregon
<li>North

</ul>

Loại dấu Bullet có thể được thay đổi thành vòng tròn (circle) hoặc hình vuông (square), hoặc dẹt (disc) bằng cách thêm các chi tiết kỹ thuật trong lệnh" <ul>:

<ul type="circle">
<li>California
<li>Oregon
<li>North Carolina
</ul>
  • California
  • Oregon
  • North Carolina
 

<ul type="square">
<li>California
<li>Oregon
<li>North Carolina
</ul>
  • California
  • Oregon
  • North Carolina

Danh sách kiểu Ordered trông giống như thế này:
  1. oranges
  2. grapes
  3. cherries

Một danh sách kiểu Ordered là một các danh mục được sắp xếp theo một trật tự logic , đánh số. Sử dụng các lệnh <ol> và </ol> để bắt đầu và kết thúc loại danh sách. Lần nữa, lệnh <li> đước sử dụng trước các mục.

Ví dụ:

<ol>
<li>oranges
<li>grapes
<li>cherries
</ol>

Bạn có thể thay đổi kiểu của tổ chức bằng cách thêm chữ "type" vào bên trong lệnh <ol>.

<ol type="A"> sắp xếp danh sách theo chữ cái hoa(A, B, C...)

<ol type="a"> sắp xếp danh sách theo chữ cái thường (a, b, c...)

<ol type="I"> sắp xếp danh sách theo các chữ số Lamã(I, II, III...)

<ol type="i"> sắp xếp danh sách theo các chữ số lama nhỏ (i, ii, iii...)

Nếu bạn muốn bắt đầu danh sách các mục được sắp xếp với các giá trị cụ thể như là 6, hãy sử dụng các lệnh bắt đầu và kết thúc sau:

<ol start=5>
<li value=6>

Danh sách kiểu Descriptive tạo ra một danh sách các mục text và lùi dòng ở dòng thứ hai.Như theo mô tả dưới đây

INFOCOM

Dịch vụ Tư vấn Tin học

Sử dụng các lệnh sau để hiển thị như trên

<dl>
<dt>INFOCOM
<dd>Dịch vụ Tư vấn Tin học
</dl>

Lệnh <dt> nên phù hợp với đoạn text mà bạn muốn kéo lề, <dd> phù hợp với dòng mà bạn muốn cho thụt vào.

Liên kết với những trang khác:

Một trong số những phần tốt nhất của các trang Web đó là khả năng tạo đường liên kết cho những trang Web khác. Sử dụng các lệnh liên kết sau, bạn có thể tham khảo công việc của người khác,xem các trang khác mà bạn thích…

<a href="URL">

Đánh tiêu đề của trang sau khi lệnh Anchor, và đóng liên kết với:

</a>

Bạn cũng có thể dễ dàng kết nối các danh sách với đường link để tạo danh sách các đường liên kết.

Cửa sổ mới: 

Nếu bạn không muốn khách ghé thăm rời khỏi trang của bạn khi họ ấn vào đường link của một tràn khác , thêm lệnh này vào lệnh liên kết của bạn. Khi đường link được ấn, thay vì thoát khỏi trang web của bạn và vào trang của người khác, nó sẽ chỉ mở cửa sổ mới để cho hiển thị trang Web đường link đó .

target="_blank"

Ví dụ:  

<a href="http://www.tuvantinhoc1088.com" target="_blank">

Màu đường link:

Màu xanh là màu mặc định tiêu chuẩn của các đường link . Nhưng bạn có thể thay đổi màu của đường link trên trang Web của bạn bằng cách thêm những lệnh sau vào lệnh <body>
  • link="color"
  • vlink="color"

Vlink viết tắt của "visited link".Đường link thay đổi màu khi chúng được kích vào. Nếu bạn không muốn theo đường link để thay đổi màu, đơn giản là quy cho cả links và vlinks cùng một màu.

Ví dụ: <body link="green" vlink="green">

Kết nối để nhận E-mail

Nếu bạn muốn nhận một e-mail từ người mà bạn đọc trang Web, sử dụng lệnh Anchor sau:

<a href="mailto:youremailaddress">

Sau đó đánh địa chỉ E-mail ( hoặc bất cứ địa chỉ liên kết bạn được chỉ ra theo trang của bạn) kèm theo

</a>

Vi dụ:

<a href="mailto:example@tuvantinhoc1088.com"> E-mail Me </a>

Dưới đây là nó sẽ trông như thế nào trên trang của bạn

E-mail Me

Tạo một đường liên kết tới trang của bạn

Các lệnh Anchor ( Anchor tags) không được sử dụng để liên kết các trang trên Internet . Bạn cũng có thể sử dụng chúng để kết nối thông tin có ở ngay trang của bạn. Trong ví dụ này, bạn có thể bỏ qua tiền tố "http://www" và chỉ cần tên miền :

Ví dụ: <a href="company.htm"> Company Information </a>

Để liên kết tới một phần cụ thể trên trang của bạn, bạn cần đặt tên cho phần mà bạn muốn, và trong lệnh liên kết phải bao gồm tên đó.Đây là cách làm thế nào:

Đặt Tên của bất kỳ phần của trang của bạn bằng cách chèn vào lệnh sau ngay lập tức trước khi phần cụ thể mà bạn muốn đường link chuyển đến. Bạn có thể chọn bất kỳ từ nào, chữ nào và ký tự nào để sử dụng như một cái tên.

<a name="name">

Ví dụ: <a name="5">

Trong lệnh Anchor, bạn ám chỉ phần này trong trang bạn bằng cách đặt một "#" đằng trước tên. Nếu đường kết nối được đặt tên chuyển đến đía điểm trong trang cái mà chứa đường link, lệnh liên kết sẽ kết nối phần được đặt tên này sẽ trong như thế này:

<a href="http://computer.tuvantinhoc1088.com/#5"> Company Information </a>

Nếu đường kết nối được đặt tên tiến đến một văn bản html tách biết so với đương kết nối vốn có, bao gồm tên file văn bản.

Ví dụ : <a href="http://computer.tuvantinhoc1088.com/company.htm#5"> Company Information </a>

Thêm hình ảnh và đồ hoạ


Đặt bất kỳ hình ảnh kỹ thuật số trên trang của bạn bằng cách sử dụng lệnh sau:

<img src="name of picture file.extension">

Các hình ảnh trên các trang Web thì giống như các file GIF hoặc JPG. Bất kỳ hình ảnh nào sẽ chứa một trong những phần đuôi mở rộng đó, nên nếu bạn có hình ảnh được gọi là logo, nó sẽ được đánh dấu như kiểu "logo.gif" hay "logo.jpg.

Nhớ đảm bảo rằng bạn phải lưu trữ các hình ảnh và đồ họa mà bạn sẽ trưng bày trên trang web của mình vào trong một foder hoặc đường dẫn mà bạn có file HTML được lưu ở đó.

Căn chỉnh lề: 

Theo mặc định, bài text của bạn và các hình ảnh được đặt ở lề trái khì hình ảnh được trưng bày trên trình duyệt của bạn, có nghĩa rằng bài text đó và đồ hoạ tự động xếp ở lề trái. nếu bạn muốn đưa vào giữa bất kỳ phần nào trong trang của bạn thay thế, bạn có thể sử dụng lệnh sau:

<center>

Bạn có thể kết thúc việc cho ra giữa ứng với lệnh đóng sau:

</center>

Bạn cũng có thể mã hoá "phép chia" , bất kỳ từ một từ nào hoặc dòng nào của bài text để cho đến toàn bộ trang, để căn chỉnh một cách cụ thể.

Bắt đầu sự phân chia của bạn với lệnh căn chỉnh, bao gồm căn chỉnh cái mà bạn muôn bài text hoăc hình ảnh ( có nghĩa là trái , phải , giữa):

Ví dụ: <div align="center">

Kết thúc lệnh căn chỉnh với lệnh:

</div>

Với thông tin mà bạn vừa mới học trong bài báo này, bạn có thể bắt đầu tạo các trang Web theo thị hiếu và sở thích của mình. Cố gắng tạo ra một trang Web hoặc hai mà sử dụng các công cụ và các lệnh chúng ta vừa mới nói.

Tạo các bảng

Gần đây, một trong những công cụ HTML được sử dụng rộng rãi nhất cho việc tạo các trang Web được xắp xếp mốt cách nghệ thuật đó chính là bảng. Bằng việc quản lý các bảng, bạn không chỉ tạo một trang mà bạn đang thiết kế một trang. .

Sự khác nhau của các bảng theo yêu cầu của bạn là rất lớn, xắp xếp từ một hộp đơn giản tới việc xếp đặt đầy phức tạp. Trong bài báo này chúng tôi sẽ thảo luận những vấn đề cơ bản, cũng như một vài mẹo và lời gợi ý nhỏ cho bạn để thử nghiệm việc thiết kế mồt trang Web thú vị mà mọi người thích vào xem.

Một lần nữa, với tất cả thông tin mà bạn muốn trình bày trong Cửa sổ trình duyệt, đảm bảo rằng bảng của bạn ở giữa lệnh <body> và </body>

<table>

Mỗi hàng ngang trong bảng bắt đầu với lệnh:

<tr>

Và mỗi mẩu dữ liệu trong hàng bắt đầu với lệnh:

<td>

Hãy xem biểu đồ cột sau:

A1 A2
B1 B2
C1 C2

Ở đây, chúng ta có 3 hàng và 2 cột

Để mã hoá khung của cột này, các lệnh sau đước sử dụng trong phép lệnh:

<table> Bắt đầu của bảng
<tr> Bắt đầu của hàng đầu tiên
<td> Bắt đầu dữ liệu của ô đầu tiên (A1)
</td> Kết thúc của ô A1
<td> Bắt đầu của ô thứ hai (A2)
</td> Kết thúc ô A2
</tr> Kết thúc hàng đầu tiên
<tr> Bắt đầu hàng thứ hai
<td> Bắt đầu dữ liệu của ô đầu tiên trong hàng thứ hai (B1)
</td> Kết thúc ô B1
<td> Bắt đầu ô B2
</td> Kết thúc ô B2
</tr> Kết thúc hàng thứ hai
<tr> Bắt đầu hàng thứ ba
<td> Bắt đầu dữ liệu của ô đầu tiên trong hàng thứ ba (C1)
</td> Kết thúc ô C1
<td> Bắt đầu ô C2
</td> Kết thúc ô C2
</tr> Kết thúc hàng thứ ba
</table> Kết thúc bảng

Rất nhiều nhà thiết kế muốn cho thụt vào các phần trong bảng để mã dễ dàng hơn cho việc đọc. Một ví dụ được chỉ ra ở phía dưới:

Bây giờ chúng ta thêm dữ liệu và đường viền cho bảng khung. Môt đường viền là đường nét của bảng. Lệnh Border (border="value") được đặt trong lệnh table lúc đầu. Bạn có thể cụ thể hoá muốn đường viền dày bao nhiêu bằng cách cho nó một giá trị cụ thể ( chúng ta sẽ gán cho gía trị là 1) Việc thử nghiệm với những giá trị khác nhau là một ý tưởng hay để tìm ra cái mà chúng trông như thế nào khi được trưng bày trên chương trình trình duyệt. Nếu bạn không muốn đường viền được nhìn thấy, hãy để giá trị 0.

Lưu ý : Thậm chí bạn không có dự định có một đường viền xuất hiện xung quanh bảng của mình, thì tốt nhất là vẫn nên bắt đầu với một đường viền có thể nhìn thấy được, ít nhất là cho đến khi công viêc của bạn cho đến khi có lỗi có thể gây ảnh hưởng đến việc bảng của bạn trông như thế nào)

Đánh hoăc cắt và dán mã và dữ liệu sau trong văn bản HTML của bạn:

<table border=1>

 <tr>

 <td>A1

 </td>

 <td>A2

 </td>

 </tr>

 <tr>

 <td>B1

 </td>

 <td>B2

 </td>

 </tr>

 <tr>

 <td>C1

 </td>

 <td>C2

 </td>

 </tr>

</table>


Bảng được trình bày trong trình duyệt của bạn phải được trông như hình đã mô tả trên .

Có rất nhiều thuộc tính mà bạn có thể cho vào bảng. Cái tiếp theo đây là một cuộc thảo luận về các lệnh mà cho phép bạn định dạng lại bản của mình theo các cách sáng tạo.

Màu nền:


Thay đổi màu của toàn bộ bảng nền bằng cách sử dụng lệnh “bgcolor" trong lệnh table ban đầu.

Ví dụ: <table bgcolor="yellow">

Một nền được đánh màu có thể đươc đổ cho cả cột và hàng trong bảng. chỉ cần thêm bgcolor="color" cùng với lệnh <tr> hoặc <td> để bôi màu cho phần cụ thể của bảng.

Ví dụ: <tr bgcolor="yellow">

Kích thước bảng

Độ rộng và chiều cao của cột và hàng trong bảng sẽ mở rộng tự động để chứa vừa chiều dài của dữ liệu và khoảng trống của cửa sổ trình duyệt. Để cụ thể hóa chiều rộng và cao, bao gồm cả phân tử ảnh đến các giá trị phần trăm trong lệnh table bắt đầu:

Ví dụ: <table width=300 height=400>

Độ rộng và chiều cao có thể được cụ thể hoá cho từng ô dữ liệu cá nhân, khi đặt vào một toàn bộ bảng có thể điều chỉnh bằng thêm những lệnh width="value" cho lệnh <tr> hoặc <td> .

Một lần nữa, việc thưc hiên một cách đơn giản phân tử ảnh và giá trị phần trăm là một ý tưởng hay để tìm ra cái mà chúng trông như thế nào trong chương trình trình duyệt.

Khoảng trống bên trong ô (Cellpadding)

Lệnh Cellpadding cho biết ( tính bằng Pixel ) tổng số luợng các khoảng trống giữa sườn của ô dữ liệu và dữ liệu trong ô. Sử dụng nó với lệnh table bắt đầu bằng:

Ví dụ 1: <table border=1 cellpadding=5>

This table has a cellpadding of "5"

Ví dụ 2: <table border=1 cellpadding=15>
This table has a cellpadding of "15"

Khoảng trống giữa các ô ( Cellspacing )

Lệnh Cellspacing cho biết ( tính bằng Pixel ) tổng số luợng các khoảng trống giữa các ô . Sử dụng nó với lệnh table bắt đầu bằng

Ví dụ: <table border=1 cellspacing=5>

This table has a cellspacing of "5"

Ví dụ :: <table border=1 cellspacing=15>

This table has a cellspacing of "15"

Đầu bảng ( Table Heading )

Nhằm tạo một heading đậm và nằm ở giữa cột và hàng ở trong Bảng, sử dụng lệnh <th> thay cho lệnh <td> trong mã của hàng đầu tiên.

Ví dụ:

<table border=1>

 <tr>

 <th>Column 1

 </th>

 <th>Column 2

 </th>

 </tr>

 <tr>

 <td>A

 </td>

 <td>B

 </td>

 </tr>

 <tr>

 <td>C

 </td>

 <td>D

 </td>

 </tr>

</table>

Hình dưới là hiển thị của lệnh trên
 
Column 1 Column 2
A B
C D

Căn chỉnh:

Theo mặc định, tất cả nội dung của ô trong bảng được căn chỉnh ở giữa hoặc bên trái. Để làm cho nội dung của viêc căn chỉnh ô thêo cách khác nhau, áp dụng các lệnh bên trong <td>, <th> hoặc <tr>

Cho việc căn chỉnh hàng ngang, các giá trị ở bên trái, phải, và giữa:

Ví dụ: <tr align="center">

Cho việc căn chỉnh theo hàng dọc, các gía trị có thể ơ trên, dưới hoặc ở giữa.

Ví dụ: <td valign="top">

Bạn cũng có thể xắp xếp căn chỉnh của toàn bộ bảng của mình, để quyết định liệu nó hiển thị trên trang giấy như thế nào. Bắng cách chèn lệnh <align="right"> hoặc <align="left"> trong lệnh table ban đầu, bài text sẽ nằm gọn trong bảng của bạn bất cứ nơi nào mà nó xuất hiên. Hoặc nếu bạn muốn bảng của bạn đứng độc lập mà không bị nằm giữa những bài text, sử dụng lệnh “division alignment" (định dạng phân chia) trước và sau toàn bộ bảng của bạn.

Mở rộng ô ( Cell Spanning)

"Spanning" xảy ra khi một ô mở rộng tương đương với hai hoặc ba ô trong bảng. Một ví dụ về sự mở rộng cột :

This cell spans over two columns This cell spans over one column
A B C
     

Lệnh <colspan=value> được đặt trong lệnh <td> khi áp dụng. Đây là mã được viết cho ví dụ:

<table border=1>

 <tr>

 <td colspan=2>This cell spans over two columns

 </td>

 <td>This cell spans over one column

 </td>

 </tr>

 <tr align="center">

 <td>A

 </td>

 <td>B

 </td>

 <td>C

 </td>

 </tr>

</table>

Ví dụ về mở rộng hàng

This cell spans over two rows A B
C D

Lệnh <rowspan=value> đặt bên trong <td> Khi áp dụng. Mã dưới đây là ví dụ của hiển thị trên

<table border=1>

<tr>

<td rowspan=2>This cell spans over two rows

</td>

<td>A

</td>

<td>B

</td>

</tr>

<tr>

<td>C

</td>

<td>D

</td>

</tr>

</table>

Bạn có thể áp dụng rất nhiều thuộc tính chúng ta vừa mới học chương trước trong bảng của bạn, như là cỡ chữ, loại và mầu săc, chèn hình ảnh, tạo danh sách và thêm đường link, Chỉ cần thêm các lệnh thích hợp cho ô cụ thể mà bạn muốn định dạng, ngay sau lệnh <td>

Thực nghiệm và thực hành với rất nhiều công cụ và lệnh khác nhau mà bạn học trong bài báo này. Khả năng sáng tạo là bât tận khi bạn sử dụng các bảng trên trang Web. Ngăn xếp các hình ảnh và các hộp màu của đường viền để tạo thành các thiết kế liền nhau, liên kết các bảng không có đường viền với nhau, một số có màu sắc, một số không, tạo dưng môt cách bố trí thu hút. Việc thiết kế trang Web không giới hạn khả năng tưởng tượng, sang tạo và việc sử dụng các bảng.

Tác giả bài viết: Bích Hường

Nguồn tin: tuvantinhoc

Tổng số điểm của bài viết là: 0 trong 0 đánh giá
Click để đánh giá bài viết

Những tin mới hơn

Những tin cũ hơn

 

HỎI MUA TÊN MIỀN NÀY
Hãy gọi: 0913.210.565
Mua tên miền &rgb(2, 7, 3);ẹp
 

 

Giới thiệu

Tư vấn Lựa chọn Dịch vụ Thiết kế website

Bạn đang có nhu cầu lựa chọn nhà cung cấp dịch vụ thiết kế website tai Việt Nam?

Cẩm nang Thiết kế web

chiến lược đầu tư tên miền
mua ten mien dep

Bạn cần tên miền đẹp để kinh doanh thành công trên internet ?

Hãy gọi  0912.999.247 hoặc liên hệ tổng đài tên miền 24/7: (04) 22667766 - (08) 6657.6644

www.tenmienviet.vn - www.muatenmien.vn  Mua tên miền đẹp Mua tên miền đẹp - www.nganhangtenmien.vn