[HTML] HTML 기본 웹 페이지 만들기

안녕하세요.

 

오늘은 여태까지 배웠던 몇 개의? 기본 태그들을 이용하여 이제는 진짜 기본 웹 페이지를 만들어 보도록 하겠습니다!

 

웹 페이지라고 해서 막 엄청 거창한건 아니고 기본 페이지가 있고, 기본 페이지에서 표시되어 있는 텍스트를 클릭하면 그거에 맞는 페이지로 링크가 연결되어 페이지가 열리고 다시 원래 페이지로 왔다갔다 하는 아주 기본적인 웹 페이지를 만들어 보도록 하겠습니다.

 

참고로, 저는 모든 공부는 생활코딩을 통해서 했다는점! 참고해 주세요~~

 

 

default.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
    <head>
        <title>HTML 제목 - 범범조조</title>
        <meta charset="utf-8">
    </head>
 
    <body>
        <h1><a href=default.html>범범조조 블로그</a></h1>
            <ol>
                <li><a href=1.html>카테고리1</a></li>
                <li><a href=2.html>카테고리1</a></li>
                <li><a href=3.html>카테고리1</a></li>
                <li><a href=4.html>카테고리1</a></li>
                <li><a href=5.html>카테고리1</a></li>
            </ol>
 
        <h2>첫 페이지</h2>
 
        안녕하세요. 지금 보고 계시는 페이지는 메인 페이지 입니다.
        
    </body>
</html>
cs

 

1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
    <head>
        <title>HTML 제목 - 범범조조</title>
        <meta charset="utf-8">
    </head>
 
    <body>
        <h1><a href=default.html>범범조조 블로그</a></h1>
            <ol>
                <li><a href=1.html>카테고리1</a></li>
                <li><a href=2.html>카테고리2</a></li>
                <li><a href=3.html>카테고리3</a></li>
                <li><a href=4.html>카테고리4</a></li>
                <li><a href=5.html>카테고리5</a></li>
            </ol>
 
        <h2>카테고리1</h2>
 
        안녕하세요. 지금 보고 계시는 페이지는 카테고리1 입니다.
        
    </body>
</html>
cs

 

2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
    <head>
        <title>HTML 제목 - 범범조조</title>
        <meta charset="utf-8">
    </head>
 
    <body>
        <h1><a href=default.html>범범조조 블로그</a></h1>
            <ol>
                <li><a href=1.html>카테고리1</a></li>
                <li><a href=2.html>카테고리2</a></li>
                <li><a href=3.html>카테고리3</a></li>
                <li><a href=4.html>카테고리4</a></li>
                <li><a href=5.html>카테고리5</a></li>
            </ol>
 
        <h2>카테고리2</h2>
 
        안녕하세요. 지금 보고 계시는 페이지는 카테고리2 입니다.
        
    </body>
</html>
cs

 

3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
    <head>
        <title>HTML 제목 - 범범조조</title>
        <meta charset="utf-8">
    </head>
 
    <body>
        <h1><a href=default.html>범범조조 블로그</a></h1>
            <ol>
                <li><a href=1.html>카테고리1</a></li>
                <li><a href=2.html>카테고리2</a></li>
                <li><a href=3.html>카테고리3</a></li>
                <li><a href=4.html>카테고리4</a></li>
                <li><a href=5.html>카테고리5</a></li>
            </ol>
 
        <h2>카테고리3</h2>
 
        안녕하세요. 지금 보고 계시는 페이지는 카테고리3 입니다.
        
    </body>
</html>
cs

 

4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
    <head>
        <title>HTML 제목 - 범범조조</title>
        <meta charset="utf-8">
    </head>
 
    <body>
        <h1><a href=default.html>범범조조 블로그</a></h1>
            <ol>
                <li><a href=1.html>카테고리1</a></li>
                <li><a href=2.html>카테고리2</a></li>
                <li><a href=3.html>카테고리3</a></li>
                <li><a href=4.html>카테고리4</a></li>
                <li><a href=5.html>카테고리5</a></li>
            </ol>
 
        <h2>카테고리4</h2>
 
        안녕하세요. 지금 보고 계시는 페이지는 카테고리4 입니다.
        
    </body>
</html>
cs

 

5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
    <head>
        <title>HTML 제목 - 범범조조</title>
        <meta charset="utf-8">
    </head>
 
    <body>
        <h1><a href=default.html>범범조조 블로그</a></h1>
            <ol>
                <li><a href=1.html>카테고리1</a></li>
                <li><a href=2.html>카테고리2</a></li>
                <li><a href=3.html>카테고리3</a></li>
                <li><a href=4.html>카테고리4</a></li>
                <li><a href=5.html>카테고리5</a></li>
            </ol>
 
        <h2>카테고리5</h2>
 
        안녕하세요. 지금 보고 계시는 페이지는 카테고리5 입니다.
        
    </body>
</html>
cs

 

실행 결과

728x90

이 글을 공유하기

댓글

Designed by JB FACTORY