반응형
<HTML 태그 구성>
- 태그와 속성은 대소문자 구분 없음
- 속성 값에 불필요한 공백문자->HTML5표준에 어긋남
<예제1> 웹 페이지 타이틀 달기
<!DOCTYPE html>
<html>
<head>
<title>첫 타이틀</title>
</head>
<body>
페이지에 타이틀을 다는 예제 입니다.
타이틀은 브라우저의 타이틀 바에 보여집니다.
</body>
</html>
<예제2> <h1>, ...,<h6>태그로 문단 제목 달기
<!DOCTYPE html>
<html>
<head>
<title>문단 제목 달기</title>
</head>
<body>
<h1>1장 홈페이지 만들기</h1>
<h2>1절 HTML 언어</h2>
<h3>1. 웹</h3>
<h4>1.1인터넷</h4>
<h5>1.1.1네트워크</h5>
<h6>1.1.1.1 통신</h6>
</body>
</html>
<예제 3> title 속성으로 툴팁 달기
<!DOCTYPE html>
<html>
<head>
<title>툴팁 달기</title>
</head>
<body>
<h1 title="h1태그로 작성하였습니다.">1장 홈페이지 만들기</h1>
<h2 title="h2태그로 작성하였습니다.">1절 HTML 언어</h2>
</body>
</html>
<예제 4> <p>로 단락 나누기
<!DOCTYPE html>
<html>
<head>
<title>단락나누기</title>
</head>
<body>
<h3>2개의 단락 나누기</h3>
<p>html문서도 본문을 여러 단락으로 나눌 수 있다. css
스타일을 사용하면 단락 단위로 내어 쓰기와 들여 쓰기가
가능하다.</p>
<p>여러 개의 빈 칸은 하나로 취급되며, 엔터 키 역시
하나의 빈칸으로 취급된다.</p>
</body>
</html><예제 5> <hr>태그로 수평선 긋기
-이때 코드 안에 < >는 각각 < 와 >를 나타낸다.
<!DOCTYPE html>
<html>
<head>
<title>수평선 긋기</title>
</head>
<body>
<hr>
<p>hr태그는 horizontal에서 딴 글자입니다.</p>
<hr>
<p>종료태그 </hr>를 사용하지 않습니다.</p>
</body>
</html><예제 6> <br>태그로 새로운 줄로 넘어가기
<!DOCTYPE html>
<html>
<head>
<title>새로운 줄로 넘어가기</title>
</head>
<body>
<h3>새로운 줄로 넘어갑니다.</h3>
<hr>
<br> 태그로 다음 줄로 넘어갑니다<br>
2개의 <br>태그로 두 번 넘어갑니다.<br><br>
</body>
</html><문자, 기호, 심볼 입력>
- HTML5의 문자: 유니코드 문자셋, UTF-8코드 체계
- 다음 기호, 심볼들은 &엔터티, &#코드값으로 나타낸다.
<예제 7> <pre>태그로 개발자 포맷 그대로 출력
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
<hr>
<p> 태그를 사용하면
여러 개의 빈칸은 하나로 여러 줄은 한 줄에
붙여 출력한다.
<hr>
<pre>
그러나 <pre> 태그를 사용하면
사용자가 입력한 그대로
출력됩니다.
</pre>
</body>
</html>
'코딩 > HTML+CSS' 카테고리의 다른 글
| [CSS] padding (0) | 2023.08.08 |
|---|---|
| HTML 태그 종류 (0) | 2023.03.31 |
| 웹, URL&URI, HTTP, 웹 1.0, 브라우저 (0) | 2023.03.31 |
| HTML-3 (0) | 2022.09.28 |
| HTML-2 (1) | 2022.09.28 |
