[실습 자료 열람 홈페이지 제작]
1. 호스팅 서버 준비
HTML로 만든 웹사이트를 다른 사람들이 볼 수 있도록 닷홈 무료 호스팅 서비스를 신청한다.
2. FTP 프로그램 설치
사용자 컴퓨터에서 작성한 웹 문서와 각종 파일을 서버로 업로드하거나 서버에서 다운로드 할 수 있도록 해주는 FileZilla라는 FTP 프로그램을 설치한다.
- 홈페이지 화면
- 소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>변규진의 홈페이지</title>
<style>
body { background-color: linen; color: green; margin-left: 40px; margin-right: 40px; }
/* body 태그의 배경 색을 linen, 색을 green, */
h3 {text-align: center; color: darkred;}
/* h3 태그를 가운데 정렬하고 색을 darkred로 설정*/
hr { height: 5px; border: solid grey; background-color: grey }
/* 수평 줄의 높이를 5px, border를 solid grey, 배경 색을 grey로 설정*/
span { color: blue; font-size: 20px; }
/* span 태그의 색을 blue, 글자 크기를 20px로 설정*/
a { color: black; } /* a 태그의 링크 글자 색을 black으로 설정*/
a:visited { color: black; } /* a 태그의 방문한 링크 글자 색을 black으로 설정*/
</style>
</head>
<body>
<h3>변규진의 홈페이지</h3>
<hr> <!-- 수평 줄 생성-->
<br> <!-- 줄 바꿈-->
<!-- 순서가 없는 리스트 생성-->
<!-- a 태그를 이용하여 과제 HTML 문서 링크와 연결-->
<!-- target="_blank"로 링크 클릭 시 새 탭에 사이트 출력-->
<li><a href="과제1-1.html" target="_blank">과제1-1</a></li>
<li><a href="과제1-2.html" target="_blank">과제1-2</a></li>
<li><a href="과제1-3.html" target="_blank">과제1-3</a></li>
</body>
</html>
[실습 1-1]
- 홈페이지 화면
- 소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제1-1</title>
</head>
<style>
table { /* 표 크기, 테두리, 가운데 정렬, 표 그림자 설정 */
width : 400px;
height : 100px;
border : 1px solid black;
text-align: center;
box-shadow: 2px 2px;
}
caption{ /* 표 제목 글자 크기 설정 */
font-size: 25px;
}
tr { /* tr 태그의 글자 크기와 굵기 설정 */
font-size: 25px;
font-weight: bold;
}
</style>
<body>
<h1>과일 수입</h1>
<hr>
<table border="1"> <!-- 1px 표 테두리 설정 -->
<caption>과일 수입 표</caption> <!-- 표 제목 설정 -->
<thead> <!-- 헤딩 셀 그룹 설정 -->
<tr> <!-- 행 생성 -->
<th>사과</th> <!-- 헤딩 셀 생성 -->
<th>바나나</th>
<th>망고</th>
</tr>
</thead>
<tfoot> <!-- 바닥 셀 그룹 설정 -->
<tr> <!-- 행 생성 -->
<th>페루</th> <!-- 헤딩 셀 생성 -->
<th>필리핀</th>
<th>호주</th>
</tr>
</tfoot>
<tbody> <!-- 데이터 셀 그룹 설정 -->
<tr> <!-- 행 생성 -->
<!-- 데이터 셀 생성 -->
<!-- input 태그를 사용해 이미지 삽입, 대체 텍스트 설정, 이미지 크기 설정 -->
<td><input type="image" src="사과.jfif" alt="사과" width="200px"></td>
<td><input type="image" src="바나나.jfif" alt="바나나" width="200px"></td>
<td><input type="image" src="망고.jpg" alt="망고" width="200px"></td>
</tr>
</tbody>
</table>
</body>
</html>
[실습 1-2]
- 홈페이지 화면
- 소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제1-2</title>
</head>
<style>
table { /* 표의 border와 표의 그림자 설정 */
border : 1px solid black;
box-shadow: 2px 2px;
}
caption { /* 표 제목 글자 크기 설정과 글자 가운데 정렬 */
font-size: 20px;
text-align: center;
}
tr { /* tr 태그의 글자 크기 설정 */
font-size: 20px;
}
thead, tfoot { /* thead와 tfoot 태그의 글자 가운데 정렬 및 굵게 만들기 */
text-align: center;
font-weight: bold;
}
</style>
<body>
<h2>신체 검사</h2>
<hr>
<table border="1"> <!-- 1px 표 테두리 설정 -->
<caption>학생 신체 검사 표</caption> <!-- 표 제목 설정 -->
<thead> <!-- 헤딩 셀 그룹 설정 -->
<tr> <!-- 행 생성 -->
<th>이름</th> <!-- 헤딩 셀 생성 -->
<th>키</th>
<th>체중</th>
<th>시력</th>
</tr>
</thead>
<tfoot> <!-- 바닥 셀 그룹 설정 -->
<tr> <!-- 행 생성 -->
<th>평균</th> <!-- 헤딩 셀 생성 -->
<th>181</th>
<th>77</th>
<th>1.3</th>
</tr>
</tfoot>
<tbody> <!-- 데이터 셀 그룹 설정 -->
<tr> <!-- 행 생성 -->
<td>황기태</td> <!-- 데이터 셀 생성 -->
<td>179</td>
<td>67</td>
<td>1.0</td>
</tr>
<tr>
<td>이재문</td>
<td>177</td>
<td>77</td>
<td>2.0</td>
</tr>
<tr>
<td>정인환</td>
<td>189</td>
<td>87</td>
<td>1.2</td>
</tr>
</tbody>
</table>
</body>
</html>
[실습 1-3]
- 홈페이지 화면
- 소스 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>과제1-3</title>
</head>
<style>
a:visited { color: blue; } /* 클릭하여 방문한 링크는 blue 색으로 설정 */
li {
font-size: 20px; /* li 태그의 글자 크기를 20px로 설정 */
}
</style>
<body>
<h1>웹 프로그래밍 참조 사이트</h1>
<hr> <!-- 수평 줄 생성 -->
<ul> <!-- 중첩 리스트 생성 -->
<li><a href="https://html5.validator.nu/" target="_blank">HTML 태그 검사 사이트</a></li> <!-- 순서가 없는 리스트 생성 -->
<li><a href="http://www.css-validator.org/#validate_by_input" target="_blank">CSS3 스타일 시트 검사 사이트</a></li> <!-- a 태그를 이용하여 과제 HTML 문서 링크와 연결 -->
<li><a href="https://html.spec.whatwg.org/multipage/" target="_blank">HTML5 표준</a></li> <!-- target="_blank"로 링크 클릭시 새 탭에 사이트 출력 -->
</ul>
</body>
</html>'Web Programming > Front-End 실습' 카테고리의 다른 글
| 06 6주차 실습 (1~8) (0) | 2023.05.01 |
|---|---|
| 05 5주차 실습 (1~7) (1) | 2023.04.22 |
| 04 4주차 실습 (0) | 2023.04.22 |
| 03 3주차 실습 (실습 1~11) (1) | 2023.04.22 |
| 02 2주차 실습 (실습 1~7) (0) | 2023.04.22 |
댓글