[Part 1] Học Html và Css , PHP cho những người muốn tìm hiểu về ngôn ngữ lập trình này

Bài này mình sẽ giới thiệu về Html đơn giản và cách tạo , hiển thị 1 File html cho những bạn mới bắt đầu tìm hiểu về html :

1. Giới thiệu về Html cơ bản

• HTML là ngôn ngữ dùng để mô tả một trang web.
• HTML viết tắt của từ Hyper Text Markup Language.
• HTML không phải là ngôn ngữ lập trình, html là ngôn ngữ đánh dấu (markup language), ngôn ngữ đánh dấu là một nhóm các thẻ đánh dấu (các tag), HTML sử dụng các thẻ này để mô tả trang web.

Sự sắp xếp chiều dọc của thẻ block trong HTML

Khi sử dụng các thẻ block, trình duyệt sẽ sắp xếp các thẻ theo chiều dọc, mỗi thẻ sẽ chiếm vùng không gian nằm ngang từ trên xuống theo thứ tự sắp xếp trong trang HTML/XHTML, thẻ nào code trước sẽ nằm trên, các thẻ code sau sẽ nằm bên dưới.
Xem ví dụ sau đây để thấy được trình duyệt sắp xếp các thẻ theo chiều ngang như thế nào:
HTML viết

PHP:

<h1>Tiêu đề 01</h1>
<ul>
   <li><a href="#">Link 01</a></li>
   <li><a href="#">Link 02</a></li>
   <li><a href="#">Link 03</a></li>
   <li><a href="#">Link 04</a></li>
   <li><a href="#">Link 05</a></li>
</ul>
<div>Nội dung chính</div>
<div>Nội dung phụ</div>
<div>
   <p>Tên công ty</p>
   <p>Địa chỉ</p>
</div>

Hiển thị trình duyệt:

​

Phân tích vị trí của các thẻ:

​

Ta thấy các thẻ block đều chiếm vùng không gian nằm ngang, chúng ta có thể sắp xếp lại vị trí của các thẻ block bằng cách sử dụng các thuộc tính css.​

Sự sắp xếp chiều ngang của thẻ inline trong HTML

Khi sử dụng các thẻ inline, trình duyệt sẽ sắp xếp các thẻ liền kề nhau theo chiều ngang, thẻ nào code trước xuất hiện trước, thẻ nào code sau xuất hiện sau.
Xem ví dụ sau đây để thấy được trình duyệt sắp xếp các thẻ inline như thế nào:
HTML viết

Code:

<a href="#">Thẻ a</a>[/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/FONT][/SIZE][/COLOR][/COLOR][/FONT][/SIZE][/FONT][/SIZE][/COLOR][/COLOR][/FONT][/SIZE][/FONT][/SIZE][/COLOR][/COLOR][/FONT][/SIZE][/FONT][/SIZE][/COLOR][/COLOR][/FONT][/SIZE][/FONT][/SIZE][/COLOR]
[COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][SIZE=14px][FONT=Arial][COLOR=#333333]<span>thẻ span</span>[/COLOR][/FONT][/SIZE][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR]
[COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][SIZE=14px][FONT=Arial][COLOR=#333333]<em>thẻ em</em>[/COLOR][/FONT][/SIZE][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR]
[COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][COLOR=#333333][SIZE=14px][FONT=Arial][SIZE=14px][FONT=Arial][COLOR=#333333]<strong>thẻ strong</strong>

Hiển thị trình duyệt:

​

Tới đây chắc các bạn đã hiểu nhiệm vụ của HTML/XHTML dùng để làm gì, đối với các thẻ block trình duyệt sẽ sắp xếp nó theo chiều dọc, đối với các thẻ inline trình duyệt sẽ sắp xếp theo chiều ngang, nếu muốn hiểu rõ hơn các bạn có thể tham khảo thêm các vùng không gian HTML
Nhiệm vụ của trình duyệt (Firefox, Internet Explorer, Safari, Opera, Chrome,...) là đọc văn bản HTML và hiển thị chúng như chúng ta thấy, tuy nhiên các trình duyệt không hiển thị các thẻ HTML (các tag), nhưng lại sử dụng các thẻ để giải thích nội dung cho trang web.

2. Cách tạo và hiển thị 1 File Html
(Mình khuyên các bạn nên dùng Notepad có sẵn trong window hoặc Notepad++ , Vì mới bắt đầu học như thế sẽ nhớ Code để hiểu bản chất của các thẻ các lệnh .Khi quen rồi chúng ta sẽ sử dụng 1 số phần mềm phục vụ code )

Trước tiên ta tạo một file index.txt đơn giản bằng notepad trong Window với nội dung sau:

Code:

<p>Hello</p>

Sau đó "Save As" lại file với định dạng mới là . html

​

Cách hiển thị file HTML

Với cách trên ta đã tạo xong file index. html với nội dung đơn giản, để xem nội dung file này ta có thể double click vào là có thể xem được, nội dung khi chạy trình duyệt sẽ được hiển thị như sau:

Code:

Hello

p/s : Part 2 : Giới thiệu về cấu trúc cơ bản của html....