DAVEN Farnham: Hôm nay, tôi sẽ nói một chút về HTML, HyperText Markup Language. Bạn nhìn thấy ở khắp mọi nơi HTML những ngày này. Trong thực tế, nếu bạn đang xem cái này video trong một trình duyệt, bạn HTML nhìn thấy ngay bây giờ. HTML không phải là một ngôn ngữ lập trình, đúng hơn, đó là một ngôn ngữ đánh dấu được sử dụng bởi trình duyệt web để làm cho các trang trên internet. 

Vì vậy, bạn có thể hỏi, làm thế nào chính xác là bằng văn bản một trang web trong HTML khác nhau từ viết một chương trình trong một chương trình ngôn ngữ như C? Vâng, C là một ngôn ngữ với rất nghiêm ngặt quy tắc cú pháp mà cần phải được biên dịch trước khi nó có thể chạy. Nếu bạn đã từng quên bao gồm dấu chấm phẩy ở cuối một tuyên bố trong mã C của bạn, bạn biết những gì tôi đang nói về liên quan đến cú pháp nghiêm ngặt. 

Trình duyệt web mặc dù, nhiều hơn một chút tha thứ khi nói đến HTML. Ngay cả khi HTML của bạn không phải là cú pháp chính xác, trang của bạn vẫn có thể hiển thị bằng một trình duyệt, nhưng nó có thể không nhìn như bạn dự định. Vì vậy, nó luôn luôn tốt nhất để theo các quy tắc. Cách tốt nhất để có được một trực giác về những điều công việc là đi qua một ví dụ. 

Vì vậy, những gì chúng tôi có ở đây là một cơ bản kế hoạch chi tiết cho một trang web. Bạn có thể nhận thấy rất nhiều thứ ở giữa dấu ngoặc góc cạnh. Vâng, chỉ là những thẻ. Thẻ cơ bản thông báo cho các trình duyệt web rằng, hey, một cái gì đó đang đến theo cách của bạn. Nhớ mặc dù, bất cứ khi nào bạn mở một thẻ, bạn cần phải đóng nó một khi bạn đang thực hiện bằng cách sử dụng nó. 

Vì vậy, ví dụ, tôi mở một phần mã với mở cơ thể khung, khung gần. Sau đó tôi thêm một số văn bản, trong trường hợp này, tôi trang web đầu tiên sau đó khi tôi đến đóng phần này, tôi sử dụng gần như là một thẻ giống hệt nhau ngoại trừ thời gian này với một dấu gạch chéo trước khi cơ thể. Nói chung, đây là định dạng bạn sẽ sử dụng bất cứ khi nào bạn đang mở và đóng thẻ. Với nhau, một thẻ mở và một thẻ kết thúc soạn những gì được gọi là một phần tử. 

Nếu bạn nhìn vào dòng đầu tiên, bạn sẽ thấy một dấu chấm than tiếp theo DOCTYPE html. Điều này thực sự chỉ nói với trình duyệt của bạn rằng tập tin là một trang web viết bằng HTML. Các thẻ HTML cơ bản nói, ở đây có một số HTML. Sau đó chúng tôi có một thẻ đầu với một thẻ tiêu đề bên trong nó. Thẻ đầu bạn có thể nghĩ như bao gồm HTML code mà đi kèm cho phần lớn các trang web của bạn nội dung thực tế. 

Nói chung, bạn đặt tiêu đề của bạn trang web ở đây, mặc dù có một số các thẻ khác có thể xuất hiện ở đây là tốt. Tiếp đến cơ thể của trang web của bạn, thịt thực tế và xương của trang web của bạn. Trong ví dụ của chúng tôi, chúng tôi đã chỉ cần đặt một đơn giản câu, trang web đầu tiên của tôi, trong đó, nếu chúng ta chạy các trang web của chúng tôi, sẽ xem xét một chút gì đó như thế này. Trang web của chúng tôi không phải là quá say sưa, nhưng đừng lo lắng. Chúng tôi sẽ làm đẹp nó lên sớm. 

Vì vậy, các HTML trên, chúng tôi sẽ cung cấp cho bạn rất mẫu cơ bản cho một trang web, không có gì ưa thích, chỉ cần xương trần. Nhưng nếu tôi là tạo ra một trang web, những gì nếu tôi muốn thêm một hình ảnh, nói rằng, bản thân mình? Vâng, tôi có thể làm điều đó. Có một vài cách để thêm hình ảnh vào trang web của bạn. Nếu hình ảnh là trong cùng thư mục với tập tin HTML của bạn, bạn có thể liên kết đến các hình ảnh thông qua con đường như thế này. 

Bạn mở ra một thẻ hình ảnh sau bởi trong thuộc tính Alt trong nguồn gốc của hình ảnh. Giá trị các thuộc tính Alt là chỉ một số văn bản thay thế trong trường hợp một người sử dụng có thể không nhìn thấy hình ảnh. Ngoài ra, bạn cũng có thể liên kết đến hình ảnh thông qua một URL đầy đủ, như thế này. Bây giờ, trang web mà không thực sự tồn tại, nhưng nếu có một hình ảnh của tôi tại địa chỉ đó, tôi có thể sử dụng URL nguồn bao gồm hình ảnh của mình trên trang web của tôi. Dù bằng cách nào, bạn kết thúc với một nhiều trang web đẹp hơn, một cái gì đó như thế này. 

Vâng, đó là khá mát mẻ, nhưng tôi loại của một số văn bản muốn ở đây là tốt. Vì vậy, bạn chỉ cần thêm một cái gì đó siêu đơn giản trên hình ảnh, như tiêu đề. Tất cả tôi đã làm cho đến nay là sử dụng các tiêu đề tag, H1, và ngắt dòng tag, br. Các tag tiêu đề làm cho phông chữ một chút bit lớn hơn và nổi bật hơn. Thẻ ngắt dòng, mặt khác tay, là loại mát mẻ. Không giống như hầu hết các thẻ khác, bạn không có một thẻ mở và đóng cửa nghỉ, chỉ một trong những trình bày ở trên. Điều này là do nghỉ không có nội dung và do đó, một phần tử rỗng. 

Các yếu tố sản phẩm nào như thế này, bạn có thể mở và gần đồng thời đơn giản bằng cách trong đó có một dấu gạch chéo ở kết thúc của việc kê khai ban đầu. Vì vậy, bây giờ trang web của tôi có vẻ hơi một cái gì đó như thế này. Tốt hơn, nhưng nó loại cảm thấy như một kết thúc chết. Có nơi nào để đi sang một bên từ trang chính này. Vâng, chúng ta hãy khắc phục điều đó bằng cách bao gồm một liên kết. 

Những gì tôi sẽ làm ở đây là sử dụng một thuộc tính ký hiệu là A và làm cho hình ảnh một liên kết đến, chúng ta hãy nói, CS50 TV. Bằng cách đó, bất cứ khi nào ai nhấp chuột vào tôi, trình duyệt của họ sẽ được dẫn đến khác, có lẽ nhiều hơn hữu ích, trang web. Tôi đã có để giảm thiểu kích thước của văn bản một chút bởi vì trang web của chúng tôi là nhận được nâng cao hơn. Nhưng hy vọng, nó vẫn còn rõ ràng. Trang web của tôi trông giống hệt nhau chỉ bây giờ, bất cứ khi nào tôi bấm vào hình ảnh, trình duyệt sẽ mở ra một tab cho trang web CS50.tv. 

Cuối cùng, chúng ta hãy nói tôi sẽ phong cách trang web này sau đó sử dụng CSS. CSS là những gì được biết đến như một Cascading Style Sheet. Và nó về cơ bản cung cấp một hiệu quả cách để chỉnh sửa và phong cách khối tương tự như mã. Tôi muốn bắt đầu tổ chức HTML của tôi làm cho nó dễ dàng hơn để tạo kiểu sau này. Ở đây, tôi thiết lập hai loại khác nhau của định danh để giúp tổ chức mã của tôi. Tôi đã sử dụng các thuộc tính ID trong một chia, hoặc thẻ div, và tôi đã sử dụng một Lớp thuộc tính bên trong một thẻ div. 

ID và Class thuộc tính làm việc tương tự. Sự khác biệt duy nhất là bạn chỉ có thể có một yếu tố, ID cụ thể, nhưng bất kỳ số lượng của các yếu tố có thể chia sẻ một lớp học. Ví dụ, tôi có thể sử dụng lớp hình ảnh nhiều lần, nhưng tôi không thể tạo ra bộ phận khác với đầu ID. Mặc dù tôi đã không đi vào CSS, một ngôn ngữ khác thường được sử dụng cùng với HTML, một khi tôi bắt đầu tạo kiểu tóc mã của tôi với CSS, tôi có thể sử dụng các thuộc tính tổ chức để ảnh hưởng thẩm mỹ trang web của tôi. 

Tất cả mọi thứ trong đầu bộ phận sẽ có stylings tương tự hoặc bất kỳ nhóm khác của nhóm tôi HTML vào hình ảnh lớp học sẽ chia sẻ một cái nhìn tương tự. Điều này là dễ dàng hơn nhiều so với cố gắng để chỉnh sửa và hình ảnh phong cách hay một cụm văn bản riêng. 

Vì vậy, chúng tôi đã đi qua những điều cơ bản như thế nào để thực hiện một trang web với HTML. HTML có một loạt các tính năng khác nữa mà khi kết hợp với các ngôn ngữ khác như CSS và JavaScript, có thể thực sự làm cho các trang nổi bật. Cách tốt nhất để có được thoải mái với HTML chỉ là để lộn xộn xung quanh với nó, xem những gì hoạt động, và những gì không. 

Tên tôi là Daven Farnham. Đây là CS50. 

Vì vậy, ví dụ, tôi có thể sử dụng hình ảnh lớp - Không, có rất nhiều thuộc tính. Tên tôi là Daven Farnham. Đây là CS 650. Tôi muốn nói CSS. Đây là CSS.