Thiết kế web bằng html

Thiết kế web bằng html

HTML là gì ?

- HTML là chữ viết tắt của Hyper Text Markup Language.

- HTML là những dòng chữ (có thể gọi là code) được viết nên bởi các phần mềm soạn thảo văn bản như: notepad, wordpad, notepad ++, editplus ...

Thiết Kế Web Bằng HTML

Ðể viết HTML cho trang Web, bạn hãy start chương trình NotePad của Microsoft có đi kèm theo với Windows. Ðó là một ASCII Editor. Viết xong, bạn hãy save nó vào một folder nào đó dễ nhớ. Tên của file này bắt buộc phải có tận cùng là .htm hoặc .html Ví dụ: start.htm. Ðể thưởng thức thành quả của mình, bạn hãy open file đó bằng một Browser.

Thiết kế web bằng html

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> (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:

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

<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>

Tất nhiên, một Homepage còn có nội dung (lời viết và hình ảnh):

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. Ðấ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 đề.

<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:

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:

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

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:

ạn thấy không, điều đó rất đơn giản. 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 (nhiều người surf không ảnh để đỡ tốn thời gian) 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

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:

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. Tuỳ 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.

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”,...