문단 : 글에서 하나로 묶을 수 있는 짧은 단위. html에선 <p> 태그를 사용
  - 문법 : <p>문단</p>

줄바꿈 : HTML에서는 개행문자를 무시. 대신 <br /> 태그를 사용
  - 문법 : 문장<br />

띄어쓰기 : HTML에선 스페이스 문자는 한번만 인정. 그래서 한번 이상 스페이스를 입력해도 한칸만 띄어쓰기가 됨. 이럴때 &nbsp; 기호를 사용.
  - 문법 : 문장&nbsp;문장

 

링크 : 문서에서 다른 문서로 이동할 수 있는 수단을 의미

 

문법

<a href="URL" title="설명" target="문서가 로드될 대상">링크이름</a>

  - href : 링크 이름과 연결되어 있는 리소스의 주소
  - title : 연결되어 있는 리소스에 대한 설명, 롤오버 했을 때 툴팁으로 표시됨
  - target : 문서가 로드될 대상
    * _self : 현재의 문서가 로드된 프레임, 현재문서 사라짐
    * _blank : 새로운 창(탭)을 띄우고 거기에 문서를 로드
    * _parent : 현재 문서가 frame나 iframe에 로드된 경우 현재 문서를 로드한 프레임에 문서를 로드
    * 프레임 이름

 

예제

  - 파일명 : linkexample1.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
        <p>
            <a href="http://www.naver.com">네이버</a> : 네이버 홈페이지로 이동
        </p>
        <p>
            <a href="http://www.naver.com" target="_blank">네이버</a> : 새창에서 네이버 홈페이지를 실행
        </p>
        <p>
            <a href="http://www.naver.com" target="_self">네이버</a> : 현재 프레임에서 네이버 홈페이지로 이동
        </p>
        <p>
            <a href="http://www.naver.com" title="네이버 홈페이지">네이버</a> : 링크에 부가설명을 추가, 링크에 툴팁을 표시
        </p>
        <p>
            <a href="https://www.naver.com/#news_cast" title="네이버의 뉴스캐스트 참조">네이버 뉴스캐스트 참조</a> : 네이버 메인 페이지 중 참조 부분으로 문서를 이동
        </p>
    </body>
</html>


예제 설명

예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

 

 

 

1번 링크의 경우 아래 그림과 같이 해당 페이지에서 바로 네이버로 실행된다.

 

 

2번 링크의 경우 새 창에서 네이버 홈페이지가 실행된다.

 

 

3번 링크의 경우 현재 프레임에서 실행된다. 예시 코드의 경우 현재 프레임이 구분되어 있지 않으므로 1번과 같은 결과가 나온다.

 

 

4번 링크는 링크에 마우스를 올리면 부가적인 설명이 보이도록 설명을 추가한다.

 

 

5번 링크는 참조한 부분으로 이동한다. 해당 소스코드에서 #news_cast를 추가하여 news_cast 부분으로 이동하게 했다. 하지만 링크를 클릭하면 잠깐 news_cast로 갔다가 다시 원상복구되어 1번과 같은 화면으로 나온다.

'Programming > HTML' 카테고리의 다른 글

iframe, frame  (0) 2017.12.11
목록  (0) 2017.12.11
이미지 태그  (0) 2017.12.11
태그(tag)  (0) 2017.12.07
HTML이란?  (0) 2017.12.07
블로그 이미지

꼴통보안인

,