[HTML]

[핵심 기능]

시맨틱 마크업과 문서 구조화
- header, nav, main, article, section, footer 같은 시맨틱 태그로 템플릿을 쉽게 구성 가능
- table, form, list 요소로 데이터를 질서 있게 입력·표시
폼·미디어·내비게이션
- audio, video, picture, iframe 등을 통해 강의 영상과 예시 자료를 한 페이지에 삽입하여 학생 개별 학습 가능
- form과 다양한 input 속성, 기본 검증을 활용해 과제 제출 양식 생성
수업 맥락 예시(기능 → 효과)
- 시맨틱 구조 설계 → 학급 규칙·역할표 포스터 제작에 활용
- 폼 기반 제출 → 월간 일정표·행사 안내를 온라인 신청서로 받아 정리
- 미디어 삽입 → 학생 성장 기록을 사진·영상과 함께 디지털 앨범으로 정리
접근성·표준·확장성
- HTML은 웹 표준이라 모든 현대 브라우저에서 동일하게 동작
- CSS, JavaScript, GitHub Pages와 결합해 결과물을 웹사이트로 배포 가능

[활용 안내]

학급 홈페이지·공지
- 주간 수업 안내 페이지를 HTML로 제작해 링크를 공유
- 과목별 섹션을 나눠 숙제, 평가 일정, 참고 자료 제시
- 각종 태그와 목록을 사용해 핵심을 빠르게 전달 가능
- 학교 행사 페이지를 제작하고 배포하여 일괄 안내 가능
과제·평가 제출
- 제출 양식 제작, 파일 링크 규칙 안내, 필수 항목·입력 예시 제공, 입력 오류 감소
- 루브릭 표 제시, 자기 점검 유도, 기준 설명 구조화(dl·dt·dd), 가독성 향상
- 제출 완료 확인 메시지 제공, 재제출 방법·마감 시각 안내, 학습자 불안 완화, 책임감 강화
프로젝트·메이킹 수업
- 팀 소개 페이지 제작, 시맨틱 태그 실습, 역할표·일정표 구성, 협업 습관 형성
- 탐구 보고서 웹 구성, 참고문헌 하이퍼링크 연결, figure·figcaption 활용, 근거 자료 명료화
- details·summary 인터랙션 구현, 속성 기반 기능 적용, CSS·JS 확장 연계, 성취감 제고

💡제품 안내

📢활용 사례