웹프로그래밍/HTML

HTML 기초(예제 코드)

유노brain 2023. 9. 3. 12:23
반응형

HTML  document

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>

        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

-> title은 위에 뜨는 페이지 제목

-> h1은 페이지에서의 제목

-> p는 페이지안 단락을 의미

 

HTML headings

<!DOCTYPE html>
<html>
    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>      
        <h4>This is heading 4</h4>
        <h5>This is heading 5</h5>

    </body>
</html>

-> h1 ~h5로 갈수록 제목의 크기가 작아진다.

 

HTML paragraphs

<!DOCTYPE html>
<html>
    <body>
        <p>This is a paragraph.</p>
        <p>This is another paragraph</p>
    </body>
</html>

-> <p>는 단락을 표ㅗ시함

 

HTML links

<!DOCTYPE html>
<html>
    <body>
        <h2>HTML Links</h2>
        <p>HTML links are defined with the a tag:</p>

        <a href="https://www.naver.com">This is a link</a>
    </body>
</html>

-> 링크를 정의하는 태그는 href (hyper reference)로 페이지에서 보이는것은 This is a link이고 이것을 클릭했을 때 네이버 사이트로 간다.

 

HTML images

<!DOCTYPE html>
<html>
    <body>
        <h2>HTML Images</h2>
        <p>HTML images are defined with the img tag:</p>
        <!-- alt는 이미지가 입력이 안되었을 때 나오는 문구이다. -->
        <!-- 이미지는 src로 받는다. -->
        <!-- width: 너비, height: 높이 -->
        <img src = "eximage.jpg" alt="naver.com" width="800" height="600">
    </body>
</html>

-> 이미지를 정의하는 태그는 src이다.

-> alt는 어떠한 오류로 인해 이미지가 나타나지 않을때 나오는 문구이다.

-> width는 이미지 너비, height는 높이가 된다.

 

HTML buttons

<!DOCTYPE html>
<html>
    <body>

        <h2> HTML BUTTONS</h2>
        <p>HTML buttons are defined with the button tag:
        </p>
        <!-- html의 버튼 테그는 button이다. -->
        <button> CLick me</button>
    </body>
</html>

-> 버튼을 정의하는 태그는 button

 

HTML Lists

<!DOCTYPE html>
<html>
    <body>

        <h2>An Unordered HTML List</h2>

        <ul>
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ul>

        <h2>An Ordered HTML List</h2>

        <ol>
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ul>
    </body>
</html>

-> List를 나타내는 태그는 2개가 있다. 1) <ul> 2) <ol>

-> 하위 태그로 <li>가 존재한다.

-> ul(Unordered List)로 순서없이 점으로 리스트 표시를 한다.

-> ol(Ordered List)로 1,2,3 이런 식으로 순서가 표시된 리스트를 나타낸다.   

 

반응형