XHTML Getting Started Tutorial: Simple Web Page Creation

Create your first web page in one minute:
Let's try to make a simple web page. I hope you can follow us. It will only take you a minute. Now you may not know what those angle brackets “<>” and the letters inside them mean, don’t worry, we will explain them to you in the next tutorial.
First, run Notepad, or create a new text document at any location and enter the following content in Notepad:
The following is the quoted content:
<html>
<head>
<title>I am the title of this page</title>
</head>
<body>
This is my first web page. 
</body>
</html>
After entering, save the file and name it "index.html". (Click "File" -> "Save As". Enter "index.html" in the "File Name" column, select "All Files" in the "Save as Type" column, and then click the "Save Button")
After saving, double-click the file and the browser will automatically open the web page. Please confirm whether your web page is the same as this page. If it is, then you have successfully completed your first relatively simple web page.
Please note that this is just a simple page, and although it complies with the XHTML standard in terms of syntax, it is still missing some content if it is to be a complete, W3C-compliant XHTML web page. The relevant content will be introduced in the following tutorials. This page is just used to explain some basic XHTML knowledge.
Basic knowledge explanation The web page we just made starts with <html> and ends with </html>, which represent the beginning and end of the web page file respectively.
In English, head means head and body means body. The <head></head> and <body></body> parts of a web page represent the "head" and "body" of the web page respectively. Maybe you have noticed that there is a <title></title> in the "header" of our webpage. The word title means title, and the title of the webpage will be displayed in the title bar above the browser. The body of the webpage, that is, the content between the <body> and </body> tags, will be displayed in the browser as the main text.
This web page is very simple, with little content in the head and body. We will gradually enrich the content of the web page in subsequent tutorials. But now please remember a concept: the head of a web page is written for the browser and will not be displayed on the page, while the body is written for the users of the website and is the content that the browser will display.
Error examples of novice's parody of XHTML Open the following two error examples and take a look. There are serious errors in their code, but the browser will display both web pages accurately.
Example 1: The body is in the head
<html>
<head>
<title>I am the title of this page</title>
This is my first web page. 
</head>
<body>
</body>
</html>
Looking at the web page above, the content between <head> and </head> is displayed normally on the page. But this is a comical mistake, putting the body inside the head.
Example 2: The head is under the neck
<html>
<head>
</head>
<body>
<title>I am the title of this page</title>
This is my first web page. 
</body>
</html>
The browser's adaptability is truly impressive; it can recognize your head even when it's inside your body. Looking at the title bar, the title is displayed perfectly fine.
Well, please don’t make such low-level mistakes when applying it in practice. This can have serious consequences: search engines may not include your website; friends who browse your website using mobile phones or other mobile devices may encounter unknown errors. Now let's quickly get into the core content of XHTML.

<<: A brief introduction to VUE uni-app basic components

>>: How to use Docker to build OpenLDAP+phpLDAPadmin unified user authentication

XHTML Getting Started Tutorial: Simple Web Page Creation

Linux file management command example analysis [permissions, create, delete, copy, move, search, etc.]

Example of implementing todo application with Vue

JavaScript dynamically generates a table with row deletion function

How to run nginx in Docker and mount the local directory into the image

MySQL configuration master-slave server (one master and multiple slaves)

Pure CSS custom multi-line ellipsis problem (from principle to implementation)

A brief analysis of MySQL explicit type conversion

How to deal with the problem that the file is deleted but the space is not released in Linux

How to periodically clean up images that are None through Jenkins

A brief discussion on the specific use of viewport in mobile terminals

Recommend

MySQL 5.7.17 compressed package installation-free configuration process diagram

How to filter out duplicate data when inserting large amounts of data into MySQL

How to solve the problem of forgetting the root password of Mysql on Mac

Docker installation and configuration steps for Redis image

Detailed explanation of Promises in JavaScript

CSS3 realizes the glowing border effect

Detailed explanation of MySQL data grouping

React-native sample code to implement the shopping cart sliding deletion effect

Analysis of several reasons why Iframe should be used less

MySQL insert json problem

HTML+CSS to achieve text folding special effects example

How to implement a multi-terminal bridging platform based on websocket in JS

Solution to the automatic stop of MySQL service

Detailed graphic explanation of how to clear the keep-alive cache

Detailed explanation of incompatible changes of components in vue3