Xây dựng trang web của riêng bạn cho người mới bắt đầu: 5 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:32

Cho dù bạn đã từng mơ ước trở thành một lập trình viên máy tính hay đã từng sử dụng một trang web, thì hầu như chúng ta đều biết, công nghệ thông tin đã trở thành xương sống của doanh nghiệp. Mặc dù lúc đầu lập trình có vẻ hơi đáng sợ, nhưng mục tiêu của tôi là dạy cho bạn những kiến thức cơ bản về thiết kế web để sau hướng dẫn này, bạn sẽ có thể tạo trang web của riêng mình. Không còn cách nào nữa, hãy bắt đầu!

Quân nhu

• Macintosh hoặc Windows PC (mặc dù cũng có thể sử dụng các bản phân phối Linux, nhưng tôi đang bỏ qua chúng vì đây là phần giới thiệu dành cho người mới bắt đầu).
• Lựa chọn của bạn về trình soạn thảo văn bản (Notepad trên Windows, TextEdit trên Mac) hoặc lựa chọn IDE của bạn. Theo kinh nghiệm của mình, tôi nhận thấy Visual Studio Code hoạt động tốt nhất cho bản thân nên tôi cũng khuyên bạn nên kiểm tra nó tại đây: https://code.visualstudio.com/ chưa kể nó hoạt động trên tất cả các nền tảng hệ điều hành.

Bước 1: Thẻ và một chút lịch sử

Khi bạn đã quyết định lựa chọn trình soạn thảo văn bản hoặc IDE của mình, hãy bắt đầu với những điều cơ bản.

Tin hay không tùy bạn, HTML hoặc Ngôn ngữ đánh dấu siêu văn bản đã xuất hiện gần 30 năm nay và với mỗi năm, ngôn ngữ này ngày càng có nhiều cải tiến hơn. Bây giờ, bạn có thể hỏi, làm thế nào để trình duyệt diễn giải những gì sẽ hiển thị trên màn hình? Điều này được thực hiện trong một số phần:

Định dạng tài liệu HTML rất dễ dàng. Bạn có hai phần được gọi là phần đầu và phần thân. Phần đầu của trang web chứa mã không hiển thị cho người dùng. Điều này được sử dụng để liên kết các bảng định kiểu và khai báo các bit cần thiết khác cần thiết để trang web hiển thị đúng cách. Tiếp theo phần đầu, phần thân giống như âm thanh của nó, phần thân của trang web. Đây là nơi bạn có thể nói lên tiếng nói của mình và cho khán giả thấy những kỹ năng HTML tuyệt vời của bạn! Giờ đây, việc nhập văn bản vào nội dung và hiển thị chính xác theo cách bạn muốn không còn dễ dàng như vậy, nhưng nó gần như dễ dàng theo một nghĩa nào đó với việc sử dụng những thứ mà chúng tôi gọi là thẻ.

Dưới đây là một số thẻ HTML cơ bản:

• tiêu đề - được sử dụng để cho trình duyệt biết tiêu đề của trang là gì. Đây cũng là những gì bạn thấy khi nhìn vào tab của một trang web.
• h1, h2, h3, h4 - được sử dụng cho các kích thước tiêu đề khác nhau với h1 là lớn nhất và h4 là nhỏ nhất. Tôi sẽ đề cập nhiều hơn về vấn đề này trong phần tiếp theo.
• p - đoạn văn, được sử dụng để viết các đoạn văn bản. Giống như các đoạn văn trên một tờ giấy.
• br - break, chèn dấu ngắt dòng với văn bản.
• a - được sử dụng để tạo liên kết đến các trang khác, như một liên kết có thể nhấp được.
• img - được sử dụng để liên kết hình ảnh với trang web.
• ul, ol, li - danh sách không có thứ tự, danh sách có thứ tự và danh sách các mục.
• - được sử dụng để đưa ra các nhận xét nội tuyến trong mã mà người dùng cuối sẽ không nhìn thấy.

Và đây là một số thẻ CSS (trực quan):

• color - dùng để gán một màu cụ thể cho một phần tử cụ thể hoặc một tập hợp trên trang web.
• font-size - được sử dụng để thay đổi kích thước phông chữ trên trang.
• background-color - được sử dụng để thay đổi màu nền của phần tử nhất định hoặc toàn bộ trang.

Tôi cũng đã đính kèm một tờ thông tin nhỏ để giúp bạn nếu bạn cảm thấy hơi mất hứng, nhưng đừng lo lắng, bạn sẽ hiểu được nó ngay lập tức! Ngoài ra, www.w3schools.com cũng là một nguồn tài nguyên tuyệt vời cho bất kỳ câu hỏi lập trình nào của bạn. Họ chắc chắn đã tiết kiệm cho tôi một thời gian hoặc quá.

Về cơ bản, cách trình duyệt đọc tệp rất dễ dàng. Nó đi theo từng dòng và xử lý theo chức năng. Các ký tự được sử dụng để khai báo một thẻ như

và được sử dụng để đóng thẻ, chẳng hạn như

. Điều này rất quan trọng, nếu không thì trình duyệt sẽ không dừng lại ở đâu. Ở giữa

và

là nơi bạn nhập bất cứ thứ gì bạn muốn!

Bước 2: Thiết lập trình chỉnh sửa

Bây giờ chúng ta đã trình bày một chút về các yếu tố cơ bản của một trang web HTML, hãy đi sâu vào và thử nó cho chính chúng ta. Đối với bước tiếp theo này, tôi sẽ sử dụng Visual Studio Code để lập trình trang web, nhưng bố cục của mã sẽ giống nhau nếu bạn cảm thấy thoải mái hơn khi chỉ sử dụng Notepad hoặc TextEdit.

Trong Notepad:

• Với Notepad, chương trình khởi chạy với một tệp trống giúp bắt đầu cực kỳ dễ dàng. Điều này cũng sẽ cho phép chúng tôi nhảy một vài bước so với sử dụng VS Code. Hãy bắt đầu bằng cách lưu tệp ở định dạng chính xác.
• Nhấp vào Tệp> Lưu
• Nhập tên cho tệp của bạn, sau đó là.html và trong Lưu dưới dạng loại, hãy chọn tất cả các tệp. Nhấp vào để lưu.

Trong VS Code:

• Cách tốt nhất để bạn tận dụng tất cả các tính năng của IDE là bắt đầu bằng cách tạo tệp và cho IDE biết loại tệp đó là. Điều này có thể được thực hiện như sau:
• Nhấp vào Tệp> Tệp Mới
• Một tệp trống sẽ mở ra
• Tiếp theo, bạn sẽ muốn bắt đầu bằng cách lưu tệp, mặc dù trống, vì điều này sẽ cho phép IDE có thể hiểu sản phẩm cuối sẽ là loại tệp nào. Khi lưu, hãy chắc chắn bao gồm phần mở rộng.html ở cuối tên tệp. Nhấp vào để lưu.

Bước 3: Bản thiết kế

Sau khi bạn đã lưu thành công tệp filename.html của mình, hãy bắt đầu bằng cách tạo khung cho trang web của chúng tôi. Ở trên, hãy nhớ những phần chính của tệp chúng ta cần khai báo trước khi có thể bắt đầu tạo phần còn lại của trang HTML. Mẹo chuyên nghiệp: khi bắt đầu khuôn khổ cho trang web, thẻ HTML! DOCTYPE cho trình duyệt biết rằng tệp mà nó đang đọc là tệp html. Điều này có thể hữu ích nếu bạn có các loại mã khác nhau trong cùng một tệp và muốn chuyển đổi giữa các trình thông dịch. Đối với phạm vi của tài liệu hướng dẫn này, chúng tôi sẽ không đề cập quá nhiều đến vấn đề này nhưng nếu sau tài liệu hướng dẫn này, bạn muốn tìm hiểu thêm về phát triển HTML, vui lòng thử. Tôi sẽ chèn thẻ HTML DOCTYPE ở đầu tệp để thực hành tốt nhất. Nhớ mở và đóng bằng.

Đây là nơi mà việc lưu tệp trước khi bạn bắt đầu lập trình trở nên hữu ích, bây giờ IDE biết rằng nó đang hoạt động với tệp HTML, nó sẽ sử dụng intellisense để hoàn thành biểu thức và đưa ra các đề xuất để bạn không vô tình quên đóng thẻ. Lưu ý rằng đối với những người bạn đang sử dụng Notepad, intellisense không có sẵn như trong IDE. Chúng ta bắt đầu bằng cách nhập thẻ head và body như sau: (xem hình ảnh thứ hai).

Bây giờ, việc thiết lập tài liệu đã hoàn tất, chúng ta có thể bắt đầu cuộc đua và vui chơi!

Bước 4: Mã; Mã số; Mã số;

Chúng ta có thể bắt đầu bằng cách chèn tiêu đề cho tệp mới tạo của mình. Nhập bất cứ thứ gì bạn muốn. Hãy nhớ rằng đây là tên xuất hiện trong tab trình duyệt. Hãy cũng bắt đầu bằng cách nhập tiêu đề cho trang web của chúng tôi. Nhớ lại từ trước khi chúng tôi làm điều này như thế nào. Tôi có nghe thấy h1 / 2/3 / 4 không? Đúng rồi!

Trước khi chúng tôi tiếp tục, tôi thấy hữu ích khi mở tệp của chúng tôi trong cửa sổ trình duyệt để chúng tôi có thể xem trong thời gian thực các thay đổi của chúng tôi đang phản ánh như thế nào trong trình duyệt. Bạn có thể thực hiện việc này bằng cách nhấp vào Tệp> Lưu để lưu tệp, điều hướng đến thư mục lưu tệp HTML, đối với tôi đây là màn hình nền và sử dụng trình duyệt bạn chọn để mở tệp và bạn có xem nó không, có trang web của bạn! Lưu ý: Cá nhân tôi sử dụng Safari làm trình duyệt lựa chọn trên máy tính của mình, tuy nhiên, trong phát triển web, Firefox là trình duyệt tiêu chuẩn vàng để thử nghiệm vì nó hoạt động với hầu hết mọi ngôn ngữ kịch bản web.

Như bạn có thể thấy, tiêu đề đang hiển thị trên tab, cũng như nhìn thấy tiêu đề h1 của chúng tôi. Tôi thích mở cả cửa sổ trình duyệt của tệp cùng với IDE vì khi bạn thực hiện thay đổi trong IDE và lưu, các thay đổi sẽ diễn ra ngay lập tức trong trình duyệt.

Hãy thử thêm các thẻ và chơi với những thứ khác nhau mà bạn có thể làm với HTML. Như bạn có thể thấy bên dưới, tôi đã thêm một vài đoạn văn, dấu ngắt, siêu liên kết bên ngoài vào Guiductables.com, một hình ảnh, (có thể được liên kết từ một nguồn bên ngoài hoặc trong cùng một thư mục nơi tệp. HTML được lưu trữ), một ví dụ về danh sách không có thứ tự, danh sách có thứ tự và cuối cùng là nhận xét.

Nếu bạn muốn thử thêm một số tùy chọn màu sắc và sắp xếp, bạn có thể nhập thẻ kiểu vào đầu tệp. Đây là thời điểm mà nó chuyển từ HTML sang CSS nhưng vì lý do trực quan, tôi sẽ nhập một vài dòng để bạn có thể thấy nó hoạt động như thế nào. Về cơ bản, CSS hoạt động như thế nào là nó cho phép bạn kiểm soát các phần tử HTML trong các hàm bằng cách sử dụng dấu ngoặc vuông {} để nhập mã của bạn vào cho một phần tử HTML cụ thể.

Bước 5: Kết luận

Và bạn có nó rồi đấy; bạn đã tạo thành công trang web đầu tiên của mình! Vì đây là hướng dẫn dành cho người mới bắt đầu nên tôi muốn làm cho trải nghiệm đầu tiên của bạn với HTML trở nên thú vị. Cách tốt nhất để học hỏi theo kinh nghiệm của tôi là đi sâu vào và thử mọi thứ, xem bạn có thể làm gì với mã của mình và cũng xem cách bạn có thể phá mã của mình. Điều này xây dựng tính toàn vẹn và giúp bạn hiểu rõ hơn về cách thức và lý do tại sao mã hoạt động theo cách mà nó hoạt động. Hãy nhớ rằng www. W3Schools.com là một tài nguyên tuyệt vời cho các câu hỏi và họ thậm chí còn cung cấp một hộp cát ảo trong trình duyệt để thử mã của bạn. Hy vọng rằng bạn đã học được điều gì đó và viết mã vui vẻ!