[목적] 브라우저에 ‘&’를 출력하는 방법을 배운다. [이론] 위 그림과 같은 결과를 얻기 위해 아래 코드를 입력한다. <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/> <title>홈페이지</title> </head> <body> <<br/> ><br/> </body> </html> 그러면 이전 글에서 다루것과 같이 ‘<’, ‘>’는 각각 ‘<‘, ‘>’을 출력하므로 아래 그림의 결과가 출력된다. 올바른 결과를 위해서는 ‘&’ 출력을 위한 ‘&’를 응용하여HTML 코드에 ‘lt’와… Read More »
[목적] 브라우저에서 HTML 태그를 출력하는 방법을 배운다. [이론] <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/> <title>홈페이지</title> </head> <body> <html><br/> <head><br/> <body><br/> </body> </html> 위 그림의 내용을 출력하기 위해 위와 같이 HTML 코드를 작성하면 브라우저는 ‘<‘ ~ ‘>’ 사이의 내용도 하나의 태그로 인식하므로 아래 그림과 같이 아무 것도 출력하지 않는다. 모든 HTML 태그는 ‘<‘과 ‘>’으로… Read More »
[목적] 브라우저에서 연속된 두 개 이상의 공백 출력하는 방법을 배운다. [이론] 이전 실습 ‘줄 바꾸기‘의 과제를 살펴보면 출력 결과가 위와 같으므로 ‘<body>’ ~ ‘</body>’ 태그 사이의 단어에 여러개의 공백을 삽입하여 다음과 같은 HTML 코드를 생각했을 것이다. <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/> <title>홈페이지</title> </head> <body> 안산대학교 인터넷정보과 홈페이지제작 </body> </html> 그러나 위와 같이… Read More »
[목적] 브라우저에서 여러 줄에 걸쳐 문자열을 출력하는 방법을 배운다. [이론] 이전 실습 ‘한글 인코딩‘의 과제를 살펴보면 출력 결과가 위와 같으므로 ‘<body>’ ~ ‘</body>’ 태그 사이를 아래와 같이 작성한 HTML 코드를 생각할 수 있다. <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/> <title>홈페이지</title> </head> <body> 안산대학교 인터넷정보과 홈페이지제작 </body> </html> 그러나 위와 같이 작성해 브라우저로 확인한다면… 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의 기본 구조에 대해 배운다. [이론] 일반적으로 홈페이지는 MSIE, FireFox, Chrome 등과 같은 브라우저를 통해 접속한다. 이 때 브라우저는 서버로 부터 HTML(Hyper Text Markup Language) 형식의 홈페이지 문서를 렌더링(해석)하여 사용자에게 보여준다. 따라서 홈페이지 작성의 가장 기본은 HTML이다. 이 글에서는 HTML의 기본형식에 대해 살펴보겠다. [HTML의 기본 형식] HTML은 태그(Tag)로 구성된 스크립트 언어다. 그러므로 HTML을 공부할… Read More »
[목적] 서버에 이미 저장된 html 파일을 EditPlus로 불러오는 방법을 배운다. [실습] 1. 앞의 실습에서 작성 서버에 저장된 ‘exam-01-01.html’ 파일을 EditPlus로 불러오기 위해 ‘파일’ 메뉴에서 ‘FTP’의 ‘원격 열기’ 항목을 클릭한다. 2. ‘원격 파일 열기’ 창이 뜨면 ‘계정’ 항목을 자신의 것으로 선택한 후 ‘표시’ 버튼을 클릭한다. 3. ‘Password’ 창이 뜨면 자신의 비밀번호를 입력하고 ‘확인’ 버튼을 클릭한다. 이… Read More »
[목적] 간단한 홈페이지(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 »