検索

ホームページ >バックエンド開発 >Golang >HTMLウェブページの作り方

HTMLウェブページの作り方

WBOY
WBOYオリジナル
2023-05-06 12:55:0810044ブラウズ
<p>HTML は Web ページを作成するための標準言語です。HTML の使用を学習すると、美しい Web ページをすぐに作成できます。この記事では、HTML の基本的な構文と Web ページの作成手順を紹介します。

<p>1. HTML の基本構文

<p>HTML は、タグを使用してドキュメントの構造とコンテンツを記述することができるマークアップ言語です。完全な HTML Web ページにはヘッドが含まれます。2 つの部分があります。 : ヘッドとボディ Web ページのプロパティとメタデータはヘッドで定義され、Web ページのコンテンツとスタイルはボディで追加されます。

<p>典型的な HTML Web ページの基本構造は次のとおりです: 

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落1</p>
    <p>段落2</p>
  </body>
</html>
<p>その中に:

  1. ## があります。 HTML5 ドキュメントの Type 宣言は、これが HTML5 Web ページであることをブラウザに伝えます。
  2. は HTML ドキュメントのルート要素であり、Web ページ全体のコンテンツが含まれています。
  3. タイトル (Web ページのタイトル)、メタ (Web ページの説明とキーワード)、リンク (スタイル シート) など、Web ページのいくつかのメタデータが含まれます。 ;
  4. < body> には、テキスト、画像、リンクなど、Web ページの主要なコンテンツが含まれます。
2. Web ページの作成を開始します<p>

    エディタの選択
Web ページを作成する前に、まず適切なエディタを選択する必要があります。一般的なエディタには、Sublime Text、Visual Studio Code、Atom などが含まれます。ここでは例として Visual Studio Code を選択します。 <p>

    新しい HTML ファイル
Visual Studio Code を開き、新しい HTML ファイルを作成します。任意の名前を使用でき、拡張子は .html です。 <p>

    HTML コードの記述
新しく作成した HTML ファイルに、上で紹介した基本構文に従って HTML コードを記述します。たとえば、次のコードは単純な Web ページ構造を示しています。 <p>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个网页</p>
    <img src="picture.jpg" alt="我的图片">
    <a href="http://www.baidu.com">去百度一下</a>
  </body>
</html>
Where: <p>

    ##
  • Specify The Web ページ内の中国語を正しく表示できるように、Web ページのエンコード方式は UTF-8 です。
  • スタイル シート style.css は現在の Web ページにリンクされているため、Web ページのスタイルとコンテンツを分離できます。

  • は、第 1 レベルのタイトル、<p> は段落を表し、<img> は画像を表し、<a> はリンクを表します。

CSS スタイルの追加
  1. CSS (Cascading Style Sheets) は、Web ページの外観とスタイルを制御するために使用される言語です。 CSS カラー、テキストの色、フォント、サイズ、間隔などを介して変更できます。 Web ページをより美しくするには、いくつかの CSS スタイルを追加する必要があります。
<p>まず、style.css という名前のファイルを作成し、そのファイルを HTML ファイルの head タグに挿入します。コードは次のとおりです。 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    ...
  </body>
</html>
<p>次に、スタイルにいくつか追加します。 css ファイルのスタイル、例: 

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

h1 {
  color: #444;
  font-size: 36px;
  text-align: center;
}

p {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  margin: 20px 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

a {
  color: #0074D9;
  text-decoration: none;
}
<p> ここで:

<p>

    body
  • は Web ページ全体のフォント、背景色、その他のスタイルを指定します。 h1
    • は、第 1 レベルの見出しの色、フォント サイズ、中央揃えを指定します。
  • p
    • は、色、フォント サイズ、行間隔、上部を指定します。
  • img
    • は、画像の最大幅、適応高さ、中央表示、および上下のマージン 0 を指定します。
  • img
    • a
  • は、リンクの下線の色と削除を指定します。
Web ページの保存とプレビュー
  1. 上記の手順を完了したら、HTML ファイルと CSS ファイルを保存し、ブラウザで HTML ファイルを開いてプレビューします。ウェブページを作りました。
<p>見た目が良くない場合は、CSS スタイルの調整と改善を続けることができます。

<p>3. まとめ

<p>上記は HTML Web ページを作成するための基本的な手順です。HTML と CSS の基本構文を学習して習得し、優れたエディターを使用することで、美しい Web ページをすばやく作成できます。ウェブページ。 。もちろん、Web ページの作成には継続的な実験と学習が必要ですが、この記事が初心者の方に役立つことを願っています。

以上がHTMLウェブページの作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css html href 样式表 visual studio visual studio code sublime text atom
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：golangがコンパイルできない次の記事：golangがコンパイルできない

関連記事

続きを見る