[UX/UI] HTML 마크업 - http://www.subcide.com (2)
마크업 실습
참조 : http://www.subcide.com/examples/creating-a-css-layout-from-scratch/
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>About | Enlighten Designs</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="./html5shiv.js"></script>
<!--[if lt IE 9]]>
<script src="./html5shiv.js"></script>
<![endif]-->
</head>
<body>
<dl class="skip-nav">
<dt><strong>skip navication</strong></dt>
<dd><a href="#contents">Skip to content</a></dd>
</dl>
<div id="wrap">
<!-- header -->
<header id="header">
<!-- 로고 -->
<h1><a href="#"><img src="img/logo.png" alt=""></a></h1>
<!-- 메인메뉴 -->
<nav>
<h2>Main menu</h2>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>
<!-- //header -->
<!-- container -->
<div id="container">
<!-- contents -->
<section id="contents">
<h2><img src="img/about.png" alt="About"></h2>
<p><strong>Enlighten Designs</strong> is an Internet solutions provider that
specialises in front and back end development. To view some of the web sites
we have created view our portfolio.</p>
<p>We are currently undergoing a 'face lift', so if you have any questions
or would like more information about the services we provide please feel
free to contact us.</p>
<h2><img src="img/contactUs.png" alt="Contact Us"></h2>
<address>
<em>Phone:</em> (02) 000 0000 <br>
<em>Fax:</em> (02 000 0000) <br>
<em>Email:</em> <a href="mailto:webmaster@gmail.com">webmaster@gmail.com</a> <br>
<em>P.O Box:</em> 14159, Hamilton, New Zealand
</address>
<p><a href="#">More contact information...</a></p>
</section>
<!-- //contents -->
<!-- aside -->
<aside id="aside">
<h2>Aside</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida
enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut,
enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris.
Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus.
Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem,
semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum
ligula. In hac habitasse platea dictumst.</p>
</aside>
<!-- //aside -->
</div>
<!-- //container -->
<!-- footer -->
<footer id="footer">
<dl>
<dt><strong>bottom menu</strong></dt>
<dd><a href="#">About</a> -</dd>
<dd><a href="#">Services</a> -</dd>
<dd><a href="#">Portfolio</a> -</dd>
<dd><a href="#">Contact Us</a> -</dd>
<dd><a href="#">Terms of Trade</a> -</dd>
</dl>
<p>Copyright © Enlighten Designs<br>
Powered by <a href="#">Enlighten Hosting</a> and <a href="#">Vadmin 3.0 CMS</a></p>
</footer>
<!-- //footer -->
</div>
</body>
</html>
'Web Programing > UI, UX, html' 카테고리의 다른 글
| 마크다운(markdown) (0) | 2021.03.23 |
|---|---|
| [UX/UI] HTML 마크업 - http://www.subcide.com (1) (0) | 2021.03.16 |
| [UX/UI] HTML - 폼 컨트롤 (0) | 2021.03.16 |
| [UX/UI] HTML - 링크와 이미지 (0) | 2021.03.16 |
| [UX/UI] HTML - 테이블 셀합치기 (0) | 2021.03.16 |
| [UX/UI] HTML - 테이블을 구성하는 태그 (0) | 2021.03.16 |
| [UX/UI] HTML - 목록을 구성하는 태그 (0) | 2021.03.16 |
| [UX/UI] HTML - 문장을 구성하는 태그 (0) | 2021.03.16 |