1. HTML là gì?
1.1. HTML là một ngôn ngữ có thể sử dụng để trình bày thông tin lên internet. Những gì bạn nhìn thấy ở một trang web trên Internet chính là sự biên dịch HTML của trình duyệt
1.2. Ý Nghĩa
1.2.1. HTML là chữ viết tắt của “HyperText Mark-up Language” – “Ngôn ngữ đánh dấu siêu văn bản”. Cụ thể:
1.2.1.1. Hyper chỉ thứ có tính chất vượt trội bất thường, phát triển trên mức bình thường hay vắn tắt là “siêu”.
1.2.1.2. Text là chữ, văn bản.
1.2.1.3. Mark-up là cách đánh dấu văn bản hay chữ, như tô đậm đoạn chữ, hay đánh dấu một đoạn chữ làm tiêu đề.
1.2.1.4. Language như tên gọi của HTML, đó là một ngôn ngữ, đa phần sử dụng tiếng Anh.
2. Các phần tử và thẻ
2.1. Thẻ là nhãn bạn dùng đánh dấu nơi bắt đầu và kết thúc của một phần tử.
2.1.1. VD: Phần tử em – được dùng để trình bày cho các chữ nghiêng. Tất cả những chữ trong giữa thẻ mở <em> và thẻ đóng </em> đều sẽ là chữ nghiêng.
2.2. Các phần tử h1, h2, h3, h4, h5 và h6 được dùng làm tiêu đề (h là đại diện của chữ “heading” – tiêu đề)
2.3. <p>Đây là đoạn văn bản</p> <em>Đây là đoạn chữ in nghiêng</em> <h1>Tiêu đề chính</h1> <h2>Tiêu đề phụ</h2> <h3>Tiêu đề con</h3>
3. Khởi tạo trang web
3.1. Sử dụng Notepad hoặc w3school
3.2. Trình duyệt đọc HTML giống như bạn đọc chữ từ trên xuống và từ từ trái sang phải. Vì thế, một trang HTML bắt đầu sẽ bắt đầu theo trình tự trước và sau.
3.3. trước khi bạn định làm bất cứ điều gì hãy gõ thẻ <html> vào dòng đầu tiên trên chương trình Notepad.
3.4. không quên thẻ đóng “</html>“
3.5. thẻ head, đây là phần cung cấp thông tin về trang HTML của bạn, và thẻ body, nơi chứa tất cả nội dung của trang
3.6. <html> <head> </head> <body> </body> </html>
3.7. HTML có hai phần head và body. Trong phần head, bạn sẽ ghi lại thông tin của trang, và ở phần body, nó sẽ chứa tất cả những thông tin cấu thành trang web.
4. Một số phẩn tử cần nhớ
4.1. <strong> Chữ in đậm </strong> <small> Chữ thu nhỏ </small> <br /> Xuống hàng <hr /> Gạch dòng ngang <ul>Danh sách liệt kê</ul> <ol>Danh sách liệt kê có đánh số</ol> <li>Mục liệt kê</li>
5. Thuộc tính
5.1. Những phần tử tạo nên cấu trúc trang HTML và khai báo với trình duyệt bạn muốn website sẽ được trình bày như thế nào (ví dụ <br /> là thẻ khai báo cho trình duyệt khi muốn xuống dòng trong một đoạn chữ).
5.2. VD: <body style="background-color: red;"></body>
6. Links
6.1. Để tạo ra các liên kết, bạn sử dụng thứ mà bạn luôn gặp phải khi code HTML đó là: PHẦN TỬ. Một phần tử đơn giản với một thuộc tính và bạn có thể tạo ra một liên kết đến bất cứ thứ gì bạn muốn.
6.1.1. 1. nếu trang page2.htm được đặt trong một thư mục con có tên là “subfolder” liên kết sẽ như sau:
6.1.1.1. <a href="subfolder/page2.html">Nhấp chuột vào đây để xem trang 2</a>
6.1.2. 2. Trong trường hợp ngược lại, page2.htm muốn liên kết đến page1, URL sẽ như sau:
6.1.2.1. <a href="../page1.html">Nhấp chuột vào đây để xem trang 1</a> “../”
6.1.3. 3. Nếu trang page2.htm được đặt trong một thư mục con có tên là “subfolder” liên kết sẽ như sau
6.1.3.1. <a href="../page1.html">Nhấp chuột vào đây để xem trang 1</a> “../”
6.1.4. <1, 2, 3> (Những liên kết các trang trên cùng một website )
6.2. Trong nội bộ trong web
6.2.1. Sử dụng thuộc tính id để đánh dấu phần tử mà bạn muốn liên kết đến, ví dụ: <h1 id="heading1">heading 1</h1>
6.2.2. Bây giờ bạn cần tạo một liên kết đến phần tử đó bằng cách sử dụng dấu “#” trong phần thuộc tính của liên kết. Dấu “#” phải đứng trước id của thẻ mà bạn gắn liên kết: <a href="#heading1">Link to heading 1</a>
6.3. Liên kết đến địa chỉ mail
6.3.1. bạn chỉ cần nhập vào mailto: và theo sau là một địa chỉ e-mail. Khi bạn nhấp chuột vào liên kết
7. Chèn các đối tượng vào Web
7.1. Hình ảnh
7.1.1. <img src="đường dẫn url tới nơi lưu ảnh" các-thuộc-tính-khác/>
7.1.2. Thuộc tính src
7.1.2.1. Đây là thuộc tính bắt buộc phải có. Nó là thuộc tính khai báo đường dẫn file ảnh. Các loại tập tin hình ảnh được hỗ trợ gồm png, jpg, gif,… Giá trị của URL hình ảnh có thể để ở dạng đường dẫn tuyệt đối hoặc tương đối.
7.1.3. thuộc tính alt
7.1.3.1. Đây là thuộc tính mô tả thông tin cho hình ảnh bằng chữ. Thuộc tính này sẽ hiển thị cho người dùng thấy khi đường dẫn hình ảnh bị lỗi.
7.1.3.1.1. <img src=”url_hinh_anh_loi” alt=”chèn ảnh trong html”/>
7.1.4. Thuộc tính width và height
7.1.4.1. Đây là thuộc tính giúp thiết lập độ rộng (width) và chiều cao (height) cho hình ảnh.
7.1.4.1.1. <img src="http://www.todayifoundout.com/wp-content/uploads/2015/07/coffee2.png" width="500px"
7.1.5. Thuộc tính align
7.1.5.1. Mặc định khi chèn hình ảnh trong HTML thì ảnh sẽ được căn trái vì vậy nên nếu bạn muốn căn chỉnh lại vị trí hình ảnh thì cần dùng đến thuộc tính align để thiết lập.
7.1.5.1.1. <img src="http://www.todayifoundout.com/wp-content/uploads/2015/07/coffee2.png" align="right"/>
7.1.5.2. Các giá trị của thuộc tính align gồm có: top, bottom, middle, left, right
7.1.6. Thuộc tính border
7.1.6.1. Thuộc tính border giúp xác định độ dày của đường viền xung quanh hình ảnh.
7.1.7. Thuộc tính title
7.1.7.1. Khi đưa chuột vào vùng hình ảnh mà không click, title của ảnh sẽ hiện lên “ Happy coffee”.
7.2. Video
7.2.1. Sau khi up bạn có đường link youtube kéo xuống dưới chọn Chia sẻ --> Nhúng và copy nội dung trong phần Nhúng này dán vào bất kỳ nơi nào trên website để hiển thị video. Có thể chỉnh thê chiều cao chiều rộng và các thộc tính khác.
7.3. Audio
7.3.1. Trước tiên nếu file âm thanh ở máy tính của bạn thì bạn có thể up lên 1 số website trung gian như: mp3.zing.vn, nhaccuatui.com, soundcloud.com sau đó chèn thông qua chức năng embed.
7.3.1.1. • Bình thường: Bạn phải click vào Play thì nhạc mới phát • Tự động play: Load xong nó sẽ tự động phát nhạc • Nhạc nền: Nhạc sẽ chạy ngầm tự động không hiển thị bài hát, tuy nhiên nên hạn chế chức năng này vì sẽ gây phiền phức cho người dùng vì đa số không thích. Nếu có chèn thì chọn một số bài hát nhẹ nhàng và phù hợp thường chỉ sử dụng trong một số ngày đặc biệt.