How to make html web page

WBOY

Release： 2023-05-06 12:55:08

Original

10062 people have browsed it

HTML is a standard language for making web pages. Learning to use HTML can quickly create beautiful web pages. This article will introduce the basic syntax of HTML and the steps for making web pages.

1. Basic syntax of HTML

HTML is a markup language that can use tags to describe the structure and content of a document. A complete HTML web page includes a head. There are two parts: the head and the body. The properties and metadata of the web page are defined in the head, and the content and style of the web page are added in the body.

The basic structure of a typical HTML web page is as follows:

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

Copy after login

Among them:

## is an HTML5 document Type declaration tells the browser that this is an HTML5 web page;
is the root element of the HTML document and contains the content of the entire web page;
Contains some metadata of the web page, such as title (web page title), meta (web page description and keywords), link (style sheet), etc.;
< body>contains the main content of the web page, including text, pictures, links, etc.

2. Start making web pages

Before making a web page, you first need to choose a good editor. Common editors include Sublime Text, Visual Studio Code, Atom, etc. I choose Visual Studio Code as an example here.

Open Visual Studio Code and create a new HTML file. You can use any name and the extension is .html.

In the newly created HTML file, write HTML code according to the basic syntax introduced above. For example, the following code shows a simple web page structure:

<!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>

Copy after login

Where:

Specify The encoding method of the web page is UTF-8 to ensure that the Chinese in the web page can be displayed correctly;

will The style sheet style.css is linked to the current web page, so that the style and content of the web page can be separated;

represents the first-level title, `` represents a paragraph, `<img>` represents a picture, `<a>` represents a link.

Add CSS styles

CSS (Cascading Style Sheets) is a language used to control the appearance and style of web pages. The background of web pages can be changed through CSS Color, text color, font, size, spacing, etc. In order to make the web page more beautiful, we need to add some CSS styles.

First, we create a file named style.css, introduce the file in the head tag of the HTML file, the code is as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    ...
  </body>
</html>

Copy after login

Then, add some in the style.css file Style, for example:

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;
}

Copy after login

where:

specifies the font, background color and other styles of the entire web page;
specifies the color, font size and center alignment of the first-level heading;
specifies the color, font size, line spacing and top and bottom margins between paragraphs;
specifies the maximum width, adaptive height, centered display and top and bottom margins of 0 for the image;
specifies the color and removal of the link Underline.

Save and preview the web page

After completing the above steps, save the HTML and CSS files, and open the HTML file in the browser to preview We made the web page.

If it doesn’t look good, you can continue to adjust and improve the CSS style.

3. Summary

The above are the basic steps for making HTML web pages. By learning and mastering the basic syntax of HTML and CSS, and using a good editor, we can quickly create beautiful web pages. . Of course, making web pages requires constant experimentation and learning. I hope this article can be helpful to beginners.

The above is the detailed content of How to make html web page. For more information, please follow other related articles on the PHP Chinese website!