두번째 시간입니다. 이번에는 기본 HTML 예제를 볼 것이다.
HTML 문서
HTML문서는 <!DOCTYPE html>로 시작해야만 한다.
HTML문서는 <html>로 시작하고 </html>로 끝난다.
HTML문서의 보이는 부분은 <body와 </body> 사이에 있다.
예제
| 예제 |
| <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
<!DOCTYPE html>
<!DOCTYPE> 선언은 문서 유형을 나타내며 브라우저가 웹 페이지를 올바르게 표시하는 데 도움이 된다.
<!DOCTYPE html>은 페이지 맨 위에(html 태그 앞에) 한번만 나타난다.
<!DOCTYPE html> 선언은 대소문자를 구별하지 않는다.
HTML5에 대한 <!DOCTYPE html> 선언은 <!DOCTYPE html> 이다
HTML 제목
HTML 제목은 <h1> 태그에서 <h6> 태그로 정의한다.
<h1>은 가장 중요한 제목을 정의한다.
<h6>은 가장 중요하지 않은 제목을 정의한다.
| 예제 |
| <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> |
HTML 단락
HTML단락은 <p>태그로 정의된다.
| 에제 |
| <p>This is a paragraph.</p> <p>This is another paragraph.</p> |
HTML 링크
HTML 링크는 <a>태그로 정의된다.
| 예제 |
| <a href="https://www.naver.com">This is a link</a> |
링크의 목적지는 'href' 속성에 정의된다.속성은 HTML 요소에 관련한 추가적인 정보를 제공하는데 사용된다.
'This is a link' 글자를 클릭하면 네이버 사이트로 이동한다.
다음 장에 속성에 관련하여 더 공부할 것이다.
HTML 이미지
HTML이미지는 <img> 태그로 정의된다.소스 파일(src), 대안문자(alt), width와 height는 속성으로 제공된다.
| 예제 |
|
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
|
HTML소스를 보는 방법
크롬 브라우저에서는 오른쪽 마우스를 클릭하여 '페이지 소스 보기'를 클릭하여 소스를 본다.엣지 브러우저에서는 오른쪽 마우스를 클릭하여 '페이지 원본 보기'를 클릭하여 소스를 본다.다른 브라우저들도 비슷하고 HTML소스를 볼 수 있다.
HTML요소 검사
요소(또는 빈 영역)를 마우스 오른쪽 단추로 클릭하고 "Inspect" 또는 "Inspect Element"를 선택하여 HTML과 CSS가 모두 표시됩니다. 열리는 요소 또는 스타일 패널에서 HTML 또는 CSS를 즉시 편집할 수도 있습니다.
더 자세한 사항은 추후에 다른 글을 참조하기 바란다.
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
댓글