본문 바로가기
IT/HTML

[32일차] 2강 HTML5 기본 문서 만들기

by GWLEE 2022. 8. 3.

ex2-02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문단 제목 달기</title>
</head>
<body>
<h1>1장 홈페이지 만들기</h1>
<h2>1절 HTML 언어</h2>
<h3>1. 웹</h3>
<h4>1.1 인터넷</h4>
<h5>1.1.1 네트워크</h5>
<h6>1.1.1.1. 통신</h6>
</body>
</html>

 

ex2-03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>툴팁 달기</title></head>
<body>
<h1 title="h1태그로 작성하였습니다.">1장 홈페이지</h1>
<h2 title="h2태그로 작성하였습니다.">1절 HTML 언어</h2>
</body>
</html>

 

ex2-04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>단락 나누기</title></head>
<body>
<h3>2 개의 단락 나누기</h3>
<p> <!-- 단락 -->
HTML 문서도  본문을 여러 단락으로
나눌 수 있다. CSS 스타일을 사용하면
단락 단위로 내어 쓰기와 들여 쓰기가 가능하다.</p>






<p>
여러 개의 빈 칸은 하나로 취급되며,
엔터 키 역시 하나의 빈 칸으로 처리된다.</p>
</body>
</html>

 

ex2-05.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>수평선 긋기</title></head>
<body>
<h3>수평선 긋기</h3>
<hr>
<p>hr 태그는 horizontal에서 딴 글자입니다.</p>
<hr>
<p>종료 태그 &lt;/hr&gt;를 사용하지 않습니다.</p>
</body>
</html>

 

ex2-06.html

새로운 줄 넘어가기

새로운 줄 넘어가기

<br> 태그로 다음 줄로 넘어갑니다.
2 개의 <br> 태그로 두 번 넘어 갑니다.

잘 보이나요?

 

ex2-09.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트 꾸미기</title></head>
<body>
<h3>텍스트 꾸미기</h3>
<hr>
<p>
	<b>진하게</b><br>
	<strong>중요한</strong><br>
	<em>강조</em><br>
	<i>이탤릭으로 강조</i><br>
	<b><i>진하게 이탤릭으로 강조</i></b><br>
	보통 문자 <small>한 단계 작은 문자</small><br>
	<del>삭제</del><br>
	<ins>추가</ins><br>
	보통문자의 <sup>윗첨자</sup><br>
	보통문자의 <sub>아래첨자</sub><br>
	<mark>하이라이팅</mark><br>
</p>
</body>
</html>

 

ex2-10.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>&lt;div&gt;블록과  &lt;span&gt;인라인</title></head>
<body>
<h3>사랑</h3>
<hr>
<div style="background-color:skyblue; padding:20px;">
내가 사람의 방언과 천사의 말을 할지라도
<!-- span 인라인 tag 사랑 글자 색깔 바꾸기 위해 span 사용 -->
<span style="color:red">사랑</span>이 없으면 소리 나는 구리와 울리는 꽹과리가 되고,
<span style="color:red">사랑</span>이 없으면 아무 것도 아니라.
</div>
<p>
~우리 서로 사랑하며 살아요~
</p>
</body>
</html>

 

ex2-11.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>이미지 삽입</title>
</head>
<body>
<h3>이미지 삽입</h3>
<hr>
<p> 엘비스 프레슬리의 사진입니다.</p>
<img src="media/Elvis1.jpg" width="150" height="200"
	 	 alt="Elvis">
<img src="media/kitae.jpg" width="80" height="100"
		 alt="황기태사진없음" >
<img src="https://t1.kakaocdn.net/kakaocorp/kakaocorp/admin/service/453a624d017900001.png"
		 alt="사진 주소 변경됨" width="100" height="100">
</body>
</html>

 

ex2-12.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>라면을 끓이는 순서</title></head>
<body>
<h3>라면을 끓이는 순서</h3>
<hr>
<ol type="I" >
	<li>물을 끓인다.</li>
	<li>라면과 스프를 넣는다.</li>
	<li>파를 썰어 넣는다.</li>
	<li>5분 후 먹는다.</li>
</ol>
</body>
</html>

ex2-13.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내가 좋아하는 음식</title></head>
<body>
<h3>내가 좋아하는 음식</h3>
<hr>
<ul>
  <!-- 순서가 없음 ul -->
	<li>감자탕
	<li>스파게티
	<li>올레국수
</ul>
</body>
</html>

ex2-14.html

중첩 리스트 만들기

내가 사는 이유

  • 내가 좋아하는 음식 많아요
    • 감자탕
    • 스파게티
    • 올레국수
  • 라면 먹기 좋아해요
    1. 물을 끓인다.
    2. 라면과 스프를 넣는다.
    3. 파를 썰어 넣는다.
    4. 한 입에 다 먹는다.
  • 여름에는 바다로
  • 가을에는 산으로

 

ex2-16.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 구조를 가진 표 만들기</title></head>
<body>
<h3>기본 구조를 가진 표</h3>
<hr>
<table border="1">
	<caption>1학기 성적</caption>
	<thead>
		<tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
	</thead>
	<tfoot>
		<tr><th>합</th><th>225</th><th>230</th></tr>
	</tfoot>
	<tbody>
		<tr><td>황기태</td><td>80</td><td>70</td></tr>
		<tr><td>이재문</td><td>95</td><td>99</td></tr>
		<tr><td>이병은</td><td>40</td><td>61</td></tr>
	</tbody>
</table>
</body>
</html>

 

ex2-17.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표에 이미지 삽입</title>
</head>
<body>
<h3>표에 이미지 삽입</h3>
<hr>
<table>
	<caption>좋아하는 과일</caption>
	<tbody>
		<tr>
			<td><img src="media/apple.png"></td>
			<td><img src="media/banana.png"></td>
			<td><img src="media/mango.png"></td>
		</tr>
	</tbody>
</table>
</body>
</html>

ex2-18.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>링크 만들기</title>
</head>
<body>
<h3>링크 만들기</h3>
<hr>
포털 사이트
<ul>
	<li><a href="http://www.naver.com">네이버</a></li>
	<li><a href="http://www.daum.net">다음</a></li>
</ul>
신문 사이트
<ul>
	<li><a href="http://www.etnews.com">
		<img src="media/iconetnews.png" alt="전자신문">
		</a>
	</li>
	<li><a href="http://www.chosun.com">
		<img src="media/iconchosun.png" alt="조선일보">
		</a>
	</li>
</ul>
<hr>
<a href="ex2-17.html">예제 2-17로 이동</a>
</body>
</html>

ex2-20.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>링크와 앵커</title></head>
<body>
<h3>Elvis Presley</h3>
<hr>
<ul>
	<li><a href="#love">Love me tender</a>
    <!-- 해당 id로 옮겨준다.  -->
	<li><a href="#can">Can't help falling in love</a>
	<li><a href="#it">It's now or never</a>
</ul>
<h3 id="love">Love me tender</h3>
Love me tender, Love me sweet, Never let me go.<br>
You have made my life complete, <br>
And I love you so.<br>
Love me tender, Love me true, <br>
All my dreams fulfilled.<br>
For my darling I love you, And I always will.<br>
<h3 id="can">Can't help falling in love</h3>
Love me tender, Love me sweet, Never let me go.<br>
You have made my life complete, And I love you so.<br>
Love me tender, Love me true, All my dreams fulfilled.<br>
For my darling I love you, And I always will.<br>
<h3 id="it">It''s now or never</h3>
It's now or never, Come hold me tight<br>
Kiss me my darling, Be mine tonight<br>
Tomorrow will be too late,<br>
It's now or never. My love won't wait.<br>
 </body>
</html>

ex2-21.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파일 다운로드</title></head>
<body>
<h3>친구들아! 여기서 다운받아!</h3>
<hr>
<ul>
  <!-- 클릭하는 순간 download~ -->
	<li><a href="media/Elvis.png" download>엘비스 이미지 다운로드</a>
	<li><a href="media/chapter9.pdf" download>chapter9.pdf 다운로드</a>
	<li><a href="media/EmbraceableYou.mp3" download>mp3 다운로드</a>
	<li><a href="ex2-09.html" download>예제 2-9 HTML 파일 다운로드</a>
	<li><a href="media/test.hwp" download>한글 파일 다운로드</a>
</ul>
</body>
</html>

ex2-25.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>비디오 삽입</title>
</head>
<body>
<h3>비디오 삽입</h3>
<hr>
<video src="media/bear.mp4" width="320" height="240"
	   controls>
	브라우저가 video 태그를 지원하지 않습니다.
</video>
</body>
</html>

'IT > HTML' 카테고리의 다른 글

[33일차] 5장 CSS3 고급 활용  (0) 2022.08.04
[33일차] HTML  (0) 2022.08.04
[32일차] 4장 CSS3로 웹 페이지 꾸미기  (0) 2022.08.03
[32일차] 3강 HTML5 문서 구조화와 웹 폼  (0) 2022.08.03
[32일차] HTML  (0) 2022.08.03

관련글

댓글

티스토리툴바