Những Điều Cần Lưu Ý Khi Thiết Kế Website Thương Mại Điện Tử

Để có một website thương mại điện tử đòi hỏi yếu tố kỹ thuật nhiều hơn, đầu tư chi phí cũng nhiều hơn, nhưng nếu website của bạn gặp phải một vài vấn đề không đáng tiếc thì chất lượng website sẽ giảm.
Có 3 điều quan trọng bạn cần chú ý:
Thứ nhất: Khả năng sử dụng, người sử dụng phải tìm các sản phẩm một cách nhanh chóng và dễ dàng.
Thứ hai: Trình bày sản phẩm “gọn gàng, ngăn nắp”. Chính điều này tạo nên sự chuyên nghiệp trong giới thiệu sản phẩm.
Thứ ba: Nhanh chóng, an toàn trong quá trình giao dịch: Qúa trình mua sản phẩm từ website bạn phải an toàn và nhanh chóng.
Hôm nay blog thiết kế web không đi sâu về mặt kỹ thuật mà chủ yếu hướng vào khía cạnh tối ưu website thương mại điện tử của bạn từ các vấn đề cơ bản nhất.

Website của bạn cần tương thích với nhiều trình duyệt.

Như các bạn đã biết, hiện nay có rất nhiều trình duyệt đặc biết như Chrome, Mozilla Firefox, Method... và website của bạn có khả năng sẽ có "hình hài khác nhau" trên các trình duyệt này, chưa kể đến khi người dùng vào website của bạn bằng các thiết bị di động, Đấy chính là điều bạn cần quan tâm website của bạn có thể có chút lỗi nhẹ nào đó về thiet ke giao dien web nhưng bạn lại mất môt lượng khách hàng lớn. Nếu bạn là người dùng, chắc chắn bạn cũng sẽ lựa chọn những website gây trở ngại ít, bắt mắt hơn đúng không!?! Sau đây làm một số ví dụ cho sự hấp dẫn của thiết kế thương mạng điện tử.

Mời các bạn tham khảo skinnyties.com 

www.templatemonster.com là một ví dụ

Tối ưu hóa hình ảnh.

Khi bạn lựa chọn một sản phẩm trên thực tế, chắc chắn bạn sẽ xem xét kỹ lưỡng từng chi tiết, người mua hàng cũng nào cũng vậy, họ luôn muốn có sản phẩm đẹp nhất có thể, và nhu cầu "soi" ấy cũng tồn tại khi đó là mua hàng trực tuyến, vì thế website của bạn phải tối ưu hình ảnh, hình ảnh phải thể hiện tốt nhất sản phẩm bạn đang dùng, phải có chế độ phóng to hình ảnh để người xem không cảm thấy khó khăn khi lựa chọn và kiếm tra.

onlineshoes.com có cách riêng để khiến khách hàng của họ hài lòng

và đây là cách làm của gap.com

victoriassecret.com điều này quá chuyên nghiệp

Tối ưu hóa dịch vụ và hỗ trợ trực tuyến.

Trang hỏi đáp (FAQ), các chính sách, thông tin doanh nghiệp, diều khoản dịch vụ... tất cả phải được bố trí phù hợp. Đây là điểm nhấn cho doanh nghiệp bạn, với khách hàng mọi thứ về doanh nghiệp luôn rõ ràng dể họ đặt lòng tin Nếu thông tin của bạn rõ ràng, thân thiện sẽ là điểm 10 cho doanh nghiệp. Bạn hãy tham khảo một số website sau:

ugmonk.com 

about của abookapart.com

Thông tin liên hệ rõ ràng.

Bạn nghĩ sao nếu khách hàng cần bạn nhưng họ không biết tìm ở đâu ?? Vâng, bạn đã để tuột mất họ. Hãy đăt thông tin của mình ở vị trí rõ ràng, dễ tìm để khách hàng cảm thấy bạn luôn sẵn sàng hỗ trợ bạn hay nói cách khách họ luôn có người lắng nghe, tư vấn, giải đáp thắc mắc.
Mời bạn tham khảo một số vị trí đặt thông tin khách hàng dễ dàng tìm thấy.

 cách đặt thông tin liên lạc của bohemiadesign.co.uk

www.madein33.com: bạn dễ dàng tìm thấy họ khi cần

Phương thức phối màu và ánh sáng.

 Một website có màu sắc phù hợp sẽ thu hút người xem hơn là màu sắc khô khan và tối tăm bởi màu sắc gợi nên sự dễ chịu, vui vẻ, làm nổi bật được những thứ bạn muốn nhấn mạnh lên trước ( sản phẩm).Hãy tận dụng khả năng “biến hóa không gian” của màu sắc và lựa chọn một tông màu cho cửa hàng online của bạn thật khôn ngoan và phù hợp.

cách phối màu của abelandcole.co.uk

custom-tshirts.eu độc đáo và hấp dẫn

 Kết nối website với các mạng xã hội:

Bạn nên tích hợp các liên kết mạng xã hội như facebook, Google+, Twitter…vì điều này thu hút khách hàng nhiều hơn.

tenlittlemonkeys.co.uk

Nhấn mạnh các giỏ hàng:

Bạn nghĩ thế nào nếu bạn đang xem một món hàng ưa thích trên một website và muốn cho vào giỏ hàng ngay lập tức. Điều gì xảy ra khi bạn không thấy giỏ hàng đâu cả, với chúng tôi thì có thể là một sự “bức xúc nhẹ”. Bạn nên chú ý đến biểu tượng giỏ hàng để thu hút khách hàng nhé. 

Gi ỏ hàng của happywebbies.com

lega-lega.com

Kết luận:

Với các chú ý trên hi vọng các bạn sẽ có một website thương mại điện tử tốt.

Cảm ơn và trân trọng!

Nguồn: website giá rẻ
Mời các bạn xem thêm bài viết Những Lợi Ích Khi Doanh Nghiệp Có Một Website Riêng

Đọc Tiếp

Giới Thiết Kế Web "Điên Đảo" Với 8 Xu Hướng Mới Trong Năm 2014

Số lượng website tăng lên trên World Wide Web như một sức nóng, nhưng lâu lâu  bạn lại thấy một số website có vẻ giống nhau. Chính vì thế nếu là một nhà thiết kế web chuyên nghiệp bạn sẽ nghĩ đến một website có thiet ke giao dien web không đụng hàng, độc, mới lạ. Năm 2014 là năm thăng trầm của nhiều xu hướng thiết kế web.  Hôm nay GiaLinhIT's Blog sẽ giới thiệu tới các bạn 8 xu hướng thiết kế web làm các chuyên gia điên đảo trong năm 2014.

Thiết kế phẳng.

Dù không còn xa lạ với tất cả chúng ta nhưng trên bảng xếp hạng xu hướng thiết kế web năm 2014, thiết kế phẳng thật sự "làm mưa làm gió" . Ưu điểm của thiết kế phẳng là gọn nhẹ, đơn giản, phối màu đơn sắc linh hoạt, phân chia khu vực rõ ràng. Hướng đến trải nghiệm mới mẻ cho người sử dụng.

Wistia.com là một ví dụ tuyệt vời của thiết kế phẳng.

Video thay thế text (văn bản):

Từ tháng 6 năm 2014 sẽ chứng kiến một sự thay đổi đáng kinh ngạc, tính linh hoạt, dễ chia sẻ, truyền tải thông điệp hiệu quả của video đã thay thế cho sự cứng nhắc và đơn điệu của text.

Onlycoin.com áp dụng video thay thế text thật sự hiệu quả

Cá nhân hóa các content website.

Hiện nay phần đa cộng đồng mạng thích một bài viết mang tính chia sẻ của một cá nhân đã trải nghiệm qua thực tế và lấy đó làm kinh nghiệm hơn so với các bài viết mang tính chung chung và dạng lý thuyết cứng nhắc. Bài viết dạng chia sẻ hay còn gọi là cá nhân hóa content làm website của bạn trở nên thân thiện với người dùng và nhà cung cấp dịch vụ như một người bạn của họ.

New York Times đưa ra một trải nghiệm cá nhân cho mỗi độc giả của họ.

Hướng scroll  và ít nhấp chuột cho người sử dụng.

Thao các thống kê gần đây, các website có thiết kế hướng thông tin chạy theo thanh cuộn dài sẽ có nhiều người dùng hơn bởi vì nó giảm tối đa click chuột vào các liên kết cho người sử dụng, họ đỡ tốn thời gian để đi tìm các liên kết trên giao diện web vì điều đó thật phiền toái. 

Macaw.co là một ví dụ cho sự di chuyển kéo dài

Màu sắc giản đơn làm nền cho các điểm sáng.

 Giai đoạn 2014 -2015 sẽ tạo cho người dùng một cảm giác nhẹ nhàng nhưng sâu sắc, rõ ràng bởi có một xu hướng thiết kế giữa màu sắc giản đơn làm nền cho các điểm sáng. Dù đơn giản nhưng rất ấn tượng với người xem, xu hướng này được nhiều nhà thiết kế web chuyên nghiệp lựa chọn.

Getuikit.com là một ví dụ tuyệt vời của màu sắc đơn giản.

Xóa bỏ các form mở rộng.

Như chúng ta đã biết, các mẫu đăng ký của các diễn đàn nhiều khi quá là dài dòng đối với chúng ta mà dịch vụ của họ đơn thuần không cần dùng đến, trong năm 2014 các nhà thiết kế web sẽ tập trung vào việc tạo ra các website chứa ít form và các form này được đơn giản hóa nhưng vấn đầy đủ thông tin.

Treehouse sử dụng diễn đàn như hệ thống cộng đồng với các form ngắn gọn.

Giảm thiểu sidebar không cần thiết.

"Content is king" làm sao để người xem có thể tập trung vào nội dung chính của website?! Rất đơn giản bạn hãy bỏ bớt các sidabar và hướng người xem vào nội dung của bạn.

Sử dụng animations (ảnh động) đơn giản.

Khá là độc đáo phải không, đây là xu hướng cơ sở cho năm 2014, nó không hề khiến người xem rối mắt mà mang họ đến một thế giới động đơn giản. Sự kết hợp giữa ảnh động và hiệu ứng chuyển tiếp trong sản phẩm của bạn sẽ làm nổi bật thông điệp bạn truyền đi, điều đó sẽ là điểm cộng của bạn đối với khách hàng.

Themeskingdom.com là một ví dụ tuyệt vời của hình ảnh động đơn giản.

Kết luận:

8 xu hướng thiết kế trên sẽ là xu hướng top đầu của năm 2014 đánh dấu bước ngoặt trong lịch sử thiết kế giao diện web. Hi vọng bài chia sẻ này của GiaLinhIT's Blog sẽ giúp các bạn có trải nghiệm thú vị về Degsin Website.

Cảm ơn và Trân trọng!

Đọc Tiếp

[Thiết Kế Web] Những Chú Ý Khi Dùng Màu Sắc

Màu sắc là một công cụ truyền tải thông điệp "lợi hại nhất" cho các nhà thiết kế. Mỗi màu sắc đều có một ý nghĩa,  thể hiện cá tính, phong cách của người thiết kế cũng như những gì muốn nhấn mạnh của một website.
Sau đây là một vài chú ý dành cho các bạn đang thiết kế web:

Cách phối màu:

Giao diện website thu hút thì điều tất yếu là màu sắc được phối một cách hợp lý.  Với điều này, website sẽ thể hiện đúng tính chất của nó. Một website không có màu sắc hẳn sẽ không giữ được những nét riêng, và nếu trang web loạn màu sẽ đem lại cảm giác nhức mắt và khó chịu cho người xem.
Thông thường khi thiết kế một website thường có một tông màu chủ đạo.Tuy nhiên vẫn có những website sử dụng nhiều tông màu khác nhau.

Dùng màu đủ độ

Dùng màu đủ độ là như thế nào? Màu sắc là một cách thức tốt nhất để nhận dạng, nhóm, hay phân chia các phần của một website. Nếu bạn dùng ít màu nóng thì website của bạn sẽ trở nên buồn tẻ, nhạt nhẽo. Và tốt nhất bạn nên biết dùng màu đủ độ để thu hút người xem vào những thành phần chính của website. Hãy dùng màu sắc như một kim chỉ nam cho người xem để họ hướng đến những gì bạn muốn thể hiện.

Dùng khoảng trắng như một nghệ thuật.

Thường thấy nền text phổ biến được dùng là màu trắng. Nội dung sẽ nổi bật nếu chữ đậm đặt lên một nền trắng hoặc nền sáng màu. Bạn nên chú ý đến điểm này khi thiet ke web.

Dùng nền sáng nhất cho phần nội dung chính

Hãy dùng màu nền sáng nhất cho phần nội dung chính của bạn. Lý do đơn giản là não bộ của bạn có thể dễ dàng tìm thấy và thu hút vào phần nội dung trên nền sáng đó.
Nội dung của bạn sẽ giống như ngôi sao trên bầu trời đêm, người nhìn sẽ tìm kiếm những điểm sáng của ngôi sao chứ ít ai nhìn vào vùng tối xám xịt không có tia sáng nào.

Hãy dùng những màu mạnh để thu hút mắt nhìn

Những màu nóng luôn luôn thu hút sự chú ý của mắt người xem, website của bạn cũng như một cô gái độ xuân thì, màu nóng sẽ làm cô ấy thật sự thu hút . Tuy nhiên nếu dùng quá nhiều màu mạnh sẽ làm cho người nhìn bị loạn lên và không biết sẽ phải nhìn vào đâu nữa, đừng để việc đó làm mất đi sự hiểu quả của việc dùng những màu mạnh. Chưa kể còn rất nhiều bảng dùng màu nặng nề làm ta không còn dành sự chú ý cho nội dung chính của trang web.
Để đảm bảo sự tương phản tối đa giữa menu và mùa nền, bạn hãy làm cho website của bạn rõ ràng để bớt rào cản đối với người dùng. Và hơn nữa, hãy để con mắt tập trung vào nội dung chính, logo trang nhé.

Tránh đặt các màu nóng cạnh các bức ảnh.

Tại sao vậy, bạn đăng tải hình ảnh trên website để làm gì, chẳng phải là bạn muốn người xem chú ý đến hình ảnh và hiểu thông điệp mang trên bức ảnh đó. Nếu bạn đặt màu nóng cạnh các hình ảnh, sự nổi bật của bức ảnh hiển nhiên sẽ bị "san sẻ" bớt.

Tránh sử dụng quá nhiều màu khác nhau

Sử dụng quá nhiều màu đấy gọi là sự loạn màu, làm cho website bị rối mắt hoặc lòe loẹt đến mức thái quá.

Phối màu lấy cảm hứng từ thiên nhiên

Một cách phối màu cũng khá thú vị : Lấy màu từ thiên nhiên, thiên nhiên và con người chung sống với nhau, nếu bạn lấy cảm hứng từ thiên nhiên website của bạn sẽ thân thiện, tạo cảm giác tự do, phóng khoáng, thoải mái.
Nguồn: thietkewebpro

Đọc Tiếp

[Tự Học CSS] Bài 3: Background

Thuộc tính Background chắc không xa lại với các bạn vì chúng ta đã gặp trong HTML. Trong CSS Background là một tập các thuộc tính dùng để định dạng nền cho website bao gồm: Background-color, background-image, background-attachment, background-repeat, background-position.

1. Background –color:

Background-color trong CSS tương tự như thuộc tính bgcolor trong HTML, chúng đều dùng để định dạng màu nền cho website.

Cú pháp: 

Bo_chon
{
Background-color:giatri;
}
- Bộ chọn có thể là bộ chọn thẻ, bộ chọn lớp , bộ chọn mã
- Nhận các giá trị là mã màu hệ 16 hoặc tên màu theo tiếng anh.

Ví dụ: 

Định dạng màu nền cho đoạn text theo các bộ chọn khác nhau

Trình duyệt hiển thị

2. Backgroud-image:

Đúng như cái tên của nó, đây là thuộc tính xác định ảnh nền cho website:

Cú pháp:

background-image:url(‘link’);
Link là liên kết tới hình ảnh.

Ví dụ: 

Chèn background thiet ke web bat dong san vào header của một website.

Chú ý: Ở đây mình dùng cả thuộc tính width:1000px; height:800px; kích thước hình ảnh là 1000x300px.
Trình duyệt hiển thị:

Ví dụ của mình, width=1000px và hình ảnh có độ rộng cũng là 1000px thì khi hiển thị nó không lặp lại.
Height =800px > độ cao của hình nên nó bị lặp lại.
Các bạn hãy thử bỏ width, heigh đi và thử xem trình duyệt hiển thị có gì khác!
Như bạn thấy trên các website, thông thường thì banner hiển thị không giống hình trên mà chỉ hiển thị 1 lần.
Nguyên nhân: - Kích thước phần định dạng ( ở đây là phần thẻ div có id= “header”) và thiếu thuộc tính background-repeat.

3. Background-repeat

Là thuộc tính xác định sự lặp lại của hình nền ( trong trường hợp hình ảnh nhỏ hơn kích thước phần định dạng).

Cú pháp:

Background-repeat:giatri;

Các giá trị:

• No-repeat: không lặp
• Repeat –x: lặp theo chiều ngang
• Repeat –y: lặp theo chiều dọc

Ví dụ:

Các bạn tìm hiểu về margin:0 auto nhé!

Trình duyệt hiển thị:

 Các bạn thử với các thuộc tính còn lại nhé!

4. Background-position

Dùng để định vị trí nền của website.

Cú pháp:

background-postion:giatri;

Giá trị:

• Top: bắt đầu từ trên
• Bottom: bắt đầu từ dưới
• Left: bắt đầu từ trái
• Right: bắt đầu từ phải

Ngoài ra có thể dùng đơn vị % để định vị trí nền.

Ví dụ:

Trình duyệt hiển thị:

5. Background-attachment:

Cú pháp: 

background-attachment:giatri;
Là thuộc tính xác định kiểu hiển thị của ảnh nền.

Giá trị:

• Fixed: cố định -> khi nội dung quá dài mà nền nhỏ thì  kéo thanh cuộn dọc thì nền website sẽ chạy theo thanh cuộn.
• Scroll (mặc định): khi kéo thanh cuộn nền vẫn giữ nguyên.

Các bạn tự code, cái này nhìn trực tiếp dễ hiểu hơn.
Chú ý: Cách viết tắt của bộ thuộc tính background:
Background:color image repeat attachment postion.

Bài tập thực hành.

Thiết kế một website như sau bằng cách sử dụng 3 cách khai báo css.

Các bạn chưa chắc kiến thức có thể xem lại bài 1 và bài 2 tại Tự Học CSS.

Chúc các bạn học tốt!

Đọc Tiếp

[Tự Học CSS] Bài 2: Bộ Chọn

Bài 1 Tổng quan về CSS đã qua, bạn phải nắm chắc kiến thức bài 1 để bước vào bài 2 không phải bỡ ngỡ, lúng túng khi code.

1. Khái niệm và phân loại bộ chọn:

Trở lại với ví dụ về việc vẽ tranh, giả sử bạn vẽ một cái cây có quả, cô giáo yêu cầu bạn tô màu ( định dạng) cho lá màu xanh, quả màu đỏ thì chắc chắn bạn phải xác định đâu là lá, đâu là quả. Nôm na trong CSS cũng như vậy, chúng ta sẽ chọn phần nào của website cần định dạng.

Cú pháp:

Đối với CSS nội tuyến:

<ten_the style= “thuoctinh:giatri; thuoctinh1:giatri;”>Nội dung</ten_the>

Đối với CSS ngoại tuyến và CSS trong:

Bo_chon{
Thuoctinh:giatri;
}
Trong CSS có ba bộ chọn chính: bộ chọn thẻ, bộ chọn mã, bộ chọn lớp.

2. Bộ chọn thẻ:

Nghĩa là xác định thẻ cần định dạng:
Bo_chon sẽ là tên thẻ HTML.
Ten_the{
Thuoctinh:giatri;
}

Ví dụ: 

Định dạng đoạn text “Thiet ke giao dien web OSVN.” Chữ mà àu đỏ và căn giữa theo CSS trong.
Ta cần xác định đoạn text trên nằm trong thẻ nào, ở đây là thẻ <p>.

Tương tự các bạn định dạng theo cách CSS ngoại tuyến.

3. Bộ chọn mã:

Mã hay còn gọi là ID, id là một thuộc tính trong thẻ HTML.

Cú pháp HTML:

<ten_the id= “ten_id”>Nội dung</ten_the>
ID được đặt cho các thành phần duy nhất (id trong tài liệu HTML không được trùng nhau). Có thể hiểu như mã học sinh, sinh viên của chúng ta vậy, sẽ không có 2 mã học sinh, sinh viên trùng nhau.

Ví dụ:

Cú pháp đúng:
<div id= “header”> Nội dung 1</div>
<div id= “content”> Nội dung 2</div>
<div id=”footer”> Nội dung 3</div>
Cú pháp sai:
<div id= “header”> Nội dung 1</div>
<div id= “footer”> Nội dung 2</div>
<div id=”footer”> Nội dung 3</div>

Cú pháp CSS:

#ten_id{
Thuoctinh=giatri;
}

Ví dụ:

Các bạn làm tương tự với CSS ngoại tuyến nhé.

4. Bộ chọn lớp:

Chúng ta lại tiếp tục vẽ cây, trên cây có nhiều lá, có nhiều qủa, tất cả các lá trên cây bạn tô xanh, tất cả các quả bạn tô đỏ. Trong một trang web có thể có nhiều thành phần giống nhau, để chọn tất các thành phần đó và định dạng chung cho chúng thì ta đặt nó cùng lớp (class).

Cú pháp HTML:

<ten_the class= “ten_class”>Nội dung</ten_the>
Chú ý: Class có thể trùng nhau nhưng ID thì không.

Cú pháp CSS:

.ten_class{
Thuoctinh=giatri;
}

Ví dụ: 

Trong một website, tất cả các đoạn văn đều có chữ màu đỏ.

Các bạn tự làm theo CSS ngoại tuyến nhé.

Bài tập thực hành.

1. Định dạng đoạn văn bản sau

<div>
Vô Đề
Thời gian tựa một khúc du
Phong ba bão táp đánh đu lòng người
Lê chân trải bước đường đời
Lòng ta thắt lại, kẻ buồn thiên thu.
Gia Linh
</div>
Yêu cầu:
- Dùng bộ chọn thẻ để định dạng màu chữ đoạn trên là xanh ( thuộc tính color), cỡ chữ là 40px( thuộc tính font-size), căn giữa (thuộc tính text-align).

2. Định dạng cho các khối sau

<div>Đây là header</div>
<div>Đây là content</div>
<div>Đây là  footer</div>
- Header, content, footer có độ rộng đều là 800px( thuộc tính width).
- Độ cao của header là 200px, content là 600px, footer là 100px (thuộc tính height).
- Màu nền của header và footer là vàng, content là xanh ( thuộc tính background-color).

3. Định dạng cho các khối sau ( dùng thẻ div để chứa nội dung).

- Tên bài hát có màu xanh, tên ca sỹ có màu đỏ (thuộc tính coler).
Chúc các bạn học tốt!

Đọc Tiếp

[Tự Học CSS] Bài 1: Tổng Quan Về CSS

Chào các bạn, tiếp nối loạt bài thiet ke web hôm nay chúng ta sang một “sê-ri” mới đó là Tự Học CSS.  Để học được CSS các bạn phải có nền tảng là HTML.

Vào bài đầu tiên chúng ta sẽ tìm hiểu  CSS là gì, có ăn được không? Nếu mà không dung để ăn thì công dụng của CSS ra sao?

1. CSS và công dụng của CSS?

CSS là viết tắt của Cascading Style Sheets có nghĩa là Ngôn ngữ Định dạng Website.

Định dạng website là gì: Có thể hiểu như sau, website là một  bức tranh, bút chì là HTML, bạn dùng HTML để phác thảo phần thô, phần khung của bức tranh đó, còn CSS đóng vai trò là hộp bút màu, bạn dùng hộp bút màu này tô cho bức tranh có màu sắc đẹp hơn.

Vậy thì CSS không dùng để ăn rồi :D.

Công dụng của CSS:

Định dạng các phần của một website như: font chữ, độ rộng, màu nền, vị trí….

Giúp code của website được tối ưu hơn ( khắc phục được những khuyết điểm của HTML).

Dùng CSS là dùng đúng chuẩn lập trình website ( tốt cho SEO).

2. Cách sử dụng CSS:

- Khai báo:

Có 3 các khai báo ứng với 3 cách định dạng chính của CSS.

a. CSS trong: 

Cú pháp: 

Mọi định dạng CSS được đặt trong thẻ <style></style>, trong bài…. Của phần Tự Học HTML mình đã có nhắc đến vị trí của thẻ này, bạn nào quên có thể xem lại.

Cách dùng này thường sử dụng cho làm bài tập để hiểu là chính, vì ít dùng, trên thực tế với một website nếu định dạng các phần tử ngay trong thẻ <style> thì code của bạn sẽ dài và rối.

b. CSS nội tuyến:

CSS nội tuyến được khai báo ngay tại thẻ html cần định dạng.

Ví dụ: <span sytle= “color:red”> Website giá rẻ</span>

Cách này cũng ít dùng vì rào cản giống như dùng CSS trong.

c. CSS ngoại tuyến:

Là sử dụng một file có phần mở rộng là .css độc lập (dùng trình soạn thảo như notepad, notepad++, dreamviewer…để tạo ra file .css) , file html được liên kết với thẻ này thông qua thẻ <link>đã học trong phần HTML.

Các khai báo CSS ngoại tuyến thường được sử dụng phổ biến vì có thể dùng file .css định dạng cho nhiều phần tử trong trang web, chuyên nghiệp, dễ chỉnh sửa.

Độ ưu tiên của các cách khai báo CSS nếu cùng tác động lên một đối tượng là: CSS nội tuyến > CSS trong >CSS ngoại tuyến.

3. Ví dụ mở đầu:

Định dạng CSS cho chuỗi sau: Thiet Ke Web Bat Dong San.

Cách 1 (CSS trong):

Với đoạn code trên thì chuỗi text nào nằm trong thẻ <p> để sẽ có màu đỏ.

Cách 2 ( CSS nội tuyến):

Code HTML:

Trình duyệt hiển thị:

Cách 3 (CSS ngoại tuyến):

- Tạo file style.css:

- Liên kết file css đã tạo với HTML:

- Trình duyệt hiển thị:

Bài tập thực hành:

Dùng CSS để tạo ra bài thơ sau theo 3 cách: CSS trong, CSS ngoại tuyến, CSS nội tuyến. Biêt tiêu đề dùng thẻ h2, size chữ là 20px .

Chúc các bạn học tốt!

Đọc Tiếp

[Tự Học HTML] Bài 6: Thẻ DIV và Thẻ SPAN

Tiếp theo loạt bài về Tự Học HTML hôm nay chúng ta sẽ tìm hiểu DIV và SPAN.

1. Thẻ SPAN ( SPAN tag):

Là một thẻ thuộc nhóm thẻ nội tuyến dùng để chứa các đoạn văn bản mà bạn muốn nhấn mạnh, thẻ này có tính chất trung hòa và không làm thay đổi tài liệu HTML.
Nhưng span sẽ thể hiện đẳng cấp của mình khi sử dụng kết hợp với CSS.
Ví dụ:
Xét câu sau: Một trong những nguyên tắc của phối  màu trong thiet ke giao dien web là tránh sử dụng quá nhiều màu khác nhau.
Code HTML:

Trình duyệt hiển thị:

Các bạn hãy thử định dạng cho đoạn text trên với CSS và không dùng với span để tự khám phá sự khác nhau nhé.

2. Thẻ DIV (DIV tag):

Thẻ <DIV> là viết tắt của từ "division" nghĩa là "phân chia", <div> thuộc nhóm thẻ dạng khối và có tính chất trung hòa như thẻ <span> và thường sử dụng để phân các khối với nhau, kết hợp với CSS.
DIV thường dùng để thiết kế giao diện website, một giao diện website sẽ chia thành nhiều phần nhờ các div. ( sẽ có một bài về vấn đề này).
Các thẻ <div> có thể chứa lẫn nhau, khác với span nhóm đơn khối thì <div> nhóm được đa khổi.
Cú pháp:
<div thuoctinh="giatri"></div>
Ví dụ:

Tuy nhiên với đoạn code trên bạn chưa thể nhận ra điểm mạnh của <div> mà phải thông qua các thuộc tính.
Một số thuộc tính quan trọng của thẻ div là: id, class, style... các bạn sẽ được học kỹ và ứng dụng nó triệt để trong phần Tự Học CSS.
Chú ý: Không nên sử dụng thẻ <div> cho những chi tiết nhỏ như một đoạn text, một hình ảnh....tất nhiên sử dụng thì trình duyệt vẫn sẽ hiển thị đúng ý đồ người code nhưng lại làm sai lệch ý nghĩa của thẻ <div>.
Bài này là bài kết thúc phần Tự Học HTML và chủ yếu làm nền tảng cho những phần CSS nên mình không đưa ra bài tập thực hành.
Chúc các bạn học tốt!

Đọc Tiếp

Những Lợi Ích Của Doanh Nghiệp Khi Có Một Website Riêng

Thương mại điện tử (TMĐT) Việt Nam đã được đánh giá như là "Nấm mọc sau mưa", sự phát triễn vũ bão của Internet, mạng xã hội, các chủ doanh nghiệp cũng ý thức được sức mạnh của TMĐT đã bắt tay vào đầu tư cho Marketting Online, để chiến lược đó thuận lợi, điều tất yếu là cần một Website để xây dựng thương hiệu. Tuy nhiên, một số doanh nghiệp vẫn còn do dự trước những lợi ích mà Website riêng mang lại, Website giá rẻ OSVN Company Limited xin chia sẻ với các bạn những lý do sau khiến bạn không còn do dự nữa.

1. Tăng khả năng tiếp cận khách hàng.

Nếu doanh nghiệp không có website riêng thì việc tiếp cận khách hàng sẽ bị hạn chế. Vì doanh nghiệp chỉ hoạt động trong giờ hành chính, khách hàng muốn giao dịch cũng phải chờ giờ hành chính và có khi còn phải chạy đôn chạy đáo làm thủ tục từ phòng kinh doanh đến phòng kế toán của doanh nghiệp bạn. Nhưng đổi lại nếu doanh nghiệp có một website riêng thì sao? Ngoài giờ hành chính, khách hàng của bạn có thể truy cập vào website xem thông tin hàng hóa, dịch vụ và thực hiện giao dịch qua hệ thống website, khách hàng chỉ cần click chuột chứ không phải vã mồ hôi ở trụ sở doanh nghiệp của bạn.

2. Tăng phạm vi và tính tương tác khách hàng.

Doanh nghiệp của bạn ở Tp. Hồ Chí Minh, dịch vụ, hàng hóa và thương hiệu rất tốt nhưng vì không có website riêng nên việc quảng bá thương hiệu tới khách hàng ở các khu vực khác rất hạn chế và hi hữu. Bạn sẽ cho nhân viên đi phát tờ rơi chăng? hay đăng báo giấy ở khu vực khác, giải pháp tốt hơn hết là có một website riêng với thiet ke giao dien web chuyên nghiệp cộng thêm bề dày thương hiệu của bạn, chỉ cần 2s hình ảnh doanh nghiệp bạn đã lan tỏa toàn quốc, toàn cầu và điều này khiến khách hàng của bạn dễ dàng tìm thấy bạn và bạn sẽ được trao đổi với khách hàng ở Hà Nội khi bạn đang ở văn phòng TP. Hồ Chí Minh làm phạm vi cũng như tương tác khách hàng tăng.

3. Xúc tiến kinh doanh và dịch vụ hiệu quả.

Không có đầu tư quảng cáo thì không có doanh nghiệp, có website riêng bạn có thể vô tư quảng cáo cho chính doanh nghiệp bạn với giá rất rất rẻ mà hiệu quả với cả triệu khách hàng của bạn đang online.
Nhờ việc quảng cáo của bạn khách hàng sẽ tìm được sản phẩm ưng ý, dịch vụ nhanh chóng, những thắc mắc của khách hàng sẽ được phản hồi nhanh chóng.

4. Một Showrom Online.

Sự tất bật của công việc và nhiều người hiện nay 8 tiếng ở công ty số thời gian còn lại dành cho nhiều mối quan hệ và việc làm quan trong khách, họ bận đến nỗi không thể có thời gian đi mua sắm. Đay là lý do mua sắm trực tuyến đang lên ngôi hậu. Các website của các doanh nghiệp hỗ trợ việc giới thiệu, tư vấn sản phẩm, mua hàng online, thanh toán trực tuyến qua thẻ, chuyển hàng tận nhà, mọi thứ gói gọn nhanh chóng đối với người dùng cũng như doanh nghiệp.

5. Thương hiệu và tăng năng cạnh tranh dễ dàng.

Website là hình ảnh của doanh nghiệp, xây dựng website là xây dựng thương hiệu cho doanh nghiệp.
Doanh nghiệp sẽ dễ dàng cạnh tranh với các đối thủ nặng ký khác vì thực tế nếu đối thủ của bạn không có website thì xu hướng khách hàng trong TMĐT chắc chắn sẽ chuyển hướng sang những doanh nghiệp có trang web đầy đủ mọi thông tin cập nhật mà họ cần.

6. Xác định khách hàng tiềm năng.

Qua website bạn có thể tiến hành những cuộc khảo sát , điều tra, phản hồi ý kiến khách hàng, điều đó giúp các bạn sẽ tìm được "khách hàng ruột" đầy tiềm năng, điều này là quá quan trọng giúp doanh nghiệp bạn nắm bắt được tâm lý khách hàng để có chiến lược kinh doanh đứng đắn trong các thời kỳ.

7. Cập nhật thông tin.

Dù bạn kinh doanh ở loại hình gì, ngành gì ( bán hàng  thì bạn có thiết kế web bán hàng, bất động sản thì bạn có thiet ke web bat dong san,....) thì khách hàng của bạn sẽ cảm thấy được "chăm sóc tốt"
 nếu như mọi thông tin cập  nhật của sản phẩm, dịch vụ họ đang dùng đến với họ một cách nhanh chóng, để hoàn thành điều này một cách xuất sắc, nhanh chóng, tiết kiệm thì thừa khả năng nếu bạn có website giá rẻ.

8. Tuyển dụng nhân tài dễ dàng.

Khi không có website mỗi lúc tuyển dụng nhân sự bạn thường phải dán quảng cáo,  thuê đội ngũ phát tờ rơi... điều đó khá là tốn kém so với bạn ngồi trước màn hình máy tính và đăng tin tuyển dụng lên website, chia sẻ trên mạng xã hội, phạm vi tuyển dụng của bạn không còn dừng lại ở một khu vực, một địa phương nữa.

9. Phân tích sản phẩm.

Trang web có thể vừa sử dụng để quảng bá sản phẩm mới, kiểm tra tình hình phát triển của sản phẩm trên thị trường vừa tăng doanh số bán hàng cho các sản phẩm cũ. Khi những chỉ số thông tin được hiện thị trên trang web, doanh nghiệp có thể xác định vị trí sản phẩm của họ đang ở đâu, được đón nhận hay không, hiểu được những ưu nhược điểm để từ đó đề ra những bước đi đúng đắn.
Trên đây là 9 lý do để bạn nên đầu tư một website cho doanh nghiệp.
Mời các bạn xem những tin liên quan tại: GiaLinhIT's Blog

Đọc Tiếp

[Tự Học HTML] Bài 5: Form và Input (P2)

4. Các thành phần của thẻ Form (Tiếp)

b. Thẻ <TextArea> ( vùng văn  bản):

Thẻ này tạo ra điều khiển nhập văn bản trên nhiều dòng ( khác với textbox chỉ có 1 dòng).
Khi tạo vùng văn bản ta cần chú ý kích thước, số cột, số dòng của vùng.
Thuộc tính: 

• name: tên của vùng văn bản.
• rows: số hàng của vùng văn bản
• cols:  chiều rộng hiển thị của vùng văn bản

Ngoài ra còn có một số thuộc tính tùy chọn khác như:

• disabled="disabled" xác định vùng văn bản không hiển thị.
• readonly="readonly" xác định vùng văn bản chỉ được đọc.

Ví dụ:
Mã HTML

Trình duyệt hiển thị

c. Select (Lựa chọn):

Hình1:  Select trong 1 form đăng ký.

Theo hình 1 ta thấy phần tử dùng để hiển thị danh sách gồm các phần tử mà người dùng có thể lựa chọn.
Cú pháp:

Thuộc tính:

• Name: Tên của danh sách lựa chọn
• Size:  Số tùy chọn có thể thấy trong danh sách lựa chọn ( số option trong select)
• Multiple: Hiển thị nhiều tùy chọn nếu thiết lập multiple="multiple"
• Disable: Thuộc tính này sẽ làm cho danh sách thả xuống không hiển thị nếu thiết lập disabled="disabled"

Ví dụ:

Tạo một Form lựa chọn các dịch vụ của OSVN Company Limited bao gồm:

• Website giá rẻ
• Thiet ke giao dien web
• Thiet ke web bat dong san
• Thiết kế web bán hàng
• Thiết kế web giáo dục

Sử dụng các thuộc tính name, multiple, disabled.

Bài tập thực hành:

Thiết kế một Form đăng ký Diễn đàn có sử dụng tất cả các thẻ đã học trong Bài 5: Form và Input cả phần 1 và phần 2 bao gồm:

User Name,Password,Quê quán,Năm sinh, Giới tính ( sử dụng radio), Nghề nghiệp, Thông tin khác tự giới thiệu bản thân (textarea), Số điện thoại, Địa chỉ Email.

Bài tiếp theo chúng ta sẽ cùng tìm hiểu về thẻ DIV  và thẻ SPAN trong HTML

Đọc Tiếp