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

CentOS 7.x docker uses overlay2 storage method

XHTML Getting Started Tutorial: Simple Web Page Creation

CentOS 7.x docker uses overlay2 storage method

Detailed explanation of the idea of xshell remote login to CentOS7 without password login

Docker Compose network settings explained

Detailed explanation of Vue3's responsive principle

Linux uses if to determine whether a directory exists.

Docker installation and configuration steps for MySQL

Pure CSS free implementation code for websites to have dark mode switching function

Writing tab effects with JS

Use native js to simulate the scrolling effect of live bullet screen

Detailed explanation of the use of title tags and paragraph tags in XHTML

Recommend

Tutorial on installing mysql5.7.36 database in Linux environment

An article to understand the use of proxies in JavaScript

Mysql uses stored procedures to quickly add millions of data sample code

How to quickly deploy an Elasticsearch cluster using docker

How to fix the four sides of the table to scroll up, down, left and right

Ant designing vue table to achieve a complete example of scalable columns

How to disable ads in the terminal welcome message in Ubuntu Server

Ubuntu Server Installation Tutorial in Vmware

Detailed explanation of MYSQL database table structure optimization method

Example of setting up a whitelist in Nginx using the geo module

Vue uses v-model to encapsulate the entire process of el-pagination components

Detailed explanation of how to implement login function by combining React with Antd's Form component

Detailed steps to install Nginx on Linux

Example of usage of keep-alive component in Vue

Xhtml special characters collection