Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 33 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
33
Dung lượng
601,92 KB
Nội dung
HTML CƠ BẢN 2 Mc tiêu bi hc Khi qut v HTML Vit mt ti liu HTML đơn gin S dng cc thẻ trong HTML Thực hnh tạo trang web trên Macromedia Dreamweaver 8.0 hoặc frontpage 3 Đặt vấn đề Hiển thị nội dung Web Trang web khác với các văn bn khác được tạo ra bởi Word, NotePad… Trang Web được thit k để có thể hiển thị được trên các trình duyt (Internet Explorer, Mozilla FireFox, Nestcape…) Các trình duyt sẽ dịch và hiển thị ni dung trang Web của bạn do nó được định dạng bằng ngôn ngữ HTML (HyperText MarkupLanguage). 4 Gii thiu HTML HTML (HyperText Markup Language) l mt ngôn ngữ đnh du siêu văn bn, được thit k ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web. Phiên bn chính thức mới nht của HTML là HTML 4.01 (1999). Sau đó, các nhà phát triển đã thay th nó bằng XHTML 5 XHTML là vit tắt của cm từ eXtensible HyperText Markup Language”, là ngôn ngữ đnh du siêu văn bn mở rng. XHTML là b thẻ mở rng của HTML theo kiểu XML (là ngôn ngữ đnh du mở rng, với cu trúc tự do, gồm các thẻ do người dùng tự định nghĩa). Gii thiu XHTML Gii thiu XHTML Các thẻ do người dùng tự định nghĩa được mô t trong mt tài liu mô t được gọi là DTD (Document Type Definition) Do tương thích với XML, XHTML vượt qua được những hạn ch của HTML (chỉ có thể s dng được các thẻ được quy định sẵn) và có thể mở rng thêm các thẻ Hin nay, HTML đang được phát triển tip với phiên bn HTML5 hứa hẹn mang lại din mạo mới cho Web 6 Gii thiu HTML(tt) S dng cc thẻ v cc phn t HTML, ta có thể : Điu khiển hnh thức v ni dung của trang Xut bn cc ti liu trực tuyn v truy xut thông tin trực tuyn bằng cch chn cc liên kt vo ti liu HTML Tạo cc biểu mu trực tuyn để thu thp thông tin v người dng, qun l cc giao dịch 7 8 Công c phc tho ni dung web: MockFlow, Pencil Project (miễn phí), Balsamiq Mockups… Công c đồ họa hỗ trợ vic thit k giao din: Photoshop CS3, Flash CS3… Trình soạn tho văn bn : Notepad, Frontpage 2003 hoặc Dreamweaver CS3 Trình duyt: Internet Explorer, fireFox, Chrome… Các công cụ khi thiết kế web 9 Tổ chức cu trúc thư mc cho website như đã học ở bài “Cc khái nim cơ bn” Dùng trình soạn tho trong Notepad, frontpage, hoặc dreamweaver, nhp các thẻ và các đoạn văn bn, lưu lại dưới dạng *.htm hoặc *.html Nạp lên trình duyt xem kt qu Quay lại trình soạn tho chỉnh sa, lưu lại sau đó trở lại trình duyt refresh (nhn F5) để xem kt qu. Lưu ý: HTML dùng để xác định cách trình bày văn bn chứ không điu khiển sự hiển thị văn bn ph thuc vào trình duyt. Các bưc thiết kế web 10 Cu trc ca mt ti liu HTML <html> <head> <! Tiêu đ chứa thông tin mở rng của ti liu, không hiển thị trên web- -> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <! Cc thẻ v ni dung hiển thị > </body> </html> Phần HTML Phần tiêu đề Phần thân [...]... Welcome to html My first html document < /html> 11 Hiển thị trang 12 Cấu trúc trang XHTML web. .. size=“4” color=“red”> Thẻ HTML được sử dụng để đánh dấu sự bắt đầu và kết thúc của tài liệu HTML < /html> 15 Thẻ HEAD Thẻ : Định nghĩa các mô tả về trang HTML Các thông tin này sẽ không hiển thị dưới dạng nội dung của trang web HEAD có thể chứa các thành phần: : Khai báo địa chỉ cơ bản cho file HTML : Đặt tiêu đề cho tài liệu : Các... một trang web 19 Thẻ BODY Thẻ : Xác định vùng thân của trang web, đây là phần mà các dữ liệu cùng với các thẻ HTML được dùng để định dạng một trang web đặt nền cho trang web, đặt thuộc tính nền là fixed : đặt màu nền 20 Các thẻ dùng cho việc chú thích Thẻ Để thêm những dòng chú... : Thành phần dùng để chỉ định địa chỉ cơ bản cho các mối nối liên kết , coi như đây là địa chỉ cơ bản cho các mối nối liên kết Ví dụ : Ngoài ra còn có một thẻ mở rộng : dùng để chỉ định frame mặc nhiên mà các đối tượng liên kết được nạp vào 17 Thẻ TITLE Thẻ : Mô tả tiêu đề của trang web, tiêu đề của trang thường được hiển... file HTML Nội dung văn bản nằm giữa "" sẽ được chương trình bỏ qua Cho phép có khoảng trắng giữa và >, nhưng không được có khoảng trắng giữa Giống thẻ , dùng để nhập những dòng ghi chú cho file HTML, đoạn text nằm giữa thẻ sẽ không được hiển thị khi trình duyệt đọc file 21 Thẻ tiêu đề Các thẻ HEADER: HTML có 6 mức chuẩn cho tiêu... mới Các thuộc tính : align="center/left/right/justify” nếu có dùng canh lề cho văn bản, Cú pháp: text 29 Ví dụ về đoạn văn bản Welcome to HTML This is going to be real fun Another paragraph element < /HTML> 30 Thẻ ngắt Thẻ Ngắt một đoạn văn bản và xuống một dòng mới. .. không phân biệt chữ thường và chữ hoa (đối với HTML) , tuy nhiên XHTML quy định các thẻ và thuộc tính phải viết chữ thường 14 Các thẻ trong HTML (tt) Một thẻ trong HTML bao gồm : Element – Nhận dạng thẻ (tag_name) Attribute – Mô tả thẻ/ thuộc tính thẻ Value – Giá trị được thiết lập cho thuộc tính, , XHTML quy định các giá trị thuộc tính phải... của cửa sổ hiển thị trang web Thông tin này cũng có thể được dùng bởi một số máy tìm kiếm để xây dựng chỉ mục cho các trang web Ví dụ: website tin tức thể thao 18 Thẻ META Thẻ : Dùng để khai báo loại font sử dụng, tìm kiếm, xóa cache, chuyển trang,… Ví dụ: ... thẻ HEADER Chào mừng bạn đến với Dreamwaver CS3 Chào mừng bạn đến với Dreamwaver CS3. Công cụ thiết kế Website trực quan. Cách nhanh nhất để bạn xuất bản thông tin của mình đến với mọi người... convert font cho web 24 Các thẻ định dạng văn bản Thẻ : Dùng tô đậm dòng văn bản được chỉ định Thẻ : Dùng in nghiêng dòng văn bản được chỉ định Cú pháp : text Thẻ : Dùng gạch chân dòng văn bản được chỉ định Cú pháp: text Cú pháp : text Thẻ hay : Tạo dấu gạch ngang giữa text Cú pháp text 25 Các thẻ định dạng văn bản Thẻ :