Học thực chiến xây dựng trang web từ HTML, CSS đến HTML5 & CSS3

20:23 21/09/2021

Khi bạn bắt đầu học lập trình thì những từ ngữ như HTML, CSS, Javascript, C#,… sẽ khiến bạn bối rối không hiểu chúng là gì, công dụng của chúng ra sao. Vì vậy, nhằm hỗ trợ sinh viên Cao đẳng FPT Polytechnic trong quá trình học tập, bài viết dưới đây sẽ giới thiệu tổng quan và ý nghĩa của một số cụm từ trong lập trình.

Học thực chiến xây dựng trang web từ HTML, CSS đến HTML5 & CSS3

Đầu tiên, chúng ta bắt đầu với tổng quan HTML CSS để hiểu rõ hơn HTML là gì? CSS là gì? Và tại sao chúng ta cần nó để phát triển Web. HTML và CSS là hai thành phần không thể thiếu trong một website hoàn chỉnh. Thoạt đầu bạn có thể coi HTML và CSS là những khái niệm cơ bản, đơn giản nhất. Thế nhưng, các công nghệ mới liên tục phát triển và ra đời, ngoài HTML còn có HTML4, HTML5; ngoài CSS còn có CSS3,…

HTML/CSS đều là hai ngôn ngữ lập trình. Trong khi HTML (HyperText Markup Language – ngôn ngữ đánh dấu) được dùng để xây dựng cấu trúc cho từng phần nội dung thì CSS (Cascading Style Sheet- ngôn ngữ định dạng theo từng lớp) được dùng để tạo định dạng hiển thị cho HTML. Nói cách khác, HTML là công cụ để thêm nội dung và mô tả ý nghĩa cho bố cục, còn CSS là công cụ để trang trí, thiết lập cỡ chữ, màu sắc, các kiểu chữ, hiệu ứng đơn giản,… cho giao diện trang web.

Bạn hãy tưởng tượng, với một ý tưởng để thiết kế website mà bạn vừa nghĩ ra hay một bản thiết kế đã hoàn chỉnh trên các công cụ thiết kế như Photoshop, Ai,… nhưng chưa phải là một website thật sự. Vậy thì khi này bạn sẽ cần đến công cụ HTML/CSS được sử dụng để giúp cho bản thiết kế của bạn trở thành một trang web theo đúng nghĩa chứ không chỉ là ý tưởng hay hình ảnh đồ họa.

Việc này giống như bạn tạo ra một tờ giấy trắng dùng để vẽ thì HTML là chiếc bút chì, là công cụ để bạn tạo nên bố cục và nội dung bức tranh, còn CSS là những chiếc bút màu, là công cụ để giúp bức tranh trông sinh động, bắt mắt và dễ hiểu hơn.

Hiểu rõ được tầm quan trọng của HTML & CSS đến việc xây dựng một website chuẩn ngay từ đầu cho dân lập trình mới bắt đầu còn bỡ ngỡ, thầy Trần Bá Hộ đã xây dựng một khóa học online từ cơ bản và học thực chiến qua những ví dụ minh họa dễ hiểu.

Với video đầu tiên, thầy Hộ sẽ giúp sinh viên có cái nhìn tổng quan về việc xây dựng trang web

Với khóa học online này, thầy Hộ hướng dẫn các bạn từ việc xây dựng khung layout web tổng quan cho đến chi tiết từng phần để hoàn thiện một trang web cơ bản với một layout phổ biến.

Bài 2: Xây dựng khung layout zing.vn. Link video: https://youtu.be/JUr1ab_CdkU

Trong một trang web, hệ thống điều khiển được làm là xương sống của một website, giúp người dùng có thể chuyển trang trang một cách dễ dàng. Hiểu được điều đó, phần thiết kế thanh điều khiển cho website được Thầy Hộ hướng dẫn khá chi tiết và dễ hiểu từng câu lệnh, từng dấu câu, các bạn hiểu rõ từng đối tượng được được sử dụng để xây dựng nên hệ thống menu ngang, menu dọc, menu 1 cấp, menu 2 cấp, ….

Bài 10: AP div position absolute relative

Bài 18: ul, li – menu 1 cấp dọc.

 

Qua khóa học online này, không những bạn chắc về nền tảng html, css cơ bản mà bạn còng nắm vững hơn về khái niệm html5, css3.

HTML5 và CSS3 lần lượt là phiên bản thứ 5 và thứ 3 của HTML/CSS. Chúng thừa hưởng toàn bộ tính năng của phiên bản cũ, loại bỏ các tính năng kém hiệu quả và cải tiến thêm rất nhiều các chức năng mới như: Giảm bớt công đoạn tạo cookie, Dễ dàng sử dụng Data Attributes, Thích hợp cho web mobile, Tăng khả năng tương thích với ứng dụng web, HTML5 tương thích với CSS3, …

Vì tính tiện dụng và hiệu quả của HTML5 & CSS3, trong những clip cuối của khóa học này, các bạn sẽ thích thú với những hiệu quả mà HTML5 & CSS3 đem lại cho trang web mình đang xây dựng. Mời các bạn xem kỹ tiếp theo những clip cuối trong khóa học này để trang bị cho mình một nền tảng vững chắc về HTML5 & CSS3 nhằm tạo một “gốc” bền vững cho các môn học tiếp theo.

Bài 16: Transform css3, translate, rotate, scale, skew.

Hy vọng với khóa học online này của thầy Trần Bá Hộ sẽ giúp các bạn có nền tảng vững chắc là cơ sở để tạo niềm hứng khởi và phát triển kỹ năng học trong các học kỳ tiếp theo của các bạn chuyên ngành CNTT, UDPM, TKW nói riêng và của các bạn đam mê xây dựng trang web nói chung.

Chúc các bạn có một học kỳ nhiều năng lượng và thành công.

Cùng chuyên mục

Đăng Kí học Fpoly 2024

  • Max. file size: 50 MB.
  • Max. file size: 50 MB.
  • Max. file size: 50 MB.

Bình Luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *