HTML 독학을 위한 HTML문서 만들기!

programming/HTML
2020. 6. 18. 22:27

HTML이 무엇이고 기본 구조가 어떻게 되어있는지에 대해서 공부했습니다! 그럼 한번 HTML문서를 만들어보는 시간을 가져보겠습니다. HTML문서를 만들때 웹 에디터를 가지고 HTML문서를 만들 수 있지만 한글, 워드 문서작업 프로그램으로도 만들 수 있고 윈도우에서 기본으로 제공하는 메모장을 활용해도 HTML문서를 만들 수 있습니다.

메모장으로 HTML문서 만들기

일단 HTML문서 에디터를 다운로드 받거나 하지 않고도 바로 할 수 있는 메모장을 이용해 HTML문서를 만들어 보겠습니다.

메모장을 실행시켜 봅니다~ 아무것도 없는 메모장에 지난 시간에 공부한 기본 구조를 그대로 작성을 한번 해보시면됩니다.

<!doctype html>
<html>
 	<head>
    
	</head>
	<body>
    
	</body>
</html>

우선 메모장에 지난시간에 배운 기본 구성을 그대로 작성해주세요

자 다음으로 <title> </title> 태그와 태그를 사용해 봅시다!

<title></title>태그는 html 문법중 <head> </head> 사이에 작성해주시면 됩니다.

태그는 html 문법중 <body></body>태그 사이에 작성해주시면 됩니다.

<!doctype html>
<html>
	<head>
	<title> 문서 만들기 연습 </title>

	</head>
	<body>
	<p> 문서를 처음 만들어 봤어요 </p>

	</body>
</html>

<title>태그의 내용에는 "문서 만들기 연습" 이라고 되어있고 태그에는 "문서를 처음 만들어 봤어요" 라는 내용이 들어있습니다. 이제 메모장에 있는 내용을 HTML문서로 저장해서 한번 실행시켜보겠습니다.

방법은 아주 간단합니다 "파일" -> "다른이름으로 저장"

파일 이름 : test.html
파일 형식 : 모든 파일
인코딩 : UTF-8

파일 이름은 편하게 작성하시고 뒤에 확장자 명을 .html로 작성해주시면 됩니다.

자 그럼 기본 test.html 파일이 생기고 기본 브라우저 아이콘으로 파일이 보여지게 됩니다. 저는 웨일 브라우저를 사용하고 있어서 웨일 브라우저 아이콘으로 표시가 되었네요.

파일이 생겼다면 한번 실행시켜보세요

웹 브라우저가 실행되고 가장 상단 브라우저 탭에는 "문서 만들기 연습" 문구가 표시가 되었습니다.

그리고 html 브라우저 속에는 "문서를 처음 만들어 봤어요" 라는 문구가 표시되어집니다!

이번에는 메모장으로 HTML문서를 만들어보는 시간을 가져봤습니다. 다음에는 각종 태그들에 대해서 하나하나 살펴보는 시간을 가져보겠습니다.

저작자표시 변경금지

'programming > HTML' 카테고리의 다른 글

HTML 독학을 위한 HTML의 문단 <p>, <br>, <pre>,<blockquote> (0)	2020.06.21
HTML 독학을 위한 HTML 표 만들기! <TABLE>, <TR>, <TD>,<TH> (1)	2020.06.21
HTML 독학을 위한 HTML 문자 태그활용 <hn>, <b>, <i>, <u> (3)	2020.06.20
HTML 독학을 위한 HTML의 기본 태그! (Hn,br,a 등등) (0)	2020.06.20
HTML 독학을 위한 HTML이란? / HTML의 기본 구조 (7)	2020.06.18

홍지군의 공간