태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

 

[왕초보 홈페이지 만들기 강좌 ①] HTML이란 무엇인가?
http://blog.hostit.co.kr/82

[왕초보 홈페이지만들기 강좌 ②] 나모 웹 에디터란 무엇인가?
http://blog.hostit.co.kr/83

[왕초보 홈페이지 만들기 강좌 ③] 기본적인 HTML 문서의 구조
http://blog.hostit.co.kr/105

[왕초보 홈페이지 만들기 강좌 ④] HTML 태그의 기초를 익혀보자! 기본 HTML 태그
http://blog.hostit.co.kr/118

[왕초보 홈페이지 만들기 강좌 ⑤] 동방신기 사진 넣기, 이미지 넣기, 글자 정렬, 문장 정렬

http://blog.hostit.co.kr/130





첫 번째 강좌는 HTML 문서의 대략적인 형태만 보는 것으로 마무리가 되었죠?
지금부터는 HTML 문서가 어떤 구조를 갖고 있는지를 알아보겠습니다~
잘 따라와주세요 ^^!





1. HTML 태그로 세상에서 제일 간단한 홈페이지 만들기

우선 메모장을 열어서, 다음과 같이 작성합니다.
빨간 글씨는 설명을 위한 부분이니, 검은 글씨만 써 주세요!








다 작성하셨으면 '다른 이름으로 저장'을 클릭합니다.







문서의 확장자를 .html으로 지정하고 저장 버튼을 클릭합니다.





바탕화면 폴더에 있는 hostit.html 파일을 더블클릭합니다.






여러분의 첫 홈페이지를 보실 수 있습니다 ^^





이렇게 해서 아주 간단한 홈페이지를 만들어 보았습니다!
이처럼 간단한 홈페이지부터 네이버같은 포탈까지 모두 HTML 언어로 이루어져 있습니다.
다음 강좌에서도 이 구조를 사용할테니, 잘 익혀두세요!







2. HTML 태그의 특징

우선, HTML 태그는 대소문자 구분이 없습니다.
여러분이 HTML 문서를 작성할 때에 <HTML>이라고 쓰든, <html>이라고 쓰든 상관이 없다는 것이죠.
하지만 파일 이름은 소문자로 전부 통일해주는 것이 좋습니다.
나중에 홈페이지를 인터넷에 올린 후에 벌어질 문제들을 예방해주거든요.

또 HTML 문자열 사이에 있는 하나 이상의 공백은 무시됩니다.
여러분이 태그 상에서 "호 스   트                   잇"이라는 문자열을 썼다고 해도
브라우저에서는 "호 스 트 잇"으로밖에는 표현되지 않는 것이죠.
그러므로 공백을 표현하기 위해서는 특별한 문자를 사용하게 됩니다.
앞으로 찬찬히 배워나갈 부분이구요.

또 하나의 특징이라면, HTML 태그를 잘못 사용했다 하더라도 브라우저는 에러를 발생시키지 않습니다.
뭔가 내가 원하는 모양대로 나오지 않았다면,
자기가 작성한 HTML 문서를 보면서 문제를 고쳐나가야 하는 것이죠.
그러므로 처음 작성할 때부터 잘 확인하는 것이 좋습니다~

그리고 HTML 태그에는 시작과 끝이 있습니다.
<태그>라는 시작 태그가 있다면 반드시 </태그>라는 끝내기 태그가 있는 것이죠.
 HTML 태그중에는 속성을 설정할 수 있는 것들이 있는데
이 속성 태그가 실제 문서를 표현할 때  필요한 여러가지 환경들을 설정하게 됩니다.




이제 HTML 태그에 대해서 대충 감이 오시죠?
다음 시간에 또 만나요 ^^!



Posted by 호스트잇