HTML 초보자를 위한 강좌

초급

웹 개발의 기초인 HTML 의 기본을 배우세요. 이 강좌는 기본적인 HTML 태그, 웹 페이지 구조 생성, 이미지, 링크, 목록, 테이블 및 폼 작업에 대해 다룹니다. HTML5 시맨틱 요소와 멀티미디어도 탐구합니다.

HTML

💡 이 튜토리얼은 영어로 번역되었습니다. 원본을 보려면 영어로 전환

Next Course

소개
강의 계획

HTML 초보자를 위한 강좌

웹의 기본 언어를 마스터하기 위한 시작점인 HTML 초보자를 위한 강좌에 오신 것을 환영합니다! 이 포괄적인 강좌는 웹 페이지를 직접 만들고 방문하는 모든 웹사이트의 구조를 이해할 수 있도록, HTML 의 필수 요소를 통해 완전 초보자를 안내하도록 세심하게 제작되었습니다.

🚀 강좌 개요

HTML 초보자를 위한 강좌는 HTML 학습에 대한 구조적이고 실용적인 접근 방식을 제공합니다. 가장 기본적인 내용부터 시작하여 점차적으로 더 발전된 개념으로 나아가 웹 콘텐츠를 생성하고 구조화하는 방법에 대한 확실한 이해를 보장합니다. 실습 랩 연습을 통해 실제 경험을 쌓고 HTML 기술에 대한 자신감을 얻을 수 있습니다.

graph LR A[HTML for Beginners]:::main A --> B["HTML Basics"]:::category A --> C["HTML5 Basics"]:::category B --> B1["Create Your First HTML Page in VS Code"]:::item B --> B2["Create Basic HTML Structure and Tags"]:::item B --> B3["Create Your First HTML Page with Image"]:::item B --> B4["Learn HTML Comments and Special Symbols"]:::item B --> B5["Create Hyperlinks and Navigation with HTML a Tags"]:::item B --> B6["Create Inline Text Styling with span Tags in HTML"]:::item B --> B7["Insert and Style Images in HTML"]:::item B --> B8["Create and Style div Elements in HTML"]:::item B --> B9["Create Paragraphs with HTML p Tag"]:::item B --> B10["Understand HTML Heading Tags"]:::item B --> B11["Create HTML Lists with Different Styles"]:::item B --> B12["Create HTML Tables with Basic Attributes"]:::item B --> B13["Create HTML Form Elements with Input Types"]:::item C --> C1["Understand Semantic HTML Tags in Web Development"]:::item C --> C2["Use time Tag for Semantic HTML"]:::item C --> C3["Play Audio Files with HTML5 audio Tag"]:::item C --> C4["Embed and Customize Video in HTML"]:::item classDef main fill:#f3f4f6,stroke:#374151,stroke-width:2px,color:#111827,font-weight:bold; classDef category fill:#e5e7eb,stroke:#d1d5db,stroke-width:1px,color:#374151,font-weight:bold; classDef item fill:#f3f4f6,stroke:#d1d5db,stroke-width:1px,color:#4b5563; linkStyle default stroke:#9ca3af,stroke-width:1px;

🎯 학습 목표

이 강좌를 완료하면 다음을 수행할 수 있습니다.

기본적인 HTML 페이지를 만들고 구조를 이해합니다.
텍스트, 이미지 및 링크에 대한 기본적인 HTML 태그를 활용합니다.
다양한 유형의 HTML 목록과 테이블을 구현합니다.
다양한 입력 요소를 사용하여 HTML 폼을 구축합니다.
웹 페이지 구조를 개선하기 위해 시맨틱 HTML5 태그를 이해하고 사용합니다.
이미지, 오디오 및 비디오와 같은 멀티미디어 콘텐츠를 웹 페이지에 포함합니다.
인라인 텍스트 스타일링 및 블록 레벨 요소의 개념을 이해합니다.
HTML 코드에서 주석과 특수 기호를 효과적으로 사용합니다.

🌟 강좌 하이라이트

초보자 친화적인 접근 방식: 코딩 경험이 없는 사람들을 위해 특별히 설계되었습니다.
실습 랩 연습: 실습 랩은 학습을 강화하고 실용적인 기술을 제공합니다.
HTML 기본 사항에 대한 포괄적인 내용: 필수 태그, 속성 및 구조적 요소를 다룹니다.
HTML5 소개: 새로운 시맨틱 요소와 멀티미디어 기능을 탐구합니다.
핵심 개념에 중점: 웹 개발 연구를 위한 강력한 기반을 구축합니다.

📚 강좌 구조

이 강좌는 두 가지 주요 단계로 나뉩니다.

HTML 기본 사항: 이 단계는 HTML 의 기초를 다루며 기본적인 개념과 필수 태그를 다룹니다. 기본적인 웹 페이지를 만들고, 텍스트, 이미지, 링크, 목록, 테이블 및 폼을 사용하는 방법을 배우게 됩니다. 각 랩은 기본 HTML 의 특정 측면에 중점을 둡니다.
- VS Code 에서 첫 번째 HTML 페이지 만들기.
- 기본 구조를 구축하고 핵심 태그를 이해합니다.
- 이미지 추가 및 관리.
- 주석 및 특수 기호 사용.
- 하이퍼링크 및 탐색 생성.
- 텍스트를 인라인으로 스타일링합니다.
- 구조를 위해 div 요소 사용.
- 단락과 제목 만들기.
- 다양한 유형의 목록 구축.
- 기본 속성으로 테이블 구성.
- 다양한 입력 유형으로 HTML 폼 디자인.
HTML5 기본 사항: 이 단계에서는 시맨틱 요소와 멀티미디어 통합에 중점을 두고 HTML5 의 새로운 기능을 소개합니다. 시맨틱 태그를 사용하여 웹 페이지의 구조와 접근성을 개선하고 오디오 및 비디오 콘텐츠를 포함하는 방법을 배우게 됩니다.
- 시맨틱 HTML 태그와 그 중요성 이해.
- 시맨틱 날짜 및 시간에 대한 <time> 태그 사용.
- <audio> 태그를 사용하여 오디오 포함 및 제어.
- <video> 태그를 사용하여 비디오 포함 및 사용자 정의.

🏆 이 강좌를 선택해야 하는 이유?

HTML 초보자를 위한 강좌는 HTML 을 배우는 명확하고 간결한 경로를 제공합니다. 일련의 집중적인 랩을 통해 실질적인 경험을 얻고 이 필수 웹 기술에 대한 강력한 이해를 구축할 수 있습니다. 웹 개발자, 콘텐츠 제작자가 되기를 열망하거나 매일 사용하는 웹사이트 뒤에 있는 기술을 이해하고 싶든, 이 강좌는 시작하는 데 필요한 기술과 지식을 제공합니다. 잘 구조화되고 기능적인 웹 페이지를 만들 수 있으며 웹 개발 여정을 위한 견고한 기반을 마련할 수 있습니다.

강사

Labby

Labby is the LabEx teacher.