Hướng dẫn làm 1 trang web bằng html
Tôi tin rằng các bạn đã cài đặt xong những phần mềm cần thiết rồi chứ. Chắc hẳn là hiện giờ các bạn đã sử dụng được một trình soạn thảo để xây dựng trang web (ví dụ như Notepad++) và nhiều trình duyệt khác nhau để kiểm tra (Mozilla Firefox, Google Chrome, Internet Explorer, vv...). Trong bài học này, chúng ta sẽ bắt tay ngay vào thực hành ! Chúng ta sẽ cùng tìm hiểu các kiến thức căn bản về HTML và tạo ra trang web đầu tiên của chính mình. Không tiếp tục chần chờ nữa, chúng ta sẽ cùng xây dựng một trang web ngay trong bài học thứ 2 này của giáo trình. Tạo dựng trang web với trình soạn thảo văn bản Như tôi đă từng nói với các bạn, chúng ta sẽ tạo một trang web bằng trình soạn thảo văn bản. Các bạn đã cài đặt 1 trong các phần mềm mà tôi đã nhắc tới trong bài học trước : Notepad++, PSpad, jEdit, vim, TExtWrangler, vv…, loại nào cũng được. Tất cả các phần mềm này đều hướng đến một mục đích duy nhất : cho phép soạn thảo văn bản. Từ giờ cho đến cuối giáo trình, tôi sẽ sử dụng Notepad++. Chúng ta hãy cũng mở nó lên. Vậy là chúng ta đã có 1 trang Notepad++ trắng. Vậy chúng ta phải làm gì bây giờ? Hãy thử viết bất kì một cái gì có trong đầu các bạn lúc này, như tôi đã làm bên dưới. Các bạn có thể viết lại câu tôi đã viết hoặc viết những gì các bạn muốn. Mục đích chỉ là viết ra 1 cái gì đó. Bây giờ, hãy lưu tệp này lại. Để làm điều này, các bạn chỉ cần vào Menu > File > Save. 1 hộp thoại sẽ yêu cầu bạn nơi bạn muốn lưu tệp cũng như tên các bạn muốn đặt cho tệp. Hãy lưu lại ở thư mục mà các bạn muốn, đặt một cái tên vừa ý, kết thúc bằng Đây không phải một tiêu đề 3 như test.html chẳng hạn. ! Tôi khuyên các bạn hãy tạo trước một thư mục trong My Documents để chứa tất cả các tệp của trang web. Về phần tôi, tôi đã tạo 1 thư mục test nơi tôi lưu tệp test.html. Bây giờ hãy mở lại thư mục mà các bạn vừa lưu tệp Đây không phải một tiêu đề 4 Đây không phải một tiêu đề 5 Biểu tượng của tệp phụ thuộc vào trình duyệt web mặc định của các bạn, trong trường hợp của tôi là Google Chrome. Thế nhưng tệp test.html có thể mang biểu tượng khác trên máy của các bạn. Dưới đây là ví dụ các biểu tượng có thể xuất hiện khi trình duyệt web mặc định của bạn là Firefox hay Internet Explorer. Đơn giản là kích đúp vào tệp và trình duyệt web sẽ mở ra và hiển thị đoạn văn bản đã được chúng ta viết lúc trước. ? Có gì đó không được ổn lắm. Tất cả đoạn văn bản được hiển thị trên cùng một dòng, trong khi chúng ta đã viết 2 dòng văn bản khác nhau!? Đúng thế ! Lý do là trên thực tế, để tạo một trang web, các bạn không đơn giản chỉ cần gõ đoạn văn bản như vừa rồi. Thêm vào đó, chúng phải sử dụng cái mà người ta văn gọi là thẻ (tags). Chính là chúng sẽ đưa ra hướng dẫn cho máy tính kiểu như “xuống dòng ở đây”, “hiển thị hình ảnh”, … Các thẻ và thuộc tính của chúng Có vẻ mọi thứ vẫn còn quá đơn giản cho đến thời điểm này. Hẳn là những tay lập trình viên chuyên nghiệp cảm thấy không hài lòng về sự đơn giản này, và nghĩ đến việc phức tạp hóa mọi thứ lên :) Thực tế, công việc của chúng ta không chỉ đơn giản là viết một đoạn văn bản vào trình soạn thảo mà còn cần phải đưa ra các chỉ dẫn cho máy tính. Trong HTML, chúng ta sử dụng tới các thẻ để làm điều này. Các thẻ Các trang HTML được xây dựng dựa tên rất nhiều thẻ. Những thẻ này không xuất hiện trên màn hình của người xem trang web, nhưng chúng giúp máy tính hiểu được cần phải hiển thị những gì. Không có gì khó khăn để nhận diện các thẻ. Chúng được viết trong cặp kí tự Đây không phải một tiêu đề 6 và Đây không phải một tiêu đề 7, ví dụ như Đây không phải một tiêu đề 8. Công dụng của các thẻ này chính là cho biết bản chất của đoạn văn bản mà nó bao quanh. Ví dụ, chúng muốn nói “đây là tiêu đề của trang”, “đây là một hình ảnh”, “đây là một khổ văn bản”, vv… Có tất cả 2 loại thẻ chúng ta cần phân biệt : Các thẻ kép và các thẻ đơn. Các thẻ kép Bắt đầu bằng thẻ mở, sau đó là một đoạn văn bản và kết thúc bằng thẻ đóng. Dưới đây là một ví dụ giúp các bạn dễ hình dung hơn: Chúng ta phân biệt một thẻ mở ( Đây không phải một tiêu đề
0). Thẻ đóng cho biết tiêu đề của trang kết thúc ở đây. Điều này cho máy tính biết tất cả những phần không nằm giữa 2 thẻ này không thuộc tiêu đề của trang. Đây không phải một tiêu đề Các thẻ đơn Các thẻ này thường dùng để chèn một thành phần nào đó vào một ví trí cụ thể trong trang web ví dụ như một hình ảnh. Trong trường hợp này, không cần thiết phải chỉ rõ hình ảnh bắt đầu từ vị trí nào và kết thúc ở vị trí nào, chỉ cần cho máy tính biết là phải “chèn hình ảnh ở đây”. Một thẻ đơn sẽ trông như thế này: ! Các bạn hãy lưu ý rằng kí tự 1 ở cuối không phải bắt buộc. Chúng ta có thể viết 2. Tuy nhiên, để không nhầm lẫn với kiểu thẻ kép, những lập trình viên kinh nghiệm khuyến khích việc thêm kí tự 1 vào cuối của các thẻ đơn. Tôi khuyên các bạn nên tập theo thói quen này. Các thuộc tính Các thuộc tính gần giống như các tùy chọn của các thẻ. Chúng có tác dụng bổ sung cho các thẻ, để đưa ra các thông tin phụ. Thuộc tính nằm ở sau tên của thẻ mở và thường là một giá trị, ví dụ như: Vai trò cụ thể của các thuộc tính này là gì ? Hãy cùng nhìn lại ví dụ 4 bên trên. Chỉ một thẻ như thế không có mấy giá trị. Chúng ta có thể thêm vào một thuộc tính để chỉ ra tên của hình ảnh cần hiển thị: Máy tính sẽ hiểu được cần phải hiển thị hình ảnh chứa trong tệp photo.jpg. Trong trường hợp các thẻ kép, chúng ta chỉ viết thuộc tính ở trong thẻ mở. Ví dụ, đoạn mã dưới đây cho biết câu được trích dẫn là của Neil Armstrong và ra đời vào ngày 21/07/1969:
! Lưu ý: tất cả các thẻ mà chúng ta vừa xem chỉ là ví dụ không có thật. Các thẻ thật có tên tiếng anh, và chúng ta sẽ tìm hiểu chúng trong phần sau của giáo trình. Cấu trúc cơ bản của một trang HTML5 Hãy cùng quay lại với trình soạn thảo Notepad++. Các bạn hãy viết lại (hoặc cắt dán, tất nhiên ;D) đoạn mã nguồn dưới đây vào Notepad++. Đoạn mã này là nền tảng cho một trang web HTML5.
! Các bạn có thể thấy tôi thêm vào các khoảng trắng ở đầu một số dòng lệnh, để dịch các thẻ đi một đoạn. Việc này không bắt buộc và không ảnh hưởng gì đến việc hiển thị trang web, nhưng nó giúp đoạn mã của chúng ta dễ đọc hơn. Trong trình soạn thảo của các bạn, chỉ cần ấn nút Tab để có thể thêm các khoảng trắng trước mỗi dòng lệnh như tôi đă làm. Sau khi chép lại đoạn mã trên vào Notepad++, chúng ta sẽ nhận được kết quả như sau : Các bạn hãy lưu ý rằng các thẻ được mở và đóng theo một trình tự nhất định. Ví dụ thẻ 5 là thẻ mở đầu tiên và là thẻ đóng cuối cùng (ở dòng mã cuối cùng, chúng ta thấy 6). Các thẻ cần được đóng theo thứ tự ngược lại với thứ tự các thẻ mở. Ví dụ như sau:
? Có thể giải thích tất cả các thẻ vừa được chép vào trình soạn thảo được không ? Tất nhiên rồi. Đừng hoảng loạn khi nhìn tất cả các thẻ này, tôi sẽ giải thích công dụng của chúng! Doctype Dòng đầu tiên có tên là doctype. Đây là dòng không thể thiếu vì nó cho biết đây là một trang web HTML. Thẻ này không giống như những thẻ khác (nó bắt đầu bằng một dấu 9), các bạn có thể xem đây là một ngoại lệ. ! Dòng doctype này trước đây phức tạp hơn rất nhiều. Chúng ta không thể học thuộc nó. Với XHTML1.0, chúng ta phải viết: 0 1 Với HTML5, người ta đã đơn giản hóa mọi thứ. Khi các bạn nhìn thấy một thẻ doctype ngắn ( 2), điều này có nghĩa là trang web được viết bằng HTML5. Thẻ 5
Đây là thẻ chính của đoạn mã. Nó bao bọc tất cả nội dung trang web. Như các bạn có thể thấy, thẻ đóng 6 nằm ở cuối cùng của đoạn mã. Phần đầu 5 và phần thân 6 Một trang web bao gồm hai phần chính:
|