이번 강좌에는 HTML파일의 생성방법 및 HTML의 기본 구성에 대해서 설명하겠습니다. 앞으로도 HTML언어를 작성해 나감에 있어 이번강좌의 규칙을 기본으로 작성해나가기 때문에 꼭 숙지해 나가야할 중요한 강좌입니다.

HTML파일 생성

HTML언어를 본격적으로 배우기전에 기본적인 HTML언어 실행환경을 준비합시다.

・일단,Window를 쓰시는 분은 메모장,Mac을 쓰시는분은 텍스트 에디터를 열어주십시오.

Window의 경우Notepad를 열우주시기 바랍니다.

・다음은, 확장자를 HTML로 지정하여 텍스트를 보존해 주시기 바랍니다.

환경에 따라서.html이라고 확장자를 지정하지 않으면 않되는 경우도 있으니 주의해 주시기 바랍니다.

・보존한 파일을 열면 빈 웹 화면이 나타납니다. 이제부터 이 Sample.html에 HTML소스를 기재해 나가도록 합시다.

이 새하얀 화면안에 소스를 채워나가도록 합시다!

HTML의 기본 규칙

태그를 쓸때에는 다음과 같은 규칙을 지킬 필요가 있습니다.

태그는개시태그종료태그가있으며,그 안에 내용을 채워 나갑니다.

개시태그종료태그에 대해서는 저번 기사를 참고해주세요

예)강조

<h3>오늘의 날씨</h3>

실행결과

오늘의 날씨

Sample.html 실행결과

요소의 내용이 없는 경우는 다음과 같이 기술하며,「빈요소」라 부릅니다.

예)개행

이것은 개행입니다.<br>기억해 주시기 바랍니다.

실행결과

이것은 개행입니다.
기억해 주시기 바랍니다.

Sample.html실행결과

부속정보는 속성으로 기술합니다.속성은 복수 지정하는것이 가능합니다.

예)링크속성(아래쪽의a태그의 경우는href가 속성이 됩니다.)

<a href="https://dripcoke.com/ko/">홈페이지로 이동합니다.</a>

실행결과

홈페이지로 이동합니다.

Sample.html의 실행결과

태그안에 다른 태그를 포함시키는 것은 가능하지만,완전히 태그를 닫지않은 태그를 포함하는것은 불가능합니다.

예)옳지 못한 태그

<p>오늘의 날씨는<b>쾌청</b>하네요.</p>

올바른 태그의 실행결과

오늘의 날씨는쾌청하네요

예)옳지 못한 예(자세히 보시면 b태그가 완전히 닫히기 전에 p태그가 오고 있네요)

<p>오늘의 날씨는<b>쾌청</p>하네요</b>

옳지못한 예의 실행결과

오늘의 날씨는쾌청

하네요

*이와 같은 실수는 초보자 뿐만 아니라, 프로에게도 나타나는 실수 이므로 잘 기억해 두시기 바랍니다.

Web개발-처음하는HTML

프로그래밍 강좌 메인