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
Demonstration of building ElasticSearch middleware and common interfaces under centos7 in Linux system
1. Introduction to Middleware 1. Basic concepts E...
Best Practices for MySQL Upgrades
MySQL 5.7 adds many new features, such as: Online...
Solution to Vue data assignment problem
Let me summarize a problem that I have encountere...
React implements the principle analysis of the three stages of loading, loading, completion, loading failure
Recently I wrote in my blog that in the project l...
Teach you how to insert 1 million records into MySQL in 6 seconds
1. Idea It only took 6 seconds to insert 1,000,00...
Implementing image fragmentation loading function based on HTML code
Today we will implement a fragmented image loadin...
Specific use of MySQL window functions
Table of contents 1. What is a window function? 1...
Detailed example of MySQL subquery
Subquery Classification Classification by returne...
Example code for implementing 3D text hover effect using CSS3
This article introduces the sample code of CSS3 t...
Basic concepts and common methods of Map mapping in ECMAScript6
Table of contents What is a Mapping Difference be...
CSS3+HTML5+JS realizes the shrinking and expanding animation effect of a block
When I was working on a project recently, I found...
JavaScript implements mouse control of free moving window
This article shares the specific code of JavaScri...
JavaScript adds event listeners to event delegation in batches. Detailed process
1. What is event delegation? Event delegation: Ut...
TypeScript namespace merging explained
Table of contents Merge namespaces with the same ...
MySQL 8.0.20 installation and configuration method graphic tutorial under Windows 10
Win10 system locally installed MySQL8.0.20, perso...