欢迎来到 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中文网其他相关文章！