Thiết kế website giá rẻ chất lượng không rẻ – Gọi: 028.2203.2203 – 0938.018.218 : Nhiều gói linh động để khách hàng lựa chọn ✔ Thiết kế giao diện chuyên nghiệp ✔ Giá rẻ nhất.
Ngày nay đi đâu hay ngồi đâu các bạn cũng bất chợt nghe nói nhiều đến cụm từ Website, có bao giờ bạn suy nghỉ chính bạn sẻ tạo ra cho riêng ban một Website. Bạn đang lo lắng không biết bắt đầu tư đâu và làm như thế nào? Vậy thì bạn hãy yên tâm Webgiare.net xin giới thiệu đến các bạn các thiết kế website đơn giản bằng HTML.
Bài 1: CẤU TRÚC CƠ BẢN CỦA MỘT FILE HTML
Một tài liệu HTML cơ bản cần có cấu trúc như sau:
Môt cặp thẻ trong file html được nghĩa như sau:
Trong cấu trúc trên có nhứng cặp thẻ sau:
Là cặp thẻ được sử dụng để xác nhận đó là một file HTML. Xác định file được định dạng theo chuẩn utf-8
Được dùng để xác định phần mở đầu cho file
Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, nó phải nằm trong thẻ HEAD, thể hiện tiêu đề của trang HTML này khi được chạy trên Internet hoặc Localhost.
Thẻ này được sử dụng để xác định phần nội dung chính của bài viết thể hiện trên file này
Thẻ định dạng đề mục, thường người lập trình sẽ đặt tiêu đề bài viết vào cặp thẻ định dạng này.
Được sử dụng để định dạng một đoạn văn bản.
Được sử dụng để định dạng một đoạn văn bản được in đậm.
Được sử dụng để định dạng một đoạn văn bản được in nghiêng.
Được sử dụng để định dạng một đoạn văn bản được nghạch dưới.Trong bài 1 này các bạn chỉ làm quen với các thẻ cơ bản thông dụng như trên, các bài tiếp theo chúng tôi sẻ giới thiệu nhiều hơn tác tính năng làm đẹp cho website.
Lưu File HTML sau khi đã nhập code
Chọn các chi tiết lưu để file tốt hơn
Bài 2: ĐỊNH DẠNG CHO MỘT TRANG HTML ĐƠN GIẢN.
1. Đinh dạng danh sách:
Bài 1 chúng tôi đã trình bày cách tạo một danh sách thông thường UL, bài này chúng tôi sẽ trình bày với các bạn danh sách thực đơn(Menu) OL.
Với thẻ OL ta có cú pháp sau:
Trong đó:
UL TYPE =1 Các mục được sắp xếp theo thứ tự 1, 2, 3…
=a Các mục được sắp xếp theo thứ tự a, b, c…
=A Các mục được sắp xếp theo thứ tự A, B, C…
=i Các mục được sắp xếp theo thứ tự i, ii, iii…
=I Các mục được sắp xếp theo thứ tự I, II, III…
LI TYPE = disc Chấm tròn đậm
LI TYPE = circle Vòng tròn
LI TYPE = square Hình vuông2. Các thẻ định dạng ký tự:
Strong = b : In đậm
EM = I : In nghiêng
S = STRIKE: Chữ bị gạch ngang
BIG: Chữ lớn hơn bình thường
Small: chữ nhỏ hơn bình thường
SUP: Đinh nghĩa chỉ số trên
SUB: Chỉ số dưới
BASEFONT: Định nghĩa kích thước font chữ.
FONT: Kiểu chữ hiển thị.3. Sử dụng màu sắc trong thiết kế các trang Web
Trong thành phần yếu tố đồ hoạ về màu sắc thì một màu được kết hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây (Green), Xanh nước biển (Blue). Trong HTML một giá trị màu có định dạng như sau: #RRGGBB viết tắt (RedRedGreenGreenBlueBlue)
Bảng màu cơ bản:
– Đỏ/RED: #FF0000
– Đỏ sẫm/DARKRED: #8B0000
– Xanh lá cây/GREEN: #00FF00
– Xanh nhạt/LIGHTGREEN: #90EE90
– Xanh nước biển/BLUE: #0000FF
– Vàng/YELLOW: #FFFF00
– Vàng nhạt/LIGHTYELLOW: #FFFFE0
– Trắng/WHITE: #FFFFFF
– Đen/BLACK: #000000
– Xám/GRAY: #808080
– Nâu/BROWN: #A52A2A
– Tím/MAGENTA: #FF00FF
– Tím nhạt/VIOLET: #EE82EE
– Hồng/PINK: #FFC0CB
– Da cam/ORANGE: #FFA500
– Màu hải quân/NAVY: #000080
…
BÀI 3: TẠO LIÊN KẾT VÀ ĐỊNH DẠNG LIÊN KẾT TRONG THIẾT KẾ WEBSITE BẰNG HTML.
1. Thẻ body
Cú pháp:
<BODY
LINK = color
ALINK = color
VLINK = color
BACKGROUND = url
BGCOLOR = color
TEXT = color
TOPMARGIN = pixels
RIGHTMARGIN = pixels
LEFTMARGIN = pixels
>
….và phần nội dung của trang web được đặt ở đây.Các Đinh nghĩa của thẻ:
LINK: Chỉ định màu của liên kết
ALINK: Chỉ định màu của liên kết đăng được chọn
VLINK: Chỉ định màu của liên kết đã từng mở
BACKGROUND: Hình ảnh nền của trang web
BGCOLOR: màu nền của trang web
TEXT: màu của chữ trong trang web
SCROLL(yes/no): xác định có hay không có thanh cuôn
TOPMARGIN: Lề bên trên của trang web
RIGHTMARGIN: Lề phải của trang web
LEFTMARGIN: Lề trái của trang web
BOTTOMMARGIN: Lề dưới của trang web2. Kiểu chữ cho văn bản:
<FONT
FACE = font-name
COLOR = color
…
FACE = font-name: chọn font chữ cho nội dung text trên trang web ví dụ như arial, verdera, tahoma, times new roman…
COLOR = color: Chọn màu chữ cho nội dung.
SIZE = n: Là kích thước chữ cho văn bản, n=1,2,3,4,5.. hoặc 10px, 12px, 13px, 14px…Ví dụ:
3. Liên kết đến trang web khác
Cú pháp:
<A
HREF = url
NAME = name
TABINDEX = n
TITLE = title
TARGET = _blank / _self
>
Tiêu đề liên kết
HREF: địa chỉ liên kết tới ví dụ như http://webgiare.net/
Name: Tên liên kết
TABLEINDEX: Thứ tự di chuyển khi nhấn phím tab.
TITLE: Văn bản hiển thị khi rê chuột lên liên kết
TARGET: Định nghĩa mở trang hiển thị, _blank = trang mới.
Bài 4 CHÈN ÂM THANH VÀ HÌNH ẢNH VÒA TRANG WEB
1. Đưa âm thanh vào trang web.
Cú pháp:
url: Đường dẫn đến file âm thanh, file âm thanh có đuôi: .mepg, avi, mov, au, mid, .mp3,… n: Số lần chơi lặp lại của file âm thanh, -1 nếu muốn chơi lặp lại vô tận.
2. Đưa hình ảnh vào trang web.
Cú pháp:
<IMG
ALIGN = TOP/MIDDLE/BOTTOM
ALT = text
BORDER = n
SRC = url
WIDTH = width
HEIGHT = height
HSPACE = vspace
VSPACE = hspace
TITLE = title
>Trong đó:
ALIGN = TOP/ MIDDLE/ BOTTOM/ LEFT/ RIGHT: Canh hình ảnh so với nội dung văn bản.
ALT = text : Chữ sẽ được hiển thị khi hình ảnh không tồn tại hoặc chức năng show hình ảnh bị tắt.
BORDER = n: Kích thước đường viền bao quanh hình ảnh.
SRC = url : Địa chỉ hình ảnh được chèn vào tài liệu.
WIDTH/HEIGHT: Chiều rộng chiều cao của hình ảnh
HSPACE/VSPACE: Khoản trắng bao quanh hình ảnh
TITLE = title: Tiêu đề của hình ảnhKết quả:
BÀI: 5 TẠO BẢNG BIỂU CHO TRANG WEB
Cú pháp:
Định dạng:
<TABLE
ALIGN = LEFT / CENTER / RIGHT:
BORDER = n
BORDERCOLOR = color
BORDERCOLORDARK = color
BORDERCOLORLIGHT = color
BACKGROUND = url
BGCOLOR = color
CELLSPACING = spacing
CELLPADDING = pading
>
<TD
ALIGN = LEFT / CENTER / RIGHT
VALIGN = TOP / MIDDLE / BOTTOM
BORDERCOLOR = color
BORDERCOLORDARK = color
BORDERCOLORLIGHT = color
BACKBROUND = url
BGCOLOR = color
COLSPAN = n
ROWSPAN = n
>
ALIGN / VALIGN: Canh lề cho bảng và nội dung trong ô.
BORDER: Kích thước đường kẻ chia ô trong bảng.
BORDERCOLOR: Màu đường kẻ
BORDERCOLORDARK/BORDERCOLORLIGHT: Màu tối và sáng của đường kẻ
BACKGROUND: Ảnh nền cho cho bảng.
BGCOLOR: Màu nền cho bảng.
CELLSPACING: Khoảng cách giữa các ô trong bảng
CELLPADDING: Khoảng cách giữa nội dung và đường kẻ.
COLSPAN: Trộn cột
ROWSPAN: Trộn dòng.Để được rõ hơn mình sẽ thiết kế trang đăng ký tên miền của chúng tôi Bạn copy đoạn mã sau vào notepad.
Kết quả:
Còn tiếp