Chào mừng trở lại.
Hãy xây dựng trang web đầu tiên của chúng tôi.
Bây giờ tôi đã tạo một thư mục có tên là Máy chủ Web vì đây sẽ là máy chủ web của chúng tôi bây giờ.
Và bên trong máy chủ web này, chúng tôi có một tệp HTML chỉ mục, đây sẽ là phần mở rộng để tạo
tệp HTML.
Chúng ta có script JS, là phần mở rộng để viết JavaScript giống như chúng ta có py để viết Python và sau
đó chúng ta có style CSS để viết các style CSS.
Bây giờ trong phần này, tôi sẽ sử dụng văn bản siêu phàm và thiết bị đầu cuối thuật ngữ AI của tôi, nhưng bạn có thể sử dụng bất kỳ công
cụ nhà phát triển nào bạn muốn.
Tôi thích sử dụng những cái này chỉ để ghi màn hình.
Họ giúp đỡ vì tốt, nó đẹp và sạch sẽ.
Nó không cung cấp cho tôi quá nhiều gợi ý để tôi cũng có thể mắc lỗi và chỉ cho bạn khi tôi mắc lỗi
cách tôi sửa chúng.
Nhưng một lần nữa, bạn có thể sử dụng mã Visual Studio, bất cứ điều gì bạn muốn.
Bây giờ bạn thấy ở đây rằng tất cả các tệp này đều trống.
Nhưng hãy nhớ rằng, máy chủ web chỉ cần cung cấp ba tệp này cho trình duyệt để trình duyệt có thể hiển thị
trang.
Vì vậy, hãy bắt đầu với HTML.
Làm thế nào để chúng tôi viết HTML?
Chà, văn bản Sublime thực sự cho phép tôi làm điều gì đó thú vị ở đây nếu tôi nhập HTML và sau đó nhấn tab.
Nó tự động điền nó cho tôi.
Tốt thôi tốt thôi.
Tôi muốn lừa nó, nhưng, này, tôi không muốn làm bạn chết.
Vì vậy, đây là một tệp HTML tiêu chuẩn vì tôi có phần mở rộng dot html.
Nếu tôi có kiểu cú pháp này, tôi có thể viết HTML và nó không khó lắm.
Chúng tôi có thẻ mở và thẻ đóng với dấu gạch chéo ngược ở đây.
Vì vậy, chúng tôi có phần đầu của trang web với một tiêu đề.
Vì vậy, đây là những gì xuất hiện trên tab.
Vì vậy, hãy nói của tôi.
Trang mạng.
Rất sáng tạo.
Vì vậy, đó là đầu và sau đó là cơ thể.
Đây là những gì được hiển thị trên một trang web.
Vì vậy, ở đây tôi có thể nói tôi là một bậc thầy về web.
Chỉ vậy thôi.
Và chúng tôi đã tạo tệp HTML của mình.
Bây giờ hãy kiểm tra điều này.
Nếu bây giờ tôi mở chỉ mục. html, nếu tôi nhấp chuột phải vào đây và giả sử mở trong cửa sổ của bạn hoặc thậm chí bạn
có thể đi và nhấp đúp vào tệp này.
Vì vậy, nếu tôi nhấp đúp vào cái này, hãy nhìn vào cái đó.
Tôi là một quản trị viên web.
Chỉ là văn bản đơn giản.
Không có gì quá điên rồ.
Nhưng tôi vừa tạo trang web đầu tiên của mình.
Hãy tiếp tục với CSIS.
CSS có cú pháp khác với cú pháp html css.
Đi một cái gì đó như thế này.
Chúng tôi có thể cung cấp cho nó phần tử html mà chúng tôi muốn thêm một số kiểu dáng vào.
Trong trường hợp của chúng ta, hãy nói cơ thể.
Và tôi có thể nói cơ thể.
Sau đó, dấu ngoặc nhọn.
Và ở đây tôi muốn có nền, giả sử màu sắc và chúng ta sẽ đi với.
Hừ!
Hãy đồng hành cùng Green.
Nếu tôi lưu điều này.
Và tôi làm mới trang.
Hừ!
Không có chuyện gì xảy ra.
Và đây là một chi tiết nhỏ, một lần nữa, đây không phải là một khóa học phát triển web, vì vậy chúng ta không
cần phải lo lắng quá nhiều.
Nhưng về cơ bản, điều đầu tiên xảy ra là tệp HTML được gửi đi và tệp HTML thực sự
là thứ duy nhất được trình duyệt đọc.
Vì vậy, trong tệp HTML, tôi phải nói, hey, HTML.
Nhân tiện, chúng tôi cũng có một tệp CSS.
Bạn cũng có thể sử dụng nó trong trang web?
Vì vậy, chúng ta có thể làm điều đó trong thẻ head?
Bằng cách sử dụng một cái gì đó được gọi là thẻ liên kết.
Vì vậy, một thẻ liên kết.
Chúng tôi thực sự có thể loại bỏ một số điều này.
Chúng ta chỉ cần nói, này, nó là một loại CSS văn bản và nó có một cái gì đó được gọi là H ref.
H ref chỉ đơn giản nói, Này, tệp này nằm ở đâu?
Trong trường hợp của chúng tôi, vì nó nằm trong cùng một thư mục với HTML được lập chỉ mục của chúng tôi, chúng tôi có thể nói đơn giản đó
là CSS dot style bởi vì, chỉ cần tìm Solidot CSS và đó là nơi chứa tệp style.
Và bây giờ, nếu bạn nhớ, chúng tôi cũng đã có bảng định kiểu mối quan hệ mà chúng tôi cần đưa vào.
Tôi vừa xóa nó để chúng ta có thể xem những gì chúng ta đang viết ở đây.
Vì vậy, nếu chúng ta làm bảng định kiểu và đây chỉ là một cái gì đó, một cú pháp mà bạn phải làm quen nếu
bạn muốn bao gồm một tệp CSS.
Nếu tôi lưu cái này và quay lại và làm mới.
Này, nhìn này.
Trang web xấu xí của tôi.
Hãy làm cho nó lớn hơn một chút.
Trang web xấu xí với màu nền xanh lá cây của tôi giờ đã có một số phong cách.
Nếu tôi mở lại các công cụ dành cho nhà phát triển.
Và tôi nhấn refresh.
Nhìn kìa.
Tôi nhận được một tệp HTML và một tệp CSS.
Đáng kinh ngạc.
Vì vậy, tôi vừa tạo máy chủ web của riêng mình.
Đúng.
Chúng tôi thậm chí có thể viết JavaScript ở đây.
Nhưng một lần nữa, đây không phải là một khóa học JavaScript, vì vậy chúng ta không cần phải lo lắng về nó trong trường hợp này.
Của bạn đây.
Tôi vừa viết một số JavaScript, điều này giống như viết bản in bằng Python.
Nếu tôi làm mới trang một lần nữa.
Một lần nữa, tệp JavaScript không được hiển thị vì tốt, chúng tôi phải nói lại với HTML chỉ
mục rằng chúng tôi cần tệp JavaScript và thường các tệp JavaScript được chứa trong thẻ script, thường ở cuối
nội dung.
Vì vậy, hãy đóng nó lại.
Và ở đây, thay vì sử dụng ref, chúng ta chỉ cần nói CRC cho nguồn.
Và sau đó một lần nữa, tệp JavaScript ở đâu?
Đó là ở script JS Vì vậy, nếu tôi lưu cái này và tôi làm mới trang.
Nhìn kìa.
Bây giờ chúng tôi đang tải tập lệnh, tệp của JJ và tất cả những gì nó đang làm là nếu chúng tôi nhấp vào tab bảng điều khiển là
bạn sẽ thấy nó in thứ gì đó trong bảng điều khiển và bảng điều khiển là thứ mà JavaScript sử dụng.
Nhưng tất cả những gì chúng tôi quan tâm là chúng tôi có thể cung cấp ba tệp này.
Những gì chúng tôi đã làm là tạo ra máy chủ đầu tiên của chúng tôi.
Nhưng bạn có thể đã nhận thấy điều gì đó.
Khi bạn đi lên đây.
Nhìn vào đường dẫn URL mà chúng tôi có.
Đó không phải là những gì bạn thường gõ vào một trang web, phải không?
Ý tôi là chúng tôi đã thấy rằng trang web xkcd dot com ở đây cũng có dot com sử dụng http.
Đó là một URL thực, đúng.
Chà, tôi rất tiếc phải nói với bạn rằng chúng tôi không thực sự tạo một máy chủ web thực sự vì tất cả những gì chúng
tôi làm là chúng tôi đã cung cấp cho trình duyệt một số tệp, như bạn có thể thấy, từ máy tính của chúng tôi.
Vì vậy, tất cả những gì nó đang làm là trình duyệt nói, này, tôi sẽ hiển thị các tệp này nằm ngay tại đây trên
máy tính của bạn.
Vì vậy, về cơ bản chúng ta có một máy chủ web cũng đang chạy một trình duyệt, nhưng đó không phải là cách hoạt động của cuộc sống thực.
Tại sao lại như vậy?
Vâng, hãy tưởng tượng nếu bạn có trang web của riêng mình.
Bạn có thực sự muốn mọi người từ khắp nơi trên thế giới truy cập trực tiếp vào trang web của bạn thông qua
máy tính, lấy các tệp từ máy tính của bạn không?
Ý tôi là không.
Đúng.
Có rất nhiều vấn đề bảo mật.
Có rất nhiều vấn đề với hiệu suất.
Bạn phải luôn giữ máy tính xách tay của mình để mọi người có thể truy cập trang web của bạn.
Thay vào đó, chúng tôi muốn có một máy chủ web, như tên gọi, phục vụ các tệp và chuyên phục vụ
các tệp cho trình duyệt.
Ở một nơi nào đó trên thế giới mà tôi không phải lo lắng.
Nó không có trên máy tính của tôi.
Ai đó sở hữu máy đó, ai đó sở hữu máy tính đó và nó luôn hoạt động để bất cứ khi nào chúng
ta truy cập vào một trang web hoặc một liên kết, nó sẽ luôn chạy và gửi những tệp đó ra ngoài.
Vì vậy, cuối cùng chúng ta sẽ quay trở lại Python ở đây bởi vì những gì chúng ta muốn làm là làm một cái gì đó phức tạp hơn là
chỉ có những tệp này trên máy của chúng ta.
Thay vào đó, chúng tôi muốn xây dựng một máy chủ thực sự bằng Python mà chúng tôi có thể triển khai để mọi người có thể truy cập trang web của chúng
tôi ở mọi nơi trên thế giới.
Bây giờ bạn có thể vẫn còn nhầm lẫn.
Toàn bộ quá trình này có thể không hoàn toàn có ý nghĩa đối với bạn vì chúng tôi chỉ mới bắt đầu.
Nhưng đừng lo lắng, cuối cùng, tất cả sẽ có ý nghĩa.
Vì vậy, chúng ta hãy quên trình duyệt ngay bây giờ và bắt tay vào xây dựng một máy chủ thực sự, một thứ phức tạp hơn những gì chúng ta đã làm
cho đến bây giờ, chỉ là một thư mục với ba tệp này và chúng ta chỉ cần nhấp đúp
vào chỉ mục. html.
Hẹn gặp lại các bạn trong video tiếp theo.
Tạm biệt.