Lập trình Web - HTML cơ bản
Mục tiêu môn học
Cung cấp các kiến thức cơ bản về thiết kế web
HTML, CSS, JavaScript
Tìm hiểu các thành phần cơ bản của trang web
Các bước xây dựng trang web tĩnh
Xây dựng & triển khai trang web tĩnh.
Sử dụng công cụ thiết kế web phổ biến như
Dreamweaver, và các công cụ hỗ trợ khác như
photoshop, flash
Tóm tắt nội dung Lập trình Web - HTML cơ bản, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
256 màu GIF. Các file GIF được định dạng không phụ thuộc phần nền. JPEG (Joint PhotoGraphic Expert Group): có phần mở rộng .JPG, là loại ảnh nén mất thông tin, nghĩa là ảnh sau khi bị nén không giống như ảnh gốc. Tuy nhiên, trong quá trình phát lại thì ảnh cũng rõ gần như ảnh gốc. JPEG hỗ trợ hơn 16 triệu màu và thường được sử dụng cho các ảnh có màu thực. PNG (Portable Network Graphics): nén không mất dữ liệu. 44 thẻ chèn hình ảnh Cú pháp: URL: thường sử dụng địa chỉ tương đối Nếu hình chứa trong thư mục image và tập tin .htm chứa trong thư mục html thì địa chỉ của hình chèn có dạng Src=“../image/hinh1.gif” Nếu hình và tập tin .html chứa trong cùng một thư mục thì địa chỉ hình chèn có dạng: Src=“hinh1.gif” 45 Thẻ chèn hình ảnh - 46 Thẻ chèn hình ảnh Có thể chỉ xác định cho thuộc tính width hoặc height, khi đó thuộc tính còn lại sẽ được tính theo tỷ lệ Vd: kích thước ảnh là 200,100 nếu xác định width là 100 thì height sẽ được tính là 50! Giá trị URL của thuộc tính src Có thể dùng địa chỉ tương đối (không có tên miền, chỉ xác định tên thư mục và tên tập tin, nếu ảnh nằm trong site chứa trang web) Hay địa chỉ tuyệt đối (URL đầy đủ đến tập tin ảnh). 47 Thẻ chèn hình ảnh VD 48 Thẻ chèn hình ảnh Các hình ảnh nên lưu trong thư mục riêng (như thư mục image) 49 Thẻ chèn hình ảnh • Để hình ảnh xuất hiện riêng một dòng, ta chỉ cần thêm tag . • Ví dụ: 50 Thẻ chèn hình ảnh Khi thêm hai thuộc tính Width và height giúp cho web hiển thị nhanh hơn. <img src="Image/WTP6.jpg" width=300 height=200> <img src="Image/WTP9.jpg" width=200 height=120> 51 Thẻ chèn hình ảnh Sắp xếp hình ảnh với văn bản xung quanh Chèn ảnh vào giữa thì làm thế nào? 52 Thẻ chèn hình ảnh Đặt tag có canh lề trước tag trước tag align style: Left: hình ảnh chèn vào bên trái văn bản Center: hình ảnh chèn vào giữa văn bản Right: hình ảnh chèn vào bên phải văn bản 53 Thẻ chèn hình ảnh Sắp xếp trong hàng của văn bản và hình ảnh Trong đó: – Value có các giá trị sau: • Top: Dòng văn bản ngang với đỉnh của ảnh. • Middle: Dòng văn bản nằm khoảng giữa ảnh. • Bottom: Dòng văn bản bằng với đáy của ảnh. (luôn mặc định) 54 Thẻ chèn hình ảnh align=top 55 Thẻ chèn hình ảnh align=middle 56 Thẻ chèn hình ảnh align=bottom 57 Thẻ chèn hình ảnh • Ngoài ra ta có thể thêm từ khóa align=right/left vào trong tag . • Để có viền khung hoặc không, ta sử dụng khoá Border=N trong tag . – Trong đó N là số nguyên lớn hơn hoặc bằng 0, chỉ độ dày của viền khung. 58 Thẻ chèn hình ảnh • align="right" 59 Thẻ chèn hình ảnh align="left" 60 Thẻ chèn hình ảnh Khi sử dụng align = left/right, thì text sẽ wrap xung quanh ảnh cho đến phần cuối cùng của ảnh Muốn bỏ tác dụng này dùng 61 Các ký tự đặc biệt 62 Thiết kế bảng 63 Thiết kế bảng - thuộc tính thẻ Table 64 Thiết kế bảng - thuộc tính thẻ 65 Thiết kế bảng - thẻ , 66 Thiết kế bảng 67 Dùng table để trình bày trang Bảng thường được dùng để trình bày bố cục (layout) trang web Dùng table để thiết kế một trang thể hiện văn bản dạng cột báo chí, phân trang thành các vùng có chủ đề khác nhau Mỗi cell trong table có thể sử dụng bất cứ tag HTML. Chèn một danh sách có thứ tự trong cell Chèn một tag Hoặc chèn một table vào trong cell 68 Dùng table để trình bày trang Tạo một trang có một dòng và 2 cột Phần danh mục liên kết Bảng 2 69 Dùng table để trình bày trang Table 2 chèn logo Nội dung 2 Nội dung 1 Nội dung 3 70 Dùng table trình bày trang Kết quả trình bày khi ghép lại Bố cục của một trang web 71 Dùng table trình bày trang Thiết kế mẫu sau 1 2 3 4 5 6 72 Frame Mở rộng khả năng hiển thị trang web bằng cách cho phép chia miền hiển thị thành nhiều vùng Vùng được chia gọi là frame, có đặc điểm sau: Có thể truy cập đến URL độc lập với frame khác Có thể thay đổi kích thước khung nhìn, hoặc không cho phép thay đổi đối với user Trong trang đã dùng frame thì không có tag body 73 Frame Cú pháp của Frame 74 Frame Thẻ Frameset <Frameset rows = "n1, n2, ... " cols = "m1, m2, ..." border = "N" framespacing = "N" bordercolor = #xxyyzz frameborder = "yes/no"> rows: chỉ chia hàng, tuỳ theo tham số. cols: chỉ chia cột, tuỳ theo tham số. border: độ dày đường viền. framespacing: khoảng cách các frame. 75 Frame n1, n2, m1, m2, ...: là giá trị thuộc tính được tính bằng pixel hoặc phần trăm tương đối. Và có thể là dấu '*', frame tương ứng sẽ tự động điều chỉnh. N: là độ dày tương ứng với các thuộc tính. frameborder: thiết lập đường viền cho toàn bộ tập frame, có giá trị yes hoặc no. 76 Frame Ví dụ chia thành 2 hàng, hàng thứ nhất chiếm 30% màn hình, còn lại là hàng thứ 2. chia 3 cột, cột thứ 2 có độ rộng 100 điểm, các cột còn lại sẽ tự động phân chia. <frameset rows = "30%, *" border=0 framespacing = 5 frameborder = 0>: đặt đường viền, khoảng cách, ... 77 Frame Thẻ frame Cú pháp <frame src="URL" name="tên cửa sổ" with = "N" height = "M" scrolling = "yes/no/auto" frameborder = "yes/no" framespacing = "N" bordercolor = #xxyyzz noresize > 78 Frame – noresize: nếu có thuộc tính này thì người sử dụng không thể thay đổi kích thước hiển thị frame. – name: gán một tên cho một frame, nó có thể làm đích cho các liên kết từ các tài liệu khác. – with: chiều rộng frame. – height: chiều cao frame. – scrolling: đặt thuộc tính thanh cuốn. 79 Frame VD tạo trang web có 4 frame như sau 80 Frame Phần HTML của trang chính Trình duyệt không hỗ trợ Frame Tạo các trang con Header.html, left.html, main.html, footer.html 81 Frame Thiết kế frame có dạng sau 82 Frame Thiết kế frame có dạng sau 83 Form Form dùng để nhận thông tin từ người sử dụng hay phản hồi thông tin về người sử dụng. Người dùng có thể có các yêu cầu Nhập vào câu trả lời, ý kiến Chọn câu trả lời từ danh sách Chọn câu trả lời từ một hoặc một số tùy chọn Dữ liệu có thể xử lý tại client hoặc có thể xử lý ở server. Sau đó kết quả trả về cho người dùng. Sử dụng tag để tạo form trong trang web 84 Form Thuộc tính của tag form 85 Form Phương thức HTTP (HTTP methods) Post: dữ liệu chứa trong phần thân của request Get: dữ liệu được gởi kèm theo URL được mô tả trong action, có dạng sau URL?name1= value1& name2=value2 Lưu ý: Khi dùng Get, tất cả thông tin thu được sẽ hiển thị lên address bar Thường dùng get khi cần bookmark trang hiện hành do các thông tin cần lấy không mang tính quan trọng, bảo mật. Post thường được dùng để che dấu thông tin 86 Form 87 Form Textbox TextArea 88 Form Textbox, passwordBox, Reset, Submit Button FileField 89 Form RadioButton CheckBox 90 Form ComboBox ListBox 91 Form FieldSet: nhóm các đối tượng giống nhau vào một phần logic Chú thích Các thành phần trong nhóm Tag legend: tạo chú thích của nhóm Cho phép canh lề chú thích 92 Form Position Application for the post of: <INPUT name= 'name' type= 'text' tabindex= '1'> Educational Qualifications <INPUT name= 'qualif' type='radio' value= 'grad' tabindex= '5'> Graduate <INPUT name= 'qualif' type='radio' value='postgrad' tabindex='5'> Postgraduate 93 Form Kết quả 94 Form Tạo form có dạng sau Form cho phép user nhập vào các thông tin và hiển thị lại các thông tin user đã nhập. 95 Form Nhập liệu 96 XHTML XHTML = EXtensible HyperText Markup Language XHTML là sự kết hợp giữa HTML và XML XHTML gồm tất cả các phần tử (element) trong HTML 4.1 và được kết hợp theo cú pháp của XML 97 Tại sao sử dụng XHTML Vì XHTML là sự kết hợp giữa HTML và XML, do đó tài liệu XHTML chính là một tài liệu HTML nhưng được bổ sung thêm sự chặt chẽ trong cú pháp của XML (đảm bảo cấu trúc của trang web luôn thoả điều kiện “well- formed”) Trình duyệt có thể sẽ hiển thị trang XHTML nhanh hơn trang HTML (vì không mất thời gian để kiểm tra và sửa lỗi “well-formed”) 98 Well-formed element Đối với các phần tử có chứa nội dung, phải có đầy đủ thẻ mở và thẻ đóng. Đối với các phần tử rỗng, phải được thêm vào ký tự kết thúc “/”. Các thẻ lồng nhau phải đúng trật tự, không chồng lấp lên nhau. Thỏa well-formed element Không thỏa well-formed element wrong 99 Well-formed document Các phần tử phải well-formed Tồn tại phần tử đơn, xem như phần tử gốc, chứa tất cả các phần tử khác Normal emphasized strong emphasized strong Normal emphasized strong emphasized strong Alternatively emphasized strong emphasized strong 100 So sánh HTML vs XHTML XHTML Các thẻ lồng nhau phải đúng trật tự Các thẻ và các thuộc tính của các phần tử cần phải được viết bằng chữ thường Các thuộc tính của các phần tử phải được đóng nháy kép. Ví dụ: Không cho phép giản lược các thuộc tính. Ví dụ trong HTML có thể viết nhưng trong XHTML cần phải được viết lại và phải được đóng bằng thẻ 101 So sánh HTML vs XHTML Các thẻ được gọi là noempty cần phải được đóng bằng một thẻ đóng. Những thẻ không gọi là noempty như có thể được đóng bằng một thẻ hoặc nếu không phải được viết . Thuộc tính name được thay thế bằng thuộc tính id Phải có khai báo DOCTYPE trước thẻ 102 Cấu trúc tối thiểu tập tin XHTML Title goes here Body text goes here 103
File đính kèm:
HTML cơ bản.pdf
