Trước khi tìm hiểu về HTML thì tôi muốn đặt ra một câu hỏi cho tất cả các bạn. Tại sao phải học HTML ? Nó có vai trò quan trọng như thế nào trong thiết kế web ? Và câu trả lời cho câu hỏi trên là: HTML là thành phần cơ bản nhất cấu thành lên một trang web. Cho dù trang web của bạn có được xây dựng bằng PHP, ASP hay JSP nhưng nếu muốn hiển thị nội dung lên trình duyệt. Bao giờ output ( đầu ra) cuối cùng cũng là HTML, đây chính là định dạng mà trình duyệt web của bạn có thể đọc được và hiểu được nội dung mà bạn muốn hiển thị lên. Thậm chí bạn có sử dụng những CMS thì đầu ra cuối cùng vẫn là HTML. Cho nên hiểu và biết cách vận hành HTML vẫn rất cần thiết cho bất cứ ai muốn xây dựng trang web. Hiện nay có rất nhiều phần mềm với các công cụ kéo thả giúp chúng ta tạo ra một trang HTML một cách nhanh chóng và đơn giản nhưng tôi khuyên các bạn nên tự viết và nhớ nó vì đó là những bước đầu căn bản nhất trong sự nghiệp lập trình web của bạn. Và nếu các bạn chỉ dựa vào những phần mềm đó mà không hiểu chút gì về HTML thì thì bạn sẽ không thể hiểu được cấu trúc của một trang web ra làm sao và như vậy bạn sẽ khó có thể theo lập trình nói chung và lập trình web nói riêng. Có một số bạn cho rằng HTML là dễ nên không cần phải học. Vậy đặt ra vấn đề: + Bạn có biết hết các thẻ HTML không ? + Bạn có thể điều khiển được tất cả các thẻ HTML không ? Khi đặt ra vấn đề này thì chúng ta thường ngập ngừng trước khi trả lời câu hỏi đó vì một điều rất đơn giản là chúng ta không biết hêt tất cả các thẻ HTML. Và không biết hết tất cả các thẻ HTML thì làm sao có thể điều khiển được tất cả các thẻ HTML Theo kinh nghiệm của cá nhân tôi trong suốt quá trình làm việc với web. Tôi khuyên các bạn nên học và hiểu được HTML khi theo đuổi lập trình web vì đó là những cái căn bản nhất mà các bạn phải nắm được. Sau đây tôi sẽ giới thiệu cho các bạn về HTML, cấu trúc cơ bản của một trang html và và các quy tắc trong việc sử dụng thẻ html qua đó sẽ giúp các bạn có thể điều khiển được tất cả các thẻ HTML thậm chí những thẻ mà bạn chưa từng sử dụng đến. + HTML là gì ?
Trang 2tìm hiểu về HTML thì tôi muốn đặt ra một câu hỏi cho tất cả các bạn - Tại sao phải học HTML ? Nó có vai trò quan trọng như thế nào trong thiết kế web ? - Và câu trả lời cho câu hỏi trên là: - HTML là thành phần cơ bản nhất cấu thành lên một trang web Cho dù trang web của bạn có được xây dựng bằng PHP, ASP hay JSP nhưng nếu muốn hiển thị nội dung lên trình duyệt Bao giờ output ( đầu ra) cuối cùng cũng
là HTML, đây chính là định dạng mà trình duyệt web của bạn có thể đọc được và hiểu được nội dung mà bạn muốn hiển thị lên - Thậm chí bạn có sử dụng những CMS thì đầu ra cuối cùng vẫn là HTML Cho nên hiểu và biết cách vận hành HTML vẫn rất cần thiết cho bất cứ ai muốn xây dựng trang web - Hiện nay có rất nhiều phần mềm với các công cụ kéo thả giúp chúng ta tạo ra một trang HTML một cách nhanh chóng và đơn giản nhưng tôi khuyên các bạn nên tự viết và nhớ nó vì đó là những bước đầu căn bản nhất trong sự nghiệp lập trình web của bạn Và nếu các bạn chỉ dựa vào những phần mềm đó mà không hiểu chút gì về HTML thì thì bạn sẽ không thể hiểu được cấu trúc của một trang web ra làm sao và như vậy bạn sẽ khó có thể theo lập trình nói chung và lập trình web nói riêng - Có một số bạn cho rằng HTML là
dễ nên không cần phải học Vậy đặt ra vấn đề: + Bạn có biết hết các thẻ HTML không ? + Bạn có thể điều khiển được tất cả các thẻ HTML không ? - Khi đặt ra vấn đề này thì chúng ta thường ngập ngừng trước khi trả lời câu hỏi đó vì một điều rất đơn giản là chúng ta không biết hêt tất cả các thẻ HTML Và không biết hết tất cả các thẻ HTML thì làm sao có thể điều khiển được tất cả các thẻ HTML - Theo kinh nghiệm của cá nhân tôi trong suốt quá trình làm việc với web Tôi khuyên các bạn nên học và hiểu được HTML khi theo đuổi lập trình web vì đó là những cái căn bản nhất mà các bạn phải nắm được - Sau đây tôi sẽ giới thiệu cho các bạn về HTML, cấu trúc cơ bản của một trang html và và các quy tắc trong việc sử dụng thẻ html qua đó sẽ giúp các bạn có thể điều khiển được tất cả các thẻ HTML thậm chí những thẻ mà bạn chưa từng sử dụng đến + HTML là gì ? - HTML viết tắt của từ HyperText Markup Language là là ngôn ngữ đánh dấu siêu văn bản Được dùng để trình bày nội dung cho một trang web Phiên bản hiện tại là HTML5 - Phân loại thẻ HTML • None: Khối những thẻ này không hiển thị nội dung bên trong • Block level: Khối những thẻ này hiển thị nội dung bên trong và chiều ngang tràn hết trình duyệt • Inline: Khối những thẻ này hiển thị nội dung bên trong và chiều ngang tùy thuộc vào kích thước của các đối tượng bên trong khối Và nó nằm trên một dòng - Các thẻ HTML trong cặp thẻ thường là kiểu block và inline + Cấu trúc của một trang html - Một trang html bất kỳ đều có cấu trúc như sau: 1 2 3 4 5 6 7 8 Vùng thể hiện nội dung của toàn trang web Như trên các bạn thấy cấu trúc của một trang web bao gồm: - Mở đầu cho một trang html là thẻ mở - Kết thúc một trang html là thẻ đóng - Sau thẻ mở html là thẻ head: + Thẻ head cũng được bắt đầu bằng một thẻ mở và kết thúc là một thẻ đóng - Bên trong thẻ head chứa thẻ title: + Thẻ title cũng được bắt được bắt đầu bằng một thẻ mở và kết thúc bằng một thẻ đóng - Sau thẻ đóng là thẻ body: + Thẻ body cũng được bắt đầu bằng một thẻ mở và kết thúc bằng một thẻ đóng + Nội dung chứa trong thẻ body có thể là chữ, hình ảnh, video và các thẻ html khác + Thẻ body được gọi là thẻ thân trang - Trên đây là những quy tắc mà các bạn phải nhớ như là một định lý khi trình bày một trang html + Cách để sử dụng và điều khiển được các thẻ html - Để sử dụng và điều khiển được một thẻ html thì chúng
ta phải nắm được cấu trúc của một thẻ html và nguyên tắc khai báo một thẻ html * Cấu trúc một thẻ html
- Một thẻ html bao gồm 3 thành phần: Tên thẻ, thuộc tính của thẻ, giá trị của thuộc tính đó Ví dụ 1 2 3 4 5
6 7 8 Welcome to you ! Kết quả của ví dụ trên: - Như các bạn thấy: Ở
ví dụ trên: "" là một thẻ html có các thành phần: - Tên thẻ: font - Thuộc tính color( thể hiện màu chữ) Giá trị của thuộc tính là red - Thuộc tính size( thể hiện màu chữ) Giá trị của thuộc tính là 12 + Nguyên tắc khai báo một thẻ html - Thẻ html có hai loại: Thẻ đơn và thẻ kép - Đối với một thẻ đơn thì kết thúc mỗi thẻ đơn ta phải có dấu đóng thẻ: Ví dụ:
,
, - Đối với một thẻ kép: Đối với một thẻ html kép( cặp thẻ) luôn bắt đầu bằng một thẻ mở và kết thúc bằng một thẻ đóng Ví dụ:
, ,
- Đối với bất kỳ thẻ html nào đều có thuộc tính và giá trị - Vậy cho dù có những thẻ html mà bạn chưa bao giờ sử dụng thì việc tuân thủ theo những nguyên tắc trên bạn hoàn toàn có thể sử dụng và điều khiển được nó - Kết thúc bài mở đầu tôi đã giới thiếu cho các bạn thế nào là thẻ html, tại sao phải sử dụng thẻ html và nó được dùng để làm gì ? Đồng thời cũng giúp cho các bạn cách để có thể sử dụng và điều khiển được một thẻ html Ở bài sau tôi sẽ giới thiệu cho các bạn những thẻ html căn bản và mục đích sử dụng của từng thẻ