GIÁO TRÌNH lập TRÌNH HTML – CSS

GIÁO TRÌNH LẬP TRÌNH HTML – CSS MỤC LỤC Giới thiệu 0.1 Giới thiệu tài liệu 0.2 Điều làm sau đọc xong tài liệu Hướng dẫn học thực hành tài liệu 1.1 Phần mềm hỗ trợ lập trình 1.2 Hướng dẫn học 1.3 Hướng dẫn mở xem mã nguồn ví dụ Các khái niệm html 2.1 Giới thiệu Html 2.2 Cấu trúc tài liệu html 2.3 Thẻ ( tag) html Các thẻ html hay dùng 3.1 Thẻ div 3.2 Thẻ p 14 3.3 Thẻ ul 14 3.4 Thẻ h 15 3.5 Thẻ a 15 3.6 Thẻ span 16 3.7 Thẻ br 16 3.8 Thẻ fieldset 16 3.9 Thẻ table : 17 Thẻ Inline – Block 19 Tổng kết HTML 20 Phần CSS (Cascading Style Sheets) 20 Khai báo CSS 21 7.Bộ chọn ( CSS Selecter ) 26 7.1 Khái niệm CSS Selecter 26 7.2 Khái niệm id class 26 7.3 Các CSS Selecter hay dùng : 28 Định dạng nội dung văn 29 Định dạng kích thước đối tượng với thuộc tính width , height 30 10 Mô hình hộp Box – Model 33 11 Float – clear css 36 11.1 Float 36 11.2 Clear 38 11.3 Chú ý thuộc sử dụng float boder 39 12 Display 40 13 Position 43 14 Định dạng vài thẻ html đặc biệt 45 14.1 Thẻ a 45 14.2 Thẻ ul 46 15 Giới thiệu HTML5 , CSS 47 15.0 Giới thiệu Html5 – CSS 47 15.1 Các thẻ dùng thiết kế layout 48 15.2 Các thẻ media đồ họa 48 15.3 Một vài thẻ khác 48 16 Thực hành thiết kế giao diện HTML – CSS 49 16.1 Giới thiệu 49 16.2 Xây dựng layout dùng thuộc tính float 51 16.3 Xây dựng layout dùng inline-block 54 16.4 Xây dựng layout dùng HTML 56 16.5 Định dạng menu website 57 16.6 Kết hợp ví dụ 16.4 - 16.5 59 17 Tổng kết 60 Giới thiệu 0.1 Giới thiệu tài liệu - Các bạn đọc tài liệu hướng dẫn xây dụng , định dạng tài liệu HTML - Html ngôn ngữ đánh dấu văn chuẩn để truyền tải nội dung qua mạng Internet - Tất công nghệ lập trình web hãng khác mục đích cuối sinh mã html để hiển thị lên trình duyệt web - Html dùng thẻ để đánh dấu văn Mỗi thẻ đánh dấu qui ước hiển thị nội dung định - CSS ngôn ngữ dùng để trang trí định dạng lại html , làm cho tài liệu html thêm sinh động - Do bạn muốn tự học xây dựng ứng dụng web công nghệ asp.net , php , jsp ( bạn người sử dụng phiển mã nguồn mở công nghệ ) bạn cần kiến thức html , CSS Bởi Html , CSS tảng lập trình web thiếu lập trình viên web - Các phiên html CSS HTML CSS chưa hoàn thành , trình duyệt web chưa hỗ trợ đầy đủ hết hứa hẹn đưa chuẩn lập trình web đại , cách mạng kỹ thuật lập trình web 0.2 Điều làm sau đọc xong tài liệu Khi đọc thực hành xong tài liệu bạn : - Dùng html CSS để định dạng trang html tĩnh - Nếu có kiến thức công nghệ lập trình web động asp.net , php bạn định dạng trang web động - Hầu bạn tạo định dạng hiển thị nội dung tất các trang web theo sở thích yêu cầu công việc Hướng dẫn học thực hành tài liệu 1.1 Phần mềm hỗ trợ lập trình - Chúng ta thực hành html , css công cụ Visual Studio 2012 ( xử dụng phiên 2010 , 2008 nhiên vài tính Intellicense cho CSS html5 ) - Ngoài nên sử dụng notepad ++ IDE song song - Môi trường VS Microsoft hỗ trợ lập trình html , css … mạnh mẽ Chúng hỗ trợ tự động hóa hầu hết đoạn code nhàm chán , giúp quan tâm tới phát triển Logic ứng dụng tập chung tới cú pháp ngôn ngữ 1.2 Hướng dẫn học - Trong hướng dẫn bạn đọc kỹ nội dung , xem mã nguồn gửi kèm tài liệu - Mỗi ví dụ tương ứng với tên file , thư mục mã nguồn Ví dụ đọc Vi dụ bạn tìm tới file hay thư mục có tên ViDu2 để xem mã nguồn chạy thử - Các bạn xem kỹ vài ví dụ hướng dẫn thực hành tạo ví dụ môi trường phát triển Visual Studio cách chạy ví dụ mã nguồn kèm tài liệu để hiểu môi trường thực hành viết code 1.3 Hướng dẫn mở xem mã nguồn ví dụ Mở Visual Studio : Click vào file Html-CSSApp.sln hình VS mở Project ví dụ lên kết hình : Giả sử ta muốn xem chỉnh sửa file ví dụ Bai3 ta tìm tới thư mục Bai3 mở lên giao diện chỉnh sửa code hình vẽ - ta chạy thử thay đổi code theo ý thích Mở notepad ++ : Ngoài để xem nhanh mã nguồn ví dụ mở notepad ++ sau : Chuột phải lên file ví dụ muốn xem code , giả sử muốn xem code file Vidu3.1.html , chọn chương trình mở notepad++ hình : Notepad++ mở nội dung code Vidu3.1.html sau : Tiêu đề Đây thẻ div Các khái niệm html 2.1 Giới thiệu Html - Bất kỳ ngôn ngữ hay kỹ thuật lập trình web cuối sinh mã Html để hiển thị lên trình duyệt web - Do dù bạn có phát triển ứng dụng web asp.net , php , jsp cần có hiểu biết html ( công cụ bên cạnh javascript , css ) - Thông thường ta thiết kế website cần tạo tài liệu html , sau upload lên máy chủ web Tuy nhiên tài liệu html lại khó thay đổi nội dung ( phải chỉnh sửa nội dung mã nguồn ) Do ta gọi website hay tài liệu html tĩnh - Các tài liệu html tự động sinh từ ngôn ngữ lập trình net , php , java tạo động mã html ( tức tạo giao diện thay đổi nội dung ) Ta gọi website website động - Trong tài liệu chủ yếu tìm hiểu html tĩnh , để hiểu chế định dạng – trang trí – xử lý html Việc xây dựng trang html động cần tham khảo khóa học asp , java , php 2.2 Cấu trúc tài liệu html - Các tài liệu html tuân thủ theo cấu trúc sau Tiêu đề website Code mã html > 2.3 Thẻ ( tag) html - html ngôn ngữ đánh dấu tài liệu dùng thẻ (div , h , a , ul …) , thẻ có ý nghĩa riêng , sử dụng tùy biến để mô tả tài liệu - Mỗi thẻ html có attribute , để ta dễ dàng thể nội dung thẻ html truy xuất tới chúng cách dễ dàng , ví dụ : // thẻ input thẻ dùng tạo Control nhập liệu html , hiển thị ô textBox dùng để nhập chữ ( attribute type ) đặt tên cho thẻ name1 ( thông qua Attribute name ) - Các Attribute tường dùng nhiều : name id , class Các thẻ html hay dùng 3.1 Thẻ div - Thẻ div dùng để nhóm khối phần tử html - Hướng dẫn dùng Visual Studio thực hành viết mã html - Mở Visual Studio ( hướng dẫn phiên VS 2012 ) Chọn mẫu Template Project theo hình sau : - Nhấn Ok , mở Solution right lên Project chọn theo hình sau để tạo thư mục Project - Đặt tên thư mục tùy ý thường đặt theo tên học - Tạo file html hình vẽ chọn mẫu html hình : Ví dụ 3.1 ( Xem file ViDu3.1.html mã nguồn kèm theo giáo trình) Không CSS : Có CSS : 14.2 Thẻ ul - thẻ ul /li dùng bị ảnh hưởng bới margin pading đối tượng phía trước phía sau - Nên nội dung thẻ li thường không lề theo ý muốn - Giả sử ta có đoạn html sau : Danh Mục

• Danh Sách 1
• Danh Sách 1
• Danh Sách 1

Kết chạy trình duyệt đoạn code : Trong định dạng menu , danh sách ta muốn tất lề canh trái Do dùng thẻ ul lên có khoảng trắng nội dung lề Giả sử muốn lề trái thẻ li css sau : ul { margin:0px; padding:0px; } Mã nguồn hoàn chỉnh : ul { margin:0px; padding:0px; } Danh Mục

• Danh Sách 1
• Danh Sách 1
• Danh Sách 1

Chạy ví dụ kết hình sau : Chú ý : định dạng chung cho thẻ ul , thẻ ul khác mà ta không muốn canh nội dung bên trái bị ảnh hưởng , tạo class , hay id để định dạng riêng cần cho thẻ ul canh lề trái 15 Giới thiệu HTML5 , CSS 15.0 Giới thiệu Html5 – CSS - HTML CSS đời cung cấp nhiều thuộc tính mô tả xử lý để việc lập trình bớt phụ thuộc vào javascript - HTML cung cấp tảng để lập trình giao diện đồ họa mạnh mẽ Là thay đáng kể kỹ thuật lập trình web so với kỹ thuật dùng flash hay Silverlight trước - Trong khuân khổ tài liệu tìm hiểu chút thiết kế giao diện sử dụng HTML , CSS3 với tính phần thực hành thiết kế giao diện web - Các tính chuyên sâu lập trình liệu với html , giao diện đồ họa học khóa học sau 15.1 Các thẻ dùng thiết kế layout header Thể nội dung footer Thể nội dung cuối nav chứa danh sách link website (menu ngang) aside Chứa phần cố định,nội dung (menu dọc) article nội dung độc lập ,có thể chứa nhiều section ngược lại section nội dung cụ thể Xem sử dụng thẻ để thiết kế layout thực hành thiết kế layout 15.2 Các thẻ media đồ họa : Định nghĩa nội dung âm : Định nghĩa cho nội dung video : Định nghĩa nhiều nguồn media cho thẻ :Định nghĩa cho ứng dụng nhúng nội dung tương tác (giống plugin) : Định nghĩa tracks cho thẻ : Dùng cho việc vẽ, xử lý đồ hoạ, thông qua mã kịch (Javascripts) 15.3 Một vài thẻ khác Nhóm nhóm phần tử từ đến heading có nhiều cấp độ khác Xác định tiến trình nhiệm vụ ( trạng thái loading) Xác định danh sách lựa chọn định nghĩa trước Quy định trường truy xuất key Hiển thị kết phép tính Cô lập phần văn định dạng theo hướng khác từ văn khác bên Định nghĩa nút lệnh mà người dùng gọi Xác định chi tiết khác mà người dùng xem ẩn Hiển thị dialog thông báo Xác định phần đầu nhìn thấy thẻ Xác định nội dung nội dung minh hoạ, biểu đồ,ảnh, mã nguồn Xác định caption mô tả cho thẻ Đánh dấu, làm bật văn Xác định kích thước khoảng biết Xác định kiểu thích màu đỏ (Kiểu viết khu vực Đông Á) Xác định kiểu phát âm, giải thích ký tự (Kiểu chữ viết Đông Á) Xác định kiểu hiển thị trình duyệt không hỗ trợ dòng thích màu đỏ Xác định thời gian ngày Xác định xuống dòng, ngắt dòng 16 Thực hành thiết kế giao diện HTML – CSS 16.1 Giới thiệu - Với tảng học CSS html xây dựng nên bố cục định dạng website - Nếu muốn giao diện thêm hấp dẫn có tính tương tác với người dùng nhiều dùng javascript , tốt mặt kỹ thuật lập trình , nhiên cần xem xét vời ứng dụng web , tốc độ vấn đề ưu tiên hàng đầu - Dưới hướng dẫn xây dựng layoyt ( bố cục) website thẻ div kết hợp CSS , thay thể cho layout dùng table thông thường - Ý nghĩa xây dựng layout dùng thẻ div thay table tăng tốc độ , đơn giản mã nguồn ( thẻ table cần khai báo thêm nhiều thẻ tr , td ) - Dưới xây dựng layout dùng thẻ div cách dùng float inlineblock Với CSS có thêm khác , hướng dẫn cụ thể tài liệu HTML – CSS - Ngoài ý tới kỹ thuật lập trình HTML , CSS để áp dụng vào thực tế xây dựng website Bố cục layout : Một layout thường chia làm phần : - Đầu trang ( header ) - Thân trang ( body ) - Cuối trang ( footer ) Trong phần chia làm phần nhỏ Ví dụ header thường chứa logo , tên website , thẻ đăng nhập Thân trang ( body ) thường chia làm phần nội dung , nội dung bật , quảng cáo … Layout đơn giản có giao diện sau Giả sử cần thiết kế layout ta thiết kế thẻ div sau : Đầu trang Nội dung chính Nội dung bật Cuối trang - Ta dùng CSS để tạo mẫu giao diện hình vẽ 16.2 Xây dựng layout dùng thuộc tính float - tạo file Vidu16.2.css Vidu16.2.html có cấu trúc html - ý tham chiếu file css vào file html File html có mã sau : Đầu trang Nội dung chính Nội dung bật Cuối trang Định dạng chung : - Trước tiên ta định dạng khung cho thẻ layout khai báo CSS sau : body { margin: auto; width: 90%; min-width: 960px; background: #e2e2e2; } margin để 0,auto để canh nội dung vào hình Chiều ngang để 90% kích thước hình người dùng Đặt giá trị 960 để người dùng co cửa sổ nhỏ 960 px giao diện không bị vỡ Các bạn đặt giá trị khác , không để để xem tác dụng chúng - Do thuộc tính float , display hay dùng thiết kế web nên ta tạo sẵn lớp file CSS , để dùng cần khai báo html float-left { float:left; } float-right { float:right; } clear-both { clear:both; } Ta khai báo mã html sau : Đầu trang Nội dung chính Nội dung bật Cuối trang - chạy thử ta đạt kết mong muốn - Khi lập trình thiết kế web động nội dung tạo động thuộc tính chiều cao ( height) tự động theo nội dung Ta quan tâm tới phần chiều ngang ( widht) - Trong ví dụ ( nội dung ) nên để dẽ nhìn ta đặt thuộc tính height đối tượng sau : CSS #left-body { background:#fff; height:400px; width:80%; } #right-body { background:#00ff90; height:400px; width:20%; } Html : Đầu trang Nội dung chính Nội dung bật Cuối trang Mã nguồn hoàn chỉnh : CSS : /*#region Định dạng khung website */ body { margin: auto; width: 90%; min-width: 960px; background: #e2e2e2; } /*#endregion */ /*#region Các thuộc tính thêm cho dễ nhìn ví dụ ( không cần thực tế) */ #left-body { background:#fff; height:400px; width:80%; } #right-body { background:#00ff90; height:400px; width:20%; } /*#endregion */ /*#region Các class hay dùng */ float-left { float:left; } float-right { float:right; } clear-both { clear:both; } /*#endregion */ Html : Đầu trang Nội dung chính Nội dung bật Cuối trang Các bạn xem toàn mã nguồn file Vidu16.2.html Vidu16.2.css Chạy ví dụ 16.2 kết hình sau : 16.3 Xây dựng layout dùng inline-block - dùng float thường cần dùng thêm thuộc tính clear , nhiều trường hợp thẻ khai báo clear cần khai báo thẻ phụ - CSS hỗ trợ thuộc tính hiển thị layout kiểu block ( phần tử ngang hàng ) Khi code html css gọn gàng - Tạo file Vidu16.3.html Vidu1632.css có mã tương tự ví dụ 16.2 code sau : CSS : thay thuộc tính float /*Thay thuộc tính float display*/ inline-block { display: inline-block; vertical-align: top; } - inline – block có tạo khoảng cách đối tượng nên cần chỉnh lại width không đủ 100% Đổi lại sau : #left-body { background:#fff; height:400px; width:78%; } Html : Đầu trang Nội dung chính Nội dung bật Cuối trang // Ta thấy code đơn giản dễ sử dụng float nhiều // Một ý thuộc tính display : inline-block không hoạt động tốt IE7 , nhiên có cách tạo mã hack để chạy tốt Tuy nhiên với trình duyệt thông dụng hỗ trợ tốt thuộc tính inline-block Mã nguồn hoàn chỉnh : CSS : body { margin: auto; width: 90%; min-width: 960px; background: #e2e2e2; } /*#region Các thuộc tính thêm cho dễ nhìn ví dụ ( không cần thực tế) */ #left-body { background:#fff; height:400px; width:78%; } #right-body { background:#00ff90; height:400px; width:20%; } /*#endregion */ /*Thay thuộc tính float display*/ inline-block { display: inline-block; vertical-align: top; } Html : Đầu trang Nội dung chính Nội dung bật Cuối trang Các bạn xem toàn mã nguồn file Vidu16.3.html Vidu16.3.css Chạy ví dụ 16.3 kết ví dụ 16.2 hình sau : 16.4 Xây dựng layout dùng HTML - việc xây dựng layout ví dụ ta dùng thẻ div Các thẻ không nói nên chất nội dung chúng chứa - Html cung cấp số thẻ hỗ trợ tốt việc thiết kế layout , từ thẻ ta phân biệt đâu phần đầu trang , phần nội dung , phần cuối trang , phần menu … - Việc thiết kế thẻ layout theo chuẩn html hỗ trợ tốt việc SEO website - Các thẻ dùng thiết kế layout : header Thể nội dung footer Thể nội dung cuối nav chứa danh sách link website (menu ngang) aside Chứa phần cố định,nội dung (menu dọc) article nội dung độc lập ,có thể chứa nhiều section ngược lại section nội dung cụ thể // Có thể xem qua tính thẻ layout sau : Trở lại ví dụ 16.2 16.3 ta code lại mã html sau : HTML : Đầu trang Nội dung chính Nội dung bật Cuối trang CSS : - Giữ nguyên file CSS , giống file CSS Ví dụ 16.3 - Có thể xem code html css hoàn chỉnh file Vidu16.4.css Vidu16.4.html - Chúng ta cần đổi mã html , ý kỹ thuật viết code css để kế thừa sử dụng nhiều nơi mà không cần code lại hay copy code Trong thiết kế web động style trang thường tương tự , có trang html thay đổi Các bạn ứng dụng kỹ thuật để code cho framework CSS cho riêng - Các kỹ thuật thực hành giáo trình lập trình web Asp.net MVC , PHP Chạy ví dụ 16.4 kết ví dụ 16.3 16.2 16.5 Định dạng menu website - menu điều hướng website , thành phần hay gặp mà cần định dạng - Ở ví dụ định dạng menu cấp dùng CSS3 HTML5 - Việc xây dựng xử lý menu đa cấp đề cập tới tập sau giáo trình lập trình dynamic html – css - Với lập trình web động , menu thường lấy nội dung từ database , nhiên cách định dạng tương tự Việc làm menu động lấy nội dung CSDL học giáo trình thiết kế web Asp.net MVC Code hoàn chỉnh HTML : Trang Chủ Giới Thiệu Tin Tức Liên Hệ Sản Phẩm CSS : mainMenu { background: #4f86f8; border-radius: 10px; padding: 10px; } mainMenu a { font-size: 16px; color: #FFFFFF; font-weight: bold; padding: 10px; border-right: 1px solid #fff; } - Thuộc tính border-radius dùng để bo góc đường viền Đây thuộc tính CSS3 Có thể xem ví dụ hoàn chỉnh file Vidu16.5.css Vidu16.5.html - kết chạy ví dụ 16.5 16.6 Kết hợp ví dụ 16.4 - 16.5 - Ta đặt menu vào layout phần tiêu đề website - kết hợp ví dụ 16.4 16.5 ta layout sau HTML : Tiêu đề website Trang Chủ Giới Thiệu Tin Tức Liên Hệ Sản Phẩm Nội dung chính Nội dung bật Cuối trang CSS : body { margin: auto; width: 90%; min-width: 960px; background: #e2e2e2; } /*#region Các thuộc tính thêm cho dễ nhìn ví dụ ( không cần thực tế) */ #left-body { background:#fff; height:400px; width:78%; } #right-body { background:#00ff90; height:400px; width:20%; } /*#endregion */ /*Thay thuộc tính float display*/ inline-block { display: inline-block; vertical-align: top; } /*#region Main Menu */ mainMenu { background: #4f86f8; border-radius: 10px; padding: 10px; } mainMenu a { font-size: 16px; color: #FFFFFF; font-weight: bold; padding: 10px; border-right: 1px solid #fff; } /*#endregion */ Có thể xem ví dụ hoàn chỉnh file Vidu16.6.css Vidu16.6.html - kết chạy ví dụ 16.6 : 17 Tổng kết - Chúng ta học khái niệm ngôn ngữ html định dạng html CSS Đây kiến thức tảng để bạn theo học khóa lập trình ứng dụng MVC - Đây khái niệm lập trình web bạn có học công nghệ asp , php , jsp cần đến - Tất nhiên kiến thức chuyên sâu nhiều kỹ thuật Tuy nhiên điều muốn bạn có tảng vào xây dựng ứng dụng thực tiễn asp , php , jsp hay xử lý opensource để thực hành chúng học chuyên sâu - Đó lý cần vài buổi đọc vài chục trang tài liệu bạn tự xử lý html , css Điều mà kiêng kỵ lập trình ứng dụng học thật nhiều không dùng hết - Điều muốn hướng tới bạn có kiến thức tảng ( khoảng vài ngày để học ) Kết hợp với lập trình ứng dụng thực tế để dần nâng cao tay nghề học chi tiết tay nghề công nghệ đời ta lại bỏ kỹ thuật cũ kỹ học không cần thiết với xu công nghệ ... thức html , CSS Bởi Html , CSS tảng lập trình web thiếu lập trình viên web - Các phiên html CSS HTML CSS chưa hoàn thành , trình duyệt web chưa hỗ trợ đầy đủ hết hứa hẹn đưa chuẩn lập trình. .. liệu HTML - Html ngôn ngữ đánh dấu văn chuẩn để truyền tải nội dung qua mạng Internet - Tất công nghệ lập trình web hãng khác mục đích cuối sinh mã html để hiển thị lên trình duyệt web - Html. .. mạng kỹ thuật lập trình web 0.2 Điều làm sau đọc xong tài liệu Khi đọc thực hành xong tài liệu bạn : - Dùng html CSS để định dạng trang html tĩnh - Nếu có kiến thức công nghệ lập trình web động