Thiết kế website

Thiết kế website html như thế nào

09/09/2019

16363

Thiết kế website html như thế nào? Tìm hiểu cấu trúc cơ bản của một thiết kế website. Một document HTML luôn bắt đầu bằng <html> và kết thúc bằng </html> (trong đó bạn cũng có thể viết nhỏ hoặc viết hoa <html> và </html>).

Nhờ có cặp TAG này mà Browser biắt được đó là HTML – document để trình duyệt. Những chữ đó chỉ để dành riêng cho Browser. Người đọc chỉ nhận được những gì viết giữa cặp TAG <body> và </body> trong một document html, chú thích được dùng như sau:

<!– Ðây là dòng chú thích, chỉ dành riêng cho bạn, browser bỏ qua dòng này –>

Như vậy một trang web viết bằng html sẽ có cấu trúc như sau:

Code:

<html>

<body>

<!– Phần bạn cần trình bày. Ví dụ một bức ảnh hay lời văn. –>

</body>

</html>

Một trang trống, không có nội dung với nền màu da cam sẽ được viết:

<html>

<!– Phần bạn cần trình bày. Ví dụ một bức ảnh hay lời văn. –>

</body>

</html>

Một Homepage còn có Thiết kế website html nội dung (lời viết và hình ảnh):

Code:

<html>

Đây là dòng chữ viết bằng font Arial, màu đen, cỡ 2

</font><br><br>

Còn đây là dòng chữ viết bằng font Verdana, màu xanh nước biển, cỡ 3

</font><br><br>

Dòng này lại là font Bodoni, màu đỏ, cỡ 4 </font><br>

</body>

</html>

Face thể hiện cho mẫu chữ, size thể hiện cho cỡ chữ (số càng lớn thì chữ càng to) và color thể hiện cho màu sắc của chữ, #000000 là màu đen, #FF0000 là màu đỏ, #FFFF00 là màu vàng.

TAG <br> cho phép bạn chuyển sang dòng mới. Bạn có thể dùng nhiều <br> như bạn muốn. Cứ mỗi lần có <br> là một lần xuống dòng. Bạn có thể dùng mouse phải gõ vào nền của một trang web nào đó rồi chọn source code để tham khảo xem nó được viết như thế nào.

Một trang web bao giờ cũng có hai phần cơ bản là tiêu đề và phần thân. Tiêu đề luôn được viết to. Bạn có thể dùng size lớn hơn và cũng có thể dùng những TAG đã được định sẵn cho tiêu đề.

Code:

<html>

<h1>Tiêu đề của trang web</h1><br>

<h2>Welcome to my Homepage!</h2><br>

<h3>Tiêu đề của trang web</h3><br>

<h4>Tiêu đề của trang web</h4><br>

<h5>Tiêu đề của trang web</h5><br>

<h6>Tiêu đề của trang web</h6><br>

</font>

</center>

</body>

</html>

<h1></h1> là to nhất và <h6></h6> là nhỏ nhất. Tiêu đề luôn nằm ở trung tâm của trang, vì vậy ta phải dùng thêm một cặp TAG nữa : <center></center> Tất cả những gì nằm giữa cặp TAG này đều được định hướng vào phía giữa của trang.

Trong ví dụ này, nền của trang là xanh nước biển (#000080) chữ màu trắng.

Bổ sung Thiết kế website html:

Trong một HTML Document, ngoài phần body còn có phần head, được viết bởi cặp tag <head></head>. Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết thêm một cặp tag nữa, đó là <title></title> Giữa <title> và </title> là tên của trang web được browser trình bày phía trên cùng của menubar. Như vậy một trang web với “đầu” sẽ có cấu trúc như sau:

Code:

<html>

<head>

<title>Trang web dau tien cua toi</title>

</head>

<body>

Phần bạn cần trình bày. Ví dụ một bức ảnh hay lời văn.

</body>

</html>

Trong “head” ta còn có thể đưa rất nhiều thông tin vào cho browser, search engine… Cái đó sẽ được đề cập đến trong một mục riêng

Cách đưa tranh ảnh vào một trang web.

Có những trang web liên quan đến số liệu, đồ thị và đồ thị cũng là một dạng ảnh (images). Sau đây là cách đưa một bức ảnh vào trong trang web.

Ảnh cho vào trang web nên save dưới dạng .GIF hoặc .JPG

Không nên to quá, đây không nói đến kích thước (cm) mà nói đến kính cỡ file (số KB).

Khi scan, bạn hãy chọn 72 dpi (dots per inch) bởi vì đa phần các màn hình máy tính làm việc với độ phân giải này.

Khi upload trang web, nhớ upload cả ảnh.

Tên của các file nên sử dụng chữ thường, không nên sử dụng chữ hoa. Ví dụ: myphoto.jpg chứ không Myphoto.jpg.

Sau đây là HTML Code để đưa hình ảnh vào trang web:

Code:

<html>

</center>

</body>

</html>

Chỉ riêng <img src=”myphoto.jpg”> đã đủ để đưa một bức ảnh vào trang web. img là image và src là source. Tất cả những cái đi đằng sau chỉ để trình bày bức ảnh đó đẹp hơn thôi. width là chiều rộng của bức ảnh mà bạn muốn. Nó không phụ thuộc vào kích thước gốc của bức ảnh. height là chiều cao. Tất cả đều đo bằng pixel. border=”0″ báo cho Browser biết là ảnh này sẽ được trình bày không có khung. alt có ích khi ảnh chưa hoặc không được nạp. Khi đó người xem biết được mình sẽ được xem cái gì.

Dùng tranh ảnh làm nền cho trang web.

Bằng cách thay đổi thông số của bgcolor, bạn sẽ tạo được màu nền khác tuỳ theo sở thích của mình. Như bạn chắc cũng đã thấy trong các website đã đến thăm, một trang web còn có thể có nền rất đẹp, tạo ra từ những bức tranh nhỏ. HTML Code sẽ như sau:

Code:

<html>

</body>

</html>

Bạn thấy đó, ở đây chỉ có một sự khác biệt rất nhỏ: ta thêm background vào và nhận được nền là back.jpg. Tùy theo kích cỡ của back.jpg mà nền trông khác nhau. back.jpg sẽ được ghép vào với nhau nếu như cỡ của nó nhỏ hơn window của Browser.

Webvocuc

Cảm ơn bạn đã theo dõi bài viết của Webvocuc.com! Cập nhật các bài viết khác từ Webvocuc để biết thêm nhiều thông tin mới nhất về thiết kế website chuyên nghiệp và marketing online.