#1 HTML 기본 표현 양식
HTML
HTML은 웹상의 문서, 즉 홈페이지를 만들 수 있는 언어이다.
따라서 HTML을 배운다는 것은 홈페이지를 만드는 법을 배우고 웹 상에서 보일수 있도록 구현하는 것이다.
HTML을 입력한다 라는 것은 'Tag를 입력한다' 라고 한다.
붙여서 HTML Tag라고 부른다.
HTML에서 사용되는 각각의 구성요소와 문법들을 태그라고 하며 각각의 태그들을 저마다 속성과 값들이 다르다.
이러한 각각의 태그와 함꼐 삽입하여 구현할 수 있는 속성과 값들을 구현하여 웹페이지를 만든다.
HTML로 할 수 있는것
- 홈페이지만들기
- 글 문단만 입력된 메일이 아니라 멀티 미디어가 삽입된 메일을 보낼 수 있다.
- 다음, 네이버의 카페 서비스에서 카페 성격에 맞는 개성있는 메인 홈페이지와 서브 홈페이지 그리고 게시판 등록을 할 수 있다.
[ 기본 구성 ]
<html > //1
<head> //2
<meta charset="UTF-8">
<title> MY TITLE </title> //3
</head>
<body>
//4
</body>
</html>
1. <HTML> 태그
: 웹 문서의 형식이 HTML 을 이용하여 작성하는 부분임을 알려준다.
첫 시작 부분에 <HTML>을 입력하고 마지막에 </HTML>을 입력한다.
2.<HEAD> 태그
: 실제로 웹 부라우저에 나타나지는 않지만 웹 문서의 제목, 제작자, 언어 형식과 같은 문서 전체의 정보를 입력한다.
3.<TITLE> 태그
: <HEAD> 태그안에 <TITLE> 문서 제목</TITLE> 형태로 삽입된다.
웹 브라우져의 제목줄에 표시되며 즐겨찾기로 추가할 경우 기본적으로 표시되어 나타난다.
4. <BODY> 태그
: 웹 브라우져에 실재로 나타나는 부분으로 <BODY> 내용물 </BODY> 형태로 표시한다.
태그 특성
- '<' 과 '>' 사이에 영문이나 숫자의 조합으로 이루어진다.
- 시작과 끝을 써주어야 하는 태그들이 있다. 끝을 알리는 부분에는 </태그> 형태로 '/' 이 삽입된다.
- 대소문자를 구별하지 않는다.
- 태그의 세부적인 기능을 제어하는 옵션을 속성이라 하며 값과 함께 '< 태그 속성 = " " >' 형태로 삽입한다.
문자나 기호의 엔터티와 코드 표현
문자 | 엔터티 표현 | 코드 표현 |
" | " | " |
' | ' | ' |
< | < | < |
> | > | > |
& | & | & |
빈칸 | |   |
∞ | ∞ | ∞ |
∑ | ∑ | ∑ |
÷ | ÷ | ÷ |
√ | √ | √ |
http://kor.pe.kr/util/4/charmap2.htm
블록 테그와 인라인 테그
HTML은 Block 태그와 Inline 태그로 나뉩니다.
Block Tag : <p> ,<h1>, <div>,<ul>
Inline Tag : <strong>, <a>,<img>,<span>
블록 태그는 항상 새 라인에서 시작하고 브러우저의 왼쪽 끝에서 오른쪽 끝까지 블록 공간을 차지한다.
인라인 태그는 블록에 삽입 되어 블록 콘텐처의 일부를 표현하는데 사용된다.
예제들
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 툴팁 달기 </title>
</head>
<body>
<h1 title ="h1 태그로 작성하였습니다."> 1장 홈페이지
<h2 title ="h2 태그로 작성하였습니다."> 1장 HTML 언어</h2>
<h3 title ="홍길동"> 아름다운 강산</h3>
</body>
</html>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 단락 나누기 </title>
</head>
<body>
<h3> 2개의 단락 나누기 </h3>
<p>
HTML 문서도
문장을 여러
단락 으로 나눌수있다. CSS스타일을 사용하면
단락 단위로 내어 쓰기와 들여 쓰기가 가능하다.
<P>
여러개의 빈칸은 하나로 취급되며 엔터 키 역시 하나의 빈 칸으로 처리된다.
</body>
</html>
<P> 가 있으면 한줄 띄우고 글자 생김
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 코드 표현 </title>
</head>
<body>
<h3>새로운 줄 넘어가기</h3>
<hr size="5" width="50%" heigth ="30" color="red"> // %는 화면에서의 비율을 말한다.
<hr size="15" width="250" heigth ="10" color="green">
<hr width="75%" heigth ="35" color="blue">
<hr size="70" color="gray">
<hr><br>
<hr><br><br>
<hr>
<hr><br><br>
<hr>
<br> 태그로 다음 &
빈칸 빈칸   줄로 넘어갑니다.<br>
2개의 <br> 태그로 두번 넘어 갑니다. <br><br>
잘 보이나요?
<p>
<br> ∞ ∞ </p>
'br' ∞ ∞ </p>
√br𐱺 ∞ ∞ </p>
</body>
</html>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 수평선 긋기 </title>
</head>
<body>
<h3>수평선긋기</h3>
<hr color='#cccc66'>
<p>hr 태그는 horizintal에서 딴 글자입니다111.</p>
<hr color=#55dd55>
<p>hr 태그는 horizintal에서 딴 글자입니다222.</p>
<hr color="green">
<p>종료 태그 </hr>를 사용하지 않습니다.</p>
</body>
</html>
속성에 적는 값의 기본은 " " 로 처리해야한다. 하지만 처리하지 않거나 ' ' 로 적어도 실행은 가능하지만
속성 검사에 들어가보면 모두 " " 로 바뀌어져 있다.(자동 보정 기능이 있다. )
마찬가지로 만약 </p>를 생략해 주어도 자동 보정기능으로 붙어서 나온다.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 문자, 기호,심볼 표현</title>
</head>
<body>
<h3>기호 넣기</h3>
<hr>
10 ÷ 2=5<br>
√ 2= =1.414<br>
2 < 3<br>
오늘 " 송가인 " 노래를 들었다. <br>
A,B,C => A,BC
</body>
</html>