기초적인 html 태그를 사용하여 간단한 음악 소개 페이지를 만들고 닷홈을 통해 호스팅해보았다.
- 페이지 캡처
- index.html
- page1.html
- 소스 코드
- index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>index</title>
<script>
</script>
</head>
<body>
<h1>이창희의 홈페이지</h1>
<input name="ENTER" onclick="location.href='page1.html'" type="button" value="입장">
</body>
</html>
- page1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>page1</title>
<style>
table {
text-align:center;
}
</style>
<script>
</script>
</head>
<body>
<h1>음악 1: Flower Dance</h1>
<image src="./images/image1.jpg" width="400" height="400"></image>
<br />
<embed type="audio/mp3" src="./music/music1.mp3" width="100" height="25">
<hr>
<table border='1'>
<!-- thead : 제목 지정 -->
<thead>
<tr>
<th> 네티즌 평점 </th>
<th> 평론가 평점 </th>
</tr>
</thead>
<!-- 평점 데이터들 -->
<tr>
<td> 9.57 </td>
<td> 7 </td>
</tr>
</table>
<hr>
<div style="background-color:cornflowerblue">
<ul>
<li>네티즌 1: 아름다운 음악이다.</li>
<li>네티즌 2: 10점 밖에 줄 수 없어 안타깝다.</li>
</ul>
</div>
<hr>
<div style="background-color:lightgreen">
<p>
This is the purpose of changing<br />
Hydrogen into breathable oxygen<br />
And they are necessary here...<br />
As the air is on earth.<br />
But I still say... they're <b>FLOWERS</b>.<br />
If you like...<br />
Do you sell them?<br />
I am afraid Not.<br />
<font color="red">But... maybe we can make a deal.</font>
</p>
</div>
<hr>
<div style="background-color:lightpink">
<p>
꽃이 흩날리는 듯한 아름다운 선율의 음악이다.
</p>
</div>
<hr>
<a href="https://www.youtube.com/watch?v=rA_2B7Yj4QE">음악 1 커버</a>
<hr>
<input type="button" name="다음버튼" value="다음" onclick="location.href='page2.html'">
</body>
</html>
- 호스팅하기
닷홈 무료 도메인과 FileZilla를 사용해 작성한 html 파일을 호스팅했다.
1. https://www.dothome.co.kr/에서 회원 가입 한다.
2. 상단 메뉴의 웹 호스팅 -> 무료 호스팅을 신청한다.
3. 호스팅을 신청한 정보를 FileZilla에 입력한 후 연결한다.
4. FileZilla의 html 폴더 안에 작성한 파일들을 정리해서 넣은 뒤 웹 브라우저에서 접속해본다.
'HTML' 카테고리의 다른 글
| [CSS] text-overflow, line-height (0) | 2020.08.14 |
|---|---|
| [CSS] after, before (0) | 2020.08.14 |
| [CSS] Flexible Box (플렉서블 박스) (0) | 2020.08.14 |
| [CSS] 미디어 쿼리를 활용한 해상도 대응 (0) | 2020.08.14 |
| [HTML] history (0) | 2020.08.12 |
