ウェブ開発へようこそ: ゼロから始める人のための実践的なガイド-jsチュートリアル-php.cn

Bem-vindo ao desenvolvimento Web: Um guia prático para quem está começando do zero

トピックス

はじめに
Web とは何ですか?
あなたのウェブサイトを世界中で利用できるようにする方法
開発者向けの必須ツール
Web 開発でどれくらい稼げますか?
初心者向けのヒント
結論: 今日から始めましょう

導入

ここにいるのは、Web 開発の世界がどのように機能するかを理解し、新しいキャリアの第一歩を踏み出したいからです。このガイドは、この分野について何も知らず、言語やツールに飛び込む前に基礎を理解して最初から始めたい人を対象としています。実践的でわかりやすい方法で、この旅の始め方を一緒に考えてみましょう。

Web とは何ですか?また、Web はどのように機能しますか?

ウェブは、何百万ものデバイスとシステムを接続するグローバルネットワークであり、情報へのアクセスとリアルタイムの共有を可能にします。言い換えれば、ウェブは大規模なデジタル図書館のようなものです。 Web サイトにアクセスすると、世界のどこかに保存されている情報が求められます。ブラウザ (Google Chrome や Firefox など) は、この情報を検索して整理してくれる「図書館員」のようなものです。

すべてを機能させるための重要な要素は次のとおりです:

1.ブラウザとサーバー
Web サイト https://www.pudim.com.br/ にアクセスすると何が起こるかを理解しましょう。ブラウザはサーバーにリクエストを送信し、サーバーはページを表示するために必要なファイルで応答します。 Pudim の場合、サーバーは、タイトル、画像、電子メールリンクなど、Web サイトの基本構造を含む HTML ファイルを返します。

ブラウザは、インターネットにアクセスするために使用するプログラムです (Chrome、Firefox など)。情報をリクエストし、体系的にページを表示します。
サーバーは、Web サイトのファイル (テキスト、画像、ビデオ) を保存し、ユーザーがリクエストしたときにそれらをブラウザーに送信するコンピューターです。サーバーは、Web サイトのファイル (テキスト、画像、ビデオ) を保存し、これらのファイルを送信することでブラウザーの要求に応答する「特殊なコンピューター」と考えてください。 Web サイトが Web 上でアクセスできることは不可欠です。
Pudim の場合、サーバーは、タイトル、画像、電子メールリンクなど、Web サイトの基本構造を含む HTML ファイルを返します。

2.ブラウザとサーバーはどのように通信しますか?
Pudding のような Web サイトにアクセスすると、コンテンツが正しく表示されるようにブラウザとサーバーが「対話」する必要があります。この通信は、情報の送受信方法を定義する一連のルールである HTTP (HyperText Transfer Protocol) を通じて行われます。ブラウザはサーバーにリクエスト (HTTP リクエストと呼ばれる) を送信し、サーバーはブラウザ内でページを組み立てるために必要なファイル (HTML、CSS、JavaScript など) で応答します。この情報交換は高速かつ効率的であり、Web サイトが正しく表示されることが保証されます。

実際の例: ブラウザに「https://www.pudim.com.br/」と入力し、Enter キーを押します。プリンの画像と電子メールのリンクを含むシンプルなページが表示されます。

3. API とは何ですか?
ここで、Pudim Web サイトが天気予報も表示したいと考えていると想像してください。これを行うには、API (アプリケーションプログラミングインターフェイス) を使用できます。 API は、さまざまなシステムが情報を交換できるようにするブリッジとして機能します。
例: プリンの Web サイトにも「今日はプリンを食べるのに良い日です!」のようなメッセージが表示されたと想像してください。現在の天気に基づいて。ブラウザは天気予報 API にリクエストを送信し、天気予報 API は気温と気象条件に関する情報を返します。 Web サイトはこのメッセージを動的に表示できます。

概要: API を使用すると、リアルタイムで更新されるデータなどの動的機能を追加できるため、現代の Web 開発では不可欠なツールです。
基本を理解したので、Web サイトを作成するための基本ツールの学習を始めましょう。

1. HTML: サイトの構造
HTML (HyperText Markup Language) はページの構造を定義します。これはタグで構成されます。タグは、コンテンツがブラウザーでどのように編成され、表示されるかを示す要素です。各タグには特定の機能があり、テキスト、画像、リンクなどの要素を含めることができます。
タグの例:

: メインタイトルを設定します。
: テキストの段落を定義します。
: ページに画像を挿入します。
: リンクを作成します。

実際の例: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>

ログイン後にコピー

ブラウザでファイルを開くと、最初の Web ページが表示されます。

2. CSS: ページのスタイル
CSS (Cascading Style Sheets) は、ウェブサイトに色、形、スタイルを与え、見た目を美しくするために使用されます。
CSS の仕組み:

セレクター: スタイルを設定する要素を特定します。たとえば、ページ本文の場合は body 、タイトルの場合は h1 です。
プロパティと値: 適用されるスタイルを指定します。たとえば、色: 青。テキストの色が青に変わります。

CSS ルールの例:

body {背景色: #f0f0f0; } ページの背景色を設定します。
h1 { フォントサイズ: 24px;色: #0066cc; } タイトルのサイズと色を変更します。

実践例: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">

ログイン後にコピー

タイトルをクリックすると、画面にメッセージが表示されます。

あなたのウェブサイトを世界中で利用できるようにする方法

「Pudim Web サイトにアクセスしたときと同じように、私の HTML、CSS、JavaScript コードを他の人が利用できるようにするにはどうすればよいでしょうか?」と疑問に思われるかもしれません。あなたがコンピュータ上で Web サイトを作成してテストしている間、その Web サイトはあなたにしか表示されません。インターネット上の他のユーザーがあなたの作品にアクセスするには、サーバー上で公開する必要があります。

サーバーは、Web サイトのすべてのファイルを保存するライブラリであると考えてください。誰かがあなたの Web サイトのアドレスをブラウザに入力すると、サーバーはページを表示するために必要なファイルを送信します。これがなければ、あなたのウェブサイトに他の人はアクセスできなくなります。

Web サイトを世界中で利用できるようにするこのプロセスは、ホスティングと呼ばれます。これを簡単に行うためのサーバーとホスティングサービスには、いくつかの種類があります。概念を理解したところで、より完成度の高いプロジェクトを作成し、最終的には世界中に公開する方法を検討してみましょう!

開発者にとって必須のツール

コードエディター: Visual Studio Code などのエディターを使用して、コードを作成して整理します。
Git によるバージョン管理: Git を使用するとコードの変更を追跡でき、GitHub を使用するとプロジェクトをオンラインで共有できます。
オンラインリソース: FreeCodeCamp、MDN Web Docs、W3Schools などのプラットフォームでは、優れた無料チュートリアルを提供しています。