Standardized Design Solutions - Markup Language and Style Handbook
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup Starting from Markup Syntax
Chapter2 Titles
Overview:
Not only do all web pages need titles, but if marked up correctly, they can add to a web design and usability Quite a few.
In terms of appearance, the title of a web page usually uses a larger font size, and may use a different color or font from the main text. The function of the title is to "briefly describe the topic discussed in the following chapters" , W3C describes it this way - Display a summary of each paragraph in a web page.
How to create a page title to make the most effective use of the information we want to display? In this chapter, we will study several commonly used methods for processing titles. methods, try to find one of them that is most helpful to us, and then we will use some CSS tips and tricks to decorate the best method.
The best way to create a document title What is a good way?
Before answering this question, let us assume that we are now placing the title at the top of the document and let's look at three ways to achieve a similar effect.
Method A: Does it make sense?
Super Cool Page Title
Although the tag is used in some The occasion is a convenient tag, but for the page title, it doesn't mean much. The only advantage of using this method is that we can specify a css style for the heading class to make the text look like a title.
.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
Now, all titles marked with heading class It will all become bigger, thicker, and blue, which is great, right? But what happens if someone visits this page using a browser that does not support CSS?
For example, if we put the CSS style in the old in an external style sheet file that the browser does not support — or what happens when a screen reader reads the page for users with disabilities? Users accessing the page through these means will not be able to see (hear) the title and body text. The difference. Annotation methods such as
class="heading" slightly describe the meaning of the tag content, but is just a general-purpose container, which only allows most browsers to change the default display style. .
When the search engine crawls this page, it will skip the tag as if it was not there, and will not increase the weight of the keywords that may be included in it. This will be discussed later in this chapter. Mention more about the relationship between search engines and page titles.
Finally, since the tag is an inline element, we mostly need to place the content of method A into another block-level container, for example or so that it can occupy a line of its own. This will generate a lot of unnecessary code. Even if you add the necessary containers, browsers that do not support CSS will still display the text in its original way for users to see. There is no difference between the title and the text.
#p#
Method B: Combination of P and B
Super Cool Page Title
Method B uses the paragraph tag, which will give us the block-level element display we want, and the tag will make the text bold (on most browsers) — but When we mark important titles in this way, we still have to face the same lack of semantic results.
Unlike method A, the existence of the tag even if it lacks the definition of CSS style, in most browsers The text will still be presented in bold style. However, like the tag, search engines will not increase the keyword weight for bold text within the paragraph.
It is difficult to add styles
Using a simple combination of p and b tags prevents us from adding a different style to this title from other paragraphs. Perhaps we want to emphasize the title in a unique way and add definition and structure to the page content - but using After using this method to make it appear bold, we have no way to do these things.
Method C: Style and substance
Super Cool Page Title
Haha, here comes our good friend the title tag. Title tags have been around since the beginning, but many web designers still fail to use them in a consistent way. If used properly, title tags can Provides an anchor point for page content and provides a flexible, indexable, and style-changeable structure.
From the perspective of the tags themselves, you will love its simplicity. They do not require additional container tags. You It can even be said that this method can save some bytes compared to the first two methods, which may be ignored, but every byte smaller is a change.
to represent six layers of headings respectively, from the most important to the least important . They are block-level elements themselves and can be self-contained without an additional container. One line, simple and efficient - the best tool for the job.
Easy to define styles
Because the tag has a unique meaning, unlike Or the
tag will be used multiple times in the text, so we can use CSS to add various styles to it (we will discuss it in depth in "More Techniques" in this chapter).
More importantly, even without adding any style definitions, the title tag clearly looks like a title! The browser will use large fonts and bold fonts to render the content of
, even if all style definitions are removed from the page, You can still see the structure of the document, because the correct title tag describes the meaning of the content, not the presentation. (Figure 2-1)
Figure 2-1: Using title tags after breaking away from styles Page content
Screen readers, PDAs, mobile phones and other visual and non-visual browsers can also recognize and correctly process the content of the title tag, highlighting its importance above other content on the page. Use < ;span> tag, browsers that don’t support (or can’t support) CSS won’t think it’s anything special.
Annoying default styles
In the history of web design, designers People avoid using title tags simply because without styling, title tags look like monsters. Choose one of the two, and some of them avoid using because the default font size is too large. Or instead use a smaller font size and a higher label title tag.
However, there is an important point worth emphasizing. We can easily change the style of these title tags according to our own preferences by defining css - for example For example, may not necessarily be a giant thing that takes up half the screen. Later, I will demonstrate how to simply use CSS styles to define title tags to help you overcome your fear of .
Friendly to search engines
This is the biggest advantage. Search engines like title tags very much. Bold fonts in tags or paragraphs do not mean much to search engines. Using the correct ~ tag title does not take much time, but it can help search engines index your page and make it easier for users to find your page.
Search engine robots attach great importance to The content in the title tag, maybe, you will want to pile a few keywords in it. After they process the and <meta> tags, they will then process the title tag in the page content. If If you do not use title tags on your page, then these keywords in your title will not attract their attention and will be ignored by them.<br>So, it only takes a little time to make it easier for others Finding your page by content sounds good, right? <br><strong>A side note on tag order</strong><br>In the example above, the most important thing on the page is the title, because it is The title of the entire document. Therefore, we will use the most important title tag <h1>. According to W3C, some people think that skipping the title layer is not a good practice. For example, suppose we have the following web page: <br><span class="code"><h1>Super Cool Page Title</h1></span><br>Then the next title (if it is not another <h1>) should be <h2>, and then Use <h3> and so on, you may not skip a certain level of headings, for example, use <h3> directly after <h1>. I agree, and think that the structure and outline are the same, and each one should be used in order. Levels, this allows you to easily add titles and styles to existing pages. At the same time, it is less likely to use up all the title levels. <br> As mentioned earlier, designers may use represents the most important title on the page, just because its default font size is not as scary as <h1>. But remember, write the structure first, and then adjust the style. We can adjust it at any time according to our own Prefer changing the font size of the title tag through css.<br>
#p#<br><strong>Summary</strong><br>Let’s briefly review why it is better to use title tags (<h1> to <h6>) to mark the titles within the page.<br><strong>Method A:</strong><br>Visual browsers will display the title in the same style as normal text when the css function is disabled or does not support it. Non-visual browsers have no idea about the relationship between the title and the text. The difference. <br>Search engines will not pay special attention to titles marked with <span><br>We can develop unique styles, but when we add titles, we will be trapped by the heading class.
<br><strong>Method B:</strong><br>The visual browser will only display content in bold and continue to use the default font size. <br>We cannot add a unique style to the title that is different from the body text<br>Search engines also do not pay special attention to <p> <b>The content of the created title.
<br><strong>Method C: </strong><br> conveys the exact meaning of the text in the title tag. <br>Whether it is a visual or non-visual browser, it will process the title content correctly no matter what format it reads<br>Search engines will pay attention to the keywords in the title tag.<br><strong>Extension of techniques</strong><br>Here we will adopt method C and use it to experiment with some simple css styles. We will fully utilize the uniqueness of the title tag Advantages of sex. We can use the title tag with great peace of mind, because the title content can be processed correctly no matter what browser and device it is on. Next, let’s dress it up and take it to the street (if you can bring it If you go out on the street with an html tag...)<br><strong>Simple style</strong><br>Using css, the simplest and easiest effect is to set different fonts for the title. We can write a css rules, and then apply them to all <h1> tags in the page (if you use an external style sheet, you can apply the style to the entire website). If you want to change the entire website later For each <h1> color, size or font, you only need to modify a few css rules, and the effects of the modifications can be seen immediately! This sounds very tempting, right? <br> Let’s super Cool title to tell ourselves:<br><span class="code"><h1>Super Cool Page Title</h1></span><br>Let’s use css to change its color, font and size:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> }</span><br>Just like we just did What I said is very simple. All <h1> on the entire page are set to 24 pixels in size and blue Arial (or the default sans-serif) font, as shown in Figure 2-2: <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/d403782309c7ce2ffc51499ef1aa3159-1.gif"><br>Figure 2-2: Title style example<br>Next we continue to add a 1 pixel wide gray border under the title text (Figure 2-3):<br><span class="code">h1 {<br> font- family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> padding-bottom: 4px;<br> border-bottom: 1px solid #999;<br> } </span><br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-2.gif"><br>Figure 2-3: Example of title style with gray bottom border <br> We left some more inner patches at the bottom of the text so that the lower border will not have difficulty breathing. Because of the title Labels are block-level elements, so the border will not only fill the bottom of the text, but will continue to extend to the right until it fills the entire page width. <br> It is also worth mentioning that we use the abbreviation of border - that is, in a line The declaration also defines width, style, and color. You can try other settings to see what other effects there are.<br>
#p#<br><strong>Adding a background</strong><br>The background can add a subtle effect to the title. As long as we add the background color and some white space, we can create a fresh and fresh one without using pictures. Title style. For example: <br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #fff;<br> padding: 4px;<br> background-color: #696;<br> }</span><br>We change the text in the title to white, leave a 4-pixel inner patch space around it, and change the background to green. For example As shown in Figure 2-4, there will be a wide green band with the color of a pool table running through the entire page, dividing the two paragraphs. <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-3.gif"><br>Figure 2-4: Setting the inner patch and background color Title example <br><strong>Background and border</strong><br> Just add a thin border under the title and a light background, and you can create a three-dimensional effect without using an image. .<br>This css is very similar to the one above, only changing a few colors and adding a 2-pixel border at the bottom<br><span class="code">h1 {<br> font-family: Arial, sans-serif; <br> font-size: 24px;<br> color: #666;<br> padding: 4px;<br> background-color: #ddd;<br> border-bottom: 2px solid #ccc;<br> } </span><br>By using the same color with different brightness, you can create a realistic three-dimensional effect as shown in Figure 2-5: <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-4.gif"><br>Figure 2-5: Setting the background and bottom edge The title <br><strong>Tile background</strong><br>If you use pictures, you can be more creative. Let us use photoshop to create a 10X10 small picture with a black border on the top. Then the following is the gray gradient from top to bottom (as shown in Figure 2-6): <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-5.jpg"><br>Figure 2-6 Small picture created with Photoshop<br>We can use css to put this small picture at the bottom of our <h1>:<br><span class="code">h1 {<br> font -family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> padding-bottom: 14px;<br> background: url(10x10.gif) repeat-x bottom ;<br> }</span><br>Set repeat-x to make the browser only arrange the background image in the horizontal direction (the opposite repeat-y is to arrange it in the vertical direction), and we set In order to place the picture at the bottom of the title, and add some lower inner patches to adjust the distance between the picture and the text (Figure 2-7) <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-6.jpg"><br>Figure 2-7: Set Example of a title with a tiled background<br><strong>Icon for easy replacement</strong><br>We can also use the cssdebackground attribute to set a small icon to the left of the text to replace the hard-coded image tag. Add a small decorative icon to the title. This method will make it very easy to change the display effect of the website in the future - you only need to replace one css rule to change the display effect of the entire website at the same time.<br>The code is roughly the same as the tiled background above: <br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> padding-left: 30px;<br> background: url(icon.gif) no-repeat 0 50%;<br> }</span><br>We leave an extra space on the left side of the text to prevent us from thinking The desired icon, and then set no-repeat to specify that the background image will not be tiled (as shown in Figure 2-8). At the same time, we want the icon to be positioned at 0 pixels on the left and opposite to the vertical center line. <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-7.jpg"><br>Figure 2-8: Example of title with icon set<br>
#p#<br><strong>Easy to update</strong><br>Let us imagine a scenario: in a website containing 100 pages, we do not use the above method, but use the <img alt="Markup language - title_HTML/Xhtml_web page production" > tag to write The icons next to each title are integrated with the website style. After a few weeks, the owner of the website plans to change the website style, and the new icon size is different from the old one. Oops! Now we will How annoying it is to have to go back and modify the <img alt="Markup language - title_HTML/Xhtml_web page production" > tags on 100 pages to update the path of the new icon! Think about the impact these events will have on the project budget and the pressure on the completion deadline? Time is money. !<br>If you integrate these not very important, decorative icons into a css file, it only takes a few minutes to replace all the icons on the entire site at once, giving you a brand new look! From this you can You should be able to gradually understand the benefits of separating structural markup and display effects. <br><strong>Chameleon Effect</strong><br> The technique below is somewhat contradictory to what I just said, but I think this technique is useful in a certain way. It is very useful in some situations. This is a technique I used extensively when doing standard refactoring for Fast Company magazine’s website (www.fastcompany.com) in April 2003. <br> At that time, we had < in the website Many 13X13 small icons are used next to the ;h3> tag, like this: <br><span class="code"><h3>
<img src="http://images.fastcompany.com/icon/first_imp.gif" style="max-width:90%" style="max-width:90%" alt="Markup language - title_HTML/Xhtml_web page production"> FIRST IMPRESSION</h3></span><br>There are two reasons why we decided to write the icon into the web page like this. First, according to the type of title Different icons are used (book club is a book, daily quotes are quotation marks, etc.). The second reason is that we change the color of the entire website every month to match the current magazine cover theme. Of course, this replacement work is very simple because of the use of CSS. <br> In order to make the icon change color along with other page elements (so that we don’t have to re-create the icon for new colors all the time), we only use two A set of icons are made in two colors: white and transparent (the background color will be displayed except for each change). Figure 2-9 is the icon placed before the introduction on the homepage: <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-8.jpg"><br>Figure 2-9: 13X13 transparent icon (enlarged) <br> In order to fill in the transparent part with color, we use a simple CSS background attribute to set the color. We hope that this color will only appear behind the chart and not behind the title text. , we used the css selector to only use this rule for images within the <h3> tag, in order to achieve the effect we want: <br><span class="code">h3 img {<br> background: #696;<br> }</span><br>This css code means that all <img alt="Markup language - title_HTML/Xhtml_web page production" > tags within the <h3> tag will set the background to green. The background color will be displayed through transparent pixels, but the white part will still be white. In this way, only You need to modify this css rule and change it to a different color, and you can instantly change the color of every icon on the website, just like magic. <br><strong>Align <img alt="Markup language - title_HTML/Xhtml_web page production" > tags</strong><br> In order to align the icon and text correctly (we want it to be vertically centered), we add this css rule: <br><span class="code">h3 img {<br> background: #696;<br> vertical-align: middle ;<br> }</span><br>This rule will vertically center the icon and <h3> text content. Figure 2-20 is the title of the game: <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-9.gif"><br>Figure 2- 10: An example of using CSS as an icon and adding a background color <br> This example can also illustrate another important concept - the background color specified with CSS will appear behind the specified icon or CSS icon on any page. <br> Example For example, let's look back at the "conveniently updated icon" example and add a background color to it: <br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font -size: 24px;<br> color: #fff;<br> padding-left: 30px;<br> background: #696 url(transparent_icon.gif) no-repeat 0 50%;<br> }</span><br>Now transparent_icon.gif will be displayed on top of the background color defined earlier in the same rule (Figure 2-11) — in this example, the background color is #696, which is the green of the pool table.<br> <img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-10.jpg"><br>Figure 2-11 Example of a title with background image and background color set<br>This little trick is very useful when you add small rounded corners and decorate icons on a color-focused page. . These light pictures can be completely put into the css file, and they can be easily replaced when you plan to update them in the future. If you put more thought now, you can save a lot of work in the future. <br><strong>Summary</strong><br>I hope that by comparing the commonly used methods, you can discover the benefits of using title tags correctly. Whether it is a visual, non-visual browser or other device, you can correctly understand the meaning of previous titles and display them in an appropriate way. , search engines will also index them, and you can easily apply and modify the effects you need to display with css.
</h3>
</h3>
</h3>
</h1>
</h1>
</h1>
</h1></b></p></span>
</h6>
</h1>
</h1>
</h1>
</h3>
</h3>
</h2>
</h1>
</h1>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
