logo
Hỗ trợ: 24/7
Điện thoại: 098 984 8886
Email: info@thuonghieuweb.com

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

3/5 1133 votes
updated on 2020-08-06

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.



   
 
Có thể bạn muốn xem thêm....

Những điều cần biết khi xây dựng website

Xây dựng một website không đơn giản chỉ là một gian hàng hay một tờ rơi. Bạn cần phải làm mọi cách để website của mình hướng tới khách hàng, và quan trọng hơn cả, là làm sao để nội dung của bạn có sức lan tỏa nhanh chóng trong môi trường mạng từ đó lôi kéo khách hàng đến với website của bạn

Xem chi tiết

Những điều cần biết về dịch vụ email với tên miền riêng

Email tên miền riêng là email gắn với tên miền của doanh nghiệp kiểu như tennhanvien@tencongty.com. Email tên miền riêng sẽ tạo sự chuyên nghiệp và tin cậy khi giao dịch, đồng thời có thể cấp phát cho nhân viên khi mới đi làm, thu hồi lại khi nhân viên đó thôi việc và lưu trữ được mọi giao dịch trên email mà không sợ nhân viên đổi mật khẩu, mang theo hòm thư khi rời công ty...

Xem chi tiết
Đội ngũ lập trình viên, kỹ thuật viên và seo-er của Thương Hiệu Web cam kết

Hỗ trợ 24/7

Hỗ trợ khách hàng 24 giờ 1 ngày, 7 ngày 1 tuần qua điện thoại, email và chat online

Hoàn tiền 100%

Trong thời gian 45 ngày sử dụng dịch vụ, nếu quý khách không hài lòng!

Cam kết uptime 99.99%

Nếu dịch vụ của quý khách bị gián đoạn, chúng tôi sẽ cộng thêm 1 tháng sử dụng

KHÁCH HÀNG NÓI VỀ CHÚNG TÔI

Một đơn vị xây dựng web tận tâm và chuyên nghiệp!

"Thương Hiệu Web là đơn vị thiết kế website có năng lực, tôn trọng và có trách nhiệm với khách hàng, đặt mình vào vị trí khách hàng để mang lại cho khách hàng nhiều giá trị từ chính dịch vụ của mình. Với tôi, Thương Hiệu Web là một lựa chọn hợp lý!" Chị Nguyễn Phượng, TP kinh doanh, Công Ty Cổ Phần Quản Lý Công Trình Đô Thị Hải Dương.

Xem bình luận trên FB
Sitemap Điều khoản sử dụng Chính sách riêng tư
Bản quyền thuộc về công ty cổ phần truyền thông số VDATA
Tầng 2, tòa nhà 71 Hoàng Cầu, Đống Đa, Hà Nội
Điện thoại: (04) 3990 9643 - Email: info@vdata.com.vn
Giấy chứng nhận ĐKKD số: 0102766780, do Sở KHĐT Tp Hà Nội cấp ngày 28/04/2009

Online