HTML

[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 확장 연계, 성취감 제고

• 디지털 포트폴리오
  • 개인 페이지 섹션화(작품·성찰·목표), 학기별 항목 추가, 성장 기록 축적
  • 오디오·비디오 첨부, 자막·대체 텍스트 제공, 접근성 강화, 재학습 지원
  • 카드형 갤러리 구성, 링크 내비게이션, 단순 그리드 배치, 전시 효율 향상

• 진로·안전·행사 자료
  • 진로 링크 모음 내비게이션 구성, 관련 기관 연결, 자기주도 학습 유도
  • 안전 교육 체크리스트 제공, 수업 중 현장 체크, 즉시 피드백 기록
  • 학부모 FAQ 페이지 구축, 자주 묻는 질문 요약, 설명 리스트 정리, 가독성 개선

  [세부 사항]