7.1 Tài liệu html đầu tiên
Hãy tạo tài liệu html đầu tiên của chúng ta (html file). Thông thường file html chính của dự án web được gọi là index.html: Đề nghị giữ gìn truyền thống tốt đẹp này. Để làm điều đó, nhấp chuột phải vào thư mục web-storm-10:
Và nhập tên file:
WebStorm sẽ tạo cho bạn một file và mở nó ngay lập tức:
Thực tế, đây là một tài liệu html trống. Tất cả những gì bạn thấy ở đây là thông tin phụ trợ.
Tất cả dữ liệu thực sẽ nằm trong các thẻ <body> và
</body>. Bạn sẽ biết chi tiết hơn về thẻ trong bài giảng tiếp theo.
Hãy viết một thông điệp thú vị và hào nhoáng nào đó trong những thẻ này. Ví dụ như thế này:
Hành trình ngàn dặm bắt đầu từ một bước chân!
Bạn có thể chỉ cần sao chép nó và dán vào dòng 8 (trong thẻ <body>).
Hãy làm quen với việc sao chép văn bản — sẽ ít sai sót và lỗi type hơn. Đây là cách tài liệu của tôi trông như thế nào:
Nếu phiên bản văn bản của tôi không đủ tối tăm và hào nhoáng cho bạn, hãy chọn của riêng bạn — dù sao đây cũng là dự án Web đầu tiên của bạn. Tôi đề nghị thêm 3 lựa chọn:
- "Mặt tối mang đến cho tôi những gì mà mặt sáng không thể: sự tự do thực sự."
- "Mặt tối — con đường đến với sức mạnh không biên giới."
- "Tôi chọn định mệnh của mình, và nó nằm trong bóng tối."
7.2 Chạy dự án đầu tiên
Bây giờ hãy "chạy" dự án của chúng ta và xem trình duyệt sẽ hiển thị file html của chúng ta như thế nào.
Để chạy dự án, bạn cần nhấn vào tam giác màu xanh ở menu trên cùng. Phía bên trái của nó là tên file, file sẽ bắt đầu thực thi:
Bạn cũng có thể chạy file của mình bằng cách nhấn Shift+F10.
Hãy làm điều đó, và bạn sẽ thấy trình duyệt hiển thị file html đầu tiên của mình như thế nào. Đây là những gì mà trình duyệt của tôi hiển thị:
Màu cam viết host trong url — máy chủ web của dự án, được WebStorm khởi động.
Màu xanh lá viết đường dẫn trong url — đường dẫn đến index.html từ gốc của dự án.
Màu xanh da trời — thông tin phụ trợ cho WebStorm.
Văn bản được tô màu đỏ, được trình duyệt hiển thị dựa trên tài liệu html của chúng ta.
7.3 Sửa lỗi
Còn nếu chúng ta phạm lỗi nào đó thì sao? Trình duyệt và WebStorm sẽ phản ứng như thế nào?
Hãy xóa ký tự đầu tiên trên dòng 9 và xem WebStorm phản ứng như thế nào. Đây là những gì tôi thấy:
Chúng ta thấy gì ở đây:
- Từ ở dòng 9 không còn là thẻ nữa, nên WebStorm hiện giờ viết nó màu xám, không phải màu vàng.
- Ở dòng 10 bạn có thẻ đóng
<html>, dù cho thẻ<body>cần phải gặp trước thẻ đóng<html>. Do đó, WebStorm thấy ở đây có lỗi. - Số lượng lỗi trong tài liệu hiển thị ở góc trên bên phải - chúng ta có một lỗi.
- Vị trí lỗi cũng được lặp lại trên scrollbar — phía dưới bên phải. Rất tiện cho các tài liệu dài.
Bây giờ hãy chạy file này và xem trình duyệt sẽ phản ứng thế nào với lỗi:
Trình duyệt cũng cho rằng thẻ không đầy đủ <body> chỉ là văn bản thông thường, vì vậy nó cũng hiển thị như văn bản thông thường.
Việc thiếu thẻ đóng <body> cũng không làm trình duyệt bối rối: vấn đề với thẻ còn có thể nghiêm trọng hơn. Nhìn chung, mọi thứ đều khá ổn.
GO TO FULL VERSION