/* 윈도우 10에서 Atom 편집기를 사용했습니다. */
웹사이트 만들기
실제 웹사이트처럼, 클릭하면 해당 내용을 보여주도록 만들어보자!
하이퍼링크 삽입하기
<a href"주소 또는 html 파일명">입력문자</a>위의 코드를 사용하면 하이퍼링크를 삽입할 수 있다.
주소는 실제 웹브라우저 주소 또는 내 컴퓨터에 저장된 html 파일 이름이면 된다.
입력문자는 클릭할 수 있는 문자를 의미한다.
<!DOCTYPE html>
<html>
<head>
<title>Book Contents</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">[이제 시작이야 디지털 포렌식] 목차</a></h1>
<ol>
<li><a href="1.html">소개</a></li>
<li><a href="2.html">핵심적인 기술 개념</a></li>
<li><a href="3.html">랩과 툴</a></li>
<li><a href="4.html">증거 수집</a></li>
<li><a href="5.html">윈도우 시스템에서의 증거 수집</a></li>
<li><a href="6.html">안티 포렌식</a></li>
</ol>
</body>
</html>
<index.html의 코드 전문>
인터넷 주소가 아니라 html 파일을 삽입할 것이므로,
각 목차와 어느 파일을 연결할 것인지 미리 적는다.
쉽게 말하면 html 파일명을 우리가 미리 지정해주는 것이다.
그러므로 항목 파일을 만들 때 목차에 따른 파일명은 위의 코드를 따라야 한다.
index.html 파일로 여기까지 만든 셈이다.
순서대로 1~6 파일도 만들어주자.
// 1.html
<!DOCTYPE html>
<html>
<head>
<title>Book Contents</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">[이제 시작이야 디지털 포렌식] 목차</a></h1>
<ol>
<li><a href="1.html">소개</a></li>
<li><a href="2.html">핵심적인 기술 개념</a></li>
<li><a href="3.html">랩과 툴</a></li>
<li><a href="4.html">증거 수집</a></li>
<li><a href="5.html">윈도우 시스템에서의 증거 수집</a></li>
<li><a href="6.html">안티 포렌식</a></li>
</ol>
<h2>소개</h2>
디지털 포렌식을 소개합니다.
</body>
</html>
// 2.html
<!DOCTYPE html>
<html>
<head>
<title>Book Contents</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">[이제 시작이야 디지털 포렌식] 목차</a></h1>
<ol>
<li><a href="1.html">소개</a></li>
<li><a href="2.html">핵심적인 기술 개념</a></li>
<li><a href="3.html">랩과 툴</a></li>
<li><a href="4.html">증거 수집</a></li>
<li><a href="5.html">윈도우 시스템에서의 증거 수집</a></li>
<li><a href="6.html">안티 포렌식</a></li>
</ol>
<h2>핵심적인 기술 개념</h2>
핵심적인 기술 개념을 학습합니다.
</body>
</html>
// 3.html
<!DOCTYPE html>
<html>
<head>
<title>Book Contents</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">[이제 시작이야 디지털 포렌식] 목차</a></h1>
<ol>
<li><a href="1.html">소개</a></li>
<li><a href="2.html">핵심적인 기술 개념</a></li>
<li><a href="3.html">랩과 툴</a></li>
<li><a href="4.html">증거 수집</a></li>
<li><a href="5.html">윈도우 시스템에서의 증거 수집</a></li>
<li><a href="6.html">안티 포렌식</a></li>
</ol>
<h2>랩과 툴</h2>
디지털 포렌식 랩과 툴에 대해서 알아봅니다.
</body>
</html>
// 4.html
<!DOCTYPE html>
<html>
<head>
<title>Book Contents</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">[이제 시작이야 디지털 포렌식] 목차</a></h1>
<ol>
<li><a href="1.html">소개</a></li>
<li><a href="2.html">핵심적인 기술 개념</a></li>
<li><a href="3.html">랩과 툴</a></li>
<li><a href="4.html">증거 수집</a></li>
<li><a href="5.html">윈도우 시스템에서의 증거 수집</a></li>
<li><a href="6.html">안티 포렌식</a></li>
</ol>
<h2>증거 수집</h2>
디지털 포렌식을 이용한 증거 수집에 대해 알아봅니다.
</body>
</html>
// 5.html
<!DOCTYPE html>
<html>
<head>
<title>Book Contents</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">[이제 시작이야 디지털 포렌식] 목차</a></h1>
<ol>
<li><a href="1.html">소개</a></li>
<li><a href="2.html">핵심적인 기술 개념</a></li>
<li><a href="3.html">랩과 툴</a></li>
<li><a href="4.html">증거 수집</a></li>
<li><a href="5.html">윈도우 시스템에서의 증거 수집</a></li>
<li><a href="6.html">안티 포렌식</a></li>
</ol>
<h2>윈도우 시스템에서의 증거 수집</h2>
윈도우 시스템에서의 증거 수집에 대해 알아봅니다.
</body>
</html>
// 6.html
<!DOCTYPE html>
<html>
<head>
<title>Book Contents</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">[이제 시작이야 디지털 포렌식] 목차</a></h1>
<ol>
<li><a href="1.html">소개</a></li>
<li><a href="2.html">핵심적인 기술 개념</a></li>
<li><a href="3.html">랩과 툴</a></li>
<li><a href="4.html">증거 수집</a></li>
<li><a href="5.html">윈도우 시스템에서의 증거 수집</a></li>
<li><a href="6.html">안티 포렌식</a></li>
</ol>
<h2>윈도우 시스템에서의 증거 수집</h2>
윈도우 시스템에서의 증거 수집에 대해 알아봅니다.
</body>
</html>
파일 작성이 끝났으면, index.html 파일을 열고 하이퍼링크를 눌러보면서 확인해보자.
728x90
'Web > HTML' 카테고리의 다른 글
| 4. HTML 문서 만들기 | html, head, title, body, doctype (0) | 2021.01.12 |
|---|---|
| 3. HTML 목록 만들기 | li, ul, ol (0) | 2021.01.12 |
| 2. HTML 기초 | 아톰(Atom) 기본 사용법, HTML 태그, HTML 공부 방향 (1) | 2021.01.11 |
| 1. HTML 공부 준비하기 | 아톰(Atom) 설치 (2) | 2021.01.11 |