Cách tạo một website cơ bản
Tác giả: Học viên Nguyễn Quỳnh Mai – FCT0232
I. Giới thiệu
Gần đây, mình vừa học xong khoá Web Design for Everybody: Basics of Web Development & Coding Specialization của University of Michigan và mình thấy một website cơ bản là một thứ rất dễ làm và nếu học sâu thêm một chút nữa thì ta có thể tạo ra được các website dùng để làm rất nhiều việc khác nhau. Vậy nên trong bài seminar này của mình, mình quyết định sẽ trình bày một ít kiến thức về cách làm một website cơ bản và một số kinh nghiệm học web design của mình.
II. Nội dung
Để có thể làm được một website cơ bản thì chúng ta cần biết về HTML, CSS và một ít kiến thức cơ bản về Javascript (Js). Sau đây mình sẽ nói rõ hơn về chi tiết từng phần.
1. HTML
HTML (HyperText Markup Language) là thứ căn bản nhất để làm ra một website. HTML quy định cấu trúc của một trang web. Nếu so sánh thì HTML giống như bộ xương vậy, nó là tiền đề cho những thành phần khác hình thành nên. Một file HTML được hình thành bởi các phần tử HTML (HTML Elements) được quy định bằng các cặp thẻ (tags), các cặp thẻ này được bao bọc bởi một dấu ngoặc nhọn (ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở và thẻ đóng (ví dụ <div> </div>). Các văn bản muốn được đánh dấu bằng HTML sẽ được khai báo bên trong cặp thẻ (ví dụ <p> Đây là một đoạn văn. </p>). Nhưng một số thẻ đặc biệt lại không có thẻ đóng và dữ liệu được khai báo sẽ nằm trong các thuộc tính (ví dụ như thẻ <img>). Vì HTML là thứ đầu tiên mình học trong khóa học lập trình website nên mình học phần này rất chậm và kĩ, tuy nhiên thì sau này mình lại cảm thấy không nhất thiết phải làm vậy vì HTML khá là đơn giản và thứ đáng lưu ý nhất – structure thì cũng đã có sẵn ở trong VSC rồi, chúng ta chỉ cần thêm nội dung và các tags vào là được. HTML có rất nhiều tags nhưng không nhất thiết phải nhớ hết toàn bộ, khi quên thì ta hoàn toàn có thể google tag mà mình cần ra (mình thường dùng trang w3schools để xem lại các tags khi cần). Và sau khi làm xong 1 file html thì thường ta sẽ có một trang web trông như thế này:
2. CSS
CSS (Cascading Style Sheets) là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML). Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web. So với HTML thì CSS mới là thứ giúp người dùng cảm thấy thu hút với trang web của chúng ta. CSS giúp cho trang web nhìn đẹp mắt và tiện lợi hơn. Nếu như bạn có một trang web được design tốt thì người dùng sẽ cảm thấy rất thoải mái khi truy cập website đó. Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó, nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó. Giống như HTML, CSS sử dụng khá đơn giản và tất cả các thuộc tính của nó đều có ở trên Google (riêng mình thì mình thường dùng w3schools để xem lại các thuộc tính của CSS).
Tuy cách sử dụng đơn giản thế nhưng việc sử dụng sai sẽ dẫn đến rất nhiều phiền phức cho sau này. Lúc mình mới thêm CSS vào trang web của mình thì mình cứ sử dụng tuỳ ý và không theo trật tự, vì vậy nên có rất nhiều element hiển thị bị lỗi và sau này khi mình muốn làm responsive cho trang web của mình thì mình phải quay lại sửa hết toàn bộ CSS mà mình đã làm lúc trước. Có rất nhiều cách để chúng ta có thể kiểm soát được CSS của bản thân, nhưng theo mình thì cách tốt nhất để tránh được việc đó là chia nhỏ website ra thành từng phần (cứ ném vào thẻ div là xong) rồi cho mỗi phần thành 1 box, rồi design từng box một. Như vậy thì website của mình sẽ có cấu trúc khá tốt và sẽ tiện lợi hơn rất nhiều cho việc kiểm soát CSS của các element và việc làm responsive design cho website sau này. Để nhúng CSS vào HTML thì có 3 cách: inline, internal và external. Trong 3 cách đó thì cách mà mình thường sử dụng là external (nghĩa là mình tạo một file CSS riêng rồi nhúng vào HTML bằng thẻ <link>) vì mình muốn tách riêng CSS và HTML ra để dễ kiểm soát hơn, đây cũng là cách nhúng mà mình recommend các bạn nên dùng.
Ngoài việc làm đẹp website thì CSS còn có một công dụng hết sức quan trọng nữa mà mình đã nhắc ở trên đó là responsive design. Vậy responsive design là gì? “Đó là quy trình thiết kế và phát triển web sẽ đáp ứng mọi thiết bị và môi trường của người dùng theo các tiêu chí kích thước và chiều của màn hình thiết bị. Để làm được điều đó, chúng ta sẽ sử dụng linh hoạt kết hợp các kỹ thuật bao gồm flexible grid, responsive image và CSS media query. Khi người dùng chuyển từ máy tính xách tay của họ sang iPad hay iPhone, trang web sẽ tự động chuyển đổi để phù hợp với kích thước màn hình và kịch bản xử lý. Nói cách khác, các trang web cần phải có công nghệ tự động đáp ứng theo thiết bị của người dùng. Điều này sẽ loại bỏ sự cần thiết cho nhiều thiết kế web khác nhau và giảm thiểu thời gian cũng như chi phí thiết kế web.” (trích từ iviettech). Ở trong khoá học của University of Michigan thì mình được học responsive design sau khi học Javascript. Nhưng mình cảm thấy đó không phải là một cách hiệu quả cho lắm (vì khi mình học Javascript xong thì kiến thức CSS của mình cũng trôi đi bớt rồi nên mình phải google lại các thuộc tính của CSS rất nhiều, ngoài ra thì cả 2 đều là CSS nên làm chung một lần thì sẽ hay hơn), nên nếu bạn học về làm website thì nên học CSS và responsive design rồi sau đó học Javascript cuối cùng.
3. Javascript
Javascript cũng như CSS, nó được dùng để nhúng vào HTML để làm trang web sinh động hơn. Công dụng của Javascript rất rộng, riêng bản thân mình thì mình chỉ mới dùng Js để interact với button và kết hợp với query để thay đổi dữ liệu trên form thôi nên cũng không thể đưa ra nhiều ví dụ được. Để nhúng Javascript vào file HTML thì có 2 cách: Dùng cặp thẻ <script></script> hoặc dùng thẻ link để nhúng file .js vào. Cũng như CSS, mình vẫn thích cách thứ 2 hơn. Học Javascript để dùng cho front-end thì không cần học quá nhiều, nhưng cần học vừa đủ để có thể đọc hiểu được code của người khác. Javascript có thể làm được rất nhiều thứ cho trang web của bạn, vì vậy cho dù chúng ta không thể tự code Javascript cho trang web của mình thì cũng nên thử tham khảo code của người khác để có thể thử sử dụng cho trang web của mình.
III. Lời kết
Sau khi có đủ HTML, CSS và Javascript thì trang web của chúng ta đã hoàn thiện. Ở đây là một số website template mà bạn có thể tham khảo. Một website cơ bản là một thứ rất dễ làm, vậy nên sau khi đọc bài này, mình mong những bạn chưa từng làm website lần nào sẽ thử tìm hiểu và làm một website nhé. Chúc các bạn thành công!
1,446 total views, 1 views today