방법 - HTML 책 만들기
모든 장치, PC, 랩톱, 태블릿 및 휴대폰에서 작동하는 HTML 책을 만드는 방법을 배웁니다.
먼저 기본 HTML 페이지 만들기
HTML은 웹사이트를 만들기 위한 표준 마크업 언어이고 CSS는 HTML 문서의 스타일을 설명하는 언어입니다.
HTML과 CSS를 결합하여 기본 HTML 책을 만듭니다.
먼저 HTML 스켈레톤으로 시작합니다.
예시
<!DOCTYPE html>
<html>
<head>
<title>My Book</title>
<meta charset="UTF-8">
</head>
<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>
</html>
예시 설명
<!DOCTYPE html>문서 유형은 HTML입니다.<html> </html>문서의 시작과 끝<head> </head>문서 정보의 시작과 끝<title>책 제목("내 책")<meta charset="UTF-8">사용된 문자 집합(UTF-8)<body> </body>보이는 콘텐츠의 시작과 끝<h1> </h1>제목의 시작과 끝<p> </p>단락의 시작과 끝
위에서 설명한 코드는 HTML 태그입니다.
HTML 태그는 HTML 문서의 내용을 정의하는 데 사용됩니다.
태그는 (보다 작음 기호)로 시작하고 <(보다 큼 기호)로 끝납니다
>.
이 방법으로 <p>및 </p>단락의 시작과 끝을 표시하는 데 사용됩니다.
참고: HTML을 자세히 공부하려면 HTML 자습서 를 읽으십시오 .
완전히 정확하려면 <html>책에 사용된 언어를 정의하기 위해 태그에 언어 속성이 추가되어야 합니다.
<html lang="en">
다음 메타 정보를 추가하면 모든 기기, PC, 노트북, 태블릿 및 휴대전화에서 책이 올바르게 표시됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
예시
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Book</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>
</html>
목차 만들기
요소 내부에 <body> </body>목차를 추가합니다.
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p>1. Metaphysics</p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>
</body>
스타일 추가
책에 스타일시트 추가:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
참고: CSS를 자세히 공부하려면 CSS 튜토리얼 을 읽어보세요 .
1장 HTML 페이지 만들기
파일: philosophy_chapter1.htm
<body class="w3-content">
<div class="w3-container">
<h1>1. Metaphysics</h1>
<h3>The nature of reality.</h3>
<p>Metaphysics is the part of philosophy that studies the nature of reality.</p>
<p>When we look around, we can see:</p>
<ul>
<li>Nature</li>
<li>Animals</li>
<li>People</li>
<li>Houses</li>
<li>Cars</li>
<li>and much more</li>
</ul>
<p>Is this Virtual Reality real?</p>
<p>In Metaphysics, the questions is:</p>
<ul>
<li>What is real?</li>
<li>Is what we see real?</li>
<li>Is there more than we see?</li>
<li>Is there more than we sence?</li>
<li>Is there something else?</li>
<li>Is there something more?</li>
<li>Is there another dimension?</li>
</ul>
</div>
</body>
1장에 대한 링크 추가
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p><a href="philosophy_chapter1.htm">1. Metaphysics</a></p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>
</body>
위의 예에서 책의 첫 번째 장의 이름을 다음과 같이 지정했습니다.
" philosophy_chapter1.htm ".
사용할 이름은 귀하에게 달려 있습니다. 아마도 "형이상학"이라고 불러야 할 것입니다.
어쨌든 위와 같이 계속해서 다른 장을 만듭니다.
"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"
각 장에 대한 링크 추가
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p>
<a href="philosophy_chapter1.htm">1. Metaphysics</a>
</p>
<p>
<a href="philosophy_chapter2.htm">2. Epistemology</a>
</p>
<p>
<a href="philosophy_chapter3.htm">3. Logics</a>
</p>
<p>
<a href="philosophy_chapter5.htm">4. Ethics</a>
</p>
<p>
<a href="philosophy_chapter4.htm">5. Aesthetics</a>
</p>
</body>