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

티스토리툴바