Quảng Trị: 133 Lý Thường Kiệt, TP Đông Hà, Tỉnh Quảng Trị. 133 Lý Thường Kiệt, TP Đông Hà, Tỉnh Quảng Trị.
Việt Trì: Số 02 Trần Phú, Phường Tân Dân, TP Việt Trì, Tỉnh Phú Thọ.: Số 02 Trần Phú, Phường Tân Dân, TP Việt
Trì, Tỉnh Phú Thọ.
Văn phòng tuyển sinh Thái Nguyên: 36A Cách Mạng Tháng Tám, Phường Phan Đình Phùng.: 36A Cách Mạng Tháng Tám, Phường Phan Đình Phùng.
Văn phòng tuyển sinh Vinh: 50 Hà Huy Tập, TP Vinh, Tỉnh Nghệ An.: 50 Hà Huy Tập, TP Vinh, Tỉnh Nghệ An.
Hi anh em, nay mình sẽ chia sẻ cho các bạn một clip hướng dẫn viết một trang web bán hàng Online với HTML/CSS
1. Tại sao nên học qua các tutorial One-Shoot?
Phần nhiều là do thời gian không cho phép + khả năng truyền đạt không tốt nên mình không làm. Mình nghĩ ở đây – ngay cái blog này rất nhiều ae yêu thích lập trình. Trong số đó cũng nhiều anh em rón rén bước chân vào thế giới xa lạ nhưng đầy thú vị qua môn lập trình web, cái cảm giác tự tay gõ từng dòng HTML + CSS và xây dựng 1 trang theo ý nó sướng. Mình cũng từng như vậy, mãi tới lúc đi làm cũng phải gõ từng dòng như vậy chứ công ty không dùng WordPress để làm dự án.Mình tin là anh em luôn muốn biết cách người ta code như thế nào? Cách sử dụng các class trong Bootstrap ra sao để website có thể hiển thị ngon lành trên tất cả kích cỡ màn hình. Giờ các khoá học nhan nhản nhưng mình vẫn thích cách truyền đạt qua ví dụ thực tế dạng giải thích + code realtime và quay video lại để giảng giải vấn đề. Mình tin là anh em luôn muốn biết cách người ta code như thế nào? Cách sử dụng các class trong Bootstrap ra sao để website có thể hiển thị ngon lành trên tất cả kích cỡ màn hình. Giờ các khoá học nhan nhản nhưng mình
vẫn thích cách truyền đạt qua ví dụ thực tế dạng giải thích + code realtime và quay video lại để giảng giải vấn đề.
2. Xem Tutorial hướng dẫn làm trang web bán hàng:
Bắt đầu thế nào?
HTML căn bản
1. HTML là gì?
2. Cấu trúc cây HTML cơ bản
3. Pro tips:
4. Các tag HTML cần biết cho blogger:
CSS căn bản
5. Làm quen với CSS
6. Cú pháp cơ bản của CSS
7. Các vùng chọn CSS (selector) cần biết cho blogger có thể nói là khởi đầu của mọi tất cả vấn đề liên quan tới web, dù bạn là người làm nghành nào, miễn là có đụng tới quản trị web thì ít nhất phải biết qua hai cái này. Nếu bạn có ý định học lập trình web thì lại càng nên thành thạo hai cái này, nếu bạn là blogger chuyên viết bài thì cũng nên nắm cái này.
8. Pro tips
Công cụ hỗ trợ học HTML/CSS Online
Lời kết
Huế: Tầng 4, 28 Nguyễn Tri Phương, Phường Phú Nhuận, TP Huế, Tỉnh Thừa Thiên Huế.
Quảng Trị: 133 Lý Thường Kiệt, TP Đông Hà, Tỉnh Quảng Trị.
Việt Trì: Số 02 Trần Phú, Phường Tân Dân, TP Việt Trì, Tỉnh Phú Thọ.
Văn phòng tuyển sinh Thái Nguyên: 36A Cách Mạng Tháng Tám, Phường Phan Đình Phùng.
Văn phòng tuyển sinh Vinh: 50 Hà Huy Tập, TP Vinh, Tỉnh Nghệ An.
Hi anh em, nay mình sẽ chia sẻ cho các bạn một clip hướng dẫn viết một trang web bán hàng Online với HTML/CSS
Phần nhiều là do thời gian không cho phép + khả năng truyền đạt không tốt nên mình không làm. Mình nghĩ ở đây – ngay cái blog này rất nhiều ae yêu thích lập trình. Trong số đó cũng nhiều anh em rón rén bước chân vào thế giới xa lạ nhưng đầy thú vị qua môn lập trình web, cái cảm giác tự tay gõ từng dòng HTML + CSS và xây dựng 1 trang theo ý nó sướng. Mình cũng từng như vậy, mãi tới lúc đi làm cũng phải gõ từng dòng như vậy chứ công ty không dùng WordPress để làm dự án.Mình tin là anh em luôn muốn biết cách người ta code như thế nào? Cách sử dụng các class trong Bootstrap ra sao để website có thể hiển thị ngon lành trên tất cả kích cỡ màn hình. Giờ các khoá học nhan nhản nhưng mình vẫn thích cách truyền đạt qua ví dụ thực tế dạng giải thích + code realtime và quay video lại để giảng giải vấn đề.
Yêu cầu trước khi xem:
Bắt đầu thế nào?
Đối với WordPress Blogger, chắc hẳn mọi người đều quen thuộc với việc sử dụng công cụ soạn thảo WordPress Editor để biên tập, chỉnh sửa và định dạng cho trang blog hay website của mình. Mọi thao tác đơn giản như bôi đậm chữ, in nghiêng, căn dòng… về bản chất đều là can thiệp bằng HTML/CSS tự động bởi WordPress Editor.
Tuy nhiên, những lựa chọn sẵn có từ WordPress Editor rất hạn chế, nên nếu bạn muốn táy máy HTML/CSS thì xin mời bật qua chế độ chỉnh sửa Text và chúng ta cùng tìm hiểu:
HTML căn bản
1. HTML là gì?
HTML được ví như là bộ xương của một giao diện website, dù nó là dành cho WordPress hay bất cứ website nào. “Bộ xương” này sẽ giúp chúng ta xác định bố cục trên mỗi website và đánh dấu lại các phần đó bằng các thẻ (tag) nhất định, sau đó nó sẽ tự xác định mỗi đối tượng được đánh dấu mang một vài trò riêng trong website. Thachpham.com được ví như là bộ xương của một giao diện
website, dù nó là dành cho WordPress hay bất cứ website nào. “Bộ xương” này sẽ giúp chúng ta xác định bố cục trên mỗi website và đánh dấu lại các phần đó bằng các thẻ (tag) nhất định, sau đó nó sẽ tự xác định mỗi đối tượng được đánh dấu mang một vài trò riêng trong website. Thachpham.com
HTML là từ viết tắt của HyperText Markup Language, nghĩa là ngôn ngữ đánh dấu siêu văn bản.
Hypertext (siêu văn bản): là một đoạn text bất kì nhưng có chứa link đến một nguồn thông tin khác (như một đoạn văn bản khác, một địa chỉ website, hình ảnh, âm thanh…) (siêu văn bản): là một đoạn text bất kì
nhưng có chứa link đến một nguồn thông tin khác (như một đoạn văn bản khác, một địa chỉ website, hình ảnh, âm thanh…)
Ngôn ngữ đánh dấu này sẽ là cầu nối của sự giao tiếp giữa người dùng và trình duyệt, giúp trình duyệt hiểu được cách thức hiển thị trang web. Khi trình duyệt đọc thấy 1 kí tự A, nó chỉ đơn thuần hiển thị A, chứ không thể biết bạn muốn tô đậm, in nghiêng, hay màu mè hoa lá thế nào cả. Chính lúc đấy, bạn cần HTML, thông qua việc sử dụng các thẻ HTML.cầu nối của sự giao tiếp giữa người dùng và trình duyệt, giúp trình duyệt hiểu được cách thức hiển thị trang web. Khi trình duyệt đọc thấy 1 kí tự A, nó chỉ đơn thuần hiển thị A, chứ không thể biết bạn muốn tô đậm, in nghiêng, hay màu mè hoa lá thế nào cả. Chính lúc đấy, bạn cần HTML, thông qua việc
sử dụng các thẻ HTML.
Thẻ HTML được định nghĩa bằng một cặp từ khóa nằm giữa dấu < và dấu >, và báo cho trình duyệt biết cách thức hiển thị đoạn kí tự bên trong thẻ HTML đó.
In đậm bằng thẻ : :
[html]A[/html]
In nghiêng bằng thẻ : :
[html]A[/html]
2. Cấu trúc cây HTML cơ bản
Cấu trúc của HTML rất đơn giản và logic, với bố cục từ trên xuống dưới, từ trái qua phải, với 2 phần chính là HEAD và BODY. Các website viết bằng HTML đều tuân theo cấu trúc cơ bản như sau:từ trên xuống dưới, từ trái qua phải, với 2 phần chính là HEAD và BODY. Các website viết bằng HTML đều tuân theo cấu trúc cơ bản như sau:
Mọi trang HTML đều phải khai báo DOCTYPE (định nghĩa chuẩn văn bản) ngay từ dòng đầu tiên.
Thẻ cho trình duyệt biết mở đầu và kết thúc của trang HTML. cho trình duyệt biết mở đầu và kết thúc của trang HTML.
Thẻ chứa tiêu đề và các thông tin khai báo, các thông tin ẩn khác. chứa tiêu đề và các thông tin khai báo,
các thông tin ẩn khác.
Thẻ sẽ hiển thị nội dung của trang web. Đây là phần thông tin mà người dùng sẽ nhìn thấy khi trình duyệt đọc các mã HTML. sẽ hiển thị nội dung của trang web. Đây là phần thông tin mà người dùng sẽ nhìn thấy khi trình duyệt đọc các mã HTML.
Mọi kí tự nằm giữa dấu sẽ được xem là thẻ comment và sẽ bị trình duyệt bỏ qua, không xử lý và không hiển thị.
[html] Đây là thẻ đánh dấu tiêu đề trang web Đây là dòng chữ in đậm Đây là dòng chữ in nghiêng [/html]
Đây là thẻ đánh dấu tiêu đề trang web
Đây là dòng chữ in đậm Đây là dòng chữ in nghiêng
[/html]
3. Pro tips:
Luôn đóng thẻ sau khi đã mở. Điều này giúp hạn chế lỗi bất ngờ khi hiển thị trên trình duyệt.
Một số thẻ không có thẻ đóng, như thẻ , thẻ , ,…..
Cẩn thận gặp lỗi khi đóng thẻ, mở thẻ trong trường hợp có nhiều thẻ lồng nhau.
[html]Tiêu đề[/html]
Bạn có thể học chi tiết về HTML căn bản ở Izwebz với series hướng dẫn qua video rất đầy đủ và dễ hiểu.
Nếu bạn thấy những demo ở trên chưa rõ, Thachpham.com có một tool demo riêng cho bài viết này rất trực quan.
4. Các tag HTML cần biết cho blogger:
Đề mục: Có 6 loại đề mục tất cả với mức độ nhấn mạnh giảm dần từ đến . Nếu bạn quan tâm đến SEO thì có lẽ đây là thẻ mà bạn nên chú trọng sử dụng đúng cách. : Có 6 loại đề mục tất cả với mức độ nhấn mạnh giảm dần từ
đến . Nếu bạn quan tâm đến SEO thì có lẽ đây là thẻ mà bạn nên chú trọng sử dụng đúng cách. [html] Tiêu đề bài viết Phần 1 Chương 1.1 Tiểu mục 1.1.1 Đề mục 1.1.1.1 Đề mục con 1.1.1.1.1 [/html] Tiêu đề bài viết
Phần 1
Chương 1.1
Tiểu mục 1.1.1
Đề mục 1.1.1.1
Đề mục con 1.1.1.1.1
[/html]
Định dạng Text: :
[html]Tô đậm In nghiêng Tô đậm theo chuẩn web ngữ nghĩa In nghiêm theo chuẩn web ngữ nghĩa[/html] In nghiêng Tô đậm theo chuẩn web ngữ nghĩa In nghiêm theo chuẩn web ngữ nghĩa[/html]
Phân đoạn: :
[html] Đoạn văn bản tách riêng
với những đoạn text bình thường–>
Đoạn văn bản
Xuống dòng với Xuống dòng với
"Tôi chuẩn man" ~ Cao Thái Sơn [/html]
"Tôi chuẩn man" ~ Cao Thái Sơn
[/html]
Danh sách: có 2 loại là danh sách có đánh số thứ tự và danh sách không đánh số thứ tự. Bên trong các thẻ danh sách này, các phần tử được đánh dấu với thẻ . : có 2 loại là danh sách có đánh số thứ tự và danh sách không đánh số thứ tự
. Bên trong các thẻ danh sách này, các phần tử được
đánh dấu với thẻ
.
[html] Phần tử 1 Phần tử 2 Phần tử 1 Phần tử 2 [/html]
Xem ví dụ trực quan với giải thích cụ thể hơn tại đây
CSS căn bản
5. Làm quen với CSS
Nếu HTML được xem như là bộ xương của một website thì CSS chính là da thịt được đắp lên bộ xương đó, mục đích đơn giản là cho website trông đẹp đẽ và chuyên nghiệp hơn.
CSS là từ viết tắt của Cascade Style Sheet, là ngôn ngữ giúp trình duyệt hiểu được các thiết lập định dạng và bố cục cho trang web. CSS cho phép bạn điều khiển thiết kế của nhiều thành phần HTML chỉ với duy nhất 1 vùng chọn CSS. Điều này giúp giảm thiểu thời gian thiết kế và chỉnh sửa, khi bạn có thể tách biệt được cấu trúc (HTML) và định dạng (CSS). là từ viết tắt của Cascade Style Sheet, là ngôn ngữ giúp trình duyệt hiểu được các thiết lập định dạng và bố cục cho trang web. CSS cho phép bạn điều khiển thiết kế của nhiều thành phần HTML chỉ với duy nhất 1 vùng chọn CSS. Điều này giúp giảm thiểu thời gian thiết kế và chỉnh sửa, khi bạn có thể tách biệt được cấu trúc (HTML) và định dạng (CSS).
CSS cho phép bạn đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau. Style có thể được quy định ở trong chỉ một thẻ HTML, được quy định trong 1 trang web hoặc ở trong một file CSS bên ngoài.
6. Cú pháp cơ bản của CSS
Cú pháp cơ bản của CSS bao gồm 3 phần: vùng chọn (selector), thuộc tính (property) và giá trị (value).
Vùng chọn: là cách xác định các thẻ HTML dựa trên cấu trúc phân cấp của HTML. Vùng chọn có thể được tạo nên dựa trên nhiều yếu tố như định danh (id), tên lớp (class), quan hệ cha – con – hậu duệ… Bạn có thể xem ví dụ trực quan về một số vùng chọn CSS tại đây, hoặc đọc thêm tại W3S.: là cách xác định các thẻ HTML dựa trên cấu trúc phân cấp của HTML. Vùng chọn có thể được tạo nên dựa trên nhiều yếu
tố như định danh (id), tên lớp (class), quan hệ cha – con – hậu duệ… Bạn có thể xem ví dụ trực quan về một số vùng chọn CSS tại đây, hoặc đọc thêm tại W3S.
Thuộc tính: là yếu tố bạn muốn thay đổi ở các thẻ HTML thuộc vùng chọn. Danh sách các thuộc tính có thể xem thêm tại W3S.: là yếu tố bạn muốn thay đổi ở các thẻ HTML thuộc vùng chọn. Danh sách các thuộc tính có thể xem thêm tại W3S.
Giá trị: mỗi thuộc tính sẽ yêu cầu một giá trị khác nhau. Đó có thể là 1 từ khóa định sẵn (none, block), một tên màu hay mã màu (black, white, #000, #FFFFFF), hay một giá trị kích thước tính bằng px, em, rem, %.: mỗi thuộc tính sẽ yêu cầu một giá trị khác nhau. Đó có thể là 1 từ khóa định sẵn (none, block), một tên màu hay mã màu (black, white, #000, #FFFFFF), hay một giá
trị kích thước tính bằng px, em, rem, %.
7. Các vùng chọn CSS (selector) cần biết cho blogger
#ID Dấu # được sử dụng để chọn một thẻ HTML có định danh cụ thể (ID). Do đó, bản chất của việc sử dụng ID không thể tái sử dụng. Hãy chắc chắn rằng việc gán ID cho thẻ HTML và chọn thẻ này bằng ID này là cách duy nhất bạn có thể định dạng cho nó. Dấu # được sử dụng để chọn một thẻ HTML có định danh cụ thể (ID). Do đó, bản chất của việc sử dụng ID không thể tái sử dụng. Hãy chắc chắn rằng việc gán ID cho thẻ HTML và chọn thẻ này bằng ID này là cách duy nhất bạn có thể định dạng cho nó.
[html highlight=”1″] Thạch Phạm Blog Cạch. WordPress blog lớn nhất Việt Nam. Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay. [/html]
Thạch Phạm Blog
Cạch. WordPress blog lớn nhất Việt Nam.
Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.
[/html]
.Class Dấu “.” đại diện cho tên lớp. Nhiều thẻ HTML có thể có cùng tên lớp. Do đó, sự khác nhau giữa ID và Class là: ID chỉ cho phép chọn 1 phần tử, còn Class cho phép bạn chọn nhiều thẻ HTML cùng lúc. Dấu “.” đại diện cho tên lớp. Nhiều thẻ HTML có thể có cùng tên lớp. Do đó, sự khác nhau giữa ID và Class là: ID chỉ cho phép chọn 1 phần tử, còn Class cho phép bạn chọn nhiều thẻ
HTML cùng lúc.
[html highlight=”5″] Thạch Phạm Blog Cạch. WordPress blog lớn nhất Việt Nam. Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay. [/html]
Thạch Phạm Blog
Cạch. WordPress blog lớn nhất Việt Nam.
Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.
[/html]
A.Class Vùng chọn này giúp xác định tất cả các thẻ HTML cùng thuộc một lớp. Vùng chọn này giúp xác định tất cả các thẻ HTML cùng thuộc một lớp.
[html highlight=”5″] Thạch Phạm Blog Cạch. WordPress blog lớn nhất Việt Nam. Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay. [/html]
Thạch Phạm Blog
Cạch. WordPress blog lớn nhất Việt Nam.
Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.
[/html]
A.Class Vùng chọn này giúp xác định tất cả các thẻ HTML cùng thuộc một lớp. Vùng chọn này còn được gọi là vùng chọn hậu duệ (descendant). Vùng chọn này sẽ xác định tất cả các thẻ B nằm bên trong thẻ A, không kể phân cấp, ngôi thứ như là con, là cháu, là chắt chút chít gì đó.
A B Vùng chọn này còn được gọi là vùng chọn hậu duệ (descendant). Vùng chọn này sẽ xác định tất cả các thẻ B nằm bên trong thẻ A, không kể phân cấp, ngôi thứ như là con, là cháu, là chắt chút chít gì đó.
Thạch Phạm Blog
Cạch. WordPress blog lớn nhất Việt Nam.
Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.
[/html]
[html highlight=”3,5″] Thạch Phạm Blog Cạch. WordPress blog lớn nhất Việt Nam. Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay. [/html] Vùng chọn này còn được gọi là vùng chọn con (child), và có nét tương đồng với vùng chọn hậu duệ. Tuy nhiên, vùng chọn này chỉ xác định
tất cả các thẻ B là con trực tiếp của thẻ A, chứ không nằm bên trong thẻ nào khác.
A > B Vùng chọn này còn được gọi là vùng chọn con (child), và có nét tương đồng với vùng chọn hậu duệ. Tuy nhiên, vùng chọn này chỉ xác định tất cả các thẻ B là con trực tiếp của thẻ A, chứ không nằm bên trong thẻ nào khác.
Thạch Phạm Blog
Cạch. WordPress blog lớn nhất Việt Nam.
Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.
[/html]
[html highlight=”3″] Thạch Phạm Blog Cạch. WordPress blog lớn nhất Việt Nam. Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay. [/html]
Xem ví dụ trực quan với giải thích cụ thể hơn tại đây
8. Pro tips
Nếu bạn cần một số mẹo học CSS thì không cần ngó đâu xa, Thachpham.com đã tổng hợp sẵn 1 vài kinh nghiệm “xương – máu -mỡ” dành riêng cho bạn ở bài Kinh nghiệm tự học CSS | Thachpham.com.
Một địa chỉ học CSS đáng tin cậy với series hướng dẫn chi tiết và dễ hiểu: Izwebz.
Bạn đã đọc tới đây rồi ạ? Chúc mừng bạn nhé. Sự kiên nhẫn và quyết tâm học HTML/CSS căn bản của bạn thật đáng nể.
Bạn thấy đấy, HTML/CSS căn bản có thể vừa quen vừa lạ, khi bạn thường xuyên làm việc và thao tác với nó gián tiếp qua công cụ soạn thảo. Việc thuần thục HTML/CSS không là vấn đề quá lớn, khi bạn chỉ cần thay đổi 1 xíu ở cách thức làm việc:
Thay vì dùng công cụ soạn thảo để định dạng chữ, thêm link thì bạn có thể tự mình code với HTML
Tự tay chỉnh sửa 1 số định dạng CSS theo ý của bạn, chứ không hoàn toàn phụ thuộc vào theme/framework.
Vậy, chần chừ gì nữa? Thanh niên 2014 rồi, xắn tay áo rồi bơi vào khám phá HTML/CSS ngay thôi! Và đừng quên chia sẻ suy nghĩ của bạn ở comment bên dưới nhé!
Thạch Phạm
Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".
