HTML Learning Summary 5

1. Create a navigation mechanism

Before creating the navigation bar, design a chart to draw the structure of the site. This is a good habit of designing websites.

2, create the text navigation bar, is the most basic of the simplest navigation bar.

The text navigation bar, usually placed on the same horizontal line on the page.

3. The HTML5 contains a <nav> marker, which is a double-mark character. People can choose to place the navigation bar code inside the,<nav> tag to help the browser and style sheet identify a set of links as navigational elements for proper handling.

4, the HTML language ignores multiple spaces, so you want to insert multiple spaces in the word space, but do not want to insert a table or its institutional container, you need to insert a nonbreaking space code (the);

For example: <p>home &nbsp; Tips and Tricks &nbsp; Problem-solving &nbsp; Projects &nbsp; About our store &nbsop; Contact us</p>

Add hypertext links to the navigation bar of the Luo brother article:

<nav>

<p style= "margin:0px" >

<a href= "index.htm" >Home</a>&nbsp;

<a href= "tips.htm" >tips and tricks</a>&nbsp;

<a href= "problems.htm" >Problem-solving</a>

<a href= "prducts.htm" >Products</a>

<a href= "about.htm" >about out store</a>&nbsp;

<a href= "contact.htm" >contact us</a>

</nav>

5. Create a graphical navigation bar

For example:

<nav>

<p style= "margin:0px" >

Results:

　　

5. Create an image map:

Image mapping is the distribution layout of assigning hypertext links to certain areas (hotspots) of a picture, which can be rectangular, round and irregular;

(1) The rectangular hotspot area can be defined by two points: the point in the upper-left corner of the area and the point in the lower-right corner, each point has a pair of numbers, which represents the horizontal and vertical distance (in pixels) of the point to the upper-left corner of the graph;

For example:

<area shape= "rect" coords= "284,170,352,314" href= "enter.htm" >

(2) to define a circular area, you need to use three coordinates, two are the origin coordinates (horizontal and vertical), and one is the diameter of the circle;

<area shape= "Circle" coords= "270,364,144" href= "index.htm" >

(3) to define a hot area of an irregular graph, you need to define all the vertices of the image using multiple coordinates, and the irregular region can have straight lines between all the defined neighbors.

<area shape= "Poly" coords= "287,71,413,286,314,446,188,267" href= "index.htm" >

(4) To create an image map, starting with the <map> double marker, in which the name and identification (ID) attributes, the name and identity can be the same, the name is in the image map itself, you can use the image itself to refer to the image.

For example:

<map name= "moth" id= "moth" >

<area shape= "" Poly "coords=" 287,71,413,286,314,446,188,267 "href=" index.html ">

</map>

As with hypertext links, you can add the title attribute to the <area> tag, so that when you hover over it with the user's mouse, you can display the information on the screen, which is helpful when there is no text in the area.

For example:

<map name= "moth" id= "moth" >

<area shape= "Poly" coords= "287,71,413,286,314,446,188,267" href= "index.htm" title= "Home page" >

</map>

Finally, use the Usemap property in the tag to refer to the image's name for the image, and there must be a # number before mapping the name, like this:

6, automatically jump to another page:

Implement a page jump by adding a property to the <meta> marker in the page

<meta http-equiv= "Refresh" content= "5;url=http://support.microsoft.com" >

　

　　　　　　

HTML Learning Summary 5