Thiết kế Website đơn giản với HTML – Web Giá Rẻ

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 :

Nội dung, ngoài ra cũng có một số thẻ được định nghĩa khác ví dụ như thẻ meta ,

là dấu hiệu bắt đầu của một thẻ
là dấu hiệu kết thúc một thẻ

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

<br /> 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.<br />


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.

là thể không có khởi đầu và kết thúc thẻ, thẻ này Open ở đâu thì phần nội dung dưới đó sẻ sang dòng mới .


Đượ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.

    Cặp thể kết hợp dùng để định dạng danh sách thông thường:

  • Mục thứ nhất
  • Cặp thể kết hợp dùng để định dạng danh sách thông thường:

  • Mục thứ hai
  • Cặp thể kết hợp dùng để định dạng danh sách thông thường:

Cặp thể kết hợp dùng để định dạng danh sách thông thường:

Trong bài 1 này những bạn chỉ làm quen với những thẻ cơ bản thông dụng như trên, những bài tiếp theo Webgiare. net sẻ trình làng nhiều hơn tác tính năng làm đẹp cho website .
Bây giờ tất cả chúng ta sẻ thử làm một trang HTML đơn thuần về cty nhé .




Thiết kế website | Thiet ke website | Thiết kế web | Thiet ke web – Webgiare.net

Giới thiệu về Webgiare.net

Webgiare. net
Webgiare. net
Các ưu điểm trong sản phẩm – dịch vụ của Chúng tôi:

  • Thiết kế website
  • Quý khách không hài lòng chúng tôi không thu phí.
  • Khuyến mãi 10% đối với Quý Khách hàng đã có website.
  • Tặng 1 tên miền Việt Nam
  • Bảo hành website vô thời hạn.
  • Luôn có các chính sách chăm sóc Khách hàng sau khi website chạy trên Internet.
  • Với trang Admin cập nhật dể dàng và thông dụng, mới nhất hiện nay bằng công nghệ Web 2.0
  • Tinh thần phục vụ tối đa, chất lượng luôn đảm bảo hoàn hảo nhất.
  • Webgiare.net chân Thành cảm ơn Quý Khách Hàng đã quan tâm và ủng hộ Chúng tôi trong thời gian qua!



Lưu File HTML sau khi đã nhập code

Chọn những chi tiết lưu để file tốt hơn
Và đây tất cả chúng ta chiêm ngưởng thành quả mà tất cả chúng ta vừa tạo và lưu nhé !

Bài 2: ĐỊNH DẠNG CHO MỘT TRANG HTML ĐƠN GIẢN.

1. Đinh dạng list :
Bài 1 Webgiare. net đã trình diễn cách tạo một list thường thì UL, bài này Webgiare. net sẽ trình diễn với những bạn list thực đơn ( Menu ) OL .
Với thẻ OL ta có cú pháp sau :

  1. Menu thứ nhất
  2. Menu thứ hai
  3. Menu thứ ba

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

2. Các thẻ định dạng ký tự :

Trong bài 1 Webgiare.net đã trình bày với các bạn các thẻ , , . Bài 2 này chúng tôi sẽ trình bày các thẻ định dạng ký tự sau:

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

Nội dung được canh giữa

3. Sử dụng sắc tố trong thiết kế những 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

Trong HTML đinh dạng màu sắc thường đi kèm với một thẻ khác ví dụ: , …
Được rồi bây giờ chúng ta sẽ thực hành: thiết kế trang web báo giá thiết kế web của Webgiare.net sử dụng các thẻ đã trình bày ở trên. Các bạn hãy mở một chương trình thiết kế web như Notepad và nhập nguyên đoạn mã HTML sau vào nhé.




Bài 2: Định dang cho một trang HTML đơn giản. – Báo giá thiết kế web

Báo giá thiết kế web

TÍNH NĂNG CÁC GÓI THIẾT KẾ WEB:

  1. Gói thiết kế web 1: 2.000.000 VNĐ:
    • Trang Chủ(Hiệu ứng flash nhẹ).
    • Module Giới thiệu.
    • Module Sản phẩm đa cấp( Modul tùy biến, không giới hạn phân cấp).
    • Module Dịch vụ_ khuyến mãi.
    • Trang liên hệ.
    • Hỗ trợ trực tuyến
    • Công cụ tìm kiếm.
    • Bộ đếm người truy cập.
    • Tặng 1 domain Việt Nam.
    • Hướng dẫn và hỗ trợ cập nhật nội dung web miễn phí.
    • Tư vấn quảng bá website miễn phí 1 tháng sau khi web chạy trên internet.

  2. Gói thiết kế web 2: 3.000.000 VNĐ:
    • Trang chủ( Banner flash)
    • Module Giới thiệu
    • Module Sản phẩm đa cấp: ( Modul tùy biến, không giới hạn phân cấp).
    • Module Sản phẩm tiêu biểu, Sản phẩm mới.
    • Module Giỏ hàng
    • Module Dịch vụ – khuyến mãi.
    • Module Tin tức – Sự kiện
    • Module Banner quảng cáo.
    • Module Liên kết website.
    • Trang liên hệ
    • Hỗ trợ trực tuyến
    • Công cụ tìm kiếm.
    • Bộ thống kê tình hình hoạt động website
    • Bộ đếm người truy cập.
    • Tặng 1 domain Việt Nam.
    • Hướng dẫn và hỗ trợ cập nhật nội dung web miễn phí.
    • Tư vấn quảng bá website miễn phí 1 tháng sau khi web chạy trên internet.

  3. Gói thiết kế web 3: 4.000.000 VNĐ:
    • Trang chủ( Banner flash hiệu ứng đẹp, mềm mại)
    • Module Giới thiệu
    • Module Sản phẩm đa cấp: ( Modul tùy biến, không giới hạn phân cấp).
    • Module Sản phẩm tiêu biểu, Sản phẩm mới.
    • Module đếm số lượng sản phẩm.
    • Module Giỏ hàng.
    • Module Dịch vụ_ khuyến mãi
    • Module Tin tức_ Sự kiện
    • Hệ thống lấy tin tự động.
    • Modul Banner quảng cáo.
    • Modul Liên kết website.
    • Modul tiện ích (Quý Khách có thể lựa chọn 1 trong nhiều tiện ích: Thư viện ảnh, video clip, hệ thống SMS, Newletter)
    • Trang liên hệ
    • Bộ bình chọn
    • Công cụ tìm kiếm.
    • Bộ thống kê tình hình hoạt động website
    • Bộ đếm người truy cập.
    • Tặng 1 domain Việt Nam
    • Hướng dẫn và hỗ trợ cập nhật nội dung web miễn phí.
    • Tư vấn quảng bá website miễn phí 1 tháng sau khi web online.
    • Tư vấn quảng bá website miễn phí 1 tháng sau khi web chạy trên internet.

  4. Ngoài ra Webgiare.net còn nhiều gói và luôn thiết kế web theo mọi yêu cầu của quý khách hàng:
  5. Liên hệ: (08).2203.2203 – 0938.018.218

Webgiare.net chân Thành cảm ơn Quý Khách Hàng đã quan tâm và ủng hộ Chúng tôi trong thời gian qua!



Và đây là tác dụng tất cả chúng ta vừa tạo và lưu ở trên nhé !

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 toàn thân

Cú pháp:
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 web

2. Kiểu chữ cho văn bản :

FACE = font-name
COLOR = color
SIZE = n >

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

Thiết kế Website với Webgiare.net kết qủa thu được là: Thiết kế Website với Webgiare.net

3. Liên kết đến website khác

Cú pháp:
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ư https://final-blade.com/
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.
Vidụ : Thiết kế Website với Webgiare. net hiển thị : Thiết kế Website với Webgiare. net
Tốt, giờ đây tất cả chúng ta sẽ thực hành thực tế thiết kế trang Quảng bá website của Webgiare. net. Bạn hay mở một chương trình thiết kế web ví dụ là Notepad và nhập đoạn html dưới đây .




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 – Quảng bá website

QUẢNG  BÁ WEBSITE

Dịch vụ Quảng bá web – SEO (Search engine optimization – SEO) – Google Adwords: Xây dựng thương hiệu công ty của Quý Khách trên mạng toàn cầu.

Quá trình thứ nhất:

  • Quảng bá web – SEO (Search engine optimization – SEO) – Google Adwords: (Tối ưu hóa website dành cho máy tìm kiếm)
  • Liên kết URL thân thiện máy tìm kiếm
  • Tối ưu hóa kích thước trang Web(Giới hạn kích thước của trang dưới 100kB)
  • Cải thiện tốc độ tải trang (trung bình < 1s)
  • Khách hàng của thiết kế webCông tythiết kế websiteLTC GROUP đã được trang bị đầy đủ quá trình thứ nhất.

Quá trình thứ hai:

  • SEM – Search Engine Marketing: (Quảng bá website rộng rãi tới máy tìm kiếm)
  • Tư vấn, chọn lọc những từ khóa hiệu quả nhất liên quan đến lĩnh vực kinh doanh của quý doanh nghiệp.
  • Đăng ký website vào các máy tìm kiếm như Google, Yahoo, MSN, Bing…
  • Đăng banner quảng cáo trên các website có nhiều người truy cập để thu hút thứ hạn (traffic)
  • Luôn luôn cập nhật và thay đổi mới nội dung của Website
  • Đăng ký website vào các danh bạ website, trang vàng hiện có.
  • Xây dựng liên kết rộng rãi tới website.
  • Tư vấn Quý Khách phát triển, đầu tư mạnh mẽ vào nội dung website

Chúng tôi tăng trưởng công nghệ tiên tiến Quảng bá website với nhiều phương pháp hay và bảo vệ tăng thứ hạng và hiệu suất cao lên đến hơn 99 % .
” Thiết kế website đúng chuẩn mực và đạt tiêu chuẩn là đã tạo một phương pháp tốt, làm cho phương pháp tăng trưởng là cả một quy trình dài ”

Webgiare.net chân Thành cảm ơn Quý Khách Hàng đã quan tâm và ủng hộ Chúng tôi trong thời gian qua!

Kết quả của đoạn mã trên nhé !

Bài 4 CHÈN ÂM THANH VÀ HÌNH ẢNH VÒA TRANG WEB

1. Đưa âm thanh vào website .
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 website .
Cú pháp :

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 ảnh
Vidu:

Bây giờ tất cả chúng ta sẻ thực hành thực tế thiết kế xây dựng trang trình làng công ty thiết kế web – Webgiare. net, có nhạc nền. Bạn copy đọan mã dưới đây vào notepad nhé :




Chèn âm thanh và hình ảnh vào Website – Giới thiệu công ty thiết kế web – Webgiare.net

Giới thiệu công ty thiết kế web – Webgiare.net

”Giới Chúng tôi sinh ra là để thiết kế website. Với phương thức kinh doanh “ Tận tụy với Khách Hàng, Tận tâm với công việc” là yếu tố quan trọng nhất được Webgiare.net đặt làm phương thức kinh doanh, là nền tảng vững chắc để phát triển cao hơn, xa hơn và trên toàn Thế giới.

Cùng với một đội ngũ kỹ thuật thiết kế và lập trình viên trẻ trung và đầy nhiệt huyết, thông thạo đồ hoạ và lập trình luôn tìm tòi học hỏi nỗ lực không ngừng và sự góp phần của các chuyên gia dày dặn kinh nghiệm trong lĩnh vực CNTT đã phát triển tạo ra một công nghệ CMS NVA hoàn thiện đạt hiệu quả tối đa nhất để đảm bảo độ bảo mật của website đạt tiêu chuẩn Quốc tế, tính bản quyền tuyệt đối, tương thích với mọi trình duyệt, thân thiện với các công cụ tìm kiếm, không hạn chế các tính năng, mở rộng dễ dàng, chiếm dụng ít tài nguyên, tốc độ tải trang rất nhanh…Hội tụ đầy đủ các yếu tố để tạo nên một website chuẩn tuyệt đối 2.0.

Xin lưu ý: các bạn nên tạo một thư mục image và sound ngay tại nơi bạn lưu file html đẻ chèn link vào cho phần nhạc nền cũng như hình ảnh

Webgiare.net chân Thành cảm ơn Quý Khách Hàng đã quan tâm và ủng hộ Chúng tôi trong thời gian qua!

Kết quả :

BÀI: 5 TẠO BẢNG BIỂU CHO TRANG WEB

Cú pháp :

Noi dung 1 Noi dung 2
Noi dung 1.1 Noi dung 2.1

Định dạng :

ALIGN = LEFT / CENTER / RIGHT:
BORDER = n
BORDERCOLOR = color
BORDERCOLORDARK = color
BORDERCOLORLIGHT = color
BACKGROUND = url
BGCOLOR = color
CELLSPACING = spacing
CELLPADDING = pading
> 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 ĐK tên miền của Webgiare. net, Bạn copy đoạn mã sau vào notepad .




Bài 5: Tạo bảng biểu cho trang web – Đăng ký tên miền

Đăng ký tên miền

Tên miền giống như mặt tiền của doanh nghiệp trên xa lộ thông tin. Tên miền vốn đã được coi là một tài sản giá trị hàng đầu của mỗi doanh nghiệp. Một tên miền tốt, ngắn gọn, dễ nhớ và gắn với thương hiệu, sản phẩm, dịch vụ chiếm hơn 70% hiệu quả hoạt động của website.

Kiểm tra tên miền

Tên miền Phí cài đặt Chi phí
.com miễn phí $10/năm
.net miễn phí $10/năm
.org miễn phí $10/năm
.us miễn phí $10/năm
.info miễn phí $10/năm
.co.uk miễn phí $10/năm
.cc miễn phí $29.99/năm
.bz miễn phí $29.99/năm
.nu miễn phí $29.99/năm

Webgiare.net chân Thành cảm ơn Quý Khách Hàng đã quan tâm và ủng hộ Chúng tôi trong thời gian qua!

Kết quả :

Còn tiếp