본문 바로가기
홈페이지 만들기/기본편

간단한 홈페이지 만들기 - 03.간단한 웹 페이지 만들기

L&J 2017. 2. 11. 23:14

안녕하세요.

이전 포스팅(간단한 홈페이지 만들기 - 02.FTP 서버 접속하기)에서는 FTP 프로그램을 이용하여 웹 서버에 접속하는 방법에 대해 다뤄보았습니다.


이번 포스팅에서는 간단한 웹 페이지를 만들어 보도록 하겠습니다.

  1. 간단한 HTML 코드를 작성 한 후
  2. 해당 HTML 파일을 FTP를 이용하여 웹 서버에 업로드 하고
  3. 실제로 웹 페이지가 출력이 되는 과정에 대해 다루겠습니다.

1. 간단한 HTML 코드 작성

C언어나 Java 등의 비쥬얼 스튜디오, 이클립스와 같이 HTML 또한 코딩을 편하게 할 수 있는 다양한 에디터가 존재합니다. 물론 유료, 무료 다양하게 존재합니다. 해당 포스팅에서는 윈도우에 기본 메모장으로 코드를 작성하도록 하겠습니다. (다른 에디터에 대한 설명은 다음 포스팅에서 다루도록 하겠습니다.)


우선 메모장을 연 후, 아래 코드와 같이 작성해주세요. 


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>Hello First Web Page</title>

</head>

<body>

<div>

<h1>Hello! This is my first web page</h1>

</div>

</body>

</html>


해당 코드를 작성한 후, 아래 그림과 같이 파일명은 index.html, 인코딩은 UTF-8을 선택하여 메모장 파일을 저장하면 됩니다. 



코드에 대한 설명은 추후 포스팅에서 상세하게 다루도록 하겠습니다. 

  1. index.html

    1. 이전 포스팅에서 웹 호스팅 서버에는 홈 디렉토리가 존재하고 해당 디렉토리에 올라가 있는 html 파일이 출력된다고 하였습니다. 기본 적으로 웹 서버에 접속(도메인 주소)하면 웹 서버에서는 기본적으로 홈 디렉토리에 index.html 코드를 출력해줍니다. 즉 사용자가 특정 홈페이지의 도메인 주소를 입력하면 가장 처음으로 뜨는 페이지가 있는데, 해당 페이지가 index.html 파일입니다. 다른 html 파일의 접근하기 위해서는 '도메인 주소/해당파일명'과 같이 접속해야 합니다.

  2. UTF-8

    1. 홈페이지 언어 코드 체계를 선택하는데 최근에는 utf-8을 가장 많이 사용하는 추세라고 알고있습니다.


2. 웹 서버에 HTML 파일 업로드
이제 앞서 저장한 index.html 파일을 웹 서버에 업로드 할 차례입니다. 이전 포스팅에서 설명한 것과 같이 본인의 웹 서버에 접속해주세요. (본 포스팅은 파일질라, 닷홈 웹 서버를 기준으로 작성하도록 하겠습니다.) 
우선 아래 그림과 같이 로컬(왼쪽) 디렉토리에서 index.html 파일이 저장되어 있는 곳으로 이동을 하고, 리모트(오른쪽) 디렉토리는 홈디렉토리(html)로 이동한 후, index.html 파일을 업로드 해줍니다.



업로드 방법

  1. 업로드 하고자 하는 파일 더블 클릭 (예: index.html 더블 클릭)

  2. 업로드 하고자 하는 파일을 업로드 하고자 하는 목적지로 드래그 (예: index.html 파일을 마우스로 드래그 하여 오른쪽 리모트 위치로 이동)

  3. 업로드 하고자 하는 파일 마우스 우클릭 후 "업로드(U)" 클릭


업로드가 제대로 되었다면 아래 그림과 같이, 리모트 사이트쪽에 index.html이 이동되어 있습니다.



3. 웹 페이지 접속
이제 웹 서버에 index.html 파일을 인터넷 브라우저에 출력이 정상적으로 확인해볼 차례 입니다.
본인의 웹 서버 주소를 인터넷 브라우저 주소창에 입력해주세요. (닷홈 호스팅의 경우 '본인의 FTP ID.dothome.co.kr' 입력)
앞의 모든 단계를 정상적으로 완료 하셨다면 아래 그림과 같은 화면이 출력될겁니다. 



실제로 브라우저 탭에 출력되고 있는 문구는 HTML 코드에 <title> 태그에 작성되어 있는 내용이 출력되고, 브라우저 내용에 출력되고 있는 문구는 HTML 코드에 <h1> 태그에 작성되어 있는 내용이 출력되고 있습니다.


이것으로 본인의 첫 번째(가 아닐 수도 있겠지만..) 웹 페이지의 모습을 볼 수 있습니다.

이제부터는 HTML 코드를 적절히 작성하여 업로드만 한다면 웹 페이지를 만들 수 있습니다. (사실 조금 더 복잡하지만, 간단한 내용들은 최대한 포스팅에 담도록 하겠습니다.)


해당 카테고리에서는 HTML 태그에 대한 내용을 전혀 다루지 않으려고 하였으나 매우 기초적인 내용은 설명해야 될 것 같습니다. 다음 포스팅에서는 HTML 태그에 기본적인 내용을 다루고, 부가적으로 HTML 코딩 툴에 대해서도 다루도록 하겠습니다. 하지만 홈페이지 제작의 관심이 있는 분들은 반드시 HTML 태그는 기본적으로 따로 공부를 하셔야 합니다.


(저는 홈페이지 만들기를 아르바이트로 했을 뿐, 전문적으로 공부해 본 적이 없기에 일부 용어나 기술 설명이 틀릴 수 있습니다. 혹 이런 부분이 발견된다면 가차 없이 댓글로 남겨주시면 감사하겠습니다.)

'홈페이지 만들기 > 기본편' 카테고리의 다른 글

간단한 홈페이지 만들기 - 05.그누보드5 설명 및 설치하기  (3) 2017.02.26
간단한 홈페이지 만들기 - 04.기초 HTML 태그 레이아웃 설명  (1) 2017.02.12
간단한 홈페이지 만들기 - 02.FTP 서버 접속하기  (2) 2017.02.11
간단한 홈페이지 만들기 - 01.웹(서버) 호스팅  (1) 2017.02.11
간단한 홈페이지 만들기 - 00.소개  (1) 2017.02.11

'홈페이지 만들기/기본편' Related Articles

티스토리툴바