Thiết kế web html 5

HTML5 ra đời đã gần 8 năm và phiên bản hiện tại là HTML5.1 vừa được ra mắt cách đây không lâu. Nếu ở thời điểm 2 năm trước, mọi người dự đoán đó sẽ là chuẩn thiết kế website mới thay thế toàn bộ chuẩn HTML4 thì với những thành công hiện tại, HTML5 đã chứng minh điều mà mọi người dự báo là hoàn toàn chính xác. Cùng CSS3, bộ đôi này đã làm cho công nghệ lập trình bước vào một giai đoạn hoàn toàn mới, giảm thiểu sử dụng các Plugin nặng nề đồng thời tăng trải nghiệm cho người dùng nhiều hơn.

Thiết kế web html 5

Vậy sự thật thì HTML5 và CSS3 là cái gì, nó có liên quan gì tới SEO cho website hay không và vì sao cần phải thiết kế website chuẩn HTML5/ CSS3? Rất nhiều vấn đề quan trọng mà bản thân tôi thấy khá là thú vị và cần được chia sẻ để mọi người hiểu thêm về loại công nghệ mới rất hữu ích này. Đó là lý do vì sao bài viết này ra đời.

Tuy nhiên nếu như bạn không hề có ý định muốn nghiêm túc triển khai một phòng ban HTML thực thụ, bạn có thể điểm qua dịch vụ cắt HTML của Mona Media. Một dịch vụ outsource front end chuyên nghiệp của chúng tôi với kinh nghiệm 5 năm làm việc cùng các đối tác Nhật – các đối tác khó tính nhất thế giới.

Đầu tiên, chúng ta trở lại với các kiến thức tổng quan nhất về HTML và CSS.

HTML là gì? Là chữ viết tắt của Hyper Text Markup Language, tạm dịch là ngôn ngữ đánh dấu siêu văn bản và được sử dụng phổ biến trên Word Wide Web.

Còn CSS là gì? Là viết tắt của Cascading Style Sheets, là dạng ngôn ngữ đi tìm và định dạng lại các phần tử được tạo ra bởi ngôn ngữ đánh dấu như HTML. CSS được W3C đưa vào ứng dụng từ năm 1996.

Như đã nói ở đầu bài, HTML5 là sự tiếp nối và cải tiến của HTML sau 2 phiên bản cập nhật là HTML4 (1997) và XHTML (2000), đặc biệt nó giải quyết nhiều vấn đề còn chưa tối ưu của HTML4, điển hình là hỗ trợ định dạng và hiển thị video mà không cần đến Java và Flash (một Plugin tương đối cồng kềnh và tốn nhiều dung lượng máy). CSS3 là công nghệ tiếp nối của CSS.

Cấu trúc cơ bản

Một document HTML luôn bắt đầu bằng <html> và kết thúc bằng </html>

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

Code:

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. Ðấy là cách tốt nhất để khám phá ra những điều “bí mật” của các website đẹp.

Như vậy là bạn đã có thể viết được một trang web đơn giản rồi đó. 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 đề.

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>

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

Trong trang trước, chúng ta đã đề cập đến cách trình bày chữ trong trang web. Ðể làm cho trang web sinh động hơn, hấp dẫn hơn, bạn có thể đưa thêm tranh ảnh vào. 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:

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

Trong trang trước, chúng ta đã nói đến màu sắc của nền 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ỏ. Cái đó rất đơn giản. HTML Code sẽ như sau:

Code:

Chia sẻ:

Bình luận của bạn

Xem thêm

Thiết kế website

Tin tức

website điện lạnh

Điện tử điện lạnh được coi là ngành công nghệp mũi nhọn trong cơ cấu kinh tế nước ta. Để thúc đẩy kinh doanh các mặt hàng điện tử, bên cạnh các chiến lược bán hàng thông thường thì mảng kinh doanh điện tử đã và đang được các doanh nghiệp đầu tư đẩy mạnh với mục tiêu mở rộng hơn nữa nguồn khách hàng tiềm năng.
website nông nghiệp

Trước đây, ngoài cung cấp cho các siêu thị, các công ty xuất nhập khẩu, phần còn lại các mặt hàng nông sản được tiêu thụ chủ yếu ở các chợ đầu mối, đại lý thu mua ở các trung tâm lớn trước khi đến với người tiêu dùng. Ngày nay, kinh tế số phát triển làm thay đổi nhận thức kinh doanh của toàn xã hội, ...
website bán hàng

Hiện nay, rất dễ dàng để sở hữu một website bán hàng, bạn chỉ cần gõ từ khóa “thiết kế website bán hàng chuyên nghiệp” trên thanh công cụ tìm kiếm của Google, đã cho bạn hàng ngàn sự lựa chọn từ nhiều đơn vị cung cấp khác nhau. Tuy nhiên, để tránh khỏi sự nhầm lẫn dẫn đến “tiền mất tật mang”, ...
website nông nghiệp

Công nghệ thông tin đang ngày càng phát triển mạnh mẽ việc áp dụng khoa học kĩ thuật công nghệ thông tin vào nông nghiệp cũng đang là xu hướng tốt. hiện nay việc triển khai quảng bá sản phẩm thông qua online vào nghành nông nghiệp giúp cho doanh nghiệp dễ dàng quản lí ,học hỏi và tiếp cận thì trường hơn.
website thiết bị

Hiện nay, rất dễ dàng để sở hữu một website bán hàng, bạn chỉ cần gõ từ khóa “thiết kế website bán hàng chuyên nghiệp” trên thanh công cụ tìm kiếm của Google, đã cho bạn hàng ngàn sự lựa chọn từ nhiều đơn vị cung cấp khác nhau. Tuy nhiên, để tránh khỏi sự nhầm lẫn dẫn đến “tiền mất tật mang”,...