Hướng dẫn to html code
HTML/CSS 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. Show Bạn có thể là một blogger viết rất tốt, nhưng liệu bạn đã sử dụng thành thục các thẻ HTML và vùng chọn CSS căn bản chưa? Nếu câu trả lời là chưa thì điều đó đang hạn chế tiềm năng blogging của bạn đấy. Bạn có thể cầm gạch lên và bảo:
Thực vậy, những công cụ như Adobe Dreamweaver, WordPress Visual Editor có thể vỗ ngực và thề thốt tình yêu:
Mình không dám ý kiến gì với tình yêu của bạn, nhưng việc phụ thuộc vào công cụ quá nhiều sẽ không giúp bạn tận dụng hết tiềm năng của mình. Bạn có thể là 1 blogger viết nội dung rất giỏi, nhưng bạn sẽ không thể:
Nếu bạn thực sự muốn chăm chút về thiết kế giao diện hay mang lại trải nghiệm tuyệt vời cho người dùng trang web, cho độc giả trang blog thì hãy nghe mình: Đây là lúc thích hợp nhất để tạm chia tay Dreamweaver (yên tâm, DW là trai ngoan nên không đòi quà đâu :D) và bắt đầu tìm hiểu về HTML và CSS căn bản dành riêng cho blogger. Trong bài này, mình sẽ chỉ nói lại các khái niệm trọng tâm trong HTML và CSS, kèm theo đó là các nguồn học vì trên mạng hiện nay đã có quá nhiều tài liệu rồi. 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ản1. HTML là gì?
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.
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. 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 đó.
2. Cấu trúc cây HTML cơ bảnCấ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:
[html] Đây là dòng chữ in đậm Đây là dòng chữ in nghiêng [/html] 3. Pro tips:
Xem ví dụ trực quan với giải thích cụ thể hơn tại đây CSS căn bản5. Làm quen với CSS
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 CSSCú 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 {
7. Các vùng chọn CSS (selector) cần biết cho blogger
Xem ví dụ trực quan với giải thích cụ thể hơn tại đây 8. Pro tips
Công cụ hỗ trợ học HTML/CSS Online
Lời kếtBạ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:
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ạmBé 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". Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng. |