(Tutorial: HTML 3) rolling subtitles and creating use lists

In this lesson, we will learn how to create and use rolling subtitles on web pages and lists such as Word. Because the rolling subtitles in real dynamic website production are the simplest multimedia effects, can be addedArticleThe dynamic effect of the web page attracts the viewer's eye and enhances the interaction of the web page. Therefore, we suggest you learn to skillfully use its several important attributes.

First, let's take a look.Basic Syntax of rolling text <marquee> rolling text </marquee>,When we want to set the font, size, and color of the text, we can embed the <font> MARK learned in the previous lesson in this pair of labels, for example, <marquee> <font face = "" size = + 2> the text here is in the font of, with a font size of 5 pixels, meanwhile, the scroll direction is the default scroll effect from the right to the left of the browser </font> </marquee>. This example will not be demonstrated first. I will combine it with other attributes of the scroll tag to show its effect.

Next, let's take a look at the attributes of the <marquee> tag. I will explain the usage of the following attributes one by one, and then demonstrate the effect of the example:
Align:It is used to set the position of the active subtitle, but in addition to the left, center, and right positions, it also adds two positions: top-up and bottom-up (align = bottom. This attribute is easy to understand and will not be explained too much here.

Bgcolor:To highlight the scrolling text content, you can use the bgcolor attribute to add a background color for the scrolling text, which is more obvious on the webpage. Set the background color of an active subtitle, which is usually a hexadecimal number or an English word. For example, <marquee bgcolor = "red"> set the background color of the scroll text to Red </marquee>. The background color must overwrite the area where the scroll text will scroll, therefore, the width is the color band equal to the width of the text.

 
Direction:When no direction is set for the scroll text, the text is always scrolled from right to left. The direction attribute sets the scroll direction of the subtitle, which has four directions in total, are left, right, up, down. For example, <marquee direction = right> the scroll text here will go from left to right </marquee>

Behavior:This attribute can be used to set the scrolling mode. It can be used to set whether the scrolling text is continuously scrolling, alternating scrolling, or only scrolling once. There are three attribute values: behavior = "Scroll" indicates rolling from one end to the other; behavior = "slide" indicates quickly sliding from one end to the other end without repeating; behavior = "Alternate" indicates to scroll back and forth between the two ends. The following example lists three examples to help students intuitively understand their differences.

 
Height:Used to set the height of a rolling subtitle.Width:Set the width of the scroll subtitle. There are two ways to assign values to these two attributes. The relative values and absolute values mentioned in the previous lesson are mainly set the rolling range, that is, the rolling background area range, for example: <marquee width = "50%"> the scroll range starts from half of the screen to the left. </marquee>

Hspace and vspace:By default, the scrolling text and the surrounding text and images are closely displayed. Using these two attributes, You can freely set the horizontal and vertical spaces of the scrolling text background, that is, the blank space range between the scrolling text background and the text and image. This function is used to set the left and right sides of the scrolling subtitle, and vspace to set the width of the upper and lower sides of the border.

For example:

<HR>

<Marquee bgcolor = "#00ff00" hspace = 20 vspace = 10> the text here is 20 pixels away from the blank space of the two horizontal lines and 10 pixels vertical </marquee>

<HR>
Scrollamount:This parameter is used to set the scroll speed of the active subtitle, that is, the length of each movement of the scrolling text, in pixels.

 
Scrolldelay:Used to set the delay time between two scrolling times. The delay time is measured in millimeters and 1‰ seconds in millimeters. The smaller the delay time, the faster the scroll speed. If the delay time is set too large, the effect of walking and resting will also appear. In the actual application process, the latency and scroll speed must be set together to make the effect more obvious.

 
Loop: Used to set the number of scrolling times. When loop =-1, it indicates that the scrolling continues until the page is updated.

And when the scrolling mode is not alternate scrolling, the text will not appear in the browser after the loop attribute is set.

Let's take a look at this example.Code:

1 < Html >
2 < Head >
3 < Title > (Tutorial: HTML 3) rolling subtitles and creating use lists </ Title >
4 </ Head >
5 < Body >
6 < Marquee > < Font Face = "Shu" Size = + 2 > The text here is in the font of the book, the font size is 5 pixels, and the scroll direction is the default scrolling effect from the right to the left of the browser. </ Font > </ Marquee > < BR >
7 < P > < Marquee Behavior = "Scroll" Scrollamount = "20" > Scroll from one end to the other. Let's go! </ Marquee > </ P >
8 < P > < Marquee Behavior = "Slide" Width = "50%" > I quickly slide from one end to the other end without repeating it. I started halfway through the screen and hit the wall. I am not leaving! </ Marquee > </ P >
9 < P > < Marquee Loop = "2" Behavior = "Alternate" > Indicates rolling back and forth between the two ends. I only walk twice </ Marquee > </ P >
10 < B > < Marquee Direction = "Up" Bgcolor = "Red" Height = "10%"   > I will go up from 10% of the page height </ Marquee > </ B >
11 </ Body >
12 </ Html >
13

In this example, I demonstrated a total of five mid-range scrolling subtitles. Each scrolling text shows the effect of scrolling,

This is the effect when the page is refreshed. We can see that 3rd subtitles are taken from the screen, which is controlled by width = 50%, the height of the fifth subtitle red background is also controlled by height = 10%. The following figure shows the effect of the third and fourth Subtitles rolling. We can find that the third subtitle is only taken once, And the loop is 1. When it hits the border of the browser on the left, it will not leave, the fourth subtitle, because it is alternating between the left and right behavior = "alternate", and only two loop = 2, so it finally stops at the right border of the browser.

Here we will learn the scrolling text effect. Next we will learn the list. The html provides a list to better layout the webpage text. The list is as follows: projects are listed in order and out of order on the webpage. The list is divided into five types: definition list <DL> unordered list <ul> directory list <dir> menu list <menu> ordered list <ol>, let's take a look at the three lists respectively.

Unordered list

The unordered list starts with <ul>. Each list entry is guided by <li> and ends with </ul>. Each clear List entry is automatically indented and marked with a black spot. As follows:
<Ul>
<Li> I am an unordered list </LI>
<Li> I start with a black spot </LI>
</Ul>

The page effect is as follows:

• ·I am an unordered list
• ·I start with a black spot

Ordered list

Compared with an unordered list, an ordered list entry is marked by a number by default and ends with <ol> Start </OL>. For example:
<Ol>
<Li> I am an ordered list. The default sequence number starts with 1.
<Li> the serial number is now 2.
</OL>

The page effect is as follows:

1. I am an ordered list: the default number starts with 1.
2. Now the serial number should be 2

The default value for marking an ordered list entry is an Arabic number. You can also use the type attribute to change the sequence number display mode. Method:

<Li type = #>
"#" Can be of the following types:
The value of "#" is "A", with uppercase letters displayed.
The value of "#" is "A", indicating lowercase letters.
The value of "#" is "I", and the upper-case roman numerals are displayed.
The value of "#" is "I", and the lower-case roman numerals are displayed.
"#" Is set to "l". The default value is "Arabic numerals.

For example:
<Ol type = "# A">
<Li> I am an ordered list: sequence number starts with.
<Li> the current serial number is B.
<Li type = "# A"> now I specify type = A. The serial number is.
</OL>
The page effect is as follows:

A. I am an ordered list: the sequence number starts with.

B. The serial number should be B.

A. Now I have defined type = A. The serial number should be.

Definition list

Define a list to briefly describe the list entries. Start with <DL> and use <DT> as the guide for listing entries. Use <DD> as the guide, for example:
<Body>
<DL>
<DT> Article 1:
<DD> definition list
<DT> Article 2:
<DD> I am the second note.
</Dl>
</Body>

The page effect is as follows:

Article 1:

Definition list

Article 2:

I am the second note

The use of the entries in the other two lists is roughly the same as that in <li>. I will not elaborate on them here, in actual development in the future, it will be dynamically loaded to your page based on the number of entries, for example:

<% foreach (VAR category in viewdata) {%>

• 
  <% = html. actionlink (category. categoryname, new {Action = "list", Category = category. categoryname}) %>
  <% }%>
  

Of course, there are a lot of codes that you cannot understand for the moment, but it doesn't matter. When I learn the development language in the future, I will find out the specific usage of it. I propose it to let you know its importance. In this lesson, we will first learn how to create and use key tables in HTML.