Home HTML căn bản Chapter 4: HYPERTEXT MARKUP LANGUAGE - HTML - Giáo trình HTML căn bản - Đại học Tây Đô March 07, 2023 Giáo trình hướng dẫn lập trình HTML căn bản theo chương trình Đại học.Chương 3: Hypertext Makup Language - Ngôn ngữ đánh dấu siêu văn bản>Click vào Đây để Tải vềkey: Chương 3 HYPERTEXT MARKUP LANGUAGE - HTML - • Giới thiệu ngôn ngữ HTML. • Bố cục một file html. • Các thẻ định dạng đoạn văn. • Thẻ tạo danh sách. • Thẻ chèn hình ảnh. • Thẻ tạo form nhập. • Thẻ tạo liên kết, đánh dấu trang. Ngôn ngữ HTML • Hyper Text Markup Language: ngôn ngữ đánh dấu siêu văn bản. • File HTML: file văn bản có chứa các thẻ (tag) đánh dấu, có phần mở rộng .html hoặc .htm • Trình duyệt web: trình thông dịch • Có thể soạn thảo bằng bất kỳ trình soạn thảo nào (notepad, FrontPage, Dreamweaver ...) Ngôn ngữ HTML – Điều khiển nội dung, hình thức trình bày của tài – Phạm vi hoạt động của lệnh được xác định bằng thẻ mở (<...>) và thẻ đóng (</...>) – Mức độ ảnh hưởng của lệnh lồng nhau: nếu công việc giống nhau thì lệnh nào gần text nhất sẽ được thực thi Bố cục một file HTML <html> đánh dấu bắt đầu và kết thúc tài liệu <head> các qui định chung của tài liệu <title>nội dung thanh tiêu đề</TITLE> <body> đánh dấu nội dung của tài liệu <p>........................</P> Định dạng đoạn văn bản Định dạng khối văn bản: • <p>: đánh dấu một đoạn văn bản – Thuộc tính cơ bản: align (canh lề) • <h...>: đánh dấu tiêu đề, size giảm từ 1- 6 • <pre>: giữ nguyên định dạng code • <blockquote>: đánh dấu đoạn trích dẫn • <div>: đánh dấu khối. Định dạng đoạn văn bản Định dạng đoạn văn bản không ảnh hưởng đến bố cục đoạn văn • <font>: định dạng font cho text • <u>: gạch dưới text • <i>: in nghiên text • <span>: đánh dấu text để định dạng chung Định dạng đoạn văn bản • <table>: đánh dấu kẻ bảng • <caption>: tên bảng • <tr>: đánh dấu kẻ dòng • <td>: đánh dấu kẻ ô (cột) • <th>: đánh dấu kẻ ô tiêu đề (in đậm, canh Các thuộc tính định dạng bảng – width: độ rộng của bảng – height: chiều cao của bảng – border: kẻ dòng trong bảng – cellpadding: khoảng cách giữa biên ô và text – cellspacing: khoảng cách giữa các ô. – valign: canh nội dung trong ô theo chiều đứng – colspan: mở rộng ô trên nhiều cột – rowspan: mở rộng ô trên nhiều dòng Danh sách (list) • Danh sách không thứ tự – <ul>: bắt đầu danh sách • Type: circle, square, disc – <li>: một mục trong danh sách Danh sách (list) • Danh sách có thứ tự – <ol>: bắt đầu danh sách • Type: a, A, I, I, default=number. • Start: số bắt đầu của danh sách – <li>: một mục trong danh sách Danh sách (list) • Danh sách định nghĩa – <dl>: bắt đầu danh sách – <dt>: từ cần định nghĩa – <dd>: nội dung định nghĩa Chèn hình ảnh <img src=“đường dẫn/tên file hình” alt=“ghi chú”> Form nhập liệu • Biểu mẫu (form) nhận thông tin từ người dùng • <form>: được sử dụng để tạo một vùng trên trang như một biểu mẫu – action = “URL”: địa chỉ nhận dữ liệu – method=“get/post”: cách thức truyền dữ liệu Các phần tử trong form • <input>: xác định loại và sự xuất hiện của ô nhập (điều khiển) trên form – type=“text, password, checkbox, radio, submit, reset, file, hidden hoặc button”: kiểu nhập liệu – name =“tên điều khiển”: hỗ trợ cho xử lý dữ liệu – value=“...”: giá trị ban đầu khi hiển thị của điều – size=“độ rộng của điều khiển”. Các phần tử trong form – maxlength=“chiều dài tối đa của text nhập vào điều – checked: trạng thái ban đầu của điều khiển là được chọn (đối với radio,checkbox) – src=“URL của hình ảnh”: trường hợp thay nút nhấn Các phần tử trong form • <button> text trên nút </button>: nút nhấn • <text area> giá trị ban đầu </text area>: tạo ô nhập nhiều cột nhiều dòng – cols: số cột, hay độ rộng của ô nhập – rows: số hàng ngang của ô nhập Các phần tử trong form • <select>: lập danh sách để chọn lựa – <option value=“giá trị truyền đi”>nội dung hiển thị • selected: xác định đây là phần tử được chọn ban đầu – <optgroup>: gom nhóm các phần tử trong danh < a href=“URL”>điểm nóng </a> – Áp dụng khi nội dung trang web quá dài, gồm 2 1. Đánh dấu trang: <a name=“tên dấu”></a> 2. Liên kết tới nơi được đánh dấu: < a href=“#tên dấu”>điểm nóng </a> – Điểm nóng: có thể là text hoặc hình ảnh
Post a Comment