HTML (Hyper Text Markup Language)

16 January, 2020

6m time read

HTML và CSS là những thứ cơ bản nhất của trang web. HTML nó là sương sống của trang web thì CSS nó là phần thịt của trang web. HTML là nội dung của trang web, CSS sẽ biến những nội dung đó đẹp hơn, trang trí nó.

Để tạo ra một trang web cơ bản, chỉ đề nhìn và đọc thôi thì chúng ta chỉ cần html và css thôi. Và để có thể code html và css thì rất là đơn giản, chúng ta chỉ cần code trên nodepad hay một phần mềm nào đó như là submit text, visual studio code, ... rồi để với đuôi .html rồi chạy nó lên là được. Nó sẽ hiện lên ngay trên trình duyệt của bạn.

Đầu tiên chúng ta tìm hiểu qua về HTML

HTML có rất là nhiều thẻ với rất nhiều chức năng khác nhau như là h1,video, audio, strong, input, div, span ... để mà kể hết ra thì rất là nhiều luôn.

Mình sẽ chỉ nên ra những thể HTML cơ bản và hay dùng nhất nha:

Các thẻ heading: <h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6> thì đây là các thẻ tiêu đề, các tiêu đề này in đậm và cơ chữ sẽ nhỏ dần từ h1 đến h6. Thường một page sẽ chỉ có 1 thẻ h1, vì kiểu như nó là tiêu đề bao quát cả page đó, h2 trở đi kiểu là các tiêu đề bé hơn trong page đó.
Các thẻ định dạng văn bản: <strong></strong>, <em></em>,<b></b>,<i></i>,<ins></ins>,<del></del>,... Có khá là nhiều thẻ để chúng ta định dạng chữ nào đó trong văn bản.
Các thẻ list: <ol> là danh sách có thứ tự, <ul> là danh sách không có thứ tự, bên trong sẽ là <li>. Một kiểu danh sách nữa là danh sách đinh nghĩa <dl> với thẻ tiêu đề <dt> định nghĩa với thẻ <dd>. Chúng ta cũng có thể có một kiểu lồng các danh sách lại với nhau.
Links: Link cho phép trang web của chúng ta có thể đi tới các trang web khác, cho phép đến phần khác của trang web, đến cửa sổ trình duyệt khác này,... Links chúng ta để trong thẻ <a> trích dẫn link với href="#", chúng ta cũng có thể gửi mail đến với href="mailto:#". Để có thể mở trong một trang mới ta thêm target="_blank".
Images: Để có thể thêm một hình ảnh vô trang web của bạn chúng ta có thể dùng thẻ <img> với src="Đường dẫn đến hình ảnh" alt="Chú thích khi không có hình ảnh" title="Chú thích khi di chuột đến hình ảnh", và chúng ta cũng có thể cân chỉnh size của bức ảnh với height và width, và cũng có thể căn chỉnh hình ảnh với align="left or right". Để hình ảnh hiển thị đẹp, đúng, không bị méo mó, biến dạng thì các bạn nên edit qua các phần mềm. Chúng ta có thể thêm các caption bên cạnh hình ảnh với thẻ <figure> bên trong là <img> là ảnh và <figcaption> là caption cho ảnh kia.
Tables: Để thêm một table to your web, chúng ta use <table> element , bên trong là <tr> là table row là hàng cho table, trong <tr> có <td> chứa nội dung cho từng cell trong table. Tiêu đề cho table có thẻ <th>, để ghép các cell lại với nhau ta có rowspan là cell dọc và colspan là cell ngang. Với những long table ta có <thread> element chứa các heading table, <tbody> element chứa body nội dung của table, <tfoot> element là chứa footer of table. Để định dang table chúng ta có width and cellpadding là khoảng cách giữa chữ và biên cell và cellspacing là khoảng cách giữa các cell. Chúng ta cũng có thể set border and background cho table với border="" và bgcolor="".
Forms: Để thêm một form vô your web, ta có <form> với action và method. Action là hành động nào đó mà chúng ta sử dụng cho form đó, cái này được viết bằng ngôn ngữ khác. Method có get và post , thì post sẽ có độ bảo mật hơn get khi mà post sẽ không để lại thông tin trong link dẫn còn get thì có. Đầu tiên là text input, với <input type="text">, name , size, và maxlength. Password input, với type="password". Text area với <textarea> với name , cols, rows để set độ rộng cho text area. Radio button với <input type="radio"> với name và value và checked để có thể tích hoặc không. Check box với <input type="checkbox"> cũng có các giá trị như radio. Drop down list box với <select> có name và <option> có value là từng cái trong list. Một kiểu nữa của select là multiple với multiple="multiple" có size và có thể chọn được nhiểu cái. File input với <input type="file"> có name. Submit button với <imput type="submit"> có name và value. Ta cũng có nút ảnh với <input type="image"> có src="link tới ảnh" và width height để set kích thước. Ta cũng có button với <button>, nó cho phép các element khác xuất hiện trong nó. Chúng ta có <label> có thể chứa bất cứ thứ gì trong đó. Chúng ta có thể để các thứ trong một khi dùng <fieldset> và <legend> là tiêu đề form bên trong. Chúng ta có thể gửi một message với required và code bằng javascript. Date input với <input type="date">. Ngoài ra cũng có input với type là email và url đẻ điền email và link và search để tìm gì đó với nút submit và có placeholder để hiển thị chữ trong search khi chưa nhập.
Comment:
Div, Span, Jframe thường được dùng để làm một phần nào đó của trang web.
Các kí tự đặc biệt: