본문 바로가기

Programming/Web Programming (2018)

[웹프로그래밍] 2. HTML5 기본 문서 만들기 (실습)

728x90
반응형
<!DOCTYPE html>
<html>
	<head>
		<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>

 

 

 

 

 

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

 

 

 

<!DOCTYPE html>
<html>
	<head>
		<title>이미지 삽입</title>
	</head>
	<body>
		<h3>이미지 삽입</h3>
		<hr>
		<p>엘비스 프레슬리의 사진입니다.</p>
		<img src="media/Elvis1.jpg" width="150" height="200"
		alt="Elvis">AC
		<img src="meida/kitae.jpg" wodth="80" height="100"
		alt="황기태사진없음">
		<img src="http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif"
		alt="사진 주소 변경됨" width="100" height="100">

	</body>
</html>

 

 

 

 

<!DOCTYPE html>
<html>
	<head>
		<title>중첩 리스트 만들기</title>
	</head>
	<body>
		<h3>내가 사는 이유</h3>
		<hr>
		<ul>
			<li>내가 좋아하는 음식 많아요
				<ul>
					<li>감자탕
					<li>스파게티
					<li>올레국수
				</ul>
			<li>라면 먹기 좋아해요
				<ol type="1">
					<li>물을 끓인다.
					<li>라면과 스프를 넣는다.
					<li> 파를 썰어 넣는다.
					<li>한 입에 다 먹는다.
				</ol>
			<li>여름에는 바다로
			<li>겨울에는 산으로
		</ul>

		
	</body>
</html>

 

 

 

<!DOCTYPE html>
<html>
	<head>
		<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>

 

 

 

 

<!DOCTYPE html>
<html>
	<head>
		<title>기본 테이블 만들기</title>
	</head>
	<body>
		<h3>기본 구조를 가진 표</h3>
		<hr>
		<table border="1">
			<tr>
				<td rowspan="3">A</td>
				<td colspan="2">B</td>
			</tr>
			<tr>
				<td rowspan="2">C</td>
				<td>D</td>
			</tr>
			<tr>
				<td>E</td>
			</tr>
			</tbody>
		</table>		
	</body>
</html>

 

 

 

<!DOCTYPE html>
<html>
	<head>
		<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>

 

728x90
반응형