<html : html의 구조와 notepad 다운로드>

2024. 3. 11. 09:03복습/html

HTML, JavaScript : 클라이언트 웹브라우저가 해석

ASP, PHP,  JSP: 웹 서버가 해석

 

더보기

HTML과 JavaScript는 클라이언트 측에서 실행되고 웹 브라우저에서 해석되고 사용자의 로컬 환경에서 실행됩니다.

 

ASP (Active Server Pages), PHP, JSP (JavaServer Pages) 등은 서버 측에서 실행되고, 서버에서 해석됩니다.

이들은 서버 측에서 동작하여 HTML과 같은 클라이언트 측 기술과 함께 사용되어 동적인 웹 페이지를 생성합니다. 사용자가 요청을 보내면, 서버는 이러한 서버 측 스크립트를 실행하여 동적으로 웹 페이지를 생성하고, 그 결과를 클라이언트에게 전송합니다. 클라이언트는 이러한 서버로부터 전송된 결과를 받아 브라우저에 표시합니다.

 

HTML 기본 구조

html 기본 구조는 다음과 같다.

<!DOCTYPEHTML> : Document Type Declaration, 문서의 형식 정의, html 코드로 작성했다는 뜻

<HTML> 시작

<HEAD> : 머리부분 (시작)

<TYTLE> </TYTLE>: 제목 표시줄에 나오는 부분 (head 태그 사이에만 올 수 있음) 

 </HEAD> : 머리부분 (끝)

<BODY> </BODY> : 몸통부분, HTML 문서의 실질적인 내용이 들어감



</HTML> 문서 끝

 

 

아래 예시를 메모장에 붙여넣은 뒤, day1.html 로 저장해보자.

<!DOCTYPE HTML>
<HTML>
<HEAD><TITLE>나의 첫 Page</TITLE></HEAD>	
<BODY>
오늘은 HTML 태그 첫 실습하는 날
</BODY>
</HTML>

 

day1.html

 

저장 후, 저장 파일을 열어보면 이런 식으로 나타나는 것을 볼 수 있다.

TITLE 태그 사이에 넣어주었던 문구는 페이지 이름으로 들어갔고

BODY 태그 사이에 넣어주었던 문구는 페이지에 들어간 것을 볼 수 있다.

 

 

이렇게 메모장에 태그를 입력해서 확장자만 .html로 변경해서 저장해주어도 되지만, 

편의를 위해 notepad++을 사용한다.

 

NotePad++ 다운로드

https://notepad-plus-plus.org/downloads/

다음 사이트에 들어가서 원하는 버전을 다운받으면 된다.

 

보통은 가장 상위버전을 다운로드하니, 잘 모르겠으면 맨 위에 있는 걸 누르면 된다.

 

다음 이미지를 누르면 바로 다운로드가 완료된다. 

 

앞으로 html 코드는 여기에 작성하고 저장한다.

 

아까 코드를 notepad++로 가져오고, 확장자를 html로 하여 저장하면 이렇게 태그가 파란색으로 칠해진다.

 

저장하지 않으면 일반 텍스트 파일과 다름없이 보인다.

 

 

이제 다음 글부터는 다양한 태그를 이용하여 페이지를 꾸며볼 것이다 :)