'Front-End/HTML5 + CSS'에 해당되는 글 36건

 6. ImageMap

6_1. <map>

- Use the <map> to define an image-map

- The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>

5. Image

5_1. <img>

- The tag is empty, it contains attributes only, and does not have a closing tag

Attribute

1) src : This attribute specifies the URL of the image

<img src="url" alt="some_text" style="width:width;height:height;">

2) alt : The alt attribute provides an alternate text for image, if browser cannot find an image, it will display the value of the alt attribute

3) width and Height

- You can use the style attribute to specify the width and height of an image

Always specify the width and height of an image, If width and height are not specified, the page will flicker while the image loads

- It is suggested using the style attribute, it prevents internal or external styles sheets from changing the original size of images

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">  

4. HyperLink

4_1. <a>

- <a> tag defines a hyperlink, which is used to link from one page to another

- The most important attribute of the<a> element is the href attribute, which indicates the link's destination

Attribute

1) target

- _blank : Specifies where to open the linked document

2) title

- title: This attribute give link info to us, It's like a tooltip

3) href

- href : Specifies the URL of the page the link goes to

<a href="http://www.naver.com">Visit naver.com!</a>  

- To move where you want 

<a href="#pizza">pizza</a> <a href="#pasta">pasta</a> <h3>href</h3> <ul> <li name="pizza">pizza</li> <li name="pasta">pasta</li> </ul>  

 3. Text Tag

3_1. <p>

- A paragraph is marked up

- Browsers automatically add some space 

<p>This is some text in a paragraph.</p>

3_2. <blockquote>

- The tag specifies a section that is quoted from another source

- Browser usually indent <blockqoute> elements

<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>  

3_3. <pre>

- Text in a <pre> element is displayed in a fixed-width font, and it preserves both spaces and line break

<pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre>  

3_4. <mark>

- Use the tag if you want to highlight parts of your text

<p>Do not forget to buy <mark>milk</mark> today.</p>  

3_5. <ul, ol>

- ul tag defines a unordered list

- ol tag defines a ordered list

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>  

 How to remove a point in front of list

ul{ list-style:none; }  

3_6. <dl>

- dl tag defines a description list

- dl tag is used in conjunction with <dt> and <dd>

<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>