NTM Solutions

Facebook Youtube Google+

Thứ Hai, 5 tháng 12, 2016

Tự học HTML - Bài 25 - Các thuộc tính trong FORM

Thuộc tính value

Thuộc tính value xác định giá trị ban đầu cho 01 ô nhập liệu.

Ví dụ

<form action=""> First name:<br> <input type="text" name="firstname" value="John"> </form>Try it Yourself »

Thuộc tính readonly

Thuộc tính readonly xác định rằng 01 ô nhập liệu là chỉ đọc (không sửa được).

Ví dụ

<form action=""> First name:<br> <input type="text" name="firstname" value="John" readonly> </form>Try it Yourself »

Thuộc tính disabled

Tự học HTML - Bài 24 - Xử lý kiểu nhập liệu

Bài này mô tả các kiểu nhập liệu khác nhau trong thẻ <input>.

Kiểu nhập liệu văn bản

<input type="text"> xác định 01 vùng nhập liệu có 01 dòng:

Ví dụ:

<form>
  First name:
<br>
  
<input type="text" name="firstname"><br>
  Last name:
<br>
  
<input type="text" name="lastname">
</form>Try it Yourself »
Đây là hình ảnh hiển thị trên trình duyệt:



Kiểu nhập liệu Password

Tự học HTML - Bài 23 - Xử lý các phần tử trong FORM

Các phần tử trong Form HTML

= bao gồm HTML5.
Thẻ
Mô tả
Xác định 01 form HTML để người dùng nhập liệu
Xác định 01 điều khiển nhập liệu
Xác định 01 điều khiển nhập liệu có nhiều dòng.
Xác định 01 nhãn cho phần tử <input>
Nhóm các phần tử liên quan trong 01 form.
Xác định tiêu đề cho 01 phần tử <fieldset>
Xác định 01 menu sổ xuống.
Xác định 01 nhóm các tùy chọn liên quan trong 01 menu sổ xuống.
Xác định 01 tùy chọn trong 01 menu sổ xuống.
Xác định 01 nút bấm.
Xác định 01 danh sách các tùy chọn cho các điều khiển nhập liệu.
Xác định a key-pair generator field (for forms)
Xác định kết quả của 01 phép tính.

Bài này mô tả tất cả phần tử trong form HTML.

Phần tử <input>

Phần tử form quan trọng nhất là <input>.
Phần tử <input> có thể hiển thị bằng nhiều các, tùy vào thuộc tính attribute.
Tất cả các thể loại input sẽ được đề cập trong bài tiếp theo.

Phần tử <select>

Tự học HTML - Bài 22 - Xử lý FORM

Các thuộc tính của thẻ <form>:
Thuộc tính
Mô tả
accept-charset
Xác định bộ ký tự sử dụng trong form submit (mặc định: bộ ký tự của trang).
action
Xác định 01 địa chỉ (url) nơi form sẽ được gửi tới (mặc định: trang chứa form submit).
autocomplete
Xác định thuộc tính autocomplete của form (mặc định: on).
enctype
Xác định việc mã hóa của dữ liệu submit (mặc định: url-encoded).
method
Xác định giao thức HTTP dùng khi gửi form (mặc định: GET).
name
Xác định tên dùng để định danh form (dùng truy cập DOM: document.forms.name).
novalidate
Xác định trình duyệt không kiểm tra giá trị của form.
target
Xác định địa chỉ mục tiêu trong thuộc tính action (mặc định: _self).
Bạn sẽ học nhiều hơn về các thuộc tính forrm trong bài tiếp theo.lf »

Thẻ <form>

Chủ Nhật, 4 tháng 12, 2016

Tự học HTML - Bài 20 - Ký tự đặc biệt và biểu tượng

Ký tự đặc biệt trong HTML
01 vài ký tự đặc biệt trong HTML như dấu < hay > nếu xuất hiện trong văn bản có thể làm trình duyệt nhầm lẫn với thẻ tag.
Tổ hợp ký tự được dùng thay thế cho các ký tự đặc biệt như vậy.
01 tổ hợp ký tự sẽ trông như thế này:
&tên;
HOẶC
&#mã số;
Để hiển thị dấu (<) chúng ta phải gõ: &lt; hoặc &#60;
Tên thì dễ nhớ hơn nhưng không phải ký tự đặc biệt nào cũng được trình duyệt hỗ trợ như thế.Trong khi mã số sẽ được trình duyệt hỗ trợ toàn bộ.

Dấu khoảng trắng

01 tổ hợp ký tự thường được dùng trong HTML là dấu khoảng trắng: &nbsp;
01 dấu khoảng trắng sẽ không tạo ngắt (xuống hàng) dòng mới.
01 khoảng trắng xuất hiện giữa 02 từ sẽ không tạo xuống dòng.
Ví dụ:
  • § 10
  • 10 km/h
  • 10 PM

Tự học HTML - Bài 19 - Xử lý hiển thị trên các thiết bị

Thiết kế trang web có thể tương tác là gì?

Trang web được thiết kế tương tác làm cho nó có thể hiển thị tốt trên nhiều môi trường thiết bị khác nhau. (desktops, máy tính bảng, và điện thoại).
Thiết kế web tương tác là sử dụng CSS và HTML để định lại kích thước, ẩn, co lại, phóng lớn, hoặc di chuyển nội dung làm nó vừa với nhiều cỡ màn hình:




Tự thiết kế web tương tác

Tự học HTML - Bài 18 - Xử lý LAYOUT

Ví dụ về HTML Layout

elf »


Phần tử trong HTML Layout

Các trang web hiện nay thường hiển thị nội dung trên nhiều cột (như các trang tin tức).
HTML5 đưa ra định nghĩa mới về các phần trên trang web :

  • <header> - Định phần đầu của trang web
  • <nav> - Định phần chứa các liên kết điều hướng(menu)
  • <section> - Chứa các phần văn bản
  • <article> - Chứa mục bài viết
  • <aside> - Chứa phần thanh 02 bên trái và phải
  • <footer> - Chứa phần cuối trang web
  • <details> - Chứa các chi tiết bổ sung
  • <summary> - Chứa tiêu đề của phần <details>

Các kỹ thuật trong HTML

Có 04 kỹ thuật để tạo trang web có nhiều cột. Mỗi cách đều có ưu và nhược:
  • Bảng HTML
  • Dùng thuộc tính CSS float
  • CSS framework
  • CSS flexbox

Tự học HTML - Bài 17 - Thẻ HEAD

Các phần tử trong thẻ <head>

Thẻ
Mô tả
Xác định thông tin về trang web
Phần tiêu đề trang web hiển thị trên trình duyệt (thanh tiêu đề)
Xác định địa chỉ mặc định hoặc 01 target cho tất cả liên kết trên trang web.
Xác định liên kết giữa 01 văn bản và 01 tài liệu bên ngoài.
Xác định metadata về 01 tài liệu HTML.
Xác định 01 đoạn script trên máy người dùng.
Định kiểu dáng cho trang web.

Thẻ <head> là thẻ chứa thông tin metadata (thông tin dữ liệu) và được đặt giữa thẻ <html> và thẻ <body>.
HTML metadata chứa thông tin về văn bản HTML. Metadata không được hiển thị trên trình duyệt web.
Metadata thường dùng xác định tiêu đề, kiểu ký tự, kiểu định dạng, liên kết, scripts, và các thông tin meta khác.
Các thẻ sau thường được dùng trong phần metadata: <title>, <style>, <meta>, <link>, <script>, và <base>.

Tự học HTML - Bài 16 - Giới thiệu JavaScript

Thẻ Script

Thẻ
Mô tả
Xác định 01 đoạn script chứa trong máy người dùng web.
Xác định 01 đoạn script hoán đổi.

JavaScript làm cho trang web "động" và tương tác được với người dùng.

Thẻ <script>

Dùng để xác định 01 đoạn script trên máy người sử dụng (JavaScript).
Thẻ <script> cùng được dùng để trỏ đến 1 file script lưu riêng.
Tác dụng của JavaScript thường để xử lý hình ảnh, xác minh các giá trị trong form, và các nội dung động.
Đoạn JavaScript sau sẽ viết ra màn hình câu "Hello JavaScript!" tại thẻ HTML có thuộc tính id="demo":

Ví dụ:

<script>
document.getElementById(
"demo").innerHTML = "Hello JavaScript!";</script>Yourself »

Tự học HTML - Bài 15 - Xử lý khung Iframe

Iframe thường dùng để chứa 1 trang web bên trong 1 trang web khác.

Cú pháp Iframe

<iframe src="URL"></iframe>
Thuộc tính src xác định đường dẫn URL (địa chỉ trang web) của dòng chứa iframe.

Iframe – Thiết lập chiều cao và chiều rộng

Dùng thuộc tính height và width để định kích thước của iframe.
Giá trị 02 thuộc tính này được xác định bằng pixels, nhưng cũng có thể được định bằng %

Tự học HTML - Bài 14 - Xử lý khối văn bản

Các thẻ nhóm

Thẻ
Mô tả
Xác định 1 khối văn bản (block-level)
Xác định 1 dòng văn bản (inline)

Giá trị mặc định về mặt hiển thị của phần lớn các thẻ HTML là block hoặc inline.

Các thẻ cấp độ Block-level

Một phần tử block-level luôn bắt đầu bằng 1 dòng mới kéo dài đến hết dòng từ trái qua phải.
The <div> element is a block-level element.
01 vài phần tử cấp độ block-level
  • <div>
  • <h1> - <h6>
  • <p>
  • <form>

Tự học HTML - Bài 13 - Xử lý danh sách

Trong bài này chúng ta sẽ học các mục sau:
  • Dùng thẻ <ul> để định danh sách không có thứ tự.
  • Dùng thuộc tính CSS list-style-type để xác định kiểu gạch đầu dòng.
  • Dùng thẻ <ol> để định danh sách có thứ tự.
  • Dùng thuộc tính type để định kiểu số thứ tự.
  • Dùng thuộc tính <li> để định phần tử của danh sách.
  • Dùng thẻ <dl> để định danh sách mô tả.
  • Dùng thẻ <dt> để định tên các mục.
  • Dùng thẻ <dd> để định phần mô tả.
  • Danh sách có thể chứa 1 hay nhiều danh sách con.
  • Các mục trong danh sách có thể chứa các thẻ HTML khác.
  • Dùng thuộc tính CSS float: left hoặc display:inline để định 1 danh sách nằm ngang( ví dụ như kiểu danh sách menu của trang web).

Ví dụ về danh sách:
Danh sách có thứ tự:
1.Tèo
2.Tí
3.Tủn

Danh sách không có thứ tự:
  • Item
  • Item
  • Item
  • Item

Tự học HTML - Bài 12 - Xử lý DẠNG BẢNG

Trong bài này chúng ta sẽ học những phần sau:
  • Dùng thẻ <table> để chèn 01 bảng.
  • Dùng thẻ <tr> để chèn dòng trong bảng.
  • Dùng thẻ <td> để xác định ô chứa dữ liệu trong bảng.
  • Dùng thẻ <th> để chứa dòng tiêu đề của bảng.
  • Dùng thẻ <caption> để chứa phần đầu đề của bảng.
  • Sử dụng thuộc tính CSS border để định dạng đường viền của bảng.
  • Dùng thuộc tính CSS border-collapse tạo đường viền đơn.
  • Dùng thuộc tính CSS padding để thụt lề cho ô.
  • Dùng CSS text-align canh lề cho chữ trong ô.
  • Dùng CSS border-spacing để thiết lập khoảng cách giữa các ô.
  • Dùng thuộc tính colspan để nhập nhiều cột trong 1 ô.
  • Dùng thuộc tính rowspan để nhập nhiều dòng trong 1 ô.
  • Dùng thuộc tính id để gán id cho bảng

Ví dụ về Bảng

Họ tên
Lớp
Môn học
Nguyễn Tèo
TH001
Thổi sáo
Phạm Tí
TH001
Guitar
Lâm Văn Tồ
TH001
Piano
Ngọc Oanh
TH002
Harmonica
Leo
TH003
Trống Canyon
Augusta
TH003
Đàn tỳ bà

TỰ HỌC HTML – BÀI 11 – XỬ LÝ HÌNH ẢNH

Trong bài chúng ta sẽ học những mục sau:
  • Dùng thẻ <img> để chèn 01 hình ảnh vào tài liệu HTML.
  • Dùng thuộc tính src to define the URL of the image
  • Dùng thuộc tính alt để xác định dòng chữ thay thế cho 01 tấm ảnh nếu nó bị lỗi không hiển thị được.
  • Dùng thuộc tính width và height để định kích thước hình ảnh.
  • Dùng thuộc tính CSS width và height để định kích thước ảnh.
  • Dùng thuộc tính CSS float để làm cho hình "nổi lên".
  • Dùng thẻ <map> để làm 1 "bản đồ hình"
  • Dùng thẻ <area> để xác định khu vực có thể bấm chuột trong bản đồ hình.
  • Dùng thuộc tính usemap trong thẻ <img> để trỏ tới 1 bản đồ hình.
Ghi chú:Việc tải hình ảnh rất mất thời gian. Hình ảnh có dung lượng lớn có thể làm chậm trang web của bạn.Nên cân nhắc khi sử dụng hình ảnh.

Thứ Bảy, 3 tháng 12, 2016

TỰ HỌC HTML – BÀI 10 – SIÊU LIÊN KẾT

Trong bài này chúng ta sẽ học những mục sau:
  • Dùng thẻ <a> để tạo 1 liên kết.
  • Dùng thuộc tính href để xác định địa chỉ liên kết.
  • Dùng thuộc tính target để định nơi mở tài liệu.
  • Dùng thẻ <img> (bên trong <a>) để dùng hình ảnh như 1 liên kết.
  • Dùng thuộc tính id (id="giá trị") để tạo đánh dấu trong 1 trang.
  • Dùng thuộc tính href (href="#giá trị") để liên kết đến phần đánh dấu.

Hầu như trang web nào cũng có 1 vài liên kết. Liên kết giúp người dùng di chuyển từ trang này đến trang khác nhanh chóng.

Siêu liên kết

Nhừng liên kết đến các trang HTML được gọi là siêu liên kết.
Bạn có thể bấm chuột (trái) lên 1 liên kết và "nhảy" đến 1 tài liệu khác.
Ghi chú: 1 liên kết không nhất thiết phải là chữ. Liên kết có thể là ảnh hoặc bất kỳ đối tượng HTML nào.

Tự học HTML - Bài 9 - HTML vs CSS

Trong bài này chúng ta sẽ học những mục sau:
  • Sử dụng thuộc tính style bên trong thẻ HTML.
  • Sử dụng thẻ <style> để khai báo CSS nội bộ.
  • Sử dụng thẻ <link> để khai báo tham chiếu đến CSS file.
  • Khai báo trong thẻ <head> 2 thẻ CSS <style> và <link>
  • Sử dụng CSS để định màu chữ.
  • Sử dụng CSS để định kiểu chữ.
  • Sử dụng CSS định cỡ chữ.
  • Sử dụng CSS để tạo đường viền.
  • Sử dụng CSS để thụt lề trong đường viền.
  • Sửu dụng CSS để canh lề.

Định kiểu dáng trong HTML với CSS

CSS (Cascading Style Sheets)
CSS mô tả cách các thẻ HTML hiển thị trên trình duyệt, giấy, hoặc các thiết bị khác.
CSS tiết kiệm rất nhiều công sức. Nó có thể điều khiển giao diện của nhiều trang web 1 lúc.
CSS có thể thêm vào HTML bằng 3 cách sau:
  • Bên trong thẻ tag – thông qua sử dụng thuộc tính style của thẻ.
  • Nội bộ – sử dụng thẻ <style> khai báo trong thẻ <head>
  • Ngoại vi – tham chiếu đến 1 file CSS
Cách thông dụng nhất để thêm CSS là dùng 1 file có đuôi .css lưu trữ riêng ra( cách số 3).Tuy nhiên ở đây trong các ví dụ chúng ta thường dùng cách 1 và 2 cho dễ thao tác và quan sát.
Ghi chú:Tôi sẽ có bài viết riêng chuyên về CSS sau.

TỰ HỌC HTML – BÀI 8 – MÀU SẮC

Trong HTML, 1 màu sắc có thể được xác định bằng 3 cách:
  1. Tên màu
  2. Số hệ RGB
  3. Số hệ HEX

Tên màu sắc

Ví dụ

Màu
Tên

Red

Orange

Yellow

Cyan

Blue

TỰ HỌC HTML – BÀI 7 – TRÍCH DẪN – MÃ CODE – GHI CHÚ

HTML Quotation and Citation Elements

Tên thẻ
Mô tả
Xác định 1 từ viết tắt.
Xác định thông tin liên hệ của tác giả bài viết
Định chiều của văn bản?
Xác định 1 đoạn văn được trích dẫn từ 1 trang khác
Xác định tiêu đề công việc
Xác định 1 đoạn trích dẫn ngắn

TỰ HỌC HTML – BÀI 6 – ĐỊNH DẠNG

HTML Định dạng chữ

Dùng các thẻ sau đây để định dạng chữ
  • <b> - Chữ đậm
  • <strong> - Chữ quan trọng
  • <i> - Chữ nghiêng
  • <em> - Chữ nhấn mạnh
  • <mark> - Chữ đánh dấu
  • <small> - Chữ nhỏ
  • <del> - Chữ đã bị xóa
  • <ins> - Chữ chèn
  • <sup> - Chữ nhỏ lên trên
  • <sub> - Chữ nhỏ xuống dưới

TỰ HỌC HTML – BÀI 5 – ĐỊNH KIỂU

Trong HTML có thể dùng thuộc tính để tạo các kiểu và định dạng như sau:

  1. Dùng thay đổi thuộc tính style trong các thẻ HTML.
  2. Dùng thay đổi màu nền background-color.
  3. Dùng thay đổi màu chữ text colors.
  4. Dùng thay đổi kiểu chữ FONT.
  5. Dùng thay đổi cỡ chữ.
  6. Dùng thay đổi canh lề.

Thuộc tính Style trong thẻ HTML

Ta có thể thiết lập thuộc tính style của 1 thẻ HTML theo cú pháp sau:
<tenthe style="thuộc tính:giá trị;">
Thuộc tính chính là thuộc tính trong CSS. Giá trị chính là giá trị trong CSS.
Phần CSS tôi sẽ có 1 bài viết riêng.

TỰ HỌC HTML – BÀI 4 – TIÊU ĐỀ VÀ ĐOẠN VĂN

HTML Tiêu đề

Tiêu đề của đoạn văn được xác đinh bằng các thẻ từ <h1> đến <h6
<h1> xác định tiêu đề quan trọng nhất (size lớn nhất) của đoạn văn. <h6> xác định tiêu đề ít quan trọng nhất của đoạn văn (size nhỏ nhất).

Ví dụ:

Gõ đoạn mã HTML sau nằm trong cặp thẻ <body>
<h1>Tiêu đề 1</h1>
<h2>Tiêu đề 2</h2>
<h3>Tiêu đề 3</h3>
<h4>Tiêu đề 4</h4>
<h5>Tiêu đề 5</h5>
<h6>Tiêu đề 6</h6>Try it Yourself »
Chú ý: Trình duyệt sẽ tự động thêm vài ký tự khoảng trắng ở trước và sau tiêu đề .