728x90
[ex01]
<!DOCTYPE html><!-- html태그라는 것을 알려주는 태그 html 5버전-->
<html>
<head>
<meta charset="UTF-8"><!-- 유니코드값 -->
<title> 제목 </title> <!-- 네이버: -->
</head>
<body>
<h1>제목1</h1><!-- 제목 -->
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<p>paragraph</p><!-- 단락 -->
<p>
paragraph1<br><!-- 줄바꿈 -->
paragraph2<br>
</p>
<a href="http://www.ddanzi.com">딴지일보</a>
<br><br>
<img src="http://www.ddanzi.com/layouts/layouts_ddanzi/images/header/logo.png">
</body>
</html>
[ex02]
<!DOCTYPE html><!-- html 화면에 보여질 내용만, 디자인은 css에서. URL을 바꿀수 있다.URL은 톰캣에서 모듈에서 에디트로 수정.-->
<html><!-- 시작 -->
<head><!-- 메타내용 기술 -->
<meta charset="UTF-8">
<title>semantic</title>
</head>
<body><!-- ex)본문에 보일 내용 -->
<header><!-- 머릿글 광고-->
<h1>header</h1>
</header>
<nav><!-- ex)메뉴 -->
navigation
</nav>
<section><!-- 각각의 영역 나누기 -->
<article>article</article>
</section>
<footer>footer</footer><!-- 바닥글 ex)회사내용 -->
</body><!-- 바닥의 끝 -->
</html><!-- 끝 -->
<!-- 애플리케이션 구성요소 컴포넌트or 리소스 -->
[ex03]
<!DOCTYPE html><!-- html은 느슨한 프로그래밍 언어. -->
<html>
<head>
<meta charset="UTF-8"> <!-- 속성명은 그대로 속성값은 큰따옴표 -->
<title>etc</title>
</head>
<body>
<nav><!-- 네비게이션 메뉴를 지칭 -->
<ul><!--( ul-점)( ol-숫자) (ol type="A"-알파벳) ul=unordered list -->
<li><a href="#">이용안내</a></li><!-- 메뉴형태 하나하나는 a태그로 나타냄 li=list item -->
<li><a href="#">객실안내</a></li><!-- #을 쓰게 되면 공란과 마찬가지 -->
<li><a href="#">오시는길</a></li>
</ul>
</nav>
<section><!-- 영역 -->
<h2>게스트하우스 소개</h2><!-- 대제목 숫자가 작을수록 대제목, 클수록 소제목 -->
<article>
<h3>풍광</h3><!-- 소제목 -->
<p>창문 밖으로 바다가 펼쳐집니다.</p>
</article>
</section>
<section>
<iframe src="http://www.daum.net" width="95%" height="300px"> </iframe>
<!-- //iframe (필수속성 src) 다른 웹사이트를 포함시키기 위해서//, px(화면크기(점))를 지양한다.
현재는 부비스트랩으로 크기조정가능.(브라우저에 따라 웹 크기 반응) 퍼센트로 하게되면 브라우저크기에따라 유동적으로 변한다.
-->
</section>
<aside><!-- 참고영역 -->
<h3>알립니다.</h3>
<p>7월과 8월은 성수기입니다.</p>
</aside>
<footer>
<address>a@a.com, 02-1234-1234</address>
<p>마포구</p>
</footer>
</body>
</html>
728x90
'WEB > HTML' 카테고리의 다른 글
| HTML 태그 먹히지 않게 하기. (0) | 2018.05.04 |
|---|---|
| [HTML] SVG를 이용하여 색깔 그라데이션 넣기. (0) | 2017.08.28 |
| [HTML] HTML강의 - ch04 (0) | 2017.08.22 |
| [HTML] HTML강의 - ch03 (0) | 2017.08.22 |
| [HTML] HTML강의 - ch02 (0) | 2017.08.22 |
댓글