Xin chào tất cả các bạn .Chắc chắn các bạn đang tò mò vì tại sao mình đang hướng dẫn các bạn thiết kế web/Blogspot mà lại lôi mấy bài viết linh tinh này ra làm gì? sao không vào thẳng vấn đề cho nhanh?
Mình xin trả lời các bạn như sau:
Trước khi đến với những bài viết tiếp theo trong series Thiết kế web/Blogspot thì mình xẽ dành ra vài bài viết để giới thiệu với các bạn sơ qua về HTML và CSS .
Vậy tại sao lại phải học HTML &CSS trước khi học thiết kế web? Có 1 lý do rất đơn giản đó là vì HTML và CSS là những ngôn ngữ cơ bản nhất khi thiết kế website , Nó là những thành phần không thể thiết cho mỗi website .Có thể có 1 số bạn đã có kiến thức về cái này thì các bạn có thể đợi 1 thời gian nữa và rồi quay lại xem những bài viết kế tiếp trong series Thiết kế web/Blogspot của mình .
Đối với những bạn chưa có chút kiến thức nào về HTML & CSS thì các bạn cũng đừng lo , và sau loạt bài viết này mình xẽ gửi cho bạn những Quyển sách học HTML và CSS .... để các bạn có thể nắm vững kiến thức và có thể tự tay thiết kế được 1 website cá nhân.
Thôi, không nói phét nữa. Chúng ta bắt tay vào việc luôn nào?
Phần 1 HTML
HTML là gì ,học khó hay dễ?
HTML (Hypertext Markup Language) : Là ngôn ngữ siêu văn bản.Có thể chứa link tới các nguồn thông tin khác như : địa chỉ 1 website (url), video , hình ảnh ,nhạc ....
HTML cũng được ví như "Một bộ xương của website" . Như trên mình đã nói thì nó là phần không thể thiếu cho 1 website
Học HTML không hề khó như bạn nghĩ . Nó là ngôn ngữ cơ bản lên bạn xẽ dễ dàng học được, nhưng để có thể thành thạo và có thể sử dụng hết sức mạnh của nó thì bạn cũng cần 1 thời gian thực hành nhiều.
Dùng phần mềm nào để viết code ? Có rất nhiều phần mềm để viết code html nhưng mình khuyên các bạn lên dùng Notepad++ .Các bạn có thể Dowload tại đây : http://notepad-plus-plus.org/
Cấu trúc của 1 website HTML :
Phần 2: CSS
CSS có lợi ích gì?
Tăng tốc việc phát triển web. Việc lập trình tạo nội dung trang web và việc layout giao diện có thể được làm song song, Thay đổi giao diện dễ dàng, chỉ cần thay đổi file CSS mới, dễ dàng bảo trì
CSS bao gồm các luật định dạng
Thường đặt trước thẻ </head>
Có 2 cách khai báo CSS
Cách 1 : Được đặt trong cặp thẻ
Cú Pháp cơ bản của CSS
HTML cũng được ví như "Một bộ xương của website" . Như trên mình đã nói thì nó là phần không thể thiếu cho 1 website
Học HTML không hề khó như bạn nghĩ . Nó là ngôn ngữ cơ bản lên bạn xẽ dễ dàng học được, nhưng để có thể thành thạo và có thể sử dụng hết sức mạnh của nó thì bạn cũng cần 1 thời gian thực hành nhiều.
Dùng phần mềm nào để viết code ? Có rất nhiều phần mềm để viết code html nhưng mình khuyên các bạn lên dùng Notepad++ .Các bạn có thể Dowload tại đây : http://notepad-plus-plus.org/
Cấu trúc của 1 website HTML :
<HTML>
<head>
Phần head là nơi chứa tiêu đề website . Và các thông tin ẩn. Mình xẽ nói chi tiết ở những bài viết sau.
</head>
<body>
Đây là phần hiển thị nội dung của website tới người dùng ...
Ví dụ đơn giản như bạn đang vào website của KòiEm thì tất cả những gì bạn nhìn thấy nó đều thuộc trong cặp thẻ body
</body>
</HTML>
Phần 2: CSS
CSS là gì?
CSS chính là phần định dạng kiểu hiển thị cho HTML. CSS và HTML luôn là cặp đôi hoàn hảo để trang trí website. Được lưu dưới dạng text.css và bạn cũng có thể dùng phần mềm Notepad ++ để viết code CSSCSS có lợi ích gì?
Tăng tốc việc phát triển web. Việc lập trình tạo nội dung trang web và việc layout giao diện có thể được làm song song, Thay đổi giao diện dễ dàng, chỉ cần thay đổi file CSS mới, dễ dàng bảo trì
CSS bao gồm các luật định dạng
Thường đặt trước thẻ </head>
Có 2 cách khai báo CSS
Cách 1 : Được đặt trong cặp thẻ
<style>
Nội dung CSS
</style>
Cách 2 : <link rel='stylesheet' href='linkfile.css' type='text/css' />
Cú Pháp cơ bản của CSS
VÙNG-CHỌN { Thuộc-tính-1: giá-trị-1; Thuộc-tính-2: giá-trị-2;}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).
Ví dụ : Ta có thể định dạng CSS cho nhiều thẻ bằng cách dùng tên thẻ :
p{//Tất cả thẻ P
background-color : #FFFFFF;
}
p h1 // Tất cả thẻ h1 nằm trong thẻ p
{
color : red;
font-weight:bold;
}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.
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ình xẽ dừng lại bài này ở đây . Và ở bài viết tiếp theo mình xẽ nói chi tiết về HTML.
Chúc các bạn học tập vui vẻ
Xem Full tại đây nhé mọi người Full toàn bộ giáo trình lập trình web 1
ReplyDelete