如果您來到這裡，那是因為您想了解 Web 開發的世界是如何運作的，誰知道呢，您是否想在新職業中邁出第一步。本指南適合對該領域一無所知並希望從頭開始、在深入了解語言和工具之前了解基礎知識的您。讓我們一起以實用且易於理解的方式探索如何開始這趟旅程。
網路是一個連接數百萬台設備和系統的全球網絡，允許即時存取和共享資訊。換句話說，網路就像一個大型數位圖書館。當您訪問網站時，您正在詢問儲存在世界某個地方的資訊。瀏覽器（如 Google Chrome 或 Firefox）就像“圖書館員”，為您搜尋和組織這些資訊。
以下是讓這一切發揮作用的關鍵要素：
1。瀏覽器和伺服器
讓我們了解一下當您訪問網站 https://www.pudim.com.br/ 時會發生什麼。瀏覽器向伺服器發出請求，伺服器以顯示頁面所需的檔案進行回應。對於 Pudim，伺服器傳回一個包含網站基本結構的 HTML 文件，其中包括標題、圖片和電子郵件連結。
瀏覽器是您用來存取網路的程式（Chrome、Firefox 等）。它發出資訊請求並以有組織的方式顯示頁面。
伺服器是儲存網站檔案（文字、圖像、影片）並在您（使用者）要求時將其發送到您的瀏覽器的電腦。將伺服器視為儲存網站檔案（文字、圖像、影片）並透過發送這些檔案來回應瀏覽器請求的「專用電腦」。網站必須能夠透過網路存取。
對於 Pudim，伺服器傳回一個包含網站基本結構的 HTML 文件，其中包括標題、圖片和電子郵件連結。
2。瀏覽器和伺服器如何通訊？
當您造訪像布丁這樣的網站時，瀏覽器和伺服器需要「對話」才能正確顯示內容。這種通訊透過 HTTP（超文本傳輸協定）進行，HTTP 是一組定義如何傳送和接收資訊的規則。瀏覽器會向伺服器發送請求（稱為 HTTP 請求），伺服器會以必要的文件（例如 HTML、CSS 和 JavaScript）回應，以在瀏覽器中組裝頁面。此資訊交換快速且有效率，確保網站正確顯示。
實際範例：在瀏覽器中輸入“https://www.pudim.com.br/”，然後按 Enter。您將看到一個簡單的頁面，其中包含布丁圖像和電子郵件連結。
3。什麼是 API 以及它如何發揮作用？
現在想像一下 Pudim 網站也想顯示天氣預報。為此，他可以使用 API（應用程式介面）。 API 作為橋樑，允許不同系統交換資訊。
例如：假設布丁網站也顯示一則訊息，例如「今天是吃布丁的好日子！」根據當前天氣。瀏覽器會向天氣 API 發送請求，該 API 將傳回有關溫度和天氣狀況的資訊。然後網站可以動態顯示此訊息。
總結：API 是現代 Web 開發中必不可少的工具，因為它們允許您從任何內容添加即時更新的動態功能，例如資料。
現在您已經了解了基礎知識，讓我們開始學習建立網站的基本工具。
1。 HTML：網站的架構
HTML（超文本標記語言）定義頁面的結構。它由標籤組成，標籤是指示內容如何在瀏覽器中組織和顯示的元素。每個標籤都有特定的功能，可以包含文字、圖像、連結等元素。
範例標籤：
：定義一段文字。
實際範例：建立一個名為index.html的檔案並貼上以下程式碼：
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Meu Primeiro Site</title> </head> <body> <h1>Olá, mundo!</h1> <p>Este é o meu primeiro site usando HTML.</p> </body> </html>
在瀏覽器中開啟檔案並查看您的第一個網頁！
2。 CSS：頁面樣式
CSS（層疊樣式表）用於為網站賦予顏色、形狀和樣式，使其看起來美觀。
CSS 的工作原理：
CSS 規則範例：
實際範例：建立一個名為 styles.css 的檔案並加入以下內容：
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Meu Primeiro Site</title> </head> <body> <h1>Olá, mundo!</h1> <p>Este é o meu primeiro site usando HTML.</p> </body> </html>
透過在
中加入以下行將 CSS 連接到 HTML：來自index.html 檔案：
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
text-align: center;
}
h1 {
color: #0066cc;
}
刷新瀏覽器即可看到頁面樣式變化。
3。 JavaScript：加入互動性
JavaScript 是一種使頁面具有互動性的語言，可讓您新增動畫、驗證表單、操作元素等等。 （我們將在另一篇文章中詳細討論 javascript，敬請期待❤）
互動範例：
實際範例：新增 javascript 部分 <script>;在你的index.html 檔案中。它看起來像這樣：<br> </script>
<link rel="stylesheet" href="styles.css">
現在，當您點擊標題時，螢幕上會顯示一則訊息。
您可能想知道：「我的 HTML、CSS 和 JavaScript 程式碼如何可供其他人使用，就像我造訪 Pudim 網站一樣？」。好吧，當您在電腦上建立和測試網站時，它只有您自己可見。為了讓網路上的其他使用者存取您的作品，您需要將其發佈到伺服器。
將伺服器視為儲存所有網站檔案的庫。當有人在瀏覽器中輸入您的網站位址時，伺服器會傳送顯示該頁面所需的檔案。如果沒有這個，其他人將無法訪問您的網站。
提供全世界網站的過程稱為託管。有多種類型的伺服器和託管服務可以讓這一切變得簡單。現在您已經了解了這個概念，是時候探索如何創建更完整的專案並最終將它們發布給全世界了！
程式碼編輯器：使用 Visual Studio Code 等編輯器來編寫和組織程式碼。
使用 Git 進行版本控制：Git 可讓您追蹤程式碼更改，GitHub 可協助您在線上分享專案。
線上資源：FreeCodeCamp、MDN Web Docs 和 W3Schools 等平台提供優秀的免費教學。
網路開發領域薪資高，需求量大。以下是巴西的平均薪資：
這些值是基於 Glassdoor 的數據，可能會根據公司和地區的不同而有所不同。
本指南為剛開始 Web 開發的人介紹了基礎知識。目的是展示第一步，並大致了解您需要學習什麼才能開始建立自己的專案。
然而，Web 開發是一個充滿可能性的廣泛領域。例如，我們所展示的有關 HTML 的內容只是起點。您可以探索有關 HTML5、語義元素和最佳實踐的更多信息，以使您的網站易於訪問且結構良好。
以下是一些可供您繼續學習的網站的建議：
盡可能練習，探索不同的工具，不要害怕犯錯。
最重要的是不斷學習，一點一點地，你會更有信心去創造完整的項目，甚至進入就業市場。讓我們一起踏上這段旅程吧！
以上是歡迎來到 Web 開發：針對從頭開始的實用指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
