báo cáo bài tập lớn THIẾT KẾ MỘT WEBSITE TĨNH TỰ CHỌN

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP VINH NGÀNH CÔNG NGHỆ THÔNG TIN  BỘ MÔN : PHÁT TRIỂN WEB BÁO CÁO ĐỀ TÀI: PHÁT TRIỂN MỘT WEBSITE TĨNH SỬ DỤNG CÁC TỆP TIN HTML VÀ CSS GIÁO VIÊN HƯỚNG DẪN: HOÀNG THỊ VINH SINH VIÊN: BÙI ĐỨC HIẾU Vinh, tháng 11 năm MỤC LỤC LỜI NÓI ĐẦU CHƯƠNG I CƠ SỞ LÝ THUYẾT .2 1.1 TỔNG QUAN VỀ NGÔN NGỮ HTML 1.1.1 HTML gì? 1.1.2 Tập tin HTML gì? 1.1.3 Thẻ HTML 1.2 TỔNG QUAN VỀ CSS 1.2.1 CSS ? 1.2.2 Tại lại phải học css 1.2.3 Cấu trúc css 1.2.4 Cách chèn css vào html CHƯƠNG II THIẾT KẾ TRANG WEB CÁ NHÂN 2.1 Thế website ? 2.2 bước thiết kế trang web 2.3 thiết kế website .8 2.3.1 thiết kế website giao diện có trước .8 2.3.2 Chuyển mẫu thiết kế sang trang web html 2.3.3 Chuẩn bị ảnh, tài liệu cho website 2.3.4 Bố cục trang web 2.3.5 Viết mã html,css 10 2.3.5.1 Mã HTML 10 2.3.5.2 Mã css .53 CHƯƠNG III KẾT LUẬN 60 CHƯƠNG IV TÀI LIỆU THAM KHẢO 61 Thiết kế website tĩnh GVHD: HỒNG THỊ VINH LỜI NĨI ĐẦU Trong năm gần với phát triển vượt trội khoa học kỹ thuật đặt biệt công nghệ thông tin, với ứng dụng công nghệ thông tin vào lĩnh vực đóng góp phần to lớn cho nghiệp phát triển người Trong lĩnh vực lĩnh vực quảng bá văn hóa du lịch thật giúp ích nhiều cho việc quảng bá nét đẹp dân tộc Hiện công nghệ internet phát triển mạnh kèm theo trang mạng phát triển khơng ngừng Việc quảng bá “ ngành cơng nghiệp khơng khói” trang mạng kênh quảng cáo tiếp cận rộng rãi phổ biến nhất, quan trọng có chi phí rẻ Webside cách truyền thông vô tuyệt vời giúp bạn truyền tải tin tức, kho tài liệu, bán hàng, tiếp cận đồng thời quảng bá hình ảnh văn hóa… toàn cầu Cũng theo Tổng cục Thống kê cho biết, lượng khách quốc tế đến nước ta tháng 12/2016 ước tính đạt 897,3 nghìn lượt người, giảm 4,2% so với tháng trước tăng 17,9% so với kỳ năm trước.Cả năm 2016, khách quốc tế đến nước ta ước tính đạt 10 triệu lượt người, tăng 26% so với năm trước gấp lần năm 2010 Đây số kỷ lục từ trước đến Nhiều sách khuyến khích du lịch phát triển nhà nước ta triển khai miễn thị thực cho công dân nước Tây Âu, tăng cường quảng bá, xúc tiến du lịch trang web du lịch Vì việc thiết kế website du lịch vô cần thiết quan trọng BÙI ĐỨC HIẾU LỚP: K2DCNTT Thiết kế website tĩnh GVHD: HOÀNG THỊ VINH CHƯƠNG I CƠ SỞ LÝ THUYẾT TỔNG QUAN VỀ NGÔN NGỮ HTML HTML gì? HTML (HyperText Markup Language) ngơn ngữ đánh dấu siêu văn bản, dùng để tạo trang web HTML bao gồm tập hợp thẻ dùng để:  Định nghĩa cấu trúc trang web  Định dạng nội dung trang web  Tạo siêu liên kết để liên kết đến trang web khác  Chèn âm thanh, hình ảnh, video, vào trang web Tập tin HTML gì?  Tập tin HTML tập tin text có chứa thẻ HTML (tập tin có phần mở rộng html htm)  Tập tin HTML gọi trang web BÙI ĐỨC HIẾU LỚP: K2DCNTT Thiết kế website tĩnh GVHD: HỒNG THỊ VINH  Nếu cú pháp có bị sai trình duyệt khơng báo lỗi, hiển thị không ý muốn Thẻ HTML Mỗi thẻ từ khóa, bao quanh cặp ngoặc nhọn (Ví dụ: , , ) Mỗi thẻ HTML thường bao gồm cặp: thẻ mớ (bắt đầu định dạng), thẻ đóng (kết thúc định dạng) Thẻ đóng giống thẻ mở, thẻ đóng có thêm ký hiệu dấu gạch chéo (/) trước tên thẻ (ví dụ: , , ) Văn cần định dạng đặt thẻ mở thẻ đóng Ví dụ:

Đây đoạn văn bản.

Các khoảng trắng dư thừa ký tự xuống dòng bị bỏ qua Các thẻ gồm cặp thẻ đóng mở gọi thẻ kép (Ví dụ: ,

, ) Các thẻ có thẻ mở gọi thẻ đơn (Ví dụ: ) Các thẻ lồng vào nhau, khơng chéo  Ví dụ đúng:

Đây một đoạnvăn bản.

 Ví dụ sai:

Đây một đoạn

văn bản. Một số thẻ có thêm thuộc tính: BÙI ĐỨC HIẾU LỚP: K2DCNTT Thiết kế website tĩnh GVHD: HOÀNG THỊ VINH  Dùng để định số thuộc tính khác liên quan đến thẻ  Nếu có, khai báo thẻ mở  Ví dụ:

(align thuộc tính dùng để canh lề cho đoạn văn bản) TỔNG QUAN VỀ CSS CSS ? CSS viết tắt cụm từ “Cascading Style Sheet” , ngơn ngữ quy định cách trình bày thẻ htmltrên trang web Là ngôn ngữ sử dụng nhiều lập trình web, nói CSS đời tạo nên cách mạng Đôi bạn bối rối nhận thấy đoạn code viết hiển thị khơng giống trình duyệt khác nhau, CSS giúp bạn giải toán CSS quy định cách hiển thị nội dung thẻ HTML trình duyệt gần giống nhau, cách quy định thuộc tính cho thẻ HTML Phương thức hoạt động CSS tìm dựa vào vùng chọn, vùng chọn tên thẻ HTML, tên ID, class hay nhiều kiểu khác Sau áp dụng thuộc tính cần thay đổi lên vùng chọn Tại lại phải học css – Css tùy chỉnh bố cục định dạng hiển thị nội dung,màu sắc chỉnh màu nền,đường viền,đổ bóng… cho thẻ html.Nếu website mà làm html BÙI ĐỨC HIẾU LỚP: K2DCNTT Thiết kế website tĩnh GVHD: HỒNG THỊ VINH khơng sử dụng css website nhìn thơ xơ.Bạn tưởng tượng xe máy mà bỏ hết lớp sơn áo bên ngồi lại khung máy – CSS cung cấp cho bạn hàng trăm thuộc tính trình bày dành cho đối tượng với sáng tạo cao kết hợp thuộc tính giúp mang lại hiệu – Ngoài ra, CSS hỗ trợ tất trình duyệt khác Cấu trúc css Một đoạn CSS bao gồm phần này: 01 02 03 04 05 vùng chọn { thuộc tính : giá trị; thuộc tính: giá trị; } Nghĩa khai báo vùng chọn, sau thuộc tính giá trị nằm bên cặp dấu ngoặc nhọn {} Mỗi thuộc tính ln có giá trị riêng, giá trị dạng số, tên giá trị danh sách có sẵn CSS Phần giá trị thuộc tính phải cách dấu hai chấm, dòng khai báo thuộc tính ln có dấu chấm phẩy cuối Một vùng chọn sử dụng khơng giới hạn thuộc tính Cách chèn css vào html Trên thực tế có tới cách hay sử dụng chèn css website BÙI ĐỨC HIẾU LỚP: K2DCNTT Thiết kế website tĩnh GVHD: HOÀNG THỊ VINH + Cách 1: Chèn nội dung CSS vào cặp thẻ phần trang web 10 11 12 Tổng quan css body{ background:red; } h1{ color:blue; font-size:18px; } Bài học Tổng quan css hocphp.info + Cách 2: Chèn nội dung CSS vào trực tiếp vào thẻ mở html thơng qua thuộc tính style Tổng quan css Bài học Tổng quan css hocphp.info + Cách 3: Lưu nội dung css file riêng có phần mở rộng css chèn file vào website thông tin thẻ ,thường file css chèn cặp thẻ Sau tạo file có tên style.css với nội dung ví dụ sau: body{ background:red; } h1{ color:blue; font-size:18px; } Lúc chèn file vào website sau BÙI ĐỨC HIẾU LỚP: K2DCNTT Thiết kế website tĩnh GVHD: HOÀNG THỊ VINH Tổng quan css