歡迎來到 Web 開發：針對從頭開始的實用指南

主題

• 簡介
• 什麼是網路及其運作原理？
• 如何讓您的網站開放給全世界
• 開發者必備工具
• Web 開發能賺多少錢？
• 初學者提示
• 結論：從今天開始

介紹

如果您來到這裡，那是因為您想了解 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的檔案並貼上以下程式碼：

  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>


  <h1 id="Olá-mundo">Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>

 

在瀏覽器中開啟檔案並查看您的第一個網頁！

2。 CSS：頁面樣式
CSS（層疊樣式表）用於為網站賦予顏色、形狀和樣式，使其看起來美觀。
CSS 的工作原理：

• 選擇器：標識您想要設定樣式的元素。例如，body 代表頁面主體，h1 代表標題。
• 屬性和值：指定套用的樣式。例如顏色：藍色；將文字顏色改為藍色。

CSS 規則範例：

• body { 背景顏色：#f0f0f0; } 設定頁面背景顏色。
• h1 { 字體大小：24px;顏色：#0066cc； } 更改標題的大小和顏色。

實際範例：建立一個名為 styles.css 的檔案並加入以下內容：

  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>


  <h1 id="Olá-mundo">Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>

 

透過在

中加入以下行將 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 網站一樣？」。好吧，當您在電腦上建立和測試網站時，它只有您自己可見。為了讓網路上的其他使用者存取您的作品，您需要將其發佈到伺服器。

將伺服器視為儲存所有網站檔案的庫。當有人在瀏覽器中輸入您的網站位址時，伺服器會傳送顯示該頁面所需的檔案。如果沒有這個，其他人將無法訪問您的網站。

提供全世界網站的過程稱為託管。有多種類型的伺服器和託管服務可以讓這一切變得簡單。現在您已經了解了這個概念，是時候探索如何創建更完整的專案並最終將它們發布給全世界了！

開發人員必備工具

1. 程式碼編輯器：使用 Visual Studio Code 等編輯器來編寫和組織程式碼。

2. 使用 Git 進行版本控制：Git 可讓您追蹤程式碼更改，GitHub 可協助您在線上分享專案。

3. 線上資源：FreeCodeCamp、MDN Web Docs 和 W3Schools 等平台提供優秀的免費教學。

網路開發能賺多少錢？

網路開發領域薪資高，需求量大。以下是巴西的平均薪資：

• 初級：每月 2,500 雷亞爾至 4,000 雷亞爾。
• 全額：每月 5,000 雷亞爾至 8,000 雷亞爾。
• 高級：每月 9,000 雷亞爾至 13,000 雷亞爾。

這些值是基於 Glassdoor 的數據，可能會根據公司和地區的不同而有所不同。

給剛開始的人的建議

1. 每天練習：即使時間很短，每天練習也是不可或缺的。
2. 加入社群：像 Dev.to 和 Rocketseat 這樣的 Discord 群組和論壇非常適合學習和提問。
3. 建立作品集：展示您的專案以增加獲得機會的機會。
4. 保持好奇心：探索不同的技術並保持最新狀態。

今天開始

本指南為剛開始 Web 開發的人介紹了基礎知識。目的是展示第一步，並大致了解您需要學習什麼才能開始建立自己的專案。

然而，Web 開發是一個充滿可能性的廣泛領域。例如，我們所展示的有關 HTML 的內容只是起點。您可以探索有關 HTML5、語義元素和最佳實踐的更多信息，以使您的網站易於訪問且結構良好。

以下是一些可供您繼續學習的網站的建議：

• MDN Web 文件：學習 HTML、CSS 和 JavaScript 的最佳來源之一。
• W3Schools：一個使用者友善的學習和練習程式設計的平台。
• FreeCodeCamp：免費實用課程，幫助您開發真實專案。

盡可能練習，探索不同的工具，不要害怕犯錯。

最重要的是不斷學習，一點一點地，你會更有信心去創造完整的項目，甚至進入就業市場。讓我們一起踏上這段旅程吧！

以上是歡迎來到 Web 開發：針對從頭開始的實用指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！