html 링크 걸기, a태그와 href속성만 알면 ok!


 

먼저 html의 기본 구조는 아래와 같다.


<!DOCTYPE html>

<html>

<head>

<title>    </title>

</head>

<body>

 

</body>

</html>


"여기를 클릭" 이라는 문구를 클릭하면

원하는  웹사이트, 웹페이지로 이동하게 하려면

 

html에서 링크 걸기를 하려면

[a 태그, href 속성, 네이버의 url 을 속성값]으로 사용해야 한다.

 

엥 이게 무슨말?

 

영어 문법에 1형식, 2형식...이 있듯

Html 문법에도 형식이라는 것이 있다.

영어 형식에는 주어, 동사, 목적어, 보어 등이 있듯

Html 형식에는 태그, 속성, 속성값이 있다.

 

Html 링크 걸기의 형식은 아래와 같다.

이 형식은 매우 중요함으로 영어 5형식을 '주어 동사 목적어 목적보어'로 달달 외웠듯

아래 html 형식도 달달달 외워야 한다.

 

<a        href   =   "http://meaningone.tistory.com">   여기를 클릭   </a>

태그명   속성명                 속성값                            화면에 표시되는 컨텐츠

 

html 기본구조에 위의 html 링크 걸기 형식을 적용하면 아래와 같다.

<!DOCTYPE html>

<html>

<head>

<title>html 링크 걸기</title>

</head>

<body>

         <a href="http://meaningone.tistory.com">여기를 클릭</a>

</body>

</html>

 


 

 

위 코드를 윈도우 메모장에 붙여넣기하고

파일이름에 .html을 붙이고

파일형식을 모든 파일로

인코딩을 UTF-8로 하고 아래와 같이 저장하면

 

 


 

아래와 같은 결과물이 나오며,

'여기를 클릭'이라는 문구에 링크가 걸려있기에(=하이퍼 링크)

이 문구를 클릭하면 설정된 웹사이트로 이동하게 된다.

 

 

 

  Comments,     Trackbacks