Microsoft Expression Web-하이퍼 링크

이 장에서는 웹 사이트에서 하이퍼 링크를 사용하는 방법을 배웁니다. 웹을 그렇게 확장하게 만드는 요소 중 하나는 웹 페이지가 다른 웹 페이지로 연결되는 기능입니다.Hyperlinks 또는 링크는 거의 모든 웹 페이지에서 찾을 수 있습니다.

또한 사용자는 하이퍼 링크를 사용하여 다른 페이지, 페이지 내의 위치, 이미지 또는 인터넷의 다른 위치를 완전히 클릭하여 이동할 수 있습니다. 다음은 하이퍼 링크의 중요한 기능 중 일부입니다-

Expression Web의 하이퍼 링크 도구 및 옵션을 사용하면 하이퍼 링크 작업을 매우 쉽게 수행 할 수 있습니다.
Expression Web 하이퍼 링크보기 및 보고서를 사용하면 끊어지고 잘못된 링크를 매우 쉽게 찾아 수정할 수 있습니다.
하이퍼 링크는 클릭하면 새 문서 또는 현재 문서 내의 위치로 이동하는 단어, 단어 그룹 또는 이미지 일 수 있습니다.

앵커 태그

HTML에서 <a>앵커 태그로 알려진 태그는 다른 문서에 대한 링크를 만드는 데 사용됩니다. 앵커는 다른 HTML 페이지, 이미지, 텍스트 문서 또는 pdf 파일을 가리킬 수 있습니다. 다음은 앵커의 기본 코드입니다.<a> 꼬리표.

<a href = "url">Text to be displayed as link<a>

에 <a> 태그, "href"속성은 문서에 대한 링크를 지정하는 데 사용되며 앵커 태그의 열기와 닫기 사이에있는 단어는 하이퍼 링크로 표시됩니다.
웹 페이지의 링크 위로 커서를 이동하면 화살표가 작은 손 모양으로 바뀝니다.
URL은 프로토콜, 웹 서버 및 파일 경로를 지정하는 주소입니다.
두 가지 유형의 URL이 있습니다. absolute 과 relative. 안absolute URL 전체 주소를 포함하는 반면 relative URL주소에서 하나 이상의 부분이 누락되었습니다. 그러나 웹 브라우저는 URL이 포함 된 페이지에서 누락 된 정보를 가져옵니다.

예

두 가지를 모두 사용하는 간단한 예를 살펴 보겠습니다. absolute 과 relative URLs.

Step 1 − 먼저 index.html 페이지에 다음 줄을 추가하십시오. main content 부분.

<div id = "main-content">  
   <p> Absolute URL Example: </p> 
   <p>  Google </p> 
   <p>  Youtube </p> 
   <p> Relative URL Example: </p> 
   <p>  Home Page 2 </p>  
</div>

다음은 완전한 구현입니다. index.html 페이지.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <style type = "text/css"> 
         #left-nav ul li a:hover { 
            color: #000000; background-color: #116611; 
         } 
      
         #left-nav ul li a:hover { 
            color: #000000; background-color: #66FF99; 
         } 
      </style> 
      <link href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head> 
   <body> 
      <div id = "container"> 
         <div id = "header"> </div> 
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li> 
               <li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li> 
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li> 
            </ul> 
         </div> 
   
         <div id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li> 
               <li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li> 
               <li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li> 
            </ul> 
         </div> 
  
         <div id = "main-content">  
            <p> Absolute URL Example: </p> 
            <p>  Google </p> 
            <p>  Youtube </p> 
            <p> Relative URL Example: </p> 
            <p>  Home Page 2 </p> 
         </div> 
         <div id = "footer"> </div> 
      </div> 
   </body> 
</html>

Step 2 − 웹 페이지를 저장하면 메인 콘텐츠 섹션에 텍스트가 표시됩니다.