HTML 기본 예제

프로그래밍

offfff 2016. 8. 21. 09:00

HTML 문서

모든 HTML 문서는 type 선언(<!DOCYTPE html>)부터 시작해야 한다.

그 다음은 <html>로 시작해서 </html>로 끝나야 한다.

그리고 브라우저 화면상에 보여지는 부분은 <body>와 </body>사이에 작성된다.

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>first paragraph.</p>

</body>

</html>

HTML 제목(HTML Heading)

<h1> .. </h1> 태그는 HTML 제목을 나타내는 태그이다

태그의 숫자는 1~6까지 변경할 수 있는데, <h1>은 가장 큰 제목, <h6>는 가장 작은 제목이다.

사이즈가 달라진다.

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

HTML 문단(HTML Paragraphs)

HTML 문단은 <p> 태그로 정의된다.

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

HTML 링크(HTML Links)

HTML 링크는 <a> 태그로 정의된다.

<a href="http://dk-projects.tistory.com/"> My Blog Link</a>

링크의 목적지는 href 속성(href attribute)으로 나타낸다.

속성(Attribute)은 HTML elements(태그)의 추가적인 정보를 제공할 때 사용된다.

HTML 이미지(HTML Images)

HTML 이미지는 <img> 태그로 정의한다.

<img src="picture.jpg" alt="Image loading failed" width="104" height="142">

src(source file)는 이미지 파일 경로를 적는 속성이다.

위와 같이 메모장에서 실습한다면, html파일이 저장된 경로에 picture.jpg 파일을 두어야 사진이 나타난다.

alt(allternative text)는 이미지가 뜨지 않을때, 대체해서 보여줄 문구의 내용을 적는 속성이다.

사이즈 속성(width, height)은 화면상이 그림의 크기를 결정하는 속성이다.

적지 않으면 이미지의 원래 사이즈만큼 화면에 표시된다.

아래 링크를 참조하여 번역 및 수정함

http://www.w3schools.com/html/html_basic.asp