a 태그를 이용해 간단한 웹사이트 만들기

이번 포스트에서는 지금까지 공부한 것들을 토대로 아래의 생활코딩 강의 영상을 보면서 간단한 웹사이트를 만들어보겠습니다.

지난 포스트

DOCTYPE html 선언

모든 HTML 문서는 DOCTYPE 선언으로 시작해야 합니다 . 선언은 HTML 태그가 아닙니다. 예상되는 문서 유형에 대한 브라우저의 '정보'입니다.

웹사이트 만들기

index.html

index.html 파일은, 해당 웹사이트로 접속했을 때 처음으로 보일 페이지의 파일입니다.
아래의 내용으로 index.html 파일을 만들어서 실습 폴더에 저장해둡니다.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML - 수업소개</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1><a href="index.html">HTML</a></h1>
        <ol>
            <li><a href="1.html">기술소개</a></li>
            <li><a href="2.html">기본문법</a></li>
            <li><a href="3.html">하이퍼텍스트와 속성</a></li>
            <li><a href="4.html">리스트와 태그의 중첩</a></li>
        </ol>

        <h2>선행학습</h2>

        본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
</body>
</html>

1~4.html

그리고 index.html 파일이 있는 실습 폴더에 다음 코드들도 각각 1.html 부터 4.html 이라는 이름으로 저장해줍니다. 그러고 나서 index.html 파일을 열어서 들어가면, 위의 강의 영상과 같은 간단한 웹사이트가 완성된 모습을 보실 수 있습니다.

1.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML - 수업소개</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1><a href="index.html">HTML</a></h1>
        <ol>
            <li><a href="1.html">기술소개</a></li>
            <li><a href="2.html">기본문법</a></li>
            <li><a href="3.html">하이퍼텍스트와 속성</a></li>
            <li><a href="4.html">리스트와 태그의 중첩</a></li>
        </ol>

        <h2>기술소개</h2>

        HTML은 HyperText Markup Language의 약자로서 웹페이지를 만드는 언어입니다.
</body>
</html>

2.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML - 수업소개</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1><a href="index.html">HTML</a></h1>
        <ol>
            <li><a href="1.html">기술소개</a></li>
            <li><a href="2.html">기본문법</a></li>
            <li><a href="3.html">하이퍼텍스트와 속성</a></li>
            <li><a href="4.html">리스트와 태그의 중첩</a></li>
        </ol>

        <h2>기본문법</h2>

        태그를 사용합니다.
</body>
</html>

3.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML - 수업소개</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1><a href="index.html">HTML</a></h1>
        <ol>
            <li><a href="1.html">기술소개</a></li>
            <li><a href="2.html">기본문법</a></li>
            <li><a href="3.html">하이퍼텍스트와 속성</a></li>
            <li><a href="4.html">리스트와 태그의 중첩</a></li>
        </ol>

        <h2>하이퍼텍스트와 속성</h2>

        a 태그를 사용합니다.
</body>
</html>

4.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML - 수업소개</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1><a href="index.html">HTML</a></h1>
        <ol>
            <li><a href="1.html">기술소개</a></li>
            <li><a href="2.html">기본문법</a></li>
            <li><a href="3.html">하이퍼텍스트와 속성</a></li>
            <li><a href="4.html">리스트와 태그의 중첩</a></li>
        </ol>

        <h2>리스트와 태그의 중첩</h2>

        리스트는 li를 쓰고, ul이나 ol로 감싸서 사용합니다.
</body>
</html>

위의 5개의 html 파일들을 한 폴더에 모아 두고 index.html 파일을 실행하면 이렇게 웹사이트의 첫 화면이 나옵니다.
링크들을 클릭해보고 페이지 간의 이동에도 문제가 없는지 테스트해봅시다.

다음 포스트

메모장에서 코드 에디터로 업그레이드를 해보자.

이번에는 코딩을 더욱 편리한 환경에서 할 수 있도록 도와주는 코드 에디터라는 것에 대해서 알아보겠습니다. HTML을 공부하면서 어떤 사람에게는 필수이고, 어떤 사람에게는 선택사항인 녀석인데.. 한번 보고 판단해보시길 바랍니다.

a 태그를 이용해 간단한 웹사이트 만들기

DOCTYPE html 선언

웹사이트 만들기

index.html

1~4.html

메모장에서 코드 에디터로 업그레이드를 해보자.

Post a Comment

댓글 쓰기

문의하기 양식