HTML은 Hyper Text Markup Language의 약자로 웹 페이지의 구조와 내용을 표현하기 위해 개발된 마크업 언어입니다.
HTML은 '.html'과 같은 확장자를 가지며, 태그(Tag)와 속성(Attribute), 그리고 태그(Tag)와 속성(Attribute)의 조합인 요소(Element)로 이루어져 있습니다.
아래 코드는 이번 챕터에서 예시로 사용할 HTML 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crawling DAS</title>
.
.
.
(중략)
.
.
.
</head>
<body>
<header>
<h1>파이썬 왕초보의 크롤링 도전기</h1>
</header>
<nav>
<ul>
<li><a href="#" onclick="showContent('home')">Home</a></li>
<li><a href="#" onclick="showContent('about')">About</a></li>
<li><a href="#" onclick="showContent('Book Recommand')">Book Recommand</a></li>
<li><a href="#" onclick="showContent('contact')">Contact</a></li>
<li><a href="#" onclick="showContent('login')">login</a></li>
</ul>
</nav>
<div class="container">
<!-- 내용 추가 -->
<div id="home" class="visible">
<h2>환영합니다! 멋쟁이사자처럼 데이터분석스쿨 1기 - Team DA채로움입니다.</h2>
<p class='highlight'>이 페이지는 <파이썬 왕초보의 크롤링 도전: 웹 데이터 수집부터 저장까지>를 위해 만들어진 페이지입니다.</p>
<p>Python 왕초보의 크롤링을 돕기위해 무료 전자책을 집필하였습니다.</p>
<p>크롤링과 Python을 처음 접하는 모든 분들에게 도움이 되기를 바랍니다.</p>
<a href="javascript:doDisplay();"> >> Click Here!</a><br/><br/>
<div id="myDIV" style="display:none; background-color: #eee;">
<h3>Selenium .click() 예제입니다.</h3>
<p>display block 속성값은 내부 요소를 나타나게 하며 none 는 사라지게 합니다.</p>
</div>
</div>
<div id="about" class="hidden">
<h2>About</h2>
<p>무료 전자책은 기본편과 활용편으로 이루어져있습니다.</p>
<p>기본편에서 환경설정 및 개념에 대한 학습을 간단하게 마치고, 활용편을 따라 작성하기만 한다면 누구라도 크롤링이 가능합니다!</p>
</div>
<div id="BookRecommand" class="hidden">
<h2>Book Recommand</h2>
<p>Python과 SQL, 그리고 데이터 분석에 관련된 책 목록입니다.</p>
<p>책 소개 부분에 마우스를 오버하시면 추가 설명을 확인하실 수 있습니다.</p>
<p>제목을 클릭하시면 해당 책의 리디북스 페이지로 이동합니다.</p>
.
.
.
(중략)
.
.
.
<table>
<thead>
<tr>
<th>Title</th>
<th>Author/Publisher</th>
<th>Introduction</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td category="python"><a href="<https://ridibooks.com/books/443001043?_rdt_sid=category_books&_rdt_idx=0&_rdt_arg=2200>">개정판｜혼자 공부하는 파이썬</a></td>
<td>윤인성/한빛미디어</td>
<td title="파이썬 입문 베스트셀러 『혼자 공부하는 파이썬』 개정판(최신 3.10 버전 반영) 혼공을 독려하는‘혼공 계획표’와 생각의 수준을 높이는 ‘누적 예제’와 ‘도전 문제’ 수록! 『혼자 공부하는 파이썬』이 더욱 흥미있고 알찬 내용으로 개정되었습니다. 프로그래밍이 정말 처음인 입문자도 따라갈 수 있는 친절한 설명과 단계별 학습은 그대로! 혼자 공부하더라도 체계적으로 계획을 세워 학습할 수 있도록 ‘혼공 계획표’를 새롭게 추가했습니다. 또한 입문자가…">파이썬 입문 베스트셀러 『혼자 공부하는 파이썬』 개정판(최신 3.10 버전 반영) 혼공을 </td>
<td>17600</td>
</tr>
.
.
.
(중략)
.
.
.
<tr>
<td category="python"><a href="<https://ridibooks.com/books/2480000020?_rdt_sid=category_books&_rdt_idx=0&_rdt_arg=2200>">파이썬 기초 문법</a></td>
<td>이원하/비팬북스(러닝스페이스)</td>
<td title="<파이썬을 이용한 빅데이터 수집, 분석과 시각화> 도서 구독자들을 위한 파이썬 기초 문법을 다루고있다. 이 도서 외에도 파이썬 기본 문법을 익히려는 분들에게 유용한 입문서 역할을 할 수 있도록 만들었다.…"><파이썬을 이용한 빅데이터 수집, 분석과 시각화> 도서 구독자들을 위한 파이썬 기초 문법을</td>
<td>무료</td>
</tr>
</tbody>
</table>
</div>
<div id="contact" class="hidden">
<h2>Contact</h2>
<p>아래 페이지는 저희 팀의 GitHub입니다. 필요한 자료를 업로드해두었으니, 자유롭게 사용하시길 바랍니다.</p>
<p><a href="<https://github.com/spanish96/Crawling_DAS>" onclick="showContent('Crawling DAS GitHub로 이동')"> >> Crawling organization GitHub</a></p>
</div>
<div id="loginContent" class="hidden">
<h3>ID에는 무엇이든 입력하셔도 됩니다. PW에는 '1234'를 입력해 주십시오.</h3>
<form id="myForm" onsubmit="extractData(); return false;">
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button type="submit">Login</button>
<p> </p>
</form>
<div id="message" style="display: none;">
<h3>로그인에 성공하셨습니다. <span id="usernameText"></span>님!</h3>
<p> </p>
</div>
<script>
// Submitting the form
function submitForm() {
document.getElementById('myForm').submit();
}
// Extracting text and attribute values
function extractData() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (password === "1234") {
// Displaying extracted data
document.getElementById('usernameText').textContent = username;
document.getElementById('message').style.display = 'block';
} else {
alert("로그인에 실패했습니다. 다시 시도해주십시오.");
}
}
</script>
</div>
<footer>
<p>© 2023 Crawling DAS 1th. All rights reserved.</p>
</footer>
</body>
</html>
HTML의 요소(Element)
요소는 태그와 속성의 조합으로, 시작 태그와 종료 태그 사이에 있는 내용은 요소의 내용(content)으로 여겨집니다.
아래와 같이 태그와 속성들을 통해 요소가 표현됩니다.
<div id="home" class="visible">
<h2>환영합니다! 멋쟁이사자처럼 데이터분석스쿨 1기 - Team DA채로움입니다.</h2>