10 bài học lập trình web phần 2

updated on 2023-03-31

Trong bài 1, chúng ta đã làm quen với các khái niệm của web tĩnh, web động. Đồng thời chúng ta đã làm quen với các công cụ soạn thảo và thử nghiệm trang web. Phần 2 này chúng ta tiếp tục với việc đào sâu vào ngôn ngữ HTML với mục tiêu là có thể viết được một trang web tĩnh hoàn chỉnh.

Bài 2: Các thẻ html thông dụng

Để nghiên cứu thấu đáo về HTML chúng ta cần rất nhiều thời gian vì HTML có khoảng vài trăm thẻ khác nhau. Và các thẻ được phân loại ra thành các thẻ thuộc nhóm trình bày, nhóm bố cục, nhóm form... rất khó nhớ. Do vậy bạn nào muốn tìm hiểu kỹ về html thì qua trang www.w3schools.com. Còn trong bài học này chúng tôi sẽ giới thiệu một số thẻ thông dụng nhất.

Tuy nhiên trước hết chúng ta cũng cần phải biết cách sử dụng và một số quy ước sau đây:

• Các thẻ điều khiển trong html bắt buộc phải đặt trong 2 dấu ngoặc nhọn < và >.
  
• Trong một thẻ bắt buộc phải có tên thẻ, ngoài ra sẽ có thể có thêm một số thuộc tính và điều khiển khác để quy định thêm các thông số hiển thị cho nội dung
• Hầu hết các thẻ đều có mở và đóng. Thẻ đóng có tên như thẻ mở, nhưng có gạch xược đằng trước cấu trúc đóng mở thẻ như sau
  
• Một số thẻ là tự đóng nghĩa là không cần thẻ đóng
• Khi sử dụng thẻ nên gán cho mỗi thẻ một id để cấu trúc code rõ ràng
• Các thẻ có cấu trúc lồng nhau nghĩa là thẻ này có thể nằm trong một thẻ khác.
  

Dưới đây là hình ảnh minh họa về cách sử dụng thẻ. Chúng ta không cần đi vào chi tiết, mà chỉ xem qua cấu trúc, còn chi tiết vai trò từng thẻ như thế nào sẽ phân tích ở phần bài tập



Dưới đây là danh sách các thẻ thông dụng mà các bạn cần tìm hiểu:

• Thẻ html dùng để mở đầu và kết thúc một trang html
• Thẻ head dùng để mở đầu và kết thúc khai báo các thông tin chung của trang
• Thẻ body đánh dấu mở đầu và kết thúc của nội dung toàn trang
• Thẻ table dùng để tạo một bảng gồm các cột và dòng
• Thẻ tr dùng để tạo một dòng trong một bảng thông thường nằm trong thẻ table
• Thẻ td dùng để tạo một cột trong một dòng, thường nằm trong thẻ tr
• Thẻ h1, h2, h3, h4, h5, h6 dùng để định dạng các tiêu đề bài viết (chữ to, in đậm...)
• Thẻ img dùng để chèn 1 ảnh vào trang web
• Thẻ a dùng để chèn một link vào một đoạn text hay một ảnh.
• Thẻ br dùng để ngắt dòng, xuống dòng
• Thẻ p dùng để khai báo một đoạn text (paragraph)
• Thẻ ul dùng để tạo ra một danh sách có cấu trúc
• Thẻ li là thẻ con của thẻ ul để chỉ ra các phần tử của một danh sách
• Thẻ form để khởi tạo các form. Cấu trúc thẻ này khá phức tạp và có nhiều thẻ phụ thuộc khác nên chúng ta sẽ bàn chi tiết ở một bài học riêng.
• Các thẻ b, i, u dùng để in đậm, in nghiêng hay gạch chân một đoạn text.
• Thẻ center dùng để căn đoạn text ra giữa.
  

Bố cục trang với thẻ table

Một trang web đẹp hay xấu phụ thuộc nhiều vào bố cục có cân đối hay không. Đây là một bài toán khó đối với ngôn ngữ HTML bởi vì nó được ra đời dựa trên yêu cầu trình bày văn bản rất khô khan. Ban đầu các chuyên gia viết trang web chỉ dùng thẻ table để bố cục các trang web, với thẻ này chúng ta có thể tạo ra được các trang web có bố cục hàng cột đan xen và có các tỉ lệ khác nhau. Sau này khi CSS phát triển, người ta dùng thẻ div thay thế cho table và đồng thời còn dùng nhiều công nghệ khác như flash Jquery, map... để làm trang web sinh động hơn về mặt bố cục. Trong khuôn khổ bài này chúng ta sẽ dùng table để tạo ra một trang web có bố cục như hình vẽ sau


Để làm bố cục cho website chúng ta cần một cái thước kẻ, hãy đặt cái thước kẻ nằm ngang rồi kéo từ trên xuống, những chỗ giao nhau của các phần, lấy bút chì kẻ 1 đường ngang. Tiếp tục, đặt thước kẻ nằm dọc rồi kéo từ trái qua phải, những chỗ giao nhau của các phần, kẻ một đường dọc bạn sẽ thấy trang web trên được chia ra làm 5 ô: banner, menu, nội dung chính, các liên kết và footer. Công việc này được gọi là cut HTML, và nó hoàn toàn được tự động hóa nếu như bạn dùng photoshop. Tuy nhiên trong bài thực hành này chúng ta sẽ làm bằng tay để hiểu rõ các bước thiết kế, bố cục một website như thế nào. Với các đường kẻ như trên chúng ta sẽ hình dung ngay được website này có bố cục là một bảng gồm 4 dòng và 2 cột, dòng banner, dòng menu và dòng footer chỉ có một cột, riêng dòng ở giữa  có 2 cột, do đó phải dùng một thuộc tính của thẻ td là colspan (gần giống như merge của excel hay word), Và thiết kế trang này có dạng như sau:

(bảng)
    (dòng 1)
         (cột 1 - sử dụng colspan = 2 )  Banner   (kết thúc cột 1)
    (kết thúc dòng 1)
    (dòng 2)
         (cột 1 - sử dụng colspan = 2 )  Menu   (kết thúc cột 1)
    (kết thúc dòng 2)
    (dòng 3)
         (cột 1 )  Nội dung chính   (kết thúc cột 1)
         (cột 2 )  Các liên kết   (kết thúc cột2)
    (kết thúc dòng 3)
    (dòng 4)
         (cột 1 - sử dụng colspan = 2 )  Footer  (kết thúc cột 1)
    (kết thúc dòng 4)
(kết thúc bảng)

Ở trên là cách diễn giải nôm na cho dễ hiểu về cách bố trí bảng bằng các thẻ đóng và thẻ mở HTML, khi vào xây dựng trang HTML thực sự chúng ta sẽ thay các chữ trong ngoặc bằng các thẻ HTML thực sự và sẽ thấy hiệu quả. Đó chính là nội dung bài tập dưới đây

Bài tập

Bài tập của chúng ta là hãy viết một trang web HTML giống hệt như hình vẽ ở phần trên. Công cụ và cách làm như sau:

1- Các bạn vào link này để nhìn kết quả trước: https://thuonghieuweb.com/oldversion/files/bai-2.html

2- Click vào banner và chọn "save image as..." để lưu ảnh banner về, có thể đặt tên là gì tùy ý vào

3- Tương tự click vào ảnh bé gái và save image as về máy của mình. 

3- Chạy wamp server (đã hướng dẫn download và cài đặt ở bài 1). Lưu ý là với web tĩnh chúng ta có thể ko cần wamp server vẫn test được kết quả, tuy nhiên đây là lúc chúng ta thử wamp. Sau khi chạy wamp, chúng ta mở fire fox và gõ url sau:   http://localhost nếu thấy xuất hiện trang quản trị wamp server là ok, trong trang này có cả các tool phpmyadmin và tool phpinfo mà bạn rất cần sau này.

4- Tạo một thư mục trong C:wampwww  đây chính là thư mục root của wamp server. Khi bạn gõ http:localhost thì server sẽ đọc các file HTML trong thư mục này để trả về cho fire fox hiển thị. Ví dụ: tạo ra thư mục C:wampwwwaitap   Sau đó copy 2 file ảnh ở mục 1 và 2 vào thư mục này.

5- Sử dụng Dreamwave để tạo trang HTML. Lưu ý các bạn nên tìm hiểu việc tạo ra một project trong Dreamwave để quản lý các file trong các bài tập từ nay về sau và trỏ thư mục của project này về thư mục tạo ở bước 4. Cách tạo 1 project trong dreamwave như thế nào thì hơi dài dòng, các bạn search google hoặc nếu cần thì contact với Thương Hiệu Web để được hỗ trợ.

6. Bắt đầu tạo trang HTML. Chúng tôi khuyến khích các bạn code từ đầu, dựa trên gợi ý ở mục trên "Bố cục trang web với thẻ table". Tuy nhiên các bạn cũng có thể chọn cách thứ 2 là copy trang html mà tôi đã làm về và nghiên cứu chỉnh sửa. Cách làm này không có gì phải e ngại, mà nó còn giúp bạn thực hiện nhanh hơn, dễ hiểu hơn. Làm sao copy được trang html đó? Các bạn mở link ở mục 1, sau đó bấm CTRL+U là sẽ có nguyên toàn bộ code HTML của trang này.

7. Phân tích các thẻ:

• Đầu tiên chúng ta dùng thẻ body với thuộc tính bgcolor="#006699" để tạo mầu nền xanh cho trang web
• Ngay sau thẻ body, chúng ta dùng thẻ table để bố cục trang gồm 4 dòng, dòng số 3 có 2 cột còn các dòng còn lại có một cột và dùng thuộc tính colspan=2 để cân đối với 2 cột ở dòng 3. Lưu ý dùng thuộc tính align="center" trong thẻ table để căn toàn bộ thẻ ra giữa
• Trong HTML các thẻ tự động tạo ra kích thước dài rộng tùy thuộc vào đối tượng ở bên trong thẻ. Do ảnh banner có kích thước 940px theo chiều ngang nên table cũng sẽ lấy kích thước 940px, tuy nhiên chúng tôi khuyến khích dùng các thuộc tính width=940,  để định nghĩa chiều rộng của table cho nó tường minh.
• Thẻ a với thuộc tính href="" sẽ link trực tiếp đến trang hiện thời, nếu muốn link này trỏ đến một url nào chúng ta đưa url đó vào trong ngoặc kép. ví dụ < a href="http://thuonghieuweb.com" >
• Chúng ta nên tập thói quen dùng các thẻ tiêu đề h1, h2, h3... để trình bày tiêu đề bài viết, điều này rất có lợi cho việc SEO website. Việc dùng thẻ này làm cho kích thước font chữ có thể không như mong muốn, tuy nhiên, sau này khi biết về CSS, chúng ta lại hoàn toàn điều chỉnh được các thẻ này.
• Đối với các đoạn text, nên dùng các thẻ p để định dạng, đó cũng là một chuẩn về SEO onpage
• Đối với các menu nên dùng thẻ ul và li  chẳng hạn như phần liên kết trong bài tập này. Cách viết đó sẽ tường minh và có lợi khi SEO.
• Cuối cùng nhớ là đã mở thẻ nào thì phải đóng thẻ đó và nên viết trang web theo cấu trúc, các thẻ con thì viết thụt vào, thẻ mở và thẻ đóng viết cùng một cấp.