실습1 - html 문서 만들기
1. 사용자 생성
[root@www ~]# useradd -g users server1user
[root@www ~]# passwd server1user
2. 패키지 설치
[root@www ~]# yum -y install httpd php mod_ssl
[root@www ~]# systemctl enable httpd
[root@www ~]# systemctl start httpd
[root@www ~]# ss -nltp or netstat -nltp
[root@www ~]# iptables -F
3. html 문서 작성
[root@www ~]# cd /var/www/html
[root@www html]# vi index.html
//
<html>
<head>
<meta charset="utf-8">
<title> 첫 번째 html 문서 </title>
</head>
<body>
첫 번째 HTML 문서
</body>
</html>
4. 웹 사이트 접속
http://192.168.108.3
실습2 - html 문서에서 줄바꿈 하기
<br> : html 문서에서 엔터 역할을 하는 태그
//
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> ::: 2.html ::: </title>
</head>
<body>
오늘은 HTML을 배우는 시간입니다. <br>
잘 배워서 웹 취약점을 점검하는데 <br>
도움이 되도록 노력하겠습니다.
</body>
</html>
실습3 - html 링크 태그
링크 태그
<a> : 링크 태그는 다른 문서나 다른 사이트로 이동하는데 사용한다.
사용형식 : <a href="값" target="창이름"> 브라우저에 출력할 문자열 </a>
href : 생략 X , 다른 문서, 사이트주소
target : 생략 O
실습4 - html 이미지 태그
이미지 태그
<img> : 이미지를 화면에 출력한다.
사용 형식 : <img src="이미지파일의위치" width="가로크기" height="세로크기" alt="도움말">
src : 생략 X
나머지 : 생략 O
# yum -y install wget
# mkdir images
# wget https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png -O images/daum.png
//
<!doctype html>
<!--
파일명 : 4.html
파일 내용 : <img> 태그 만들기
-->
<html>
<head>
<meta charset="utf-8">
<title> ::: 4.html ::: </title>
</head>
<body>
1. 외부 서버의 원본 이미지<br>
<img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음로고"><br>
2. 로컬 서버의 원본 이미지<br>
<img src="images/daum.png" alt="다음로고"><br>
3. 로컬 서버의 속성값으로 원본 이미지를 줄인 이미지<br>
<img src="images/daum.png" width="200" height="100" alt="다음로고"><br>
</body>
</html>
//
실습5 - html 테이블
<table> : 테이블을 화면에 보여준다.
| align : 정렬방식 기본값은 left left,center,right border : 선 굵기 기본값은 0 bgcolor : 배경색 (red 처럼 이름으로 지정, #ffffff 16진수 형태로 지정(RGB색상)) cellpadding : cell과 글자의 간격 기본값은 2 cellspacing : cell의 간격 기본값은 2 width : 표의 가로 크기 %, 픽셀 height : 표의 세로 크기 %, 픽셀 align : 가로 정렬방식 기본값은 left left,center,right valign : 세로 정렬방식 기본값은 center left,center,right align : 가로 정렬방식 기본값은 left left,center,right colspan : 가로 합치기 rowspan : 세로 합치기 |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> ::: 5.html ::: </title>
</head>
<body>
<table align="center" border="0" bgcolor="#000000" cellpadding="4" cellspacing="1" width="300">
<tr bgcolor="#ffffff">
<td> 데이터1 </td>
</tr>
</table>
<br>
<table align="center" border="0" bgcolor="#000000" cellpadding="4" cellspacing="1" width="300">
<tr bgcolor="#ffffff">
<td> 데이터1 </td> <td> 데이터2 </td>
</tr>
</table>
<br>
<table align="center" border="0" bgcolor="#000000" cellpadding="4" cellspacing="1" width="300">
<tr bgcolor="#ffffff">
<td> 데이터1 </td> <td> 데이터2 </td>
</tr>
<tr bgcolor="#ffffff">
<td> 데이터2 </td> <td> 데이터4 </td>
</tr>
</table>
<br>
<table align="center" border="0" bgcolor="#000000" cellpadding="4" cellspacing="1" width="300">
<tr bgcolor="#ffffff">
<td colspan="2"> 데이터1 </td>
</tr>
<tr bgcolor="#ffffff">
<td> 데이터3 </td> <td> 데이터4 </td>
</tr>
</table>
<br>
<table align="center" border="0" bgcolor="#000000" cellpadding="4" cellspacing="1" width="300">
<tr bgcolor="#ffffff">
<td rowspan="2"> 데이터1 </td> <td> 데이터2 </td>
</tr>
<tr bgcolor="#ffffff">
<td> 데이터4 </td>
</tr>
</table>
</body>
</html>
'Linux > Linux 실습' 카테고리의 다른 글
| [Linux] PHP 사용하기 (0) | 2021.11.11 |
|---|---|
| [Linux] HTML 웹 페이지 생성과 서버 데이터 전송 (0) | 2021.11.11 |
| [Linux] netcat 을 이용한 문자 & 데이터 전송 (0) | 2021.11.10 |
| [Linux] 보안 서버 자가 인증서 생성 후 적용하기 (0) | 2021.11.09 |
| [Linux] 조건에 맞는 이름 기반의 가상 호스트 생성 (0) | 2021.11.09 |