고정 헤더 영역
상세 컨텐츠
본문
HTML 초보자를 위한 쉬운 예제 5가지
HTML을 처음 배우시는군요! 축하드립니다. HTML은 웹 페이지의 기본 구조를 만드는 언어입니다. 쉽고 재미있는 예제 5가지를 통해 HTML의 기본 개념을 익혀볼까요?
1. 간단한 웹 페이지 만들기
HTML
<!DOCTYPE html>
<html>
<head>
<title>내 첫 번째 웹 페이지</title>
</head>
<body>
<h1>안녕하세요, HTML 세계에 오신 것을 환영합니다!</h1>
<p>이것은 제가 만든 첫 번째 웹 페이지입니다.</p>
</body>
</html>
- 설명:
- <!DOCTYPE html>: HTML 문서의 유형을 선언합니다.
- <html>: HTML 문서의 시작과 끝을 나타냅니다.
- <head>: 문서의 제목 등 메타 정보를 포함합니다.
- <title>: 브라우저 탭에 표시되는 제목을 설정합니다.
- <body>: 웹 페이지의 실제 내용을 담는 부분입니다.
- <h1>: 가장 큰 제목을 나타내는 태그입니다.
- <p>: 단락을 나타내는 태그입니다.
2. 이미지 넣기
HTML
<!DOCTYPE html>
<html>
<head>
<title>이미지 넣기</title>
</head>
<body>
<img src="고양이.jpg" alt="귀여운 고양이">
</body>
</html>
- 설명:
- <img>: 이미지를 삽입하는 태그입니다.
- src: 이미지 파일의 경로를 지정합니다. (자신의 컴퓨터에 "고양이.jpg" 파일이 있는 경우)
- alt: 이미지가 로드되지 않을 때 표시되는 대체 텍스트입니다.
3. 링크 만들기
HTML
<!DOCTYPE html>
<html>
<head>
<title>링크 만들기</title>
</head>
<body>
<a href="https://www.naver.com">네이버로 이동</a>
</body>
</html>
- 설명:
- <a>: 링크를 만드는 태그입니다.
- href: 링크가 연결될 URL을 지정합니다.
4. 목록 만들기
HTML
<!DOCTYPE html>
<html>
<head>
<title>목록 만들기</title>
</head>
<body>
<h2>좋아하는 과일</h2>
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul>
</body>
</html>
- 설명:
- <ul>: 순서 없는 목록을 나타냅니다.
- <li>: 목록의 각 항목을 나타냅니다.
5. 테이블 만들기
HTML
<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기</title>
</head>
<body>
<table>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>20</td>
</tr>
</table>
</body>
</html>
- 설명:
- <table>: 테이블을 생성합니다.
- <tr>: 테이블의 행을 나타냅니다.
- <th>: 테이블의 헤더 셀을 나타냅니다.
- <td>: 테이블의 데이터 셀을 나타냅니다.
'HTML_CSS' 카테고리의 다른 글
| HTML에서 캐스케이딩 스타일 (CSS) 쉽게 이해하기 (1) | 2024.11.01 |
|---|---|
| CSS 속성 명령: 웹 페이지 디자인의 핵심 (0) | 2024.11.01 |
| CSS란 무엇이고 왜 사용할까요? (0) | 2024.11.01 |
| HTML 텍스트 태그 실습 문제 (2) | 2024.10.28 |
| HTML이란 (0) | 2024.10.28 |
