How to make html web page

WBOY
Release: 2023-05-06 12:55:08
Original
9891 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:



  
    网页标题
  

一级标题

段落1

段落2

Copy after login

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

    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.

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

    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:



  
    
    我的网页
    
  

欢迎来到我的网站

这是我的第一个网页

我的图片 去百度一下
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, represents a picture, 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.

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



  
    
    我的网页
    
  
...
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:

    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.

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!

source:php.cn
Statement of this Website
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 [email protected]
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!