코딩스쿨

▶ HTML Examples

HTML Exercises

HTML Exercises: 실습 문제와 예제

다음은 HTML의 다양한 기능을 이해하고 실습할 수 있는 문제들입니다. 이 실습 문제들은 기본적인 HTML 구조, 텍스트 및 링크 처리, 이미지 삽입, 폼과 입력 처리 등 웹 페이지를 구성하는 주요 요소들을 포함하고 있습니다. 각 문제와 함께 코드를 작성하며, HTML의 기초와 응용을 익힐 수 있습니다.

1. HTML 기본 구조

문제:

HTML 페이지의 기본 구조를 작성하세요. 제목은 "My First HTML Page"로 지정하고, 본문에는 "Hello, World!"를 출력하세요.

예시 코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

2. HTML 제목과 단락

문제:

"HTML 기초"라는 제목을 h1 태그로 작성하고, 두 개의 단락을 각각 p 태그로 작성하세요. 첫 번째 단락에는 HTML이 무엇인지 설명하고, 두 번째 단락에는 HTML의 중요성을 기술하세요.

예시 코드:

<h1>HTML 기초</h1>
<p>HTML은 HyperText Markup Language의 약자로 웹 페이지를 만들 때 사용하는 언어입니다.</p>
<p>HTML은 웹 페이지의 구조를 정의하는 데 사용되며, 모든 웹사이트의 기반입니다.</p>

3. HTML 링크 만들기

문제:

"Google"이라는 텍스트에 링크를 추가하여 클릭하면 Google 홈페이지로 이동하도록 만드세요.

예시 코드:

<a href="<https://www.google.com>" target="_blank">Google</a>

설명:

href 속성은 링크할 URL을 지정합니다.
target="_blank"는 링크를 새 탭에서 열리도록 설정합니다.

4. HTML 이미지 삽입

문제:

웹 페이지에 이미지를 추가하세요. 이미지 파일 이름은 "logo.png"이며, 대체 텍스트는 "Company Logo"입니다.

예시 코드:

<img src="logo.png" alt="Company Logo" width="300" height="200">

설명:

src 속성은 이미지 파일의 경로를 지정합니다.
alt 속성은 이미지를 불러올 수 없을 때 표시할 대체 텍스트입니다.

5. HTML 목록 만들기

문제:

주문형 목록(ol)을 사용하여 "HTML", "CSS", "JavaScript"라는 항목을 포함하는 목록을 만드세요.

예시 코드:

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

설명:

ol 태그는 순서가 있는 목록을 만듭니다.
li 태그는 목록 항목을 정의합니다.

6. HTML 테이블 만들기

문제:

이름과 나이를 표시하는 간단한 테이블을 작성하세요. 이름은 "John", "Jane"이고, 나이는 각각 "25", "22"입니다.

예시 코드:

<table border="1">
    <tr>
        <th>이름</th>
        <th>나이</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>22</td>
    </tr>
</table>

설명:

table 태그는 테이블을 정의합니다.
th는 테이블 헤더, td는 테이블 데이터를 정의합니다.
tr 태그는 테이블의 행을 나타냅니다.

7. HTML 폼 만들기

문제:

사용자가 이름과 이메일을 입력할 수 있는 폼을 작성하세요. 버튼을 클릭하면 데이터를 "submit.php"로 전송되도록 만드세요.

예시 코드:

<form action="submit.php" method="POST">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name"><br><br>

    <label for="email">이메일:</label>
    <input type="email" id="email" name="email"><br><br>

    <input type="submit" value="제출">
</form>

설명:

form 태그는 폼을 정의하며, action 속성은 데이터를 보낼 서버 파일을 지정합니다.
input 태그는 텍스트 필드와 버튼을 만듭니다. type="text"는 텍스트 입력, type="email"은 이메일 형식 입력을 의미합니다.
method="POST"는 데이터를 POST 방식으로 전송합니다.

8. HTML 폼 요소 - 선택 목록

문제:

사용자가 선택할 수 있는 언어 목록을 만들고, "Submit" 버튼을 추가하세요.

예시 코드:

<form action="submit.php" method="POST">
    <label for="language">프로그래밍 언어:</label>
    <select id="language" name="language">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="js">JavaScript</option>
    </select><br><br>

    <input type="submit" value="제출">
</form>

설명:

select 태그는 드롭다운 목록을 만듭니다.
option 태그는 선택 항목을 정의합니다.

9. HTML 폼 요소 - 라디오 버튼

문제:

성별을 선택할 수 있는 라디오 버튼을 만들고, "Submit" 버튼을 추가하세요.

예시 코드:

<form action="submit.php" method="POST">
    <label>성별:</label><br>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">남성</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">여성</label><br><br>

    <input type="submit" value="제출">
</form>

설명:

radio 타입의 input 태그는 여러 선택지 중 하나만 선택할 수 있는 라디오 버튼을 만듭니다.

10. HTML 비디오 삽입

문제:

웹 페이지에 비디오 파일을 추가하세요. 비디오 파일 이름은 "sample.mp4"이며, 사용자가 재생, 일시 정지, 볼륨을 조절할 수 있는 컨트롤을 제공하세요.

예시 코드:

<video width="400" controls>
    <source src="sample.mp4" type="video/mp4">
    브라우저가 비디오 태그를 지원하지 않습니다.
</video>

설명:

video 태그는 HTML5에서 비디오를 삽입하는 데 사용됩니다.
controls 속성은 비디오 컨트롤(재생, 일시 정지 등)을 제공합니다.

11. HTML 오디오 삽입

문제:

웹 페이지에 오디오 파일을 추가하세요. 오디오 파일 이름은 "audio.mp3"이며, 사용자가 재생할 수 있도록 하세요.

예시 코드:

<audio controls>
    <source src="audio.mp3" type="audio/mp3">
    브라우저가 오디오 태그를 지원하지 않습니다.
</audio>

설명:

audio 태그는 HTML5에서 오디오를 삽입하는 데 사용됩니다.
controls 속성은 오디오 컨트롤(재생, 일시 정지 등)을 제공합니다.

12. HTML 앵커 링크로 페이지 내 이동

문제:

페이지 상단에 "Scroll to Bottom" 링크를 만들고, 클릭하면 페이지 하단으로 이동하도록 하세요.

예시 코드:

<a href="#bottom">Scroll to Bottom</a>

<p>...</p> <!-- 긴 내용 -->

<h2 id="bottom">페이지 하단</h2>

설명:

href 속성에 #을 사용하여 페이지 내에서 특정 위치로 이동할 수 있습니다.
id 속성을 사용하여 이동할 위치를 정의합니다.

13. HTML 내부 링크와 외부 링크

문제:

"홈페이지"는 같은 사이트의 다른 페이지로 이동하도록 하고, "Google"은 외부 링크로 Google 홈페이지로 이동하도록 링크를 만드세요.

예시 코드:

<a href

="index.html">홈페이지</a>
<a href="<https://www.google.com>" target="_blank">Google</a>

설명:

첫 번째 링크는 내부 링크로 다른 HTML 파일로 연결됩니다.
두 번째 링크는 외부 링크로 Google 페이지로 이동하며, target="_blank"를 사용해 새 탭에서 열리게 합니다.

14. HTML IFrame 삽입

문제:

웹 페이지에 Google 지도를 IFrame으로 삽입하세요.

예시 코드:

<iframe
    src="<https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434509357!2d144.95373631531843!3d-37.8162799797516!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577b5fd8c17d5eb!2sFederation%20Square%2C%20Melbourne%20VIC%203000%2C%20Australia!5e0!3m2!1sen!2sin!4v1615370190136!5m2!1sen!2sin>"
    width="600"
    height="450"
    style="border:0;"
    allowfullscreen=""
    loading="lazy">
</iframe>

설명:

iframe 태그는 웹 페이지 안에 다른 웹 페이지를 삽입할 수 있게 해줍니다.
src 속성에 삽입할 웹 페이지나 콘텐츠의 URL을 지정합니다.

15. HTML 메타 태그 사용

문제:

웹 페이지에 설명과 키워드 메타 태그를 추가하세요. 설명은 "This is a sample website."이고, 키워드는 "HTML, CSS, JavaScript"입니다.

예시 코드:

<head>
    <meta charset="UTF-8">
    <meta name="description" content="This is a sample website.">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Website</title>
</head>

설명:

meta 태그는 페이지 설명, 키워드, 인코딩, 뷰포트 설정 등을 정의합니다.
SEO(Search Engine Optimization)에서 중요한 역할을 합니다.

요약

이 HTML 실습 문제들은 HTML의 기본 개념을 익히고, 웹 페이지의 다양한 요소들을 다루는 데 도움을 줍니다. 제목, 단락, 링크, 이미지, 폼 등 HTML의 필수 요소들을 직접 코딩해보면서 HTML의 구조와 태그 사용법을 익힐 수 있습니다.

코딩 스쿨 HTML

HTML Exercises

HTML Exercises: 실습 문제와 예제

1. HTML 기본 구조

문제:

예시 코드:

2. HTML 제목과 단락

문제:

예시 코드:

3. HTML 링크 만들기

문제:

예시 코드:

4. HTML 이미지 삽입

문제:

예시 코드:

5. HTML 목록 만들기

문제:

예시 코드:

6. HTML 테이블 만들기

문제:

예시 코드:

7. HTML 폼 만들기

문제:

예시 코드:

8. HTML 폼 요소 - 선택 목록

문제:

예시 코드:

9. HTML 폼 요소 - 라디오 버튼

문제:

예시 코드:

10. HTML 비디오 삽입

문제:

예시 코드:

11. HTML 오디오 삽입

문제:

예시 코드:

12. HTML 앵커 링크로 페이지 내 이동

문제:

예시 코드:

13. HTML 내부 링크와 외부 링크

문제:

예시 코드:

14. HTML IFrame 삽입

문제:

예시 코드:

15. HTML 메타 태그 사용

문제:

예시 코드:

요약