본문 바로가기
Programming/Web Programming (2021)

[웹프로그래밍 실습] 2. 월드와이드웹과 HTML

앤 썸 2021. 4. 5. 10:36
반응형

1-1) 웹페이지 요청하기와 소스 보기

네이버 소스코드

1-2) HTML 기본문서 작성과 실행하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>example 1-2</title>
</head>
<body>
    <h2>example 1-2</h2>
    <hr>
    example 1-2
</body>
</html>

2-1) 제목과 문단 태그 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: 2-1 </title>
</head>
<body>
    <h1>example 2-1</h1>
    <h2>html example</h2>

    <p>hello world</p>
    <p>hello
        world
    </p>
    <p>hello<br>world</p>
    <pre>

        hello world
        hello
            world
    </pre>
        <h2>hello
                world
        </h2>
</body>
</html>

2-2) 텍스트 관련 태그 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: 2-2</title>
</head>
<body>
    <b>bold text</b><br>
    <strong>strong text</strong><br>
    <i>italic text</i><br>
    <em>emphasized text</em><br>
    <mark>mark text</mark><br>
    <small>small text</small><br>
    <del>deleted text</del><br>
    <ins>inserted text</ins><br>
    This is <sup>superscript text</sup><br>
    This is <sub>subscript text</sub>
    
</body>
</html>

 

2-3) 목록 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: 2-3</title>
</head>
<body>
    <h2>Unordered List</h2>
    <ul type="square">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

    <h2>Ordered List</h2>
    <ol type="A">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>    
</body>
</html>

2-4) 하이퍼링크 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: 2-4</title>
</head>
<body>
    <a href="http://www.naver.com" target="_blank">Naver</a><br>

</body>
</html>

2-5) 책갈피 구현하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: 2-5</title>
</head>
<body>
    <h1>Menu</h1>
    <a href="#index1">Coffee</a><br>
    <a href="#index2">Cake</a><br>
    <a href="#index3">Juice</a><br
    
    <h2 id="index1">Menu01::Coffee</h2>
    <ul>
        <li>Americano</li>
        <li>Cappuccino</li>
        <li>Cafe Latte</li>
    </ul>

    <h2 id="index2">Menu02::Cake</h2>
    <ul>
        <li>Carrot cake</li>
        <li>black tea cake</li>
        <li>Strawberry shortcake</li>
    </ul>

    <h2 id="index3">Menu03::Juices</h2>
    <ul>
        <li>Orange</li>
        <li>Grape</li>
        <li>Watermelon</li>
    </ul>
    
</body>
</html>

3-1) 이미지 태그 활용 -url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: 3-1</title>
</head>
<body>
    <img src="https://images.pexels.com/photos/3082341/pexels-photo-3082341.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" width="1260" height="">
    <hr>
    <img src="https://images.pexels.com/photos/3082341/pexels-phot" alt="iPad Pro 12.9">
    
</body>
</html>

3-2) 이미지 태그활용 -로컬이미지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: 3-2</title>
</head>
<body>
    <img src="img/sample.jpg" alt="dlwlrma">
</body>
</html>

3-3) 테이블 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: 3-3</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>no.</th>
            <th>name</th>
            <th>email</th>
            <th>tel</th>
        </tr>
        <tr>
            <td>1</td>
            <td>James Kang</td>
            <td colspan="2">james@newyork.ac.kr,010-1234-1234</td>
        </tr>
        <tr>
            <td rowspan="2">2</td>
            <td>Justin Born</td>
            <td>justin@google.com</td>
        </tr>
        <tr>
            <td>Mariata Kumba</td>
            <td>kumba@amazon.com</td>
            <td>010-2222-3333</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Mola Lnada</td>
            <td>mola@naver.com</td>
            <td>010-4444-5555</td>
        </tr>
    </table>
    
</body>
</html>

4-1) 입력양식 활용 - 검색창 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example: 4-1</title>
</head>
<body>
    <h2>html-11.html : Naver search</h2>
    <form action="">
        search: <input type="text">
        <input type="submit" value="serach">
    </form>
    
</body>
</html>

반응형
저작자표시 비영리

'Programming > Web Programming (2021)' 카테고리의 다른 글

[웹프로그래밍 실습] 6. CSS 기초  (0) 2021.04.19
[웹프로그래밍] 6. CSS 기초  (0) 2021.04.19
[웹프로그래밍] 2. 월드와이드웹과 HTML  (0) 2021.03.29
[웹프로그래밍] 1. 개발환경 구축하기  (0) 2021.03.14
웹 프로그래밍 공부하기  (0) 2021.03.14

'Programming/Web Programming (2021)' Related Articles

티스토리툴바