<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 텍스트 서식과 관련된 태그 -->
<p><b> 이것은 볼드체입니다. </b></p> --> <p>~</p>태그는 단락과 단락간 구분하는 태그입니다.
<p><i> 이것은 이탤릭체입니다. </i></p>
<p><i><b> 이것은 이탤릭체이면서 볼드체입니다. </b></i></p>
<hr>
-> 텍스트들을 굵게 하거나 작게 하고 기울게 하는 서식태그는 <b>텍스트</b> 지정범위를 만들어 적용시키게 됩니다.
● <b>~</b> : 글씨를 굵게 하는 태그 ● <strong>~</strong> : 글씨를 굵게 + 강조하는 태그
● <small>~</small> : 글씨를 작게 하는 태그 ● <i>~</i> : 글씨를 기울게 하는 태그
● <em>~</em> : 기울게 하며 강조하는 태그 ● <code>~</code> : 이 안에 있는 텍스트는 코드임을 알리는 태그이다.
● <mark>~</mark> : 글씨에 형광펜 효과를 나타내는 태그
● <sup>~</sup> : 위 첨자
● <sub>~</sub> : 아래 첨자
<!-- 아랫첨자 : <sub></sub> -> 화학식에서 사용 -->
<p>H<sub>2</sub>O</p>
<!-- 윗첨자 : <sup></sup> -> 수학기호식에서 사용 -->
<!-- X2 + Y2 = Z2 -->
<p>X<sup>2</sup>+ Y<sup>2</sup> = Z<sup>2</sup></p>
<!-- 이미지 태그 -->
<!-- 형식 : <img src="경로명/이미지파일명"> -->
<img src="images/Koala.jpg" width="300" height="250">
<hr>
<img src="images/korea.gif" title="대한민국">
</body>
</html>
실행하면 웹 브라우저에 이렇게 표시됩니다.
위에 설명드린 것처럼 텍스트 서식 태그를 적용한 것이 글씨가 기울어져 있는 것을 알 수 있습니다.
- <sub>~</sub> : 아래 첨자인데 화학식에서 사용되는 태그 속성입니다.
그래서 H2O라고 표시된 것을 알 수 있습니다.
- <sup>~</sup> : 위 첨자는 수학기호식에서 자주 사용됩니다.
X2+ Y2 = Z2라고 된 것을 알 수 있습니다.
- 밑에 이미지가 있는 것은 이미지 태그를 사용한 것입니다.
형식은 <!-- 형식 : <img src="경로명/이미지파일명"> -->
코드를 보면
<img src="images/Koala.jpg" width="300" height="250">
<hr>
<img src="images/korea.gif" title="대한민국"> 라고 되어 있습니다.
이미지 파일이 있는 경로를 정확하게 입력해야 오류가 발생하지 않습니다.
경로를 적은 후 이미지 파일 이름을 적습니다.
그 다음 적은 width, height는 폭과 높이의 설정입니다.
이 부분은 추후 자세하게 설명 드리겠습니다.
- 그리고 <hr> 태그로 선그리기 한 후에 이미지 경로와 이미지 파일명을 적었습니다.
title 속성에 값을 대한민국이라 입력했습니다.
title 속성은 요소에 대한 조언 정보를 제공합니다.
이 부분은 css에서 더 설명을 해드리겠습니다.
- 즉 title 속성을 사용해서 이미지에 마우스를 올리게 되면 해당 값을 적었던 정보가 표시됩니다.
'웹표준 > HTML4' 카테고리의 다른 글
| HTML4 테이블 태그 (0) | 2017.08.22 |
|---|---|
| HTML4 목록을 만드는 <ol>, <ul>, <li> 태그 (0) | 2017.08.19 |
| HTML4 태그 속성 <hr>, 링크태그, target="blank" 속성 (0) | 2017.08.19 |
| HTML4 태그 속성에 대한 설명 (0) | 2017.08.19 |
| HTML4 태그 속성 및 단락 (0) | 2017.08.19 |