웹페이지 만들기

준비

이제 HTML을 이용해서 실제 웹페이지를 만들어봅시다.

두개의 준비물이 필요합니다.

윈도우는 메모장, 맥은 TextEdit를 실행합니다. 메모장은 특별히 할 일이 없지만 TextEdit는 아래와 같은 절차를 따라주세요.

새문서 만들기(New Document)를 클릭합니다.

메뉴 > 포멧 > 일반 텍스트 만들기(Make Plain Text)을 실행해주세요.

그럼 아래와 같이 문서의 포멧을 지정하는 기능이 사라집니다. 이 절차를 하지 않으면 원하는 결과가 나오지 않습니다. (코드에 불순물이 들어간다는 정도로 이해해주세요)

드디어 코딩을 시작해봅시다! 아래는 여러분이 만든 기획서입니다.

편집기에 아래처럼 내용을 입력해주세요. (추가된 내용 github에서 보기)

WEB
1.html
2.css
3.JavaScript
html
HTML is Hypertext Markup Language.

바탕화면(맥은 데스크톱)에 web 라는 이름의 디렉토리를 만들고, 그 안에 위 내용을 담고 있는 1.html을 만들겠습니다. (웹페이지는 확장자명을 html로 하기로 약속되어 있습니다.) 저장 방법은 아래와 같습니다.

메모장을 이용하는 경우에는 파일의 형식(Save as type)을 모든 파일로 꼭하셔야 합니다. 인코딩(Encoding)은 UTF-8로 해주세요. (인코딩의 의미는 지금은 몰라도 됩니다)

아래처럼 저장하시면 됩니다.

이렇게해서 바탕화면/web/1.html 파일을 만들었습니다. 그럼 파일을 열어보겠습니다. 자신이 사용하는 웹브라우저에서 아래의 단축키를 입력해보세요.

그럼 웹브라우저에서 파일 열기 화면이 뜹니다. 파일을 선택해서 열어주세요.

혹시 파일 열기가 작동하지 않는다면 웹브라우저를 바꿔서 해보세요. 아래처럼 파일을 브라우져로 직접 열기 하셔도 됩니다.

아래와 같은 화면이 나온다면 성공입니다.

처음으로 웹페이지를 직접 만들어봤습니다. 지금까지 본 웹페이지에 비하면 아직은 많이 부족할 수 있습니다. 하지만, 신기하게도 사람은 자기가 만든 것은 '잠깐동안'은 멋있어 보입니다. 이 짧지만 즐거운 시간을 그냥 흘려보내지 말고, 잘 음미해보세요.

그런데 보고 있으면 아쉬운 점들이 보이기 시작합니다. 가만히 어떤 아쉬운 점이 있는지를 스스로 느껴보세요.

아쉬움이 충분히 커졌을 때, 아쉬움을 극복하게 해주는 지식은 우리를 행복하게 해줄 것입니다. 행복을 주는 지식을 만나러 갑시다.