FrontEnd/HTML
하이퍼 링크, 경로, a 태그, img 삽입
H_Develop
2022. 6. 15. 08:38
각 index.html, page1.html, page2.html, page3.html 파일을 만든다.
각 파일에 올바른 내용을 입력해주고 같은 폴더 안에서 두어, index.html의 a태그 경로를 같게 해준다.
모든 클라이언트에세 제공되는 메인 웹 페이지는 index.html 이다.
이 안에 링크되는 여러 ~.html 파일들과 jpg, avi, txt 파일들이 있을 수 있다.
하이퍼링크 Hyper link
하이퍼 링크는 <a> 태그를 이용해서 텍스트나 이미지와 같이 요소에 링크를 걸어두는 것을 말한다.
링크가 걸려있는 텍스트나 이미지를 클릭하면 해당 페이지로 이동하게 됨으로써 웹 서핑이 가능해진다.
index.html
main page, 화면에 자료를 출력하고, 그 자료를 클릭하면 원하는 사이트로 이동한다.
a태그와 img 파일을 연동하여 이미지를 클릭하면, a태그의 주소로 이동한다.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>How to link a text</h3>
<ul>
<li><a href="page1.html">What is internet ?</a></li>
<li><a href="page2.html">What is Web?</a></li>
<li><a href="page3.html" target="_blank">What is HTML?</a></li>
<li><a href="http://infonbook.com">info&book</a></li>
</ul>
<h3>How to link a image</h3>
<ul>
<li><a href="page4.html"><img src="./css.png"></a></li>
<li><a href="http://infonbook.com"><img src="logo.png"></a></li>
</ul>
</body>
</html>
<!--
target="_blank" hyperlink를 클릭하면 새창에서 열림
<li><a href="page1.html">What is internet ?</a></li> 글자 링크
<li><a href="page4.html"><img src="./img/css.png"></a></li> 이미지 링크
-->page1.html
각 page 파일들은 자료의 내용을 보여주며, a태그로 main page인 index.html로 돌아가게 한다.
page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 강좌</title>
</head>
<body>
<h3>인터넷이란?</h3>
<p>1960년대 미국 국방부의 고등 연구국에서 시작된 인터넷은 전세계
컴퓨터를 TCP/IP(Transmission Control Protocol/
Internet Protocol) 통신 규약을 통해 데이터를 주고 받는
컴퓨터 네트워크를 말한다.</p>
<p><a href="index.html">메인 화면으로</a></p>
</body>
</html>page2.html
page2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 강좌</title>
</head>
<body>
<h3>웹이란?</h3>
<p>웹은 'World Wide Web'의 약어로서 간단하게 WWW로 표현한다. 웹이란 인터넷에 연결된 컴퓨터를 통해 전 세계 사람들이 정보를 제공하고 공유할 수 있는 사이버 공간을
의미한다. 사용자는 웹 브라우저를 통해 웹 사이트에 구축된 콘텐츠를 이용하게 된다.</p>
<p><a href="index.html">메인 화면으로</a></p>
</body>
</html>page3.html
page3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 강좌</title>
</head>
<body>
<h3>웹이란?</h3>
<p>웹은 'World Wide Web'의 약어로서 간단하게 WWW로 표현한다.
웹이란 인터넷에 연결된 컴퓨터를 통해 전 세계 사람들이 정보를 제공하고
공유할 수 있는 사이버 공간을 의미한다.
사용자는 웹 브라우저를 통해 웹 사이트에 구축된 콘텐츠를 이용하게 된다.</p>
<p><a href="index.html">메인 화면으로</a></p>
</body>
</html>
page4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 강좌</title>
</head>
<body>
<h3>CSS이란?</h3>
<p>웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다.
문서 전체의 일관성을 유지할 수 있고,
세세한 스타일 지정의 필요를 줄어들게 하였다.</p>
<p><a href="index.html">메인 화면으로</a></p>
</body>
</html>