Bài thực hành 1 HTML và CSS

TRƯỜNG ĐẠI HỌC KỸ THUẬT CÔNG NGHỆ KHOA CÔNG NGHỆ THƠNG TIN Mơn: Lập trình mạng Bài thực hành số  Bài 1: Tạo project Website jsp Tạo trang web ngôn ngữ HTML CSS Hướng dẫn: Tạo project Netbean a Bước 1: Mở Netbean Menu File New project b Bước 2: Chọn loại project c Bước 3: Nhập tên project d Bước 4: Nhấn Finish để tạo project Thiết kế trang web Dreamweaver a Bước 1: Tạo file css qui định cách hiển thị tag b Bước 2: Mở trang index.jsp c Bước 2: Bấm F6 để chạy thử trang web d Bước 3: Dùng Dreamweaver để thiết kế giao diện cho trang web e Bước 4: Mở trang index.jsp thiết kế Làm quen với HTML CSS để thiết kế trang web a Bước 1:Viết code cho trang index.jsp Thẻ : Mô tả nội dụng trang web Thẻ : Sử dụng add file css vào trang html b Bước 2: Tạo div cho phần body Trong phần body tạo div bao quanh nội dung với id=”wrapper” Tạo div giao diện yêu cầu: header, content, footer Trong div header chia div bên trong: logo, banner navBar Trong div content tạo div bên trong: sidebar, primary Trong div primary tạo div con: Welcome, tier-1, tier-2 Tạo div clear : sử dụng để đẩy footer xuống phía Trong phần footer có phần left bar, tạo div cho footer sau: Đến xong bước tạo div cho giao diện web c Bước 3: Thiết kế div header, xem code sau Code div logo: Code div banner: Kết thúc div sidebar Code div primary: Code div welcome: Code div tier-1 Code div tier-2 Kết thúc phần content e Bước 5: Thiết kế div footer Kết thúc phần HTML, qua phần CSS Viết CSS cho giao diện a Bước 1: Mở file style.css b Bước 2: Phần file css ban đầu phải có code sau: (đoạn code số phần mềm soạn thảo css hổ trợ sẵn) c Bước 2: Css cho div wrapper d Bước 3: Css cho div header e Bước 3: Css cho phần body  Đến xem tạm ổn file Css, bạn mở file index.html để xem kết quả: ... div tier -1 Code div tier-2 Kết thúc phần content e Bước 5: Thiết kế div footer Kết thúc phần HTML, qua phần CSS Viết CSS cho giao diện a Bước 1: Mở file style .css b Bước 2: Phần file css ban đầu... thiết kế Làm quen với HTML CSS để thiết kế trang web a Bước 1: Viết code cho trang index.jsp Thẻ : Mô tả nội dụng trang web Thẻ : Sử dụng add file css vào trang html b Bước 2: Tạo... số phần mềm soạn thảo css hổ trợ sẵn) c Bước 2: Css cho div wrapper d Bước 3: Css cho div header e Bước 3: Css cho phần body  Đến xem tạm ổn file Css, bạn mở file index .html để xem kết quả: