Chào các bạn! Hai mấy năm trời chưa phục vụ gì nhiều được cho xã hội ^^. Hôm nay mình xin góp 1 chút ít kiến thức để hướng dẫn học HTML, CSS & Javascript cơ bản cho các bạn chưa biết gì về lập trình nói chung và lập trình web nói riêng. Ai biết rồi thì comment góp ý về bài viết để mình cải thiện các bài viết sau này nhé.
À trước khi vào thì mình giới thiệu sơ về HTML, CSS và Javascript trước nhé.
Nội dung
Hướng dẫn HTML, CSS & Javascript cơ bản
I. Giới thiệu
1. Giới thiệu
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. (Không tin thì bạn có thể vào bất kì 1 web nào và nhấn F12 ở window hoặc Command + Shift + C ở Mac vào mục Elements xem).
Dù bạn là người làm ngà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 HTML và CSS , vững thêm jQuery hoặc Javascript; khi đó bạn có thể làm 1 Front-end developer cơ bản rồi đấy.
Nếu bạn là blogger chuyên viết bài thì cũng nên nắm cơ bản về chúng để có thể tùy biến website theo cách của mình.
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à CSS cơ bản chưa? Nếu câu trả lời là chưa thì anh hãy đến bên em ngay đi :D. Giỡn thôi chứ điều đó đang hạn chế tiềm năng blogging của bạn đấy. Tôi suýt bể đầu vì có người cầm gạch chọi thẳng vào mặt mình:
“Học HTML/CSS làm gì khi đã có hàng tá công cụ để tạo website mà chả cần quan tâm đến code kiếc. Tui cũng có phải dân lập trình đâu!”. ~HACKER NÀO ĐÓ CHƯA BIẾT SỨC MẠNH CỦA HTML/CSS
OK I’m fine! Có những công cụ như Adobe Dreamweaver, WordPress Visual Editor trong tay, vỗ ngực và thề thốt tình yêu:
“Em cứ lo nội dung và layout, còn HTML/CSS và thế giới cứ để anh.” ~SOÁI CA EDITOR NÀO ĐÓ
Mình không dám ý kiến gì với tình yêu của bạn vì mỗi người có những lập trường và ý kiến riêng của mình. 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. Chẳng hạn như:
- Thiết kế, định dạng những gì ngoài hỗ trợ của công cụ.
- Thử nghiệm những đoạn code hay ho từ các trang web khác.
- Chỉnh sửa lại những thiết kế giao diện theo ý mình.
- Tối ưu hóa về thiết kế và định dạng cho trang web của mình.
- Thiết kế những giao diện cầu kì và hiệu ứng phức tạp.
- Nhúng các thể loại social network vào trang web và cho chúng xuất hiện ở bất kì vị trí nào.
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 và bắt đầu tìm hiểu về HTML và CSS cơ bản
Đố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 “Văn bản” và sẽ thấy các thẻ HTML
Không riêng gì wordpress, đa số các trình soạn thảo trên web đều có 2 chế độ xem : html và văn bản thường. Ví dụ CkEditor chẳng hạn.
Trong series này, mình sẽ nói các khái niệm trọng tâm trong HTML, CSS và Javascript. Nếu có thời gian rảnh mình sẽ làm thêm video.
2. HTML là gì?
HTML là chữ viết tắt của cụm từ Hyper Text Markup Language (dịch nôm na là Ngôn ngữ đánh dấu siêu văn bản) được sử dụng để tạo một trang web, trên một website có thể sẽ chứa nhiều trang và mỗi trang được quy ra là một tài liệu HTML. Cho dù bạn lập trình bằng bất kì ngôn ngữ gì, bất kì framework nào thì khi chạy trên nền web nó đều biên dịch ra ngôn ngữ HTML.
3. CSS là gì?
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).
Nếu nói HTML là khung xương thì CSS chính là da, là thịt đắp lên để trông hoàn hảo hơn, đẹp hơn.
4. Javascript là gì?
Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa ra, Javascript được sử dụng rộng rãi trong các ứng dụng Website. Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, … thậm chí các trình duyệt trên thiết bị di động cũng có hỗ trợ.
Ngày nay, Javascript (và các framework phát triển từ nó) được sử dụng rộng rãi trong hầu hết tất cả các website. Mình sẽ giới thiệu về jQuery ở các bài nâng cao sau này.
Javascript thì mình lại ví như phẫu thuật thẩm mĩ vậy :v. Khi đã có xương, có da có thịt, nhưng chúng ta chưa hài lòng hoặc muốn chỉnh sửa khi gặp 1 trường hợp cụ thể nào đó (nâng mũi chẳng hạn) thì chúng ta dùng js để làm điều đó.
Kết thúc phần giới thiệu Hướng dẫn HTML, CSS & Javascript cơ bản cho mọi người hiểu nôm na như thế đã, bài sau mình sẽ bắt đầu. Dài quá cũng làm biếng đọc phải không nào ^^. Nhưng muốn biết về nó phải hiểu nó là gì trước đã. Mình đã cố gắng rút gọn và không viết lan man khiến các bạn hoang mang.
