Giới thiệu chung

Nếu như các công cụ trên trình soạn thảo HTML-Editor không đủ để trình bày một bài viết theo ý tưởng của bạn, bạn sẽ cần chuyển sang biên tập ở chế độ mã code HTML </>.

Bài này đề cập 2 vấn đề: hướng dẫn cú pháp thông dụng (mã code HTML) và cách ẩn đi một số nội dung - không cho hiển thị trên một số thiết bị (đối với hệ Bootstrap 3 - loại mà Myy triển khai cho khách hàng).

Cú pháp của 1 Tags có 2 dạng

Nếu ta xem một trang web ở dạng view-source (trên trình duyệt), bạn sẽ thấy một nội dung HTML (toàn bộ là text, tác tags lồng nhau) dưới 2 dạng

Dạng 1 - có mở có đóng: <tagName class="" style="">...</tagName> loại này thường có chứa nội dung bên trong

Dạng 2 : <tagName class="" style=""> , ví dụ như <img src=...>, <br>, <hr>

Cả 2 dạng đều có cách khai báo class và style giống nhau. Ở bài viết này, chúng tôi hướng dẫn cho bạn cách khai báo trong class để tắt (ẩn đi) đối tượng đó trên các thiết bị màn hình và các cú pháp thông dụng của CSS để dùng cho style (gọi tắt là CSS - mục 3)

1- HTML Tags thông dụng

<div></div> : một khối

<span></span> : dùng để chứa một đoạn văn bản

<h1>...</h1> , <h2></h2> , <h3></h3> , <h4></h4>: Tiêu đề cấp 1,2,3,4.

<p>...</p> : đoạn văn bản

<a href=url>...</a> Gắn đường link url

<b>...</b>: In đậm

<i>...</i>: in nghiêng

<br>: xuống dòng

<hr>: Dòng kẻ ngang

<img src=image-url> chèn hình ảnh

Các HTML tags khác, xin tham khảo với đầy đủ các ví dụ trực quan:
https://www.w3schools.com/tags/default.asp

2- CSS  thông dụng / học qua ví dụ

CSS Sử dụng trên trình soạn thảo HTML Editor, thường dùng cách viết trực tiếp theo mẫu: 

<tagi style="các cú pháp CSS - viết cách nhau bới dấu chấm phẩy">

2.a Ví dụ CSS dùng cho văn bản (Font / Text): 

style="font-family:Tahoma; font-size:120%; font-style:italic;font-weight:bold;color:#ff0000;letter-spacing:2px;text-align:right;text-decoration:underline"

Giải thích: font: Tahoma, độ lớn chữ bằng 120%, in nghiêng, in đậm, màu đỏ - ff0000, các ký tự cách nhau 2pixel, canh lề phải, chữ có gạch chân.

2.b Ví dụ CSS dùng cho một đối tượng bất kỳ (bao gồm 3.a)

Ví dụ 1: Style="height:100px;width:150px" : Chiều cao 100pixel; rộng 150pixel

Ví dụ 2: Style="min-height: 100x; max-width:200px": Chiều cao tối thiểu và chiều dài tối đa..

Ví dụ 3: Style="background: #ff0000 url('/path/to/image.png'); background-repeat: no-repeat " : Màu nền đỏ, dùng hình /path/to/image.png làm hình nền

Ví dụ 4: Style="border: 1px solid #ff0000": Đường viền dày 1 pixel màu đỏ

Ví dụ 5: Style="margin: 1px 2px 3px 4px;padding: 5px 6px 7px 8px": Cách với bên ngoài (margin):1px 2px 3px 4px  (hướng trên, phải, dưới, bên trái) và nội dung bên trong cách đường viền 5px 6px 7px 8pixel (hướng trên, phải, dưới, bên trái)

Ví dụ 6: Style="float:right": trôi bềnh bồng phía bên trên -bên phải 

Chú ý: Tùy trường hợp mà ta chọn cách dùng phù hợp. Ví dụ một khối (div) thì có thể dùng tất cả cú pháp bên trên. Còn hình ảnh thì chỉ có thể dùng cú pháp margin,float,height,width mà không thể dùng cú pháp dạng fonts hoặc cú pháp padding, vì bên trong hình ảnh không chứa nội dung khác - Nếu bạn viết thừa thì nó sẽ không thực thi (HTML/CSS không bao giờ báo lỗi).

2.c Một ví dụ thực thế về CSS

Chèn 1 hình ảnh nằm bên phải một đoạn văn bản: Cả hình và văn bản nằm bên trong một khối. Khối này có viền dày 1px, màu nền đỏ (#ff0000), chữ bên trong màu xanh...

<div style="padding: 20px;background:#ff0000;color:blue;font-size:110%;border:solid 1px">
<img src=https://h.myy.vn/images/logo.png style="width:60px; float:right;margin: 0px 0px 20px 20px">

Bla bla Nội dung text ở đây, khoảng nửa trang A4 vậy. Nội dung text ở đây, khoảng nửa trang A4 vậy. Nội dung text ở đây, khoảng nửa trang A4 vậy. Nội dung text ở đây, khoảng nửa trang A4 vậy. Nội dung text ở đây, khoảng nửa trang A4 vậy. Nội dung text ở đây, khoảng nửa trang A4 vậy. Nội dung text ở đây, khoảng nửa trang A4 vậy. Nội dung text ở đây, khoảng nửa trang A4 vậy. Bla bla

</div>

3. Cách ẩn đi một số nội dung trên Bootstrap 3

Bootstrap 3 là một chuẩn framework để làm trang web responsive (tự co giãn theo mọi kích thước màn hình của từng loại thiết bị điện thoại, laptop vv). Cụ thể: có 4 loại màn hình xs, sm, md, lg (xs - bé- cỡ điện thoại, sm-small: nhỏ - cỡ máy tính bảng, md-medium: vừa - cỡ laptop 12 in, lg - large: lớn). Nếu ta muốn tắt đối tượng nào đối với một loại màn hình thì ta chỉ cần khai báo: class='hidden-xx'

Ví dụ: hình logo bên trên, sẽ ẩn đi trên điện thoại (xs) ipad (sm) thì ta sẽ khai báo:

<img src=https://h.myy.vn/images/logo.png style="width:60px; float:right;margin: 0px 0px 20px 20px" class="hidden-xs hidden-sm">

4. Link Tham khảo

Bảng mã màu : https://www.w3schools.com/colors/colors_picker.asp 

Tham khảo CSS: https://www.quackit.com/css/tutorial/ 

Tất cả về cú pháp HTML:  https://www.w3schools.com/tags/default.asp 

Trình soạn thảo để test: https://editor.w-r-v.com/