ĐỆ QUY DANH MỤC

Trong lập trình, chúng ta hay gặp đi gặp lại 01 vài bài toán kinh điển.

01 trong những bài toán thường gặp trong lập trình web là tạo danh mục nhiều cấp bằng đệ quy.

Ví dụ:

trang web bán hàng thời trang online có 01 menu đa cấp.

Hoặc trang bán hàng có danh mục đa cấp chứa thông tin hàng hóa như sau:

thoitrang

-quan

--jeans

--legging

--congso

-ao

-vay

baiviet

giải thích: trang shop bán hàng có danh mục thời trang và bài viết.

trong danh mục thời trang -> chứa 03 danh mục: quần, áo, váy.

Trong danh mục quần -> chứa 03 danh mục: quần jeans, quần legging, quần công sở...

Ở đây mình tạo sẵn 01 cơ sở dữ liệu: shopping

Và tạo bảng categories có nội dung như sau:

Tự học CSS - Bài 34 - Website layout

Website Layout

01 trang web thường được chia thành các phần như: header, menus, phần chứa nội dung và footer.

Có rất nhiều kiểu thiết kế layout khác nhau. Nhưng nhìn chung, cấu trúc trang web như trên rất dễ gặp. Chúng ta hãy cùng xem xét kỹ cấu trúc này.

Header

01 header thường nằm ở đỉnh trang web (hoặc bên phải ngay dưới menu điều hướng top). Nó thường chứa 01 logo hoặc tên trang web.

Ví dụ:

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Navigation Bar

01 thanh điều hướng chứa danh sách các liên kết để giúp người dùng di chuyển xuyên suốt trang web.

Ví dụ:

/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Tự học CSS - Bài 33 - Định dạng số đếm thẻ TIÊU ĐỀ

 CSS counters là “các biến” được lưu giữ bởi CSS, trong đó các giá trị này có thể tăng lên bởi các qui tắc thiết lập của CSS (để lưu lại số lần chúng được dùng). Counters cho phép bạn tùy biến giao diện nội dung dựa vào những thay thế của nó trên văn bản.

Số tự động với counters

CSS counters giống như “các biến” vậy.

Giá trị biến có thể tăng bởi các qui tắc thiết lập trong CSS (chúng sẽ ghi lại bao nhiêu lần đã được dùng).

Để làm việc với CSS counters, chúng ta sẽ dùng các thuộc tính sau:

·         counter-reset – tạo hoặc resets lại 01 counter

·         counter-increment – tăng 01 giá trị counter

·         content – chèn nội dung phát sinh

Hàm counter() hoặc counters() – thêm giá trị của 01 counter vào 01 phần tử.

Để dùng 01 CSS counter, ban đầu ta phải tạo ra bằng counter-reset

Ví dụ sau tạo ra 01 counter cho trang (trong phần chọn qua body), sau đó tăng giá trị counter sau mỗi thẻ <h2> và thêm “Section <giá trị của counter>:” vào đầu mỗi thẻ <h2>

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Tự học CSS - Bài 32 - Định dạng biểu mẫu

Định dạng INPUT

Sử dụng thuộc tính width để khai báo bề ngang của input.

input {
  width: 100%;
}

Ví dụ trên áp dụng cho tất cả phần tử <input>. Nếu bạn chỉ muốn định dạng 01 input nhất định, bạn có thể dùng cách chọn qua thuộc tính.

input[type=text] – chỉ chọn text fields

input[type=password] – chỉ chọn các password fields

input[type=number] – chỉ chọn các number fields

và còn nhiều trường khác nữa.

Padded Inputs

Dùng thuộc tính padding để thêm khoảng trắng bên trong text field.

Mẹo: khi bạn có nhiều inputs xen kẽ nhau, bạn cũng sẽ muốn thêm vào margin để thêm khoảng cách giữa chúng.

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Chú ý rằng chúng ta thiết lập thuộc tính box-sizing cho border-box. Điều này đảm bảo rằng padding và ngay cả các đường viền được bao gồm trong kích thước tổng chiều cao và bề rộng của các phần tử.

Tự học CSS - Bài 31 - Chọn đối tượng qua thuộc tính

 Chúng ta hoàn toàn có thể định dạng các phần tử HTML theo thuộc tính hay giá trị thuộc tính đặc biệt.

[attribute]

Chọn qua [attribute] nghĩa là chọn đối tượng thông qua thuộc tính.

Ví dụ sau chọn tất cả thẻ <a> có thuộc tính target

a[target] {
  background-color: yellow;
}

 

[attribute=”value”]

Chọn qua [attribute=”value”] nghĩa là chọn phần tử có thuộc tính bằng giá trị nào đó.

Ví dụ sau chọn tất cả thẻ <a> có thuộc tính target="_blank"

a[target="_blank"] {
  background-color: yellow;
}

Tự học CSS - Bài 30 - Kỹ thuật dùng chung ảnh

Kỹ thuật dùng chung ảnh

Là kỹ thuật gom nhiều ảnh vào trong 01 ảnh đơn.

01 trang web tải nhiều ảnh có thể mất nhiều thời gian và phải gửi nhiều yêu cầu đến máy chủ.

Sử dụng kỹ thuật dùng chung ảnh sẽ tiết kiệm được băng thông và lệnh gửi đến máy chủ.

Ví dụ dùng chung ảnh

Trong ví dụ sau thay vì dùng 03 ảnh, chúng ta sẽ chỉ dùng 01 ảnh duy nhất “img_navsprites.gif”

Với CSS, chúng ta có thể hiển thị chỉ phần ảnh mà ta cần.

Ví dụ:

#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

Giải thích ví dụ:

Đầu tiên ta chèn 01 thẻ <img> trong phần <body>

<img id="home" src="img_trans.gif"> đoạn mã này chỉ để chèn 01 tấm hình trong suốt vì thuộc tính src không thể bỏ trống. Hình ảnh hiển thị thật sự sẽ là hình trong thuộc tính background khai báo trong css.

width: 46px; height: 44px; xác định phần ảnh chúng ta muốn dùng.

background: url(img_navsprites.gif) 0 0; xác định ảnh nền và vị trí của nó trong ảnh chung (left 0px, top 0px)

Đây là cách dễ nhất để dùng ảnh chung, bây giờ chúng ta mở rộng ra phần chèn liên kết và hiệu ứng hover.

Tự học HTML - Bài 31 - Xử lý Plugins và Youtube

Plug-ins là gì?

Plug-ins là các chương trình máy tính nhằm mở rộng các tính năng tiêu chuẩn của trình duyệt.

Plug-ins được thiết kế để sử dụng cho nhiều mục đích khác nhau:

·         Chạy Java applets

·         Chạy các điều khiển Microsoft ActiveX.

·         Hiển thị phim dạng Flash.

·         Hiển thị các bản đồ.

·         Quét virus.

·         Kiểm tra 01 id ngân hàng.

Chú ý:

·         Hầu hết các trình duyệt đã không còn hỗ trợ các Java Applets và Plug-ins.

·         Các điều khiển ActiveX không còn được hỗ trợ trên bất kỳ trình duyệt nào.

·         Các hỗ trợ Shockwave Flash cũng đã bị tắt trong các trình duyệt hiện đại.

 

Tự học HTML - Bài 30 - Xử lý AUDIO

Thẻ <audio>

Để phát 01 tập tin audio trong HTML, ta dùng thẻ <audio>

<audio controls>
  <source src="nhac.ogg" type="audio/ogg">
  <source src="nhac.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

 

Cách hoạt động

Thuộc tính controls thêm vào các nút điều khiển như play, pause, và volume.

Thẻ <source> cho phép ta khai báo đường dẫn và định dạng. Trình duyệt sẽ nhận định dạng tập tin audio trước tiên.

Dòng chữ giữa cặp thẻ <audio> và </audio> sẽ chỉ được hiển thị trên trình duyệt nếu không hỗ trợ thẻ <audio>

Tự học HTML - Bài 29 - Xử lý VIDEO

Thẻ HTML <video>

Để hiển thị 01 video trong HTML, ta dùng thẻ <video>

Ví dụ:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

 

Cách hoạt động

Thuộc tính controls thêm các điều khiển video như nút play, volume,…

Thuộc tính width và height nếu không thiết lập trình duyệt sẽ nhấp nháy khi tải video.

Thuộc tính <source> xác định đường dẫn đến tập tin. Trình duyệt sẽ nhận diện định dạng trước.

Dòng chữ nằm giữa thẻ <video> và </video> sẽ chỉ hiển thị trên trình duyệt nếu thẻ <video> không được hỗ trợ.

Thuộc tính autoplay

Để thiết lập tự động phát video, ta dùng thuộc tính autoplay.

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Tự học HTML - Bài 28 - Xử lý Đồ họa – SVG

SVG là gì?

·         SVG dùng để xác định đồ họa dạng vector dưới định dạng XML.

·         SVG dùng trong đồ họa web.

·         SVG hợp với chuẩn W3C.

Thẻ <svg>

Thẻ HTML <svg> chứa đồ họa SVG.

SVG có thể vẽ đường, khối hộp, vòng tròn, chữ và chèn ảnh.

SVG hình tròn

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

SVG hình chữ nhật

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

Tự học HTML - Bài 27 - Xử lý Đồ họa - CANVAS

 Thẻ <canvas> dùng để vẽ đồ họa trên trang web.

Tấm hình này được tạo bởi thẻ <canvas>. Nó chứa các phần tử: 01 hình chữ nhật màu đỏ, 01 hình chữ nhật tô chuyển màu, 01 hình chữ nhật đa sắc và 01 chữ đa sắc.

HTML Canvas là gì?

Thẻ <canvas> dùng để vẽ đồ họa thông qua JavaScript.

Thẻ <canvas> chỉ là nơi chứa các phần tử đồ họa. Bạn phải dùng JavaScript để vẽ lên các hình đồ họa.

Canvas có nhiều phương thức vẽ đường thẳng, hộp, vòng tròn, chữ và chèn ảnh.

Tự học HTML - Bài 26 - HTML5 có gì mới

Các thẻ mới trong HTML5

<article>: Định nghĩa một bài viết hoặc bình luận của người dùng, độc lập với content của website.

<aside>: Đánh dấu nội dung một trang hiện tại.

<header><footer>: Loại bỏ việc định nghĩa id cho tiêu đề và cuối trang.

<nav>: Định nghĩa phần menu điều hướng cho website.

<section>: Xác định các thành phần khác nhau trong website.

<audio>, <video>: Hỗ trợ người dùng xem clip và nghe nhạc trên website mà không cần bên thứ ba.

<embed>: Xác định một container các plugin tương tác với ứng dụng bên ngoài.

<canvas>: Cho phép bạn đồ họa mà không cần ứng dụng hỗ trợ (dùng JavaScript).

Ngoài ra, phiên bản HTML5 đã loại bỏ một số thẻ lỗi thời như: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>

Tự học HTML - Bài 21 – XHTML

XHTML là gì?

XHTML là 01 ngôn ngữ đánh dấu (markup language) nhưng  có khai báo rõ ràng, đầy đủ và chính xác.

XHTML được phát triển nhằm giúp HTML có thể làm việc được với các chuẩn dữ liệu khác (như XML).

Thêm nữa, các trình duyệt hay bỏ qua các lỗi trên trang HTML, và cố hiển thị trang web ngay cả khi có vài lỗi thẻ đánh dấu. Vì vậy, XHTML ra đời nhằm hạn chế các lỗi này.

Những điểm khác biệt của XHTML so với HTML

Thẻ <!DOCTYPE> là bắt buộc.

Thuộc tính xmlns trong thẻ <html> là bắt buộc.

Các thẻ <html>, <head>, <title> và <body> là bắt buộc.

Phần tử phải được đóng đúng thứ tự.

Phần tử phải có thẻ đóng.

Phần tử phải viết thường.

Tên thuộc tính phải viết thường.

Giá trị thuộc tính phải nằm trong cặp nháy.

Viết rút gọn thuộc tính bị cấm.

Quản lý bán hàng online bằng Microsoft Excel - Phần 01

 Mến chào các bạn!!!

"Phi thương bất phú" -> "Không kinh doanh thì làm sao giàu được."

Câu nói của người xưa đến nay vẫn còn nguyên giá trị.

Hiện nay, trên các nền tảng mạng xã hội, việc bán hàng online rất phổ biến.

Hôm nay, mình sẽ viết bài hướng dẫn quản lý bán hàng online bằng phần mềm Microsoft Excel.

Trên đây chỉ là kinh nghiệm cá nhân của bản thân, chưa chắc đã đúng trong mọi trường hợp.

Nếu các bạn phát hiện ra cách nào quản lý hay hơn, hãy bình luận phía dưới để chia sẻ cho mọi người nhé!

Đầu tiên chúng ta sẽ tạo 01 tập tin Excel với tên DonHang.xlsx có nội dung như sau: