HTML 작성, 업로드 및 브라우저로 확인하기

By | 2013년 12월 20일
0 Comment

[목적]
간단한 홈페이지(HTML)를 작성한 후 웹서버에 올리고 브라우저를 통해 확인하는 방법을 배운다.

[실습]
1. EditPlus를 사용하여 아래 내용을 입력한다.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>My 1st HTML</title>
    </head>
    <body>
        Hello, World!
    </body>
</html>

2. 이제 작성된 내용을 웹서버(설명에서는 서버이름을 ‘webdb.ansan.ac.kr’로 가정하였음)에 원격저장을 위해 몇가지 서버계정 정보를 설정해야한다. 이를 위해 EditPlus의 ‘파일’ 메뉴에서 ‘FTP’의 ‘FTP설정’ 항목을 선택한다.

01-01

3. 웹서버로의 접속을 위한 계정 등록을 위해 ‘추가’ 버튼을 클릭한다.

01-02

4. 자신에게 부여된 서버계정정보(아래는 실습상황을 가정하여 입력한 예시임)를 입력하고 ‘고급 옵션’을 클릭한다. 이 때 개인 PC를 제외하고는 ‘Password’ 항목을 입력하지 않는다.

01-03

5. 자신의 웹서버가 제공하는 옵션(실습상황에서는 반드시 ‘sftp 사용’과 ‘UTF-8 파일명 사용’ 및  ‘keyboard-interactive 인증시도’ 옵션을 선택)을 선택한 후 ‘확인’ 버튼을 클릭한다.

01-04

6. ‘FTP 설정’화면으로 돌아오면 자신에게 부여된 서버접속계정을 다시한번 확인한 후 이상이 없으면 ‘확인’ 버튼을 클릭한다. 이로써 EditPlus가 웹 서버로 작성된 파일을 직접 저장할 수 있도록 설정이 완료 되었다.

01-05

7. 작성한 파일을 서버에 저장하기 위해 EditPlus의 ‘파일’ 메뉴에서 ‘FTP’의 ‘원격 저장’ 항목을 선택한다.

01-06

8. ‘원격 저장’ 창이 뜨면  서버의 자신의 홈디렉토리 내용을 확인을 위해 ‘표시’ 버튼을 클릭한다.

01-07

9. 비밀번호를 물으면 자신의 비밀번호를 입력한 후 ‘확인’ 버튼을 클릭한다. 창에서 ‘이 세션에서 패스워드 기억’ 항목을 체크하면 EditPlus를 종료하기 전까지는 서버 접속을 위한 비밀번호를 기억하여 더이상 묻지 않는다.

01-08

10. 아래와 같은 창이 뜨면 ‘예’를 클릭한다. 아래 창은 SFTP 접속 시 암호키 저장과 관련된 것으로 ‘예’를 클릭하면 최초 한번만 나타나고 더이상 나타나지 않는다. 만약 인증에 실패한다면 4번 또는 5번으로 되돌아가 선택항목을 재 설정한 후 다시 시도해본다.

01-09

11. 서버의 내용이 나타나면 웹디렉토리(실습환경에서는 ‘public_html’ 디렉토리)로 이동한다. 만약 실습환경에서 ‘public_html’ 디렉토리가 없으면 대소문자를 구분하여 ‘public_html’ 디렉토리를 생성한다. 실습환경에서 홈페이지와 관련된 모든 html 또는 php 파일들은 반드시 웹디렉토리(‘public_html’) 내에 저장되어야 한다.

01-10

12. ‘public_html’ 디렉토리 내에서 저장을 위한 디렉토리를 선택한다. 실습환경에서는 ‘homepage’ 디렉토리에 저장할  예정이므로 ‘homepage’ 디렉토리를 생성한 후 생성한 디렉토리로 이동한다.

01-11

13. 파일 이름을 ‘exam-01-01.html’으로 하여 저장한다. 화면에서 파일이 저장될 디렉토리는 ‘원격 디렉토리’로 확인할 수 있다.

01-12

14. 저장이 올바르게 됐으면 EditPlus의 타이틀바에 다음과 붉은 사각형과 같은 형태(계정@서버명:/디렉토리경로/파일명)로 저장정보가 표시된다. 타이틀바에 정보가 올바르게 표시됐다면 수정된 내용을 다시 저장할 경우 위 7-13의 과정없이 ‘파일’ 메뉴의 ‘저장’ 항목 클릭 또는 ‘Ctrl-S’만으로 서버에 원격저장할 수 있다.

01-13

15. 자신이 사용하는 브라우저를 실행하고 주소창에 ‘http://webdb.ansan.ac.kr/~i0058001/homepage/exam-01-01.html’를 입력하면 아래와 같은 화면을 볼 수 있다. 위 주소는 다음과 같은 의미를 갖는다.

– http:// : 프로토콜명으로 웹프로토콜을 의미
– webdb.ansan.ac.kr : 웹서버이름
– /~i0058001 : 사용자 홈디렉토리에 존재하는 웹디렉토리(‘public_html’)
– /homepage : 웹디렉토리(‘public_html’)에 존재하는 디렉토리(‘homepage’)
– /exam-01-01.html : html 파일명

01-14

Google Chrome으로 접속한 화면

01-15

FireFox로 접속한 화면

01-16

MSIE로 접속한 화면

[참고링크]
파일질라 다운로드 : http://sourceforge.net/projects/filezilla/
파일질라 다운로드 설명 : http://ysoh.tistory.com/entry/파일질라Filezilla-다운로드
에디트플러스 다운로드 : http://www.editplus.co.kr/download.html
크롬 다운로드 : https://www.google.com/intl/ko/chrome/browser/
파이어폭스 다운로드 : http://www.mozilla.org/ko/firefox/new/