HTML 튜토리얼

HTML 홈 HTML 소개 HTML 편집기 HTML 기본 HTML 요소 HTML 속성 HTML 제목 HTML 단락 HTML 스타일 HTML 서식 HTML 인용문 HTML 주석 HTML 색상 HTML CSS HTML 링크 HTML 이미지 HTML 파비콘 HTML 테이블 HTML 목록 HTML 블록 및 인라인 HTML 클래스 HTML ID HTML 아이프레임 HTML 자바스크립트 HTML 파일 경로 HTML 헤드 HTML 레이아웃 반응형 HTML HTML 컴퓨터 코드 HTML 의미론 HTML 스타일 가이드 HTML 엔티티 HTML 기호 HTML 이모티콘 HTML 문자 집합 HTML URL 인코딩 HTML 대 XHTML

HTML 양식

HTML 양식 HTML 양식 속성 HTML 양식 요소 HTML 입력 유형 HTML 입력 속성 HTML 입력 양식 속성

HTML 그래픽

HTML 캔버스 HTML SVG

HTML 미디어

HTML 미디어 HTML 비디오 HTML 오디오 HTML 플러그인 HTML 유튜브

HTML API

HTML 지리적 위치 HTML 드래그/드롭 HTML 웹 스토리지 HTML 웹 작업자 HTML SSE

HTML 예제

HTML 예제 HTML 퀴즈 HTML 연습 HTML 인증서 HTML 요약 HTML 접근성

HTML 참조

HTML 태그 목록 HTML 속성 HTML 전역 속성 HTML 브라우저 지원 HTML 이벤트 HTML 색상 HTML 캔버스 HTML 오디오/비디오 HTML 문서 유형 HTML 문자 집합 HTML URL 인코딩 HTML 언어 코드 HTTP 메시지 HTTP 메소드 PX에서 EM으로 변환기 키보드 단축키

HTML 편집기


간단한 텍스트 편집기만 있으면 HTML을 배울 수 있습니다.


메모장 또는 텍스트 편집기를 사용하여 HTML 배우기

전문 HTML 편집기를 사용하여 웹 페이지를 만들고 수정할 수 있습니다.

그러나 HTML을 배우려면 메모장(PC) 또는 TextEdit(Mac)와 같은 간단한 텍스트 편집기를 사용하는 것이 좋습니다.

우리는 간단한 텍스트 편집기를 사용하는 것이 HTML을 배우는 좋은 방법이라고 믿습니다.

메모장 또는 텍스트 편집기를 사용하여 첫 번째 웹 페이지를 만들려면 아래 단계를 따르세요.


1단계: 메모장 열기(PC)

Windows 8 이상:

시작 화면 (화면 왼쪽 하단에 있는 창 기호)을 엽니다 . 메모장 을 입력 합니다.

Windows 7 또는 이전 버전:

시작 > 프로그램 > 보조프로그램 > 메모장을 엽니다 .


1단계: 텍스트 편집기 열기(Mac)

Finder 열기 > 응용 프로그램 > 텍스트 편집기

또한 응용 프로그램이 파일을 올바르게 저장하도록 일부 기본 설정을 변경합니다. 환경 설정 > 형식 > " 일반 텍스트" 선택

그런 다음 "열기 및 저장"에서 "HTML 파일을 서식 있는 텍스트 대신 HTML 코드로 표시" 확인란을 선택합니다.

그런 다음 새 문서를 열어 코드를 배치합니다.


2단계: HTML 작성

메모장에 다음 HTML 코드를 작성하거나 복사합니다.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

메모장



3단계: HTML 페이지 저장

파일을 컴퓨터에 저장합니다. 메모장 메뉴에서 파일 > 다른 이름으로 저장을 선택 합니다.

파일 이름을 "index.htm" 으로 지정하고 인코딩을 UTF-8 (HTML 파일의 기본 인코딩)로 설정합니다.

브라우저에서 보기

팁: .htm 또는 .html을 파일 확장자로 사용할 수 있습니다. 차이가 없습니다, 그것은 당신에게 달려 있습니다.


4단계: 브라우저에서 HTML 페이지 보기

즐겨 사용하는 브라우저에서 저장된 HTML 파일을 엽니다(파일을 두 번 클릭하거나 마우스 오른쪽 버튼으로 클릭하고 "연결 프로그램" 선택).

결과는 다음과 같습니다.

브라우저에서 보기


W3Schools 온라인 편집기 - "직접 사용해 보기"

무료 온라인 편집기를 사용하여 HTML 코드를 편집하고 브라우저에서 결과를 볼 수 있습니다.

코드를 빠르게 테스트 하고 싶을 때 완벽한 도구 입니다. 또한 색상 코딩과 코드를 저장하고 다른 사람과 공유할 수 있는 기능이 있습니다.

예시

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

"Try it Yourself" 버튼을 클릭하여 작동 방식을 확인하십시오.


W3학교 공간

자신의 웹사이트를 만들고 코드를 온라인에 저장하려면 W3schools Spaces 라는 무료 웹사이트 빌더 를 사용해 보세요 .