HTML 실습

목표

지금부터 HTML을 이용해서 웹사이트를 만들겠습니다. 생활코딩의 홈페이지로 시작한 opentutorials.org의 초창기 모습을 만들어보겠습니다.

선행학습

이 수업에서는 HTML 자체를 학습하지는 않습니다. HTML은 생활코딩의 HTML 수업을 공부하시면 됩니다. 물론 모두 공부하실 필요는 전혀 없습니다. 아래 내용만 보시면 됩니다. 다 보는데 30분도 안 걸립니다.

레이아웃

우리가 만들 사이트는 이렇게 생겼습니다.

HTML화

그런데 위의 그림은 디자인이 되어 있는 상태입니다. 위의 정보를 HTML화하기 위해서는 우선 문서로 해체하는 작업을 해야 합니다. 그 전에 실습 파일을 만듭시다.

우선 web-app-server.html 라는 이름의 파일을 만들어주세요.
웹브라우저의 파일 열기를 이용해서 이 파일을 열어주세요.

제목

위의 내용을 문서의 관점으로 본다면 큰 제목입니다. 아래와 같은 코드로 만들면 되겠네요.

<header>
    <h1>Web Tutorial</h1>
</header>

h1은 제일 큰 제목 태그입니다. header는 페이지 전체를 대표하는 내용을 표시해주는 의미론적 태그입니다.

네비게이션

위의 내용을 코드로 표현해봅시다.

<nav>
    <ol>
        <li>
            <a href="html.html">html</a>
        </li>
        <li>
            <a href="web-app-server.html">Web App Server</a>
        </li>
        <li>
            <a href="database.html">Database</a>
        </li>
    </ol>
</nav>

nav는 페이지에서 네비게이션이 무엇인지를 표시하는 의미론적인 태그입니다. ol은 순서가 있는 리스트를 그룹핑할 때 사용합니다. 예제로 만들고 있는 웹페이지는 순서가 있기 때문에 ol을 사용했습니다. li는 리스트에서 항목을 의미합니다. a 태그는 링크를 표현할 때 사용되는 태그입니다.

본문

위의 내용을 코드로 표현해 봅시다.

<article>
    <h2>Web Application Server</h2>
    An application server is a software framework that provides both facilities to create web applications and a server environment to run them.
</article>

article은 페이지에서 본문이 무엇인지를 표시하는 의미론적인 태그입니다.

전체코드

전체코드는 아래와 같습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Web Tutorial</title>
    </head>
    <body>
        <header>
            <h1><a href="index.html">Web Tutorial</a></h1>
        </header>
        <nav>
            <ol>
                <li>
                    <a href="html.html">html</a>
                </li>
                <li>
                    <a href="web-app-server.html">Web App Server</a>
                </li>
                <li>
                    <a href="database.html">Database</a>
                </li>
            </ol>
        </nav>
        <article>
            <h2>Web Application Server</h2>
            An application server is a software framework that provides both facilities to create web applications and a server environment to run them.
        </article>
    </body>
</html>

사이트 만들기

위의 내용을 바탕으로 완성된 사이트를 만들어봅시다.

예제

https://egoing.github.io/web-application-server-tutorial/index.html

소스코드 다운로드

https://github.com/egoing/web-application-server-tutorial/releases/tag/html-chapter

잘 하셨습니다!

어떤 일이건 처음에 배우는 것이 가장 중요합니다. 뒤에서 배우는 것은 특정한 상황에서 매우 편리한 기능들입니다. 우리는 잘 동작하는 완전한 웹사이트를 만들었습니다. 모르는 것에 대해서 아쉬워하지 마시고, 이미 알게 된 것에 대해서 만족하셨으면 좋겠습니다. 여러분이 직접 만든 완벽한 웹사이트에 대해서 충분히 감상하시고 다음 수업으로 넘어가주세요.

내려갈 때 보았네 올라갈 때 보지 못한 그 꽃
- 고은 시인-