XHTML Getting Started Tutorial: XHTML Web Page Image Application
|
<br />Adding pictures reasonably can make a web page more beautiful. Image tag <img> The <img> tag is used to insert images into a web page. The <img> tag has an important attribute "src", and its attribute value is the address of the picture. Next we insert an image into our index.html. Open the "index.html" file and add the following code before </body>: <p><img src="upload/2022/web/logo.gif" alt="Technical Support"/></p> After saving, browse the web and make sure your web page is the same as this one. We noticed that <img> is an empty tag and needs to be followed by a "/" to comply with XHTML requirements. In addition to src, the example here also has an attribute alt, which we call the replacement attribute. When the image cannot be displayed for some reason, the attribute value of alt will appear instead of the image. When the image is displayed normally, just put the mouse on the image to see the attribute value of the alt attribute. Using images as links We have learned to create hyperlinks in the previous tutorial. Now open "index.html" and change the code we just inserted to the following: <p><a href="https://www.jb51.net/"><img src="upload/2022/web/logo.gif"alt="Technical Support"/></a></p> After saving, browse the web page and confirm again that your web page is the same as this one. Check if the picture has become a hyperlink. Click on the picture to enter the homepage of Rookie Bar. Regarding the validation of XHTML, from this section onwards we will no longer modify the appearance of the "index.html" web page. Now we will send the web page we created to an authoritative organization for inspection. First go to: http://validator.w3.org/, this page is an XHTML validation tool, it is used to check whether the web pages we create meet the XHTML standards. You can choose to verify by URL or upload a file for verification. You can select the file upload validation as follows: In "Validate by File Upload", there is a "Local File" column. Click Browse, find and select the "index.html" saved previously, and then click the "check" button. Your results should be the same as what we get from URL validation. The following error message is returned: Sorry, I am unable to validate this document because on lines 3, 6-9, 12-14, 16-22 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication. Are our pages not XHTML compliant? Please continue to the next section. |
<<: jQuery achieves breathing carousel effect
>>: How to install MySQL and Redis in Docker
Recommend
A summary of the knowledge points of database indexing. Everything you need to know is here.
I believe everyone is familiar with database inde...
How to use uni-app to display buttons and search boxes in the top navigation bar
Recently, the company is preparing to develop an ...
Method example of safely getting deep objects of Object in Js
Table of contents Preface text parameter example ...
Nginx request limit configuration method
Nginx is a powerful, high-performance web and rev...
CSS3 uses the transition property to achieve transition effects
Detailed description of properties The purpose of...
How to connect to MySQL remotely through Navicat
Using Navicat directly to connect via IP will rep...
Vue implements a movable floating button
This article example shares the specific code of ...
Element avatar upload practice
This article uses the element official website an...
MySQL database rename fast and safe method (3 kinds)
Table of contents How to rename MySQL database Th...
How to use Nginx to realize the coexistence of multiple containers in the server
background There is a Tencent Linux cloud host, o...
Detailed example of Linux all-round system monitoring tool dstat
All-round system monitoring tool dstat dstat is a...
Detailed explanation of the wonderful CSS attribute MASK
This article will introduce a very interesting at...
Detailed explanation of how to write mysql not equal to null and equal to null
1. Table structure 2. Table data 3. The query tea...
WeChat applet custom tabbar component
This article shares the specific code of the WeCh...
Vue2 cube-ui time selector detailed explanation
Table of contents Preface 1. Demand and Effect ne...