HTML 실습

목표

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

 

 

 

 

선행학습

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

  1. 기술소개
  2. 기본문법
  3. 하이퍼텍스트와 속성
  4. 태그의 중첩과 목록
  5. 문서의 구조

 

 

 

 

레이아웃

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

 

 

HTML화

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

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

 

 

 

 

제목

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

<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

 

 

잘 하셨습니다!

 

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

 

 

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

 

 

댓글

댓글 본문
  1. 다음 강의가 기대됩니다. 잘 보고 갑니다.
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기