[수업안] 성인 초보를 위한 HTML 제목과 문단 태그 이해하기
- 교육 대상: 성인 초보 학습자
- 학습 목표: 웹페이지의 뼈대를 만드는 제목(
<h1>~<h6>)과 문단(<p>) 태그의 역할을 이해하고 직접 코드를 작성해 브라우저로 확인할 수 있다. - 수업 시간: 50분 (온·오프라인 실습 환경 기준)
- 준비물: 메모장(Windows) 또는 TextEdit(Mac), 웹브라우저(Chrome 권장)
시간별 수업 흐름
1교시: 개념 이해와 비교 (15분)
- 강사 설명:
- 웹페이지는 편지나 신문처럼 '제목'과 '본문(문단)'으로 이루어져 있음을 설명합니다.
- 컴퓨터는 사람이 글씨 크기를 보고 제목인지 본문인지 알 수 없기 때문에, 태그라는 '이름표'를 붙여 알려주어야 한다고 비유합니다.
- 핵심 태그 소개:
- 제목 태그:
<h1>부터<h6>까지 (숫자가 작을수록 가장 중요한 대제목, 아래로 갈수록 소제목) - 문단 태그:
<p>(Paragraph의 약자, 일반적인 글 한 줄이나 문단을 감쌀 때 사용) - 확인 질문:
- "블로그 글을 쓸 때 가장 큰 제목으로 쓰고 싶은 문장 앞뒤에는 어떤 태그를 붙여야 할까요?" (예상 정답:
<h1>과</h1>)
2교시: 시범 및 실습 (25분)
- 실습 환경 설정: 바탕화면에 새 텍스트 문서를 만들고 이름을
index.html로 변경합니다. (확장자 변경 경고창이 뜨면 '예'를 누릅니다.) - 강사 시범:
- 메모장을 열고 아래의 기본 뼈대를 입력한 뒤, 화면을 보며 태그가 어떻게 작동하는지 시연합니다.
- 학습자 직접 실습:
- 아래 예시 코드를 참고하여 자신의 소개나 오늘 저녁 메뉴를 주제로 제목과 문단 태그를 직접 작성해 봅니다.
[실습용 예시 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>나의 첫 웹페이지</title>
</head>
<body>
<!-- 가장 큰 대제목 -->
<h1>오늘의 일기</h1>
<!-- 소제목 -->
<h2>날씨와 기분</h2>
<!-- 본문 문단 -->
<p>오늘 날씨는 아주 맑았다. 산책을 다녀와서 기분이 상쾌하다.</p>
<h2>저녁 메뉴</h2>
<p>저녁에는 따뜻한 된장찌개를 먹을 예정이다.</p>
</body>
</html>- 기대 결과: 작성한 파일을 더블클릭해 브라우저로 열었을 때,
<h1>글자는 크고 굵게,<p>글자는 일반 크기로 줄바꿈되어 나타나는 것을 확인합니다.
3교시: 마무리 및 이해 확인 (10분)
- 확인 질문:
- 제목과 문단 태그를 닫을 때 어떤 기호를 쓰나요? (예상 정답:
/슬래시, 예:</p>) - 문단을 감싸는 태그의 알파벳 약자는 무엇인가요? (예상 정답:
p)
- 오류 점검: 브라우저에 글자가 태그 그대로 노출되거나(오타 발생), 글씨 크기가 예상과 다를 때 어느 부분을 점검해야 하는지 함께 살펴봅니다.
진도 맞춤 조정안
- 진도가 빠른 학습자:
<h1>부터<h6>까지의 크기 변화를 직접 모두 써서 브라우저에서 크기가 어떻게 단계별로 작아지는지 비교 실험해 보도록 유도합니다. - 진도가 느린 학습자: 태그를 직접 타이핑하는 대신 강사가 미리 공유해 둔 완성된 코드에서 여는 태그와 닫는 태그의 쌍(
<h1>과</h1>)을 마우스로 찾아 색칠하거나 지워보며 구조를 익히게 돕습니다.
추가 정보: 실제 실습 시 운영체제에 따라 파일 확장자(`.html`)가 숨겨져 정상적으로 실행되지 않을 수 있으니, 수업 전 파일 탐색기의 '파일 확장명' 표시 설정 여부를 미리 확인해 주시면 좋습니다.
의견 보내기