Các tệp html và css được trình duyệt đọc từ trên xuống dưới như thế nào?

Điều duy nhất cản trở bạn và đưa bạn lên Web là học cách nói biệt ngữ

Ngôn ngữ đánh dấu siêu văn bản, viết tắt là HTML. Vì vậy, hãy sẵn sàng cho một số bài học ngôn ngữ. Sau chương này, bạn không chỉ hiểu một số yếu tố cơ bản của HTML mà còn có thể nói HTML với một chút văn phong. Chết tiệt, đến cuối cuốn sách này, bạn sẽ nói về HTML như thể bạn lớn lên ở Webville

Bạn muốn có được một ý tưởng ra khỏi đó? . Thậm chí tốt hơn, đó là một hình thức giao tiếp BẠN có thể tham gia

Nhưng nếu bạn thực sự muốn sử dụng Web một cách hiệu quả, bạn phải biết một số điều về HTML—chưa kể, một số điều về cách thức hoạt động của Web nữa. Hãy nhìn từ độ cao 30.000 feet

Máy chủ web có công việc toàn thời gian trên Internet, không mệt mỏi chờ đợi yêu cầu từ trình duyệt web. Những loại yêu cầu? . Khi máy chủ nhận được yêu cầu đối với bất kỳ tài nguyên nào trong số này, máy chủ sẽ tìm tài nguyên đó rồi gửi lại cho trình duyệt

Bạn đã biết trình duyệt hoạt động như thế nào. bạn đang lướt web và bạn bấm vào một liên kết để truy cập một trang. Nhấp chuột đó khiến trình duyệt của bạn yêu cầu một trang HTML từ máy chủ web, truy xuất nó và hiển thị trang trong cửa sổ trình duyệt của bạn

Nhưng làm thế nào để trình duyệt biết cách hiển thị một trang? . HTML cho trình duyệt biết tất cả về nội dung và cấu trúc của trang. Hãy xem nó hoạt động như thế nào

Vì vậy, bạn biết HTML là chìa khóa để trình duyệt hiển thị các trang của bạn, nhưng chính xác thì HTML trông như thế nào?

Hãy xem một chút về HTML. hãy tưởng tượng bạn sẽ tạo một trang web để quảng cáo Head First Lounge, một địa điểm tụ tập tại địa phương với một số giai điệu hay, thuốc tiên sảng khoái và truy cập không dây. Đây là những gì bạn muốn viết trong HTML

Thư giãn

Chúng tôi không mong đợi bạn biết HTML

Tại thời điểm này, bạn sẽ cảm nhận được HTML trông như thế nào; . Hiện tại, hãy nghiên cứu HTML và xem cách nó được trình bày trong trình duyệt trên trang tiếp theo. Đảm bảo chú ý cẩn thận đến từng chú thích chữ cái cũng như cách thức và vị trí nó được hiển thị trong trình duyệt

Khi trình duyệt đọc HTML của bạn, nó sẽ diễn giải tất cả các thẻ bao quanh văn bản của bạn. Các thẻ chỉ là các từ hoặc ký tự trong dấu ngoặc nhọn, như,

,

Hãy xem cách trình duyệt diễn giải các thẻ trong Head First Lounge

Starbuzz Coffee đã tự khẳng định mình là quán cà phê phát triển nhanh nhất xung quanh. Nếu bạn đã nhìn thấy một cái ở góc địa phương của mình, hãy nhìn sang bên kia đường—bạn sẽ thấy một cái khác

Trên thực tế, họ đã phát triển quá nhanh, thậm chí họ còn chưa lập được một trang web nào. và đó là bước đột phá lớn của bạn. Tình cờ, trong khi mua Trà chai Starbuzz, bạn gặp Giám đốc điều hành Starbuzz

Sức mạnh não bộ

Quyết định, quyết định. Kiểm tra ưu tiên đầu tiên của bạn bên dưới (chỉ chọn một)

A

Cho chó tắm

B

Cuối cùng, tài khoản kiểm tra của tôi được cân bằng

C

Tham gia hợp đồng biểu diễn Starbuzz và khởi động sự nghiệp web LỚN NHẤT

D

Đặt lịch hẹn với nha sĩ

Ghi chú

Giám đốc điều hành viết nguệch ngoạc điều gì đó trên khăn ăn và đưa cho bạn

Ghi chú

* Nếu tình cờ bạn chọn tùy chọn A, B hoặc D ở trang trước, chúng tôi khuyên bạn nên tặng cuốn sách này cho một thư viện tốt, dùng nó làm củi đốt trong mùa đông này, hoặc cứ tiếp tục bán nó trên Amazon và kiếm

Tất nhiên, vấn đề duy nhất với tất cả những điều này là bạn chưa thực sự tạo bất kỳ trang web nào. Nhưng đó là lý do tại sao bạn quyết định lao đầu vào HTML, phải không?

Đừng lo lắng, đây là những gì bạn sẽ làm trong vài trang tiếp theo

1. Tạo tệp HTML bằng trình soạn thảo văn bản yêu thích của bạn

2. Nhập thực đơn CEO Starbuzz viết trên khăn ăn

3. Lưu tệp dưới dạng “chỉ mục. html”

4. Mở tập tin “index. html” trong trình duyệt yêu thích của bạn, lùi lại và xem điều kỳ diệu xảy ra

Tất cả các tệp HTML đều là tệp văn bản. Để tạo một tệp văn bản, bạn cần một ứng dụng cho phép bạn tạo văn bản thuần túy mà không cần nhập nhiều định dạng ưa thích và các ký tự đặc biệt. Bạn chỉ cần văn bản đơn giản, thuần túy

Chúng tôi sẽ sử dụng TextEdit trên máy Mac trong cuốn sách này; . Và, nếu bạn đang chạy Windows, bạn sẽ muốn bỏ qua một vài trang để xem hướng dẫn của Windows

Bước một

• Điều hướng đến thư mục Ứng dụng của bạn

  Ứng dụng TextEdit nằm trong thư mục Ứng dụng. Cách dễ nhất để đến đó là chọn Cửa sổ Trình tìm kiếm Mới từ menu Tệp của Trình tìm kiếm, sau đó tìm Ứng dụng trực tiếp trong các phím tắt của bạn. Khi bạn đã tìm thấy nó, hãy nhấp vào Ứng dụng

  
  

Bước hai

• Xác định vị trí và chạy TextEdit

  Bạn có thể có nhiều ứng dụng được liệt kê trong thư mục Ứng dụng, vì vậy hãy cuộn xuống cho đến khi bạn thấy TextEdit. Để chạy ứng dụng, nhấp đúp vào biểu tượng TextEdit

Bước ba (tùy chọn)

• Giữ TextEdit trong Dock của bạn

  Nếu bạn muốn làm cho cuộc sống của mình dễ dàng hơn, hãy nhấp và giữ vào biểu tượng TextEdit trong Dock (biểu tượng này xuất hiện khi ứng dụng đang chạy). Khi menu bật lên hiển thị, hãy chọn Tùy chọn, sau đó chọn “Giữ trong Dock. ” Bằng cách đó, biểu tượng TextEdit sẽ luôn xuất hiện trong Dock của bạn và bạn sẽ không phải tìm kiếm nó trong thư mục Ứng dụng mỗi khi cần sử dụng

  

Bước bốn

• Thay đổi tùy chọn TextEdit của bạn

  Theo mặc định, TextEdit ở chế độ “văn bản đa dạng thức”, có nghĩa là nó sẽ thêm định dạng và ký tự đặc biệt của riêng nó vào tệp của bạn khi bạn lưu nó—chứ không phải những gì bạn muốn. Vì vậy, bạn sẽ cần thay đổi Tùy chọn TextEdit của mình để TextEdit lưu công việc của bạn dưới dạng tệp văn bản thuần túy. Để thực hiện việc này, trước tiên hãy chọn mục menu Tùy chọn từ menu TextEdit

  

Bước năm

• Đặt tùy chọn cho văn bản thuần túy

  Khi bạn nhìn thấy hộp thoại Tùy chọn, có ba điều bạn cần làm

  Đầu tiên, chọn “Văn bản thuần túy” làm chế độ soạn thảo mặc định trong tab Tài liệu mới

  Trong tab “Mở và lưu”, hãy đảm bảo chọn “Bỏ qua các lệnh văn bản có định dạng trong tệp HTML”

  Cuối cùng, đảm bảo rằng nút “Thêm. txt thành tệp văn bản thuần túy” không được chọn

  Đó là nó;

  

Bước sáu

• Thoát và khởi động lại

  Bây giờ hãy thoát khỏi TextEdit bằng cách chọn Thoát khỏi menu TextEdit, sau đó khởi động lại ứng dụng. Lần này, bạn sẽ thấy một cửa sổ không có menu định dạng văn bản ưa thích nào ở trên cùng. Bây giờ bạn đã sẵn sàng để tạo một số HTML

  

Ghi chú

Hoặc một phiên bản khác của Windows

Nếu bạn đang đọc trang này, bạn phải là người dùng Windows 7. Nếu không, bạn có thể muốn bỏ qua một vài trang phía trước. Hoặc, nếu bạn chỉ muốn ngồi ở phía sau và không đặt câu hỏi, chúng tôi cũng đồng ý với điều đó

Ghi chú

Nếu bạn đang sử dụng một phiên bản Windows khác, bạn cũng sẽ tìm thấy Notepad ở đó

Để tạo các tệp HTML trong Windows 7, chúng ta sẽ sử dụng Notepad—nó đi kèm với mọi bản sao của Windows, giá phù hợp và rất dễ sử dụng. Nếu bạn có trình chỉnh sửa yêu thích của riêng mình chạy trên Windows 7, điều đó cũng tốt; . phần mở rộng html”

Giả sử bạn đang sử dụng Notepad, đây là cách bạn sẽ tạo tệp HTML đầu tiên của mình

Bước một

• Mở menu Bắt đầu và điều hướng đến Notepad

  Bạn sẽ tìm thấy ứng dụng Notepad trong Phụ kiện. Cách dễ nhất để đến đó là nhấp vào menu Bắt đầu, sau đó nhấp vào Tất cả chương trình, sau đó nhấp vào Phụ kiện. Bạn sẽ thấy Notepad được liệt kê ở đó

  

Bước hai

• Mở sổ tay

  Khi bạn đã tìm thấy Notepad trong thư mục Phụ kiện, hãy tiếp tục và nhấp vào nó. Bạn sẽ thấy một cửa sổ trống sẵn sàng để bạn bắt đầu nhập HTML

  

Bước ba (tùy chọn)

• Không ẩn phần mở rộng của các loại tệp phổ biến

  Theo mặc định, Windows File Explorer ẩn phần mở rộng tệp của các loại tệp nổi tiếng. Ví dụ: một tệp có tên “Irule. html” sẽ được hiển thị trong Explorer dưới dạng “Irule” mà không có “. phần mở rộng html”

  Sẽ bớt khó hiểu hơn nhiều nếu Windows hiển thị cho bạn các tiện ích mở rộng này, vì vậy, hãy thay đổi các tùy chọn thư mục của bạn để bạn có thể nhìn thấy chúng

  Đầu tiên, mở Tùy chọn thư mục bằng cách nhấp vào nút Bắt đầu, nhấp vào Bảng điều khiển, nhấp vào “Giao diện và cá nhân hóa”, sau đó nhấp vào Tùy chọn thư mục

  Tiếp theo, trong tab Xem, bên dưới “Cài đặt nâng cao”, hãy cuộn xuống cho đến khi bạn thấy “Ẩn tiện ích mở rộng cho các loại tệp đã biết” và bỏ chọn tùy chọn này

  Đó là nó. Nhấp vào nút OK để lưu tùy chọn và bây giờ bạn sẽ thấy các phần mở rộng tệp trong Explorer

  

Được rồi, bây giờ bạn đã biết những kiến ​​thức cơ bản về cách tạo một tệp văn bản thuần túy, bạn chỉ cần tải một số nội dung vào trình soạn thảo văn bản của mình, lưu nó rồi tải nó vào trình duyệt của bạn

Bắt đầu bằng cách nhập đồ uống trực tiếp từ khăn ăn của CEO; . Bạn sẽ thêm một số đánh dấu HTML để cung cấp cho nội dung một số cấu trúc, nhưng hiện tại, chỉ cần nhập nội dung cơ bản vào. Trong khi bạn đang ở đó, hãy tiếp tục và thêm “Đồ uống cà phê Starbuzz” vào đầu tệp

Khi bạn đã nhập đồ uống từ khăn ăn của Giám đốc điều hành, bạn sẽ lưu công việc của mình vào một tệp có tên là “chỉ mục. html”. Trước khi làm điều đó, bạn sẽ muốn tạo một thư mục có tên là “starbuzz” để chứa các tệp của trang web

Để bắt đầu, hãy chọn Lưu từ menu Tệp và bạn sẽ thấy hộp thoại Lưu dưới dạng. Sau đó, đây là những gì bạn cần làm

1. Trước tiên, hãy tạo một thư mục “starbuzz” cho tất cả các tệp liên quan đến Starbuzz của bạn. Bạn có thể làm điều này với nút Thư mục mới

   

2. Tiếp theo, click vào thư mục “starbuzz” vừa tạo rồi nhập “index. html” làm tên tệp và nhấp vào nút Lưu

Bạn đã sẵn sàng mở trang web đầu tiên của mình chưa? . ” (hoặc “Mở. ” sử dụng Windows 7 và Internet Explorer) từ menu Tệp và điều hướng đến “chỉ mục. tập tin html”. Chọn nó và nhấp vào Mở

Thành công. Bạn đã tải trang trong trình duyệt, mặc dù kết quả hơi. uh. không hài lòng. Nhưng đó chỉ là vì tất cả những gì bạn đã làm cho đến nay là thực hiện cơ chế tạo trang và xem nó trong trình duyệt. Và cho đến nay, bạn chỉ nhập nội dung của trang web. Đó là nơi HTML xuất hiện. HTML cung cấp cho bạn một cách để thông báo cho trình duyệt về cấu trúc trang của bạn. Cấu trúc là gì? . Khi trình duyệt biết một chút về cấu trúc, nó có thể hiển thị trang của bạn theo cách có ý nghĩa và dễ đọc hơn

Bạn có một tệp HTML có đánh dấu—điều đó có tạo nên một trang web không? . Bạn đã xem , , </code>, and <code><body></code> tags, and we just need to add those to make this a first-class HTML page...</p><div><a></a><div><a></a><img src="/api/v2/epubs/9781449324469/files/httpatomoreillycomsourceoreillyimages2244389.png.jpg" alt="image with no caption"></img></div></div></div><div title="Another test drive"><div><a></a><div><a></a><img src="/api/v2/epubs/9781449324469/files/httpatomoreillycomsourceoreillyimages2244377.png.jpg" alt="image with no caption"></img></div></div><p><a></a><strong>Go ahead and change your “index.html” file by adding in the <head>, </head>, <title>,, and tags. Once you’ve done that, save your changes and reload the file into your browser.

Các tệp HTML và CSS được trình duyệt đọc như thế nào?

Trình duyệt có đọc CSS từ trên xuống dưới không?

Trình duyệt có đọc HTML từ trên xuống dưới không?

Trình duyệt đọc một trang HTML như thế nào?