[10대 코딩 입문] 02 첫번째 웹 페이지 만들기
이 강좌는 코딩을 처음 접하는 초등학생, 중학생, 컴퓨터 왕초보을 대상으로 하는 강좌입니다.
이번 내용을 통해 아주 간단한 웹 페이지를 만들 수 있습니다.
|
학습 내용 |
◆ 첫번째 웹 페이지 만들기
소스 코드를 HTML 파일로 저장해 보기
◆ [컴퓨터 기초] 메모장 실행하기
◆ [컴퓨터 기초] [메모장] 파일 저장하기
◆ [컴퓨터 기초] 폴더 만들기
|
1.1 첫번째 웹 페이지 만들기 |
처음부터 멋진 페이지를 만들 수 없습니다.
하지만, 이번 시간에는 간단한 코딩을 통해 아주 간단한 웹 페이지를 만들어보도록 하겠습니다.
자 우리는 이런 순서에 따라 진행할 계획입니다.
01 메모장을 실행한다.
02 메모장에 아래의 소스 코드를 입력하고 파일 형태로 저장합니다.
|
소스코드 |
|
|
<!DOCTYPE html> <html> <head> </head> <body> <p>나의 첫 홈페이지</p> </body> </html> |
|
03 파일이 저장된 폴더로 이동하여 대상 html 파일을 실행시킵니다.
좀 더 자세히 내용은 그림을 통해 살펴보겠습니다.
(가) 메모장을 실행합니다.
(그림 1. 메모장 실행 화면)
(나) 메모장에 아래와 같이 내용(소스코드)를 입력합니다.
(그림 2. 소스 코드 입력)
(다) 입력한 내용을 내 컴퓨터에 파일로 저장합니다.
(그림 3. 파일 저장 화면)
(라) 폴더 만들기
(그림 4. 폴더 생성 화면)
(마) 파일 저장할 위치로 이동
(그림 5. 원하는 위치로 이동하기)
(바) html 파일 형식으로 저장하기
(그림 6. html 파일 형식으로 저장하기)
‘1.html’ 파일을 입력합니다. 그리고 저장을 선택합니다.
|
알아두기 |
|
|
[원하는 파일명].html (예제) 1.html 02.html 내웹.html |
|
html 파일 형식은 ‘.html’으로 저장해야 컴퓨터는 html 파일로 이해합니다.
(사) 저장된 파일 확인
(그림 7. 파일 확인)
저장된 소스코드(파일) 확인 방법은 2가지 방법이 있습니다.
(1) ‘시작’ 마우스 우클릭 – 파일 탐색기 선택
(2) 탐색기 작은 그림(아이콘)을 선택
(아) 실행하기
(그림 8. 저장된 파일로 이동)
(자) 저장된 html 파일 확인
(그림 9. 파일 확인)
html 파일은 마우스 선택으로 바로 실행이 가능합니다.
(차) 1.html 파일 실행
위와 같이 인터넷 익스플로러(구글 크롬등)에서 파일 이름, 파일이 있는 위치,
HTML 파일 입력 내용 확인이 가능합니다.
자 모두 수고하셨습니다. Have a good Job! 잘 했습니다.
앞으로도 화이팅입니다~
(미션-더해보기) 자 이제 처음부터 시작해서 02.html 파일을 만들어볼까요?
하나님이 세상을 이처럼 사랑하사 독생자를 주셨으니 이는 그를 믿는 자마다 멸망하지 않고 영생을 얻게 하려 하심이라(요3:16)
'10대 코딩 입문 > 웹 페이지 만들기' 카테고리의 다른 글
| [10대 코딩 입문] 01 네이버 접속하기 (0) | 2017.01.04 |
|---|
