Tag Archives: html

NetBeans의 Remote Web Site 기능을 활용한 PHP/HTML 개발

NetBeans는 Oracle(과거 SUN Microsystems)에서 만든 Eclipse와 유사한 Java 기반의 통합개발환경(IDE)으로 Java는 물론 C/C++, HTML, PHP 등 많은 언어를 지원한다. 따라서 HTML과 PHP 프로젝트에 Netbeans를 이용하면 IDE의 장점을 충분히 활용하여 개발의 효율성을 극대화할 수 있다. 이 글은 NetBeans의 Remote Web Site(FTP, SFTP) 기능을 활용하여 원격 서버에서 직접 PHP/HTML 파일을 업로드하고 실행할 수 있도록 프로젝트를 구성하는 방법에 대해… Read More »

하이퍼링크

[목적] 홈페이지에 <a> 태그를 이용하여 하이퍼링크를 거는 방법을 익힌다. [이론] 다른 페이지로 이동을 위한 하이퍼링크는 <a> 태그를 사용하며 그 형식은 다음과 같다. <a href=”경로/파일명”>문자열</a> <a href=”프로토콜://서버이름/경로/파일명”>문자열</a> 위 형식에서 문자열은 브라우저상에 표시되는 내용으로 이 내용을 클릭하면 ‘<a>’ 태그의 ‘href’  속성에 정의된 페이지로 이동한다. 첫 번째 형식은 현재 페이지와 동일한 서버에 존재하는 페이지로 이동할 경우 주로 사용하며,… Read More »

한글 인코딩

[목적] 홈페이지에 한글을 사용할 경우 인코딩과 관련된 주의사항을 살펴본다. [이론] 이전 실습 ‘HTML 기본 구조‘에서 주어진 과제의 답은 아래와 같다. <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/> <title>홈페이지</title> </head> <body> HTML5로 홈페이지를 만들자. </body> </html> 그러나 Windows 환경에서 Eclipse, Netbeans, Dreamweaver 등과 같은 전용 개발환경이 아닌 메모장과 같은 간단한 편집기를 이용해 작성한 경우라면 많은… Read More »

HTML 기본 구조

[목적] HTML의 기본 구조에 대해 배운다. [이론] 일반적으로 홈페이지는 MSIE, FireFox, Chrome 등과 같은 브라우저를 통해 접속한다. 이 때 브라우저는 서버로 부터 HTML(Hyper Text Markup Language) 형식의 홈페이지 문서를 렌더링(해석)하여 사용자에게 보여준다. 따라서 홈페이지 작성의 가장 기본은 HTML이다. 이 글에서는 HTML의 기본형식에 대해 살펴보겠다. [HTML의 기본 형식] HTML은 태그(Tag)로 구성된 스크립트 언어다. 그러므로 HTML을 공부할… Read More »

서버에 저장된 HTML 파일 EditPlus로 불러오기

[목적] 서버에 이미 저장된 html 파일을 EditPlus로 불러오는 방법을 배운다. [실습] 1. 앞의 실습에서 작성 서버에 저장된 ‘exam-01-01.html’ 파일을 EditPlus로 불러오기 위해 ‘파일’ 메뉴에서 ‘FTP’의 ‘원격 열기’ 항목을 클릭한다. 2. ‘원격 파일 열기’ 창이 뜨면 ‘계정’ 항목을 자신의 것으로 선택한 후 ‘표시’ 버튼을 클릭한다. 3. ‘Password’ 창이 뜨면 자신의 비밀번호를 입력하고 ‘확인’ 버튼을 클릭한다. 이… Read More »

HTML 작성, 업로드 및 브라우저로 확인하기

[목적] 간단한 홈페이지(HTML)를 작성한 후 웹서버에 올리고 브라우저를 통해 확인하는 방법을 배운다. [실습] 1. EditPlus를 사용하여 아래 내용을 입력한다. <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/> <title>My 1st HTML</title> </head> <body> Hello, World! </body> </html> 2. 이제 작성된 내용을 웹서버(설명에서는 서버이름을 ‘webdb.ansan.ac.kr’로 가정하였음)에 원격저장을 위해 몇가지 서버계정 정보를 설정해야한다. 이를 위해 EditPlus의 ‘파일’ 메뉴에서… Read More »

HTML FORM

FORM 태그 HTML에서 사용자로부터 일정한 형식의 정보를 입력받기 위해서는 <FORM> 태그를 사용해야 한다. 이 태그는 반드시 </FORM> 태그와 쌍을 이룬다. <FORM> 태그는 단독으로 사용할 수 없으며 <INPUT />, <SELECT> ~ </SELECT>, <TEXTAREA> ~ </TEXTAREA> 등과 같은 각종 입력 태그들을 조합하여 사용해야 한다. 다음 프로그램 “formTag.html”은 <FORM> 태그의 기본적인 사용 예를 보여준다. <!DOCTYPE html PUBLIC “-//W3C//DTD… Read More »