Đề tài xây DỰNG TRANG WEB cá NHÂN HTML và CSS

MỤC LỤC LỜI NÓI ĐẦU CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 TỔNG QUAN VỀ NGÔN NGỮ HTML 1.1.1 Giới thiệu HTML 1.1.2 Trang mã nguồn HTML trang Web 1.1.3 Thẻ (tag) HTML gì? 1.1.4 Cấu trúc trang HTML 1.1.5 Các quy tắc chung 1.1.6 Các thẻ định cấu trúc tài liệu 1.1.7 Các thẻ định dạng 1.1.8 Thẻ tạo link (liên kết) 10 1.1.9 Thẻ tạo frame (khung) 11 1.1.10 Thẻ chèn ảnh 11 1.1.11 Thẻ tạo danh sách 13 1.1.12 Thẻ tạo Form 16 1.1.13 Thẻ Marquee-tạo chữ chạy 20 1.1.14 Các thẻ tạo bảng 20 1.2 TỔNG QUAN Về CSS 21 1.2.1 Giới thiệu css 21 1.2.2 Đặc tính CSS 22 1.2.3 Các thuộc tính CSS 22 CHƯƠNG 2: XÂY DỰNG TRANG WEB CÁ NHÂN 27 2.1 THẾ NÀO LÀ MỘT WEBSITE? 27 2.2 QUY TRÌNH THIẾT KẾ WEBSITE 27 2.3 XÂY DỰNG TRANG WEB TỪ THIẾT KẾ CÓ SẴN 29 2.3.1 Chọn mẫu thiết kế 29 2.3.2 Chuyển mẫu thiết kế sang trang web html 29 2.3.3 Các bước cắt layout 30 2.3.4 Các công cụ Photoshop 30 2.3.5 Layer Photoshop 32 2.3.6 Phân tích bố cục website 33 2.3.7 Sử dụng công cụ slice tool crop để cắt thành phần giao diện 35 2.3.8 Dựng mã HTML/xHTML/CSS 35 2.4 XÂY DỰNG TRANG WEB CÁ NHÂN 38 2.4.1 Thế website cá nhân? 38 2.4.2 Các cách xây dựng website cá nhân 39 2.5 XÂY DỰNG TRANG WEB CÁ NHÂN TỪ MẪU GIAO DIỆN 40 2.5.1 Chọn giao diện cho website 40 2.5.2 Cắt giao diện thành nhiều thành phần nhỏ trang web 41 2.5.3 Viết mã HTML 42 2.5.4 Viết mã CSS 46 2.5.5 Kết hoàn thành 48 KẾT LUẬN 57 TÀI LIỆU THAM KHẢO 58 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 59 LỜI NĨI ĐẦU Ngày nay, Cơng nghệ thơng tin ngành phát triển mạnh mẽ có ảnh hưởng sâu rộng đến mặt đời sống Nó tảng kinh tế tri thức, thước đo trình độ phát triển quốc gia.Vì vậy, việc đào tạo đội ngũ kỹ sư cơng nghệ thơng tin có chất lượng địi hỏi phải trọng đầu tư mức Xã hội kinh tế phát triển địi hỏi cơng nghệ phải phát triển Công nghệ phát triển, người ngày phát minh thiết bị công nghệ số thông minh giúp đỡ người nhiều mặt sống Trong thời đại ngày nay, đất nước ta hội nhập vào WTO với phát triển nhanh chóng cơng nghệ thơng tin áp dụng lĩnh vực sống kinh tế, trị, văn hóa xã hội, tất cần có cơng nghệ thơng tin Như biết lập trình thiết kế Website coi ngành “hot” mà quan tâm Ngày xã hội phát triển nhu cầu việc sở hữu riêng cho website cá nhân vô lớn Hầu hết có nhu cầu sở hữu website cá nhân hay blog để chia sẻ thông tin, học tập, viết nhật kí, lưu lại hình ảnh, video gia đình bạn bè… Nắm nhu cầu em định chọn đề tài: “Xây dựng trang web cá nhân HTML CSS” cho đợt thực tập chuyên ngành lần Trong trình triển khai đề tài có gặp số vướng mắc số thầy cô giáo bạn lớp giúp đỡ nên đề tài hoàn thành thời hạn kết ban đầu hoàn thiện Em xin chân thành cảm ơn giáo viên hướng dẫn thầy:Lê Khánh DươngBộ môn: Mạng Truyền Thôngđã giúp đỡ dẫn em hoàn thành báo cáo Sinh viên:Dương Thị Mai CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 TỔNG QUAN VỀ NGÔN NGỮ HTML 1.1.1 Giới thiệu HTML HTML (Hyper Text Markup Language - Ngôn ngữ đánh dấu siêu văn bản) định dạng để báo cho trình duyệt Web (Web browser) biết cách để hiển thị trang Web Các trang Web thực khơng có khác ngồi văn với thẻ (tag) HTML xếp cách đoạn mã để trình duyệt Web biết cách để thông dịch hiển thị chúng lên hình Tên gọi ngơn ngữ dánh dấu siêu văn có ý nghĩa sau: Đánh dấu (Markup): HTML ngôn ngữ thẻ đánh dấu - Tag Các thẻ xác định cách thức trình bày đoạn văn tương ứng hình Ngơn ngữ (Language): HTML ngôn ngữ tương tự ngôn ngữ lập trình, nhiên đơn giản Nó có cú pháp chặt chẽ để viết lệnh thực việc trình diễn văn Các từ khố có ý nghĩa xác định cộng đồng Internet thừa nhận sử dụng Ví dụ b = bold, ul = unordered list,… Văn (Text): HTML trước hết để trình bày văn dựa tảng văn Các thành phần khác hình ảnh, âm thanh, hoạt hình phải "cắm neo" vào đoạn văn Siêu văn (HyperText): HTML cho phép liên kết nhiều trang văn rải rác khắp nơi Internet Nó có tác dụng che dấu phức tạp Internet người sử dụng Người dùng Internet đọc văn mà khơng cần biết đến văn nằm đâu, hệ thống xây dựng phức tạp HTML thực vượt ngồi khn khổ khái niệm văn cổ điển 1.1.2 Trang mã nguồn HTML trang Web Trang mã nguồn HTML tệp văn bình thường gồm kí tự ASCII, tạo trình soạn thảo thông thường Theo quy ước, tất tệp mã nguồn trang siêu văn phải có html htm Khi trình duyệt (browser) đọc trang mã nguồn HTML, dịch thẻ lệnh hiển thị lên hình máy tính ta thường gọi trang Web Vậy trang web không tồn đĩa cứng máy tính cục Nó thể trang mã nguồn qua việc xử lý trình duyệt Như sau ta thấy, trình duyệt khác hiển thị trang mã nguồn khơng hồn tồn giống Nói soạn thảo siêu văn tức tạo trang mã nguồn HTML quy định để độ duyệt hiểu hiển thị Sử dụng HTML để soạn thảo trang siêu văn bản, nguyên tắc không khác so với dùng soạn thảo văn thông thường Chẳng hạn, soạn thảo văn thông thường, để làm bật tiêu đề ta phải đánh dấu chọn cỡ to, Chương trình soạn thảo văn chèn dấu hiệu thích hợp (ta khơng nhìn thấy được) vào đầu cuối đoạn tiêu đề chọn để thể theo yêu cầu Với HTML tương tự 1.1.3 Thẻ (tag) HTML gì? Để biểu diễn thơng tin trang web, www sử dụng ngơn ngữ HTML để trình bày thơng tin Mỗi thơng tin chi tiết trình bày định dạng dựa vào cặp thẻ (tag) HTML tương ứng - Mỗi cặp thẻ bao gồm: thẻ mở thẻ đóng Tên thẻ mở thẻ đóng giống đặt tỏng cặp dấu - Trong thẻ mở có thêm tham số phía sau tên thẻ - Trong thẻ đóng có thêm dấu / phía trước tên thẻ - Dữ liệu cần trình bày đặt cặp thẻ mở thẻ đóng - Có số thẻ khơng thiết phải viết thẻ đóng - Có thể đặt cặp thẻ HTML lồng Cấu trúc chung thẻ (tag) HTML sau: Thông tin cần trình bày Ví dụ: chữ đậm chữ nghiêng chữ gạch chân chữ vừa đậm vừa nghiêng 1.1.4 Cấu trúc trang HTML Tiêu đề trang web Nội dung trang web 1.1.5 Các quy tắc chung Một số điều cần lưu ý soạn thảo siêu văn HTML: - Nhiều dấu cách liền có tác dụng dấu cách Bạn phải sử dụng thẻ để thể nhiều dấu giãn cách liền - Gõ Enter để xuống dòng xem dấu cách, để xuống hàng phải sử dụng thẻ tương ứng - Có thể viết tên thẻ khơng phân biệt chữ in thường in hoa - Vì kí tự dấu lớn ">", dấu nhỏ "