Thông tin tài liệu
BÀI 2 HTML - LÀM QUEN VỚI CSS – ĐỊNH DẠNG STYLE CHO TRANG WEB & BỐ CỤC TRANG WEB NHẮC LẠI BÀI TRƯỚC Những khái niệm về website: Thành phần của trang web Tên miền, địa chỉ IP Client – server Công việc thiết kế website Những kiến thức cơ bản về HTML & XHTML Làm quen với Adobe Dreamweaver CS4 Khởi tạo một trang web và làm việc với những thành phần trên trang web: văn bản, hình ảnh Những khái niệm về website: Thành phần của trang web Tên miền, địa chỉ IP Client – server Công việc thiết kế website Những kiến thức cơ bản về HTML & XHTML Làm quen với Adobe Dreamweaver CS4 Khởi tạo một trang web và làm việc với những thành phần trên trang web: văn bản, hình ảnh Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 2 MỤC TIÊU BÀI HỌC Làm quen với HTML: Khái niệm, cấu trúc Cách viết mã HTML với môi trường soạn thảo (notepad, Dreamweaver, …) Làm việc với những thành phần: • Văn bản • Hình ảnh Làm quen với CSS Khởi tạo CSS với Dreamweaver CS4 Bố cục trang web với CSS Làm quen với HTML: Khái niệm, cấu trúc Cách viết mã HTML với môi trường soạn thảo (notepad, Dreamweaver, …) Làm việc với những thành phần: • Văn bản • Hình ảnh Làm quen với CSS Khởi tạo CSS với Dreamweaver CS4 Bố cục trang web với CSS Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 3 HTML HTML – KHÁI NIỆM – CẤU TRÚC HTML là ngôn ngữ đánh dấu (không phải ngôn ngữ lập trình) - Hyper Text Markup Language Sử dụng cấu trúc thẻ để mô tả trang web (webpage: *.html) Thẻ HTML: Cấu trúc thẻ: <từ khóa> Thường đi theo cặp: <html> … </html> Nội dung của thẻ có thể là một đoạn ký tự hoặc một thẻ khác HTML là ngôn ngữ đánh dấu (không phải ngôn ngữ lập trình) - Hyper Text Markup Language Sử dụng cấu trúc thẻ để mô tả trang web (webpage: *.html) Thẻ HTML: Cấu trúc thẻ: <từ khóa> Thường đi theo cặp: <html> … </html> Nội dung của thẻ có thể là một đoạn ký tự hoặc một thẻ khác Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 5 Thẻ mở Thẻ đóng HTML – KHÁI NIỆM – CẤU TRÚC Cấu trúc trang HTML: <html > <head> <title>tiêu đề website</title> </head> <body> Văn bản và hình ảnh sẽ nằm ở đây … </body> </html> Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 6 <html > <head> <title>tiêu đề website</title> </head> <body> Văn bản và hình ảnh sẽ nằm ở đây … </body> </html> HTML – KHÁI NIỆM – CẤU TRÚC Phân cấp trong HTML <html> </html> <head> </head> <body> </body> Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 7 <title> </title> <p> </p> <br> <table> </table> Ví dụ: “Hello world” Ví dụ: “Hi!” HTML – LÀM VIỆC VỚI VĂN BẢN Thẻ tiêu đề: h1 h6 <hn>nội dung hiển thị</hn> n là số nguyên từ 1-6 Giống như định dạng Bullets trong word <html > <head> <title>Làm việc với tiêu đề</title> </head> <body> <h1>Tiêu đề cấp 1</h1> <h2>Tiêu đề cấp 2</h2> <h3>Tiêu đề cấp 3</h3> <h4>Tiêu đề cấp 4</h4> <h5>Tiêu đề cấp 5</h5> <h6>Tiêu đề cấp 6</h6> </body> </html> Thẻ tiêu đề: h1 h6 <hn>nội dung hiển thị</hn> n là số nguyên từ 1-6 Giống như định dạng Bullets trong word Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 8 <html > <head> <title>Làm việc với tiêu đề</title> </head> <body> <h1>Tiêu đề cấp 1</h1> <h2>Tiêu đề cấp 2</h2> <h3>Tiêu đề cấp 3</h3> <h4>Tiêu đề cấp 4</h4> <h5>Tiêu đề cấp 5</h5> <h6>Tiêu đề cấp 6</h6> </body> </html> HTML – LÀM VIỆC VỚI VĂN BẢN Thẻ đoạn văn: <p>nội dung hiển thị</p> <html > <head> <title>Thẻ đoạn văn</title> </head> <body> <h1>Đánh giá chi tiết HTC One X</h1> <p>Sau một năm ra nhiều sản phẩm, HTC bắt đầu thay đổi chiến lược. </p> <p>One X bắt đầu có mặt trên các kệ hàng ở mức giá 16,5 triệu. </p> </body> </html> Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 9 <html > <head> <title>Thẻ đoạn văn</title> </head> <body> <h1>Đánh giá chi tiết HTC One X</h1> <p>Sau một năm ra nhiều sản phẩm, HTC bắt đầu thay đổi chiến lược. </p> <p>One X bắt đầu có mặt trên các kệ hàng ở mức giá 16,5 triệu. </p> </body> </html> HTML – LÀM VIỆC VỚI VĂN BẢN Thẻ link (liên kết): Được định nghĩa thông qua thẻ <a>…</a> <html > <head> <title>Thẻ đoạn văn</title> </head> <body> <a href=“http://www.poly.edu.vn/”>Nhấn vào đây để chuyển tới trang web của Fpoly></a> </body> </html> Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 10 <html > <head> <title>Thẻ đoạn văn</title> </head> <body> <a href=“http://www.poly.edu.vn/”>Nhấn vào đây để chuyển tới trang web của Fpoly></a> </body> </html> [...]... Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 27 KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Thiết lập các giá trị liên quan Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 28 KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Kết quả: Chỉnh sửa style với bảng CSS STYLES: • Đây là bảng hiển thị toàn bộ thuộc tính của các thành phần trên web Slide 2 - HTML - Làm quen với CSS - Định. .. HTML Viết mã CSS Nội tuyến (inline) Viết trong một file css riêng biệt Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 31 KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Viết CSS trong cặp thẻ … Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 32 KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Viết CSS Inline thực hành với thẻ <h1> < /html> Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 33 KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Viết trong một file css riêng biệt: • Bước 1: khởi tạo một file css bằng cách lựa chọn File > New … lựa chọn CSS trong hộp thoại New Document Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web. .. the style. < /html> Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 20 KHÁI NIỆM Class: • Được sử dụng để áp dụng triệt để tính kế thừa • Bắt đầu bằng ký tự text_red {color:#F00; font-variant:small-caps} < /style> minh họa cho class < /html> Slide 2 - HTML - Làm quen với CSS - Định dạng. .. bố cục web 34 KHỞI TẠO CSS VỚI DREAMWEAVER CS4 • Bước 2: soạn thảo mã CSS cho thẻ , sau đó lưu file tại thư mục web (thư mục có chứa file html) Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 35 KHỞI TẠO CSS VỚI DREAMWEAVER CS4 • Bước 3: trong file html, viết lệnh để gọi file css WEB1 0 1-. .. quen với CSS - Định dạng style cho web & bố cục web 21 KHỞI TẠO CSS VỚI DREAMWEAVER CS4 KHỞI TẠO CSS VỚI DREAMWEAVER CS4 2 cách tạo CSS trong Dreamweaver: CSS Sử dụng môi trường Design với các bảng liên quan Sử dụng môi trường soạn thảo Code Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 23 KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Sử dụng môi trường Design với các bảng liên quan: 1... Làm quen với CSS - Định dạng style cho web & bố cục web 29 KHỞI TẠO CSS VỚI DREAMWEAVER CS4 • Ví dụ: nhấn chuột chọn nội dung thẻ , thuộc tính và giá trị style của thẻ sẽ được hiển thị trên bảng CSS STYLES Vùng hiển thị thuộc tính và giá trị Vùng chỉnh sửa giá trị của các thuộc tính Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 30 KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Sử dụng... Ô số 6 Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 14 HTML – LÀM VIỆC VỚI THẺ DIV Thẻ định nghĩa một bộ phần hoặc một phần trong tài liệu HTML Được sử dụng cho nhóm khối thành phần trên web, để dễ dàng tạo định dạng cho chúng Được sử dụng thường xuyên với CSS để tạo định dạng tiêu đề website nội... Milk Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web Định nghĩa bởi thẻ 12 HTML – LÀM VIỆC VỚI HÌNH ẢNH Chèn hình ảnh vào trang web: Đường dẫn tới ảnh: - ường dẫn tuyệt đối - Đường dẫn tương đối - Dạng link Xác định văn bản thay thế, nếu hình ảnh không hiển thị Hình minh họa: . trang web và làm việc với những thành phần trên trang web: văn bản, hình ảnh Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 2 MỤC TIÊU BÀI HỌC Làm quen với HTML: Khái. tạo CSS với Dreamweaver CS4 Bố cục trang web với CSS Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 3 HTML HTML – KHÁI NIỆM – CẤU TRÚC HTML là ngôn ngữ đánh dấu (không. BÀI 2 HTML - LÀM QUEN VỚI CSS – ĐỊNH DẠNG STYLE CHO TRANG WEB & BỐ CỤC TRANG WEB NHẮC LẠI BÀI TRƯỚC Những khái niệm về website: Thành phần của trang web Tên miền, địa chỉ IP Client – server Công
Ngày đăng: 23/05/2014, 17:19
Xem thêm: bài 2 html - làm quen với css – định dạng style cho trang web và bố cục trang web, bài 2 html - làm quen với css – định dạng style cho trang web và bố cục trang web
