search

Home  >  Article  >  Backend Development  >  How to make html web page

How to make html web page

WBOY
WBOYOriginal
2023-05-06 12:55:0810026browse
<p>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.

<p>1. Basic syntax of HTML

<p>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.

<p>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>
<p>Among them:

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

    Editor selection
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. <p>

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

    Write HTML code
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: <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 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, <p> represents a paragraph, <img> represents a picture, <a> represents a link.

Add CSS styles
  1. 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.
<p>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>
<p>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;
}
<p> where:

<p>

    body
  • specifies the font, background color and other styles of the entire web page;
    • h1
  • specifies the color, font size and center alignment of the first-level heading;
    • p
  • specifies the color, font size, line spacing and top and bottom margins between paragraphs;
    • img
  • specifies the maximum width, adaptive height, centered display and top and bottom margins of 0 for the image;
    • a
  • specifies the color and removal of the link Underline.
Save and preview the web page
  1. 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.
<p>If it doesn’t look good, you can continue to adjust and improve the CSS style.

<p>3. Summary

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

html5 css html href 样式表 visual studio visual studio code sublime text atom
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：golang cannot compileNext article：golang cannot compile

Related articles

See more