Bài giảng HTML - World Wide Web

World Wide Web1. World Wide Web là gì ?2. World Wide Web làm việc như thế nào?WebBrowserWebServerYêu cầuKết quả(Trang html)3. Trình duyệt web (Web Browser) Trình duyệt là một dạng chương trình khách (client), nhận và hiển thị các trang web từ Server. Các trình duyệt thông dụng:Internet Explorer (IE)Netscape 4. Các ứng dụng trong thực tếQuảng cáo, kinh doanhMua bán trực tuyếnNguồn cung cấp tài liệuDiễn đàn (forum), tán gẫu (chat)Giải tríThương mại điện tử HTML1. HTML là gì?HTML là viết tắt của Hyper Text Markup Language_Ngôn ngữ đánh dấu siêu văn bản. HTML là một ngôn ngữ cơ sở để xây dựng các trang webHTML sử dụng các thẻ để định dạng, trình bày nội dung trên trang web.2. Môi trường soạn thảo tài liệu HTML	File HTML có thể được tạo từ các trình soạn thảo như: NotePad,WordPad,Hoặc các trình soạn thảo trực quan: Microsoft FrontPage, DreamWeaver, 3. Tìm hiểu các thẻ HTMLQui tắc viết thẻ HTMLThẻ HTML bao gồm một từ khóa nằm trong cặp dấu ngoặc nhọn:	Thẻ mở:	Thẻ đóng: Các thẻ không phân biệt chữ hoa, chữ thường.Các thẻ có thể nằm trên cùng một dòng hoặc khác dòng. 4. Cấu trúc tài liệu HTML	Dòng tiêu đề	 	Phần thân (Trình bày n/d chính)	 Ví dụ: 	Tieu de trang 	Chào mừng các bạn đã đến với HTML	Hy vọng bạn có những bài học bổ ích!	 5. Thẻ và các thuộc tínha. Thẻ : Ðịnh dạng cho 1 đoạn.  Ví dụ: Đoạn văn bản thứ nhấtĐoạn văn bản thứ hai. Thuộc tính: ALIGN=left/center/right: Canh lề văn bảng ... : Canh lề phảib. Thẻ : Thẻ nầy dùng để ngắt một đoạn văn và xuống hàng mới. Thí dụ: Chỉ có thuyền mới hiểuBiển mênh mông nhường nàoChỉ có biển mới biếtThuyền đi đâu về đâu. c. Thẻ : . Giá trị values từ 1-7. COLOR = #rrggbb (hay COLOR = color): Xác lập màu chữFACE=name [,name] [,name]: Chỉ định font chữ khi hiển thị text. Ví dụ:Văn bản d. Thẻ MARQUEEDirection: Xác định hướng chuyển động cho văn bản (left, right, up, down)Behavior="scroll/slide/alternate": Chỉ định kiểu chạy chữ. Scroll (mặc định)Slide: Trượt theo một hướng rồi dừng lạiAlternate: Đổi hướng khi chạm đường biên trình duyệt. Ví dụ:Hướng từ phải sangHướng từ phải sang và đổi hướng khi chạm vào biênđ. Đường kẻ ngang Thuộc tính:Width: Độ rộng đường kẻColor: Màu đường kẻSize: Độ rộng đường kẻKiểu chữKiểu in nghiêng:.. Kiểu in nghiêng:.. Kiểu gạch chân:.. e. Thẻ ImageCú pháp: Trong đó:URL: đường dẫn đến file ảnh. Width và height: chiều rộng và chiều cao của hìnhAlt=“Dòng chú thích cho hình”f. Thẻ BODY BACKGROUND: Dùng chỉ định file hình ảnh làm nền: BGCOLOR: Xác lập màu cho nền TEXT: Xác lập màu cho văn bàn g. Thẻ BODY   LEFTMARGIN: Canh lề trái. Thí dụ:  Tài liệu này sẽ cách lề trái cửa sổ trình duyệt 40 pixels TOPMARGIN: Canh lề trên. Thí dụ:  Tài liệu này sẽ cách lề trên cửa sổ trình duyệt 40 pixels h. Thẻ liên kết (A):Thẻ liên kết được sử dụng để tạo liên kết giữa các trang Cú pháp: Đầu mối liên kết i. Danh sách (List)Danh sách các bullet Mục 1Mục 2Mục ni. Danh sách (List)Thuộc tính:square: Hình vuôngdisc: Hình tròn tô đậmcircle: Hình tròn Danh sách các phần tử liên tụcMục 1Mục 2Mục nThuộc tính: Bảng	Nội dung ô 1 dòng 1	Nội dung ô 2 dòng 1		Nội dung ô 1 dòng 2	Nội dung ô 2 dòng 2	.1. Các thuộc tínha. Thẻ Border: Xác định độ dày đường viềnBorderColor: X/định màu cho đường viềnBgColor: Lót màu nền cho bảngBackground: Lót ảnh nền cho bảngWidth: Xác định độ rộng bảng (pixel, %)Align: Canh chỉnh bảng (left, center, right)CellSpacingCellPadding b. Thẻ , BgColor: Lót màu nềnBackground: Lót ảnh nềnAlign: canh chỉnh nội dung trong hàng hoặc cột (left, right, center)Valign: canh chỉnh nội dung trong ô (top, middle, bottom)Width: Xác định độ rộng cho cộtHeight: Xác định chiều cao hàngColspan: Dồn nhiều ô trên 1 hàng thành một ôRowspan: Dồn nhiều ô trên 1 cột thành một ôForm và các đối tượng trong form1. Chèn form vào trang:	Các đối tượng trong formTrong đó: Name: Đặt tên cho formMethod: Chỉ định phương thức gửi form (POST, GET)Action: Chỉ định trang sẽ tiếp nhận và xử lý form này 2. Các đối tượng trong forma. Hộp nhập liệuTrong đó:Type: Kiểu đối tượngName: Tên đối tượngsize: Xác định chiều dài của hộp Text (theo kí tự)Maxchar: Giới hạn số ký tự nhập b. Hộp mật khẩu:Trong đó:Type: Kiểu đối tượngName: Tên đối tượngsize: Xác định chiều dài của hộp Text (theo kí tự)c. Nút tuỳ chọn (Radio)Đây là dạng danh sách các chọn lựa, người sử dụng chỉ được chọn một trong số các tuỳ chọn này. Trong đó:Checked: Có thể có hoặc không, sử dụng khi cần chọn trước đối tượng d. Hộp kiểm (CheckBox):Đây là dạng tuỳ chọn, cho phép người dùng có thể chọn hoặc không chọn một (hoặc nhiều) mục cho trước.e. Vùng nhập liệu (TextArea)Trong đó:Cols: Xác định độ rộng của vùng nhập liệu (tính theo cột)Rows: Xác định chiều cao của vùng nhập liệu (tính theo hàng) f. Chèn danh sách chọn (Select)mục 1 mục 2  mục n Trong đó:Option: Thêm một hàng vào danh sáchSelected: Thiết lập tùy chọn mặc địnhg. Nút lệnh Submit: Gởi thông tin từ form đih. Nút lệnh Reset: Xóa thông tin trong form, đưa nó về trạng thái ban đầuDREAMWEAVER MMXI. GIỚI THIỆU Tự sinh mã HTMLMôi trường thiết kế WYSIWYG (What You See Is What You Get)Cung cấp nhiều khả năng thiết kế Hỗ trợ các tính năng JavascriptHỗ trợ nhiều tính năng đồ hoạ GIAO DIỆN CHƯƠNG TRÌNH I. GIỚI THIỆU Các thành phần:Vùng làm việc chính: là nơi cho phép thao tác, thiết kế trangBảng điều khiển đối tượng (Insert): Nơi cung cấp tất cả các đối tượng trên trang web (image, button, table, ...)Bảng thuộc tính (Properties): chứa tất cả các thuộc tính của đối tượng hiện hành Thanh Menu: nơi cung cấp mọi tính năng của chương trình GIỚI THIỆU Bảng điều khiển InsertBảng điều khiển PropertiesLưu ý:Gọi các bảng điều khiển trên bằng cách chọn Menu Window/tên bảng điều khiểnNhấn tổ hợp phím Ctrl+F2: Bật/tắt ĐK InsertNhấn tổ hợp phím Ctrl+F3: Bật/tắt ĐK 	PropertiesNhấn F4: Bật/tắt nhanh tất cả các bảng điều khiển đang có trên màn hìnhNhấn F12: Xem nhanh trang web trong cửa sổ trình duyệt Mở và lưu file (Chọn Menu File):Open: Mở một trang đã tồn tạiNew: Tạo trang mớiSave: Lưu trang hiện tại Save as: Lưu trang hiện tại với một tên khác Dòng tiêu đềẢnh nềnMàu nềnMàu chữIII. LÀM VIỆC VỚI VĂN BẢNSử dụng tổ hợp phím Shift + Enter để tạo ngắt dòng (), Enter để tạo ngắt đoạn ()a. Chọn font cho văn bản: Thiết lập font: Chọn Edit font List (bảng Properties)/Tìm font/nhấp Add/OkThiết lập font mặc định: Chọn Menu Edit/Preferences/Font/Chỉ định font/OkCác định dạng khác:Size: Kích thước văn bảnColor: Màu văn bảnĐậm, nghiêng, gạch chânCanh trái, phi, giữaTạo bullet, Index, ...Định dạngFont chữCở chữCanh lềTạo liên kếtTạo danh sáchb. Định nghĩa kiểu: Cho phép định nghĩa một kiểu cho trước để sử dụng lại nhiều lần khi cần.Thực hiện: Chọn Menu Text/HTML Style/định nghĩa & đặt tên cho kiểu/OkÁp dụng: Quét chọn đoạn văn bản cần định dạng/right click/HTML Style/Chọn tên kiểu đã định nghĩa IV. BỔ SUNG ĐỒ HOẠ Một số lưu ý khi sử dụng đồ hoạ:Chỉ nên sử dụng ảnh dạng nén (*.gif, *.jpg, *.jpeg), Cắt nhỏ các ảnh lớn, Dung lượng của ảnh < 25KbTổng dung lượng của trang < 150KbMột website được đánh giá tốt và cuốn hút người dùng chỉ khi trang web được thiết kế đẹp mắt và thời gian tải nhanh chónga. Chèn ảnh vào trang: Chọn Menu Insert/Image hoặc Chọn Insert Image trực tiếp từ bảng Insertb. Các thuộc tính:W(Width): Độ rộng hình ảnhH(Height): Chiều cao ảnhBorder: Xác định độ dày viền ảnhLink: Thiết lập liên kết cho hình ảnhAlt: Tạo ghi chú cho ảnh Các thuộc tính:-Vspace: Thiết lập khoảng trống phía trên & phía dưới ảnh-Hspace: Thiết lập khoảng trống phía trái & phía phải ảnh-Map: Công cụ cho phép tạo các điểm liên kết nóng trên hình ảnh (bản đồ ảnh)Reset Size: Trở lại kích thước ban đầu của ảnh V.THÊM CÁC HIỆU ỨNG CHO TRANG WEB Chèn văn bản Flash: Chọn Menu Insert/Interactive Image/Flash TextCác thuộc tính:- Color: Màu cho văn bảnBg Color: Thiết lập màu nền văn bản RollOver Color: Màu thể hiện khi rê chuột trên văn bản Link: Thiết lập liên kếtTarget: Xác định cách thức mở trang l/kếtSave As: Lưu thành tập tin flash (*.swf)2. Chèn nút lệnh Flash: Chọn Menu Insert/Interactive Image/Flash Button Style: Kiểu nút lệnh flash 3. Chèn một file Flash: Chức năng nhúng 1 file Flash đã có vào trang webChọn Menu Insert/Media/Flash/chỉ định file Flash/Ok 4. Tạo hiệu ứng hoán chuyển hình ảnh(SwapImage): thay đổi ảnh hiện tại bằng một hình ảnh khác khi rê chuột trên ảnhChọn Menu Insert/Interactive Images/RollOver ImagesCác thuộc tính:Original Image: Chọn ảnh nguồnRollOver Image: Chọn ảnh thay thế khi người dùng rê chuột trên đối tượngLink: Thiết lập liên kết cho ảnh