HTML 소스를 이용하여 설치형 블로그인 티스토리에 구글 애드센스 광고승인을 받은지 1주일이 지나간다.
설치형블로그를 시작하면서 다른 사람들이 올려놓은 기본적인 레이아웃에 만족하면서 지냈는데 이제 광고를 집어넣고 배열을 바꿔보려고 하니 여간 어렵지 않다.
특히, 컴퓨터 프로그래밍을 잘 아는 분들에게 HTML은 아주 초보적인 언어이기 때문에 우습게 보일지 모르지만 처음 접하는 사람들에게는 외계 언어를 접하는 기분이다.
HTML 및 CSS 태그와 소스들을 편집하고 배우는 공부를 조금씩 하고 싶은 마음에 책을 들여다 보았지만 한눈에 보아도 만만치 않다. 그렇지만 컴퓨터 왕초보가 기본정도는 알아야만 하는 HTML 및 CSS의 기초를 습득하게 되면 다시 한번 복습하는 마음으로 포스팅을 해보려고 한다.
HTML 및 태그와 소스의 정의
HTML(HyperText Markup Language)은 웹문서 언어로 하이터텍스트를 만드는 언어체계이다. HTML의 태그(Tag)라는 명령어를 사용하여 편집기 상에서 정해진 작성방법에 따라 원하는 내용을 입력하면 된다.
태그 명령어로 구성된 텍스트 소스파일은 브라우저라는 프로그램에 의해 그래픽으로 변환되어 보여지는데 이를 HTML이라고 한다.
Tag는 HTML 문서는 여러개의 명령어로 구성되는데 태그는 문자나 문단의 표현 형태로서 < >안에 들어있는 단어는 일반 텍스트가 아닌 HTML 명령어로 해석되며 태그의 시작은 <태그명>.......</태그명>으로 작성한다.
HTML문서의 기본구조
HTML 소스의 기본구조는 제목에 해당하는 <HEAD>와 본문부분인 <BODY>로 이루어지며 시작과 끝은 <HTML>과 </HTML>로 표시한다.
- 제목 부분은 문서에 대한 설명이 들어가며 내용은 표시하지 않아도 상관없다.
- 본문 부분은 파일문서를 실행시 화면에 보여지는 부분으로 태그 <BODY>와 </BODY>의 내용을 실행한다.
위 이미지는 지금까지 작업한 HTML 문서를 노트패드++로 저장한 모습이다. 텍스트 파일(***.txt)로 저장하지 말고 HTML 소스 문서로 저장하게 되면 텍스트구조가 자동으로 변환이 되면서 저장문서가 생성된다.
HTML 문서를 저장한 후 폴더를 열게 되면 처음에 잘 몰라서 일반적인 텍스트파일로 저장한 것과 HTML로 저장한 2개의 파일이 있음을 알 수 있다.
HTML 문서는 더블클릭할 경우 작업한 결과가 웹브라우저 형태로 볼수 있기 때문에 작업자가 문서를 올바르게 작성했는지 확인이 가능하다.
더블클릭을 해 보았더니 위와 같이 웹브라우저로 변환이 되어 본문내용인 <BODY> ..... </BODY> 사이에 기입했던 -------------- 표시 3개가 제대로 표시되었다.
위와 같은 방법으로 표시하려는 내용을 BODY 태그사이에 작성하면 손쉽게 원하는 글자를 생성할 수 있다.
HTML 문서의 구조에 표시되는 기초적인 태그들
<HTML> </HTML> 태그 : HTML 언어를 사용하여 문서가 작성된다는 시작태그
<HEAD> </HEAD> 태그 : 문서에 대한 설명이 들어가는 시작태그
<TITLE> </TITLE> 태그 : 문서의 제목을 표시하는 시작태그
<BODY> </BODY> 태그 : 본문 내용을 작성하는 시작태그
HTML 문서편집 프로그램 : 노트패드++(NotePad++)
우리가 HTML 문서를 작성하거나 편집하기 위해서는 전용 프로그램을 이용하여야 하는데 대표적인 프로그램은 노트패드++ 이다. 컴퓨터 윈도우에 기본으로 설치된 워드패드를 이용할 수도 있지만 최근 버전에 작동하지 않으므로 노트패드++(NotePad++)를 다운받아서 사용할 것을 추천한다.
<노트패드++ 다운로드 사이트>
http://file.daum.net/pc/view.html?fnum=409537&cat=1&scat=30
지금까지 설치형 블로그인 티스토리 블로그에 활용하거나 여타 컴퓨터 프로그래밍을 배우려는 초보자에게 가장 기초라고 할 수 있는 할 수 있는 HTML 태그 및 CSS를 처음으로 배운 내용을 올려보았다.
퇴근후 잠시 짬을 내서 공부하기 때문에 한번에 많이 배울수도 없고 배운 것을 모두 올리기도 어렵다. 그렇지만 기초부터 조금씩, 꾸준히 배워나가면서 HTML 태그와 CSS 소스들을 배워보고 싶은 마음이다.
'블로그 정보들' 카테고리의 다른 글
| 현재의 웹페이지에서, 보안경고 확실하게 해결하세요 (0) | 2017.07.09 |
|---|---|
| 블로그 체험단, 블로거가 보는 맛집체험단 식당 사장의 자세? (0) | 2016.08.26 |
| 네이버 웹마스터도구 등록방법 및 검색등록의 차이 (0) | 2015.07.23 |
| 티스토리 블로그 개설, 초대장없이 하는법! (0) | 2015.07.18 |
| 티스토리 블로그 개설, 티스토리 초대장 구걸하기 (0) | 2015.07.18 |