본문 바로가기

Book

[한빛미디어] 인터넷 프로그래밍 입문 3장 연습문제


[한빛미디어] 인터넷 프로그래밍 입문 3장 연습문제

 

1. HTML을 구성하는 기본 골격 태그를 순서대로 구성해 보시오. 

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

 

2. <head> 태그 사이에 기록되는 문서 정보에는 어떠한 것이 있는지 나열해 보시오. 

<title>

Browser 상단의 푸른색 부위에 표시되는 문서제목 지정

홈페이지를 [즐겨찾기]에추가시등록되는 이름

<meta>

문서의 몸체부를 읽기 전에 실행되는 기능을 기록

홈페이지 문서의 글자크기제어, 검색엔진에서 내 홈페이지가 검색되도록 하며, 일정시간 경과 후 화면 자동전환 등의 기능, 끝내는 태그가 없음

<script>

홈페이지를 역동적으로 변화, <body>사이에도 가능

<style>

문서 전체의 레이아웃을 결정하여 문서에 통일감 제공.

글자색, 글자체, 배경색, 문서여백, 행간 등을 문서 전체에 반영

<body>사이에서도 특정 부분의 배경색, 문서여백 등 지정 가능

 

3. 홈페이지 문서의 확장자는 무엇인가? 

▶▶ htm, html, asp, asa, aspx, asax, shtml, stm, hta 

 

4. 에디트플러스에서 소스편집 및 브라우저로 보기에 사용되는 단축키는 무엇인가? 

▶▶ Ctrl + E, Ctrl + B (Editplus v3.01 기준) 

 

5. 태그 사용 시 지켜야 할 규칙을 아는 대로 나열해 보시오. 

▶ <태그명></태그명>과 같이 여는 태그와 닫는 태그가 쌍으로 사용

ex) <font size=5 color=blue>환영합니다!</font><p>

▶ 태그명과 속성명, 속성명과 속성명 사이는 한 칸씩 띄운다. 그 외 공백을 두어서는 안 된다.

▶ 속성명과 값은 = 부호를 사용하여 표시한다.

값이 두 단어 이상일 경우는 “ ”로 묶어서 표시한다.

▶ 속성이 있는 태그가 있고 없는 태그가 있다.

<font>처럼 속성을 반드시 하나 이상 사용해야 하는 태그도 있고 <p>처럼 생략해도 되는 태그가 있으며, <b> 처럼 속성이 없는 경우도 있음 <p>,<br>처럼 여는 태그만 독립적으로 존재하는 태그도 있다.

▶ 태그를 중첩해서 사용할 경우 먼저 연 태그를 나중에 닫는다

 

6. 요리 정보를 제공하는 메뉴판(http://www.menupan.com) 사이트로 접속해서 [소스보기]를 한 다음 머리부에 기록된 내용과 몸체부에 기록된 내용을 살펴본다. 

<head>

<TITLE>맛집 정보 검색 NO.1 사이트, 메뉴판닷컴 :: 맛집 정보가 가득</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />

<meta name="subject" content="메뉴판닷컴,메뉴판,맛집정보,맛집검색,맛집추천,맛집리뷰,맛집지도,요리비법,레시피,요리식단,할인쿠폰">

<META NAME='author' CONTENT='메뉴판닷컴 www.menupan.com'>

<meta name="description" content="대한민국 맛집 검색 정보 no.1 정보 사이트에 오신 것을 환영합니다. 맛집정보, 맛집검색, 맛집추천, 맛집예약, 맛집지도, 맛집탐방, 음식점이벤트, 원조맛집, 세계맛집 검색 및 다양한 맛집 정보를 만나 보세요.">

<meta name="keywords" content="맛집, 전국맛집, 요리, 푸드, 전국음식점, 외식, 외식정보, 음식, 음식점, 요리, 한국요리, 서양요리, 한식, 중식, 일식, 양식, 패스트푸드, 뷔페, 서비스, 쿠폰, 할인쿠폰, 공짜, 원조, 전국, 한국, 한국음식점">

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

<link href="/Common/css2/main.css" rel="stylesheet" type="text/css" />

<link href="/Common/css2/main_cnt.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/EP_Common/js/cookie.js"></script>

<script type="text/javascript" src="/Script/main_lib.js"></script>

</head>

<body>

<script language="javascript" src="/Script/drm_Util_KeepSeesion.js"></script>

<form name="search" method="get" onsubmit="onSearch();return false;" action="/Search/Search.asp">

<iframe id="hFrame" src="/Common/nvINC/Search/ark_iframe.html" width="354" scrolling="no"

frameborder="0" style="z-index:2"></iframe>

<div id="layout">

이하 생략

- 머리부 : <title> 태그와 <meta> 태그를 이용하여 타이틀 제목 및 문자형식 등 문서 정보를 입력 하였으며, <link> 태그에 css 파일을 적용, 또한 <script 태그로 자바스크립트를 사용

- 몸체부 : 각종 태그를 이용하여 자바스크립트와 이미지, 링크, 아이프레임 등으로 레이아웃 디자인 하였으며 검색과 로그인같은 경우 asp 사용

 

7. 에디트플러스를 이용해서 홈페이지 문서를 제작해 본다. C:/MyHome/Section2/Chap03 폴더 안에 03-01.htm으로 저장하고 아래 소스와 같이 입력하여 완성해 본다.

<html>

<head><title> 환영합니다! </title></head>

<body>

<h1 align=center>방가 *^^*<p>천천히 놀다가세요!</h1>

</body>

</html>