HTML start-learning 3

1.HTML links (1) Add hyperlinks to text and images

1. Review the simplest links to use, directly add links to the text pages and additional HTML Files.

The HTML content is as Follows:

1 < P ><  href= "www.baidu.com"> Baidu </a></ P >

This is the simplest hyperlink, and the next step is to link the HTML file to another HTML File. (in the same folder, add an HTML file), and then the following is the HTML content and Results:

1     < P ><  href= "demo1.html">Another HTML</a></  p>

Click to enter (the content of the other HTML will no longer show).

2. Add a hyperlink to a picture, click the picture, link to another page

1 <  href= "lizi.html"><src= "image/2.jpg"  ></a>

(2) how hyperlinks are opened

Open on this page and open in a new browser window, by default, hyperlinks open new pages in a way that is self-overwriting (that is, open on this page). Depending on the Browser's needs, readers can specify how other hyperlinks will open new Windows. The hyperlink tag provides the target property for setting, with values of _self (self-overwriting, default), and _blank (creating a new window to open a new page). Let's try to differentiate between the two attributes (since we've written the default, we'll just add the _blank property)

On the basis of the above we add the target property to the < a> tag: target= "_blank", The _blank attribute plus later, the link to the page is opened in a new window, and the default _self property is opened in the form of overlay on this page (first Picture)

(3) HYPERLINK Add hint text

Sometimes the hyperlink text is not enough to describe the content to be linked after clicking, so this time we need to add hint text to the hyperlink, to describe the content of the next link, when the cursor stays on the hyperlink, the prompt language will appear, will let the page appear very brief. The design to the property is the title, let's try to do the experiment next below is the experiment content and effect

On the previous basis,< a> tag plus title attribute: title= "this Word would link to the wed of shiyanlou"

(4) Hyperlink Implementation Bookmarks

Maybe you read the novel on the webpage, when you click on the topic of the chapter in the first page, it will automatically jump to the corresponding section, how is this implemented? To implement bookmarks, you need to understand what anchors are (anchor). Anchor (anchor) is from the Ship's anchor, the anchor is thrown down, the ship will not be easy to float away, Lost. In fact, anchors are used for jumps in different places within a single page, and some are called bookmarks. The tag involved is of course < a> tag, the hyperlink Tag's Name property is used to define the name of the anchor, a page can define multiple anchors, and the href attribute of the hyperlink can jump to the corresponding anchor according to the Name. To implement the jump as Follows:

1 <  href= "#跳转目的地名称"> Jump start character </a>2 ... 3 ... 4 ... 5 <  name= "jump destination name"> Jump destination character </a> 

Instance:

1   <Pstyle= "text-align:center">HTML Learning</P>2 3     <P>4     <ahref= "#c1">HTML Chushi</a>5     </P>6     <P>7     <ahref= "#c2">HTML Wenben</a>8     </P>9     <P>Ten     <ahref= "#c3">HTML Chaowenben 1</a> one     </P> a  -     <H1><aname= "c1"></a>Chapter 1 Chushi HTML</H1> -     <P>Lalalaalalal</P> the     <P>Lalalaalalal</P> -     <P>Lalalaalalal</P> -  -     <H1><aname= "c2"></a>Chapter 2 Wenben HTML</H1> +     <P>Lalalaalalal</P> -     <P>Lalalaalalal</P> +     <P>Lalalaalalal</P> a  at     <H1><aname= "c3"></a>Chapter 3 Chaowenben</H1> -     <P>Lalalaalalal</P> -     <P>Lalalaalalal</P> -     <P>Lalalaalalal</P>

2.HTML table

The table is usually used to make layout, and the use of the table contains several important tags, which is the table, tr and td, which are a few heavy points, the combination is a complete table, the table is defined by the < table> Tag. Each table has several rows (defined by the < tr> tag), and each row is split into several cells (defined by the < td> tag). The letter TD refers to the table data, which is the contents of the data Cell. < th> tags are used to define the Header. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and so On.

1   <TableAlign= "center"Border= "1">  2             <TR>3             <TD>First row and first column</TD>4             <TD>First row and second column</TD>5             <TD>First row and third column</TD>6             </TR>7 8              <TR>9              <TD>Second row and first column</TD>Ten              <TD>Second row and second column</TD> one              <TD>Second row and third column</TD> a              </TR> -  -      </Table>

Here we introduce the table two Properties: colspan: control the number of columns in this unit rowspan: control the number of rows that this unit occupies

The table has a lot of details to define and you need hands-on exercises:

• label:< th> Header </th>: Set header

• Property: cellpadding= "..." Set cell padding

• Property: bgcolor= "..." Sets the background color of the table
• Property: background= "..." Take a picture as a table background

3.HTML Images

We briefly mentioned using images as links, and then we'll go over the applications in Detail. In general, we use the insertion of images, the picture as the background, and the image as a link. The tags involved are < img></img> next we'll start writing an HTML file to get to know first, we use a browser to download a few images on the Web page (and HTML files in a folder) for later Use.

1. First set a picture to add a background image to the Body property by adding the Background property to the background picture of the Web page

Not used now, apply CSS to set the background

<style= "background-image:url (image/3.jpg)">

2. Insert a picture, example:

1 <  src= "path plus file name">

3. Add properties to adjust how the picture is to be

Add the Align property to the < img> tab and adjust to it. Relative exercises can be added to the upper and lower parameters have bottom, middle, top, The default is that we just saw the bottom relative font can be added to the parameters have right,left default to right

4. Adjust the size of the insert picture most of the dimensions are not so suitable, the direct insertion will break the overall page Effect. So when inserting a picture, it is necessary to control its size, it is very easy to do, you also need to add a width height two attributes in the < img> Tag. Let's take advantage of the above-mentioned charts, you can adjust the image size by percentage or pixel.

5. Create an image map

Before that we tried to try to use the image as a link, the way to trigger the link is to click the image anywhere can link to the jump address, sometimes we need to implement, click on the image of different places to jump to different places. It means that a picture we can create an image map with a clickable area, where each area is a hyperlink. The tag involved is the < map> tag, used to specify the image,< area> used to specify the hyperlink area

1 <imgsrc= "xx.jpg"Usemap= "#mp"/>  2 <Mapname= "mp"ID= "mp">  3     < area>4     ...5     ...6     ...7     </ area>  8 </Map>

Here is a picture as a map, in the < area> tag we will refer to shape, coords, href attributes, respectively, to specify the hyperlink area shape, hyperlink Area coordinates, as well as hyperlink jump to the Ground.

This is the concrete implementation of the content

1 <imgsrc= "image/1.jpg"Usemap= "#lizi" >2     <Mapname= "lizi">3         < areaShape= "rect"coords= "238, 102, 322, 163"href= "lizi.html"Target= "_blank">4     </Map>

The Shape property can take values such as Rect (rectangle), circle (circle), Poly (polygon), and default (the entire image area). The rectangle is used Here.

Coords properties for rectangles, the coords has 4 values, separated by commas, which represent the x-coordinate of the upper-left corner of the rectangle, the y-coordinate of the Upper-left corner, the x-coordinate of the Lower-right corner, and the y-coordinate of the Lower-right corner, where the coordinates are obtained by means of a tool.

HTML start-learning 3