티스토리 뷰
티스토리 블로그를 시작하면서 어릴 때 배웠던 HTML 웹 언어에 대하여 다시 접하게 되었는데요. 어린 시절 배웠던 기억을 떠올리면 이것을 왜 배우는지 뭐 때문에 웹언어를 배워야하는지도 모르고 주입식 교육을 받았지요. 블로그를 시작하게 되면서 제대로 된 HTML 웹언어에 대해서 공부해 보고 더 나아가 다른 컴퓨터 언어까지 공부해 볼 예정입니다.
HTML이란 Hyper Text Markup Language의 약자로 하이퍼텍스트를 특징으로 마크업이라는 형식을 가진 컴퓨터 프로그래밍 언어입니다. 프로그래밍 언어로써 영어 불어 등등과 같이 하나의 외국어, 컴퓨터와 나와 소통하는 언어입니다.
모든 웹페이지가 만들어지는 과정이 웹언어(HTML등)을 사용하여 컴퓨터에 명령하면 컴퓨터가 그것을 보여주는 것입니다. 그렇게 때문에 우리는 웹상의 HTML정보를 확인할 수 있습니다. 인터넷 상에서 오른쪽 마우스를 클릭하면 소스보기가 나옵니다. 그것을 누르면 HTML이 나오게 됩니다. 이것을 보고 이해하고 나의 홈페이지, 블로그를 만들고 꾸미려고 합니다.
웹프로그래밍의 시작은 무조건 HTML입니다. 가장 기초가 되는것입니다. HTML은 따로 프로그램이 없어도 텍스트 문서를 통해서도 작성할 수 있습니다. 하지만 프로그램을 사용하면 편리하기 때문에 노트패드++라는 것을 사용하겠습니다.
앞에서 말씀 드렸듯이 HTML은 프로그래밍 언어인데요. HTML 편집기를 통해서 이미지 삽입하기를 해 보겠습니다. 이미지 삽입을 하면서 언어를 하나하나씩 익히도록 하겠습니다.
노트패드를 켜면 이 화면에 빈창이 뜹니다. 그러면 아래의 글귀를 그대로 따라 적으시고 밑에 설명 글을 보세요.
★ 명령어 설명
<!doctype html> - html 문서의 시작을 알립니다.
<head> - 헤드라인 부분입니다.
<meta charset> - 언어의 인코딩을 어떻게 할 것인가 입니다. utf-8이 대표적입니다.
<title> - 타이틀은 웹페이지 상단에 표시될 내용을 말합니다. (글의 제목자리가 아닙니다)
<body> - 본문 부분으로써 많은 양의 글과 이미지가 들어갑니다. 티스토리 글을 쓸 때 모든 내용이 바디라고 보시면 되겠습니다.
<img src> - 이미지 소스입니다. 내용에 이미지를 삽입할때 사용합니다.
<p> - 본문에 글을 쓸 때 사용합니다.
</p></body> 등 /이 들어가는 명령어 - 끝을 알립니다.
모든 명령어는 꼭 마지막에 /를 통해서 끝내주어야 합니다.
주의 해야할 점은 편집기를 통해서 저장할 때 .html로 저장하셔야 저렇게 웹페이지로 저장이 됩니다. 그냥 저장하시면 메모장으로 저장이 되어요. 그리고 편집기에서 <img src="1" 이라고 적었는데 여기서 1과 파일명 1이 일치하고 같은 곳에 있어야 출력이 됩니다.
자 이제 이렇게 출력 되었습니다. 출력화면과 본인이 쓴 명령어를 비교해 가면서 학습하시면 좋습니다.
요즘은 html 이 없어도 툴이 잘되어 있기 때문에 굳이 html을 사용하지 않아도 편집을 하기 쉽다고 하는데요. 배워 놓으면 html로 보아도 이해가 되고 편집도 쉬워질 수 있을 것 같습니다. 이 글을 작성하면서도 이미지를 위로 올리는데 html을 통해서 했거든요.
이해가 잘 안되시는 부분은 댓글로 달아주세요. 보는대로 바로바로 답변 드리겠습니다.
'Blog > 웹언어' 카테고리의 다른 글
| HTML기초 이미지에 링크 걸기 방법 (3) | 2017.05.16 |
|---|---|
| HTML기초 테이블 태그로 표 만들기 방법 (0) | 2017.04.22 |
| HTML기초, 순서와 목록을 만드는 태그 (0) | 2017.04.20 |
| HTML기초, 이미지 크기 조절 및 정렬 (0) | 2017.04.11 |
| HTML기초, 기초태그 제목태그 배우기 (0) | 2017.04.08 |