HTML 문서 작성 HTML & JavaScript
Contents 1. 배경색 및 글자 색상 지정하기 2. 주석 처리하기 3. 글자 속성 지정하기 4. 줄 바꾸기 5. 제목 지정하기 6. 글자 스타일 지정하기 7. 목록 지정하기 8. 특수 문자 입력하기
배경색 및 글자 색상 지정하기 <BODY> 태그 형식 : <BODY 속성=값 속성=값......> 내용 </BODY> 속성 : TOPMARGIN, LEFTMARGIN, BACKGROUND, BGCOLOR, TEXT, LINK, VLINK, ALINK 예제 : <BODY BGCOLOR="yellow" TEXT="blue" LINK="red" VLINK="green" ALINK="gray"> BODY 태그의 속성 </BODY>
<BODY> 태그 속성
스트레인저 댄 픽션 (2006) Stranger than Fiction 감독: 마크 포스터 출연: 윌 페렐 (해롤드 크릭 역), 매기 질렌할 (안나 파스칼 역), 더스틴 호프먼 (쥴스 힐버트 박사 역), 엠마 톰슨 (안나 파스칼 역), 퀸 라티파 (페니 에스처 역) 줄거리: 내가 소설 속 주인공이라고?!믿을 수 없는 일이 벌어졌다!단조롭고 평범한 일상의 국세청 직원 헤롤드 크릭. 어느 날, 그는 자신의 머리 안에서 그의 행동 하나하나를 정확히 설명하는 어떤 여자의 목소리를 듣게 된다. 설상가상으로 이 목소리는 그가 곧 죽을 것이라고 말하는 게 아닌가! 이 황당하고 믿기 어려운 현실 앞에 헤롤드는 목소리의 주인공을 찾아 나서기 시작한다. 우여곡절 끝에 찾아낸 그녀는, 주인공을 끝내 죽이는 비극만을 쓰는 소설가 ..(참조.movie.daum.net)
RGB [그림 2-4] RRGGBB를 16진수로 변환한 값
프로그램 2-3
주석 처리하기 주석 소스 코드 설명 등을 첨가할 때 사용하며 프로그래밍 한 코드를 실행하는데 아무런 영향을 주지 않는 않음 형식 : <!-- 내용 --> 예제 : <BODY> 첫 번째 줄 <!-- 두 번째 줄 --> 세 번째 줄 </BODY>
￭ <FONT> 태그의 형식 ￭ <FONT> 태그의 속성 Html+javaScript ￭ <FONT> 태그의 형식 <FONT COLOR="색 이름" SIZE="크기" FACE="글꼴명"> 문자열 </FONT> ￭ <FONT> 태그의 속성 속성 설명 COLOR 글자의 색을 설정함. 속성 값은 RGB 값이나 색상의 영어 이름을 사용함. SIZE 글자의 크기를 설정함. 숫자 1~7까지의 글자 크기로 설정함. 초기 값은 3이고, -1에서 +3은 상대적인 크기를 뜻함. FACE 글꼴을 설정함.
<PRE></PRE> Html+javaScript 띄어쓰기와 줄 바꿈 태그 태그 이름 역할 <BR> 줄을 바꾸기 위해 사용하는 태그로 키보드의 Enter 키를 입력한 효과가 나타남. 종료 태그를 사용하지 않아도 됨. <P> 문단 나누기를 하는 태그로 줄 바꿈과 동시에 한 줄을 띄워줌. 종료 태그를 사용해도 되고, 사용하지 않아도 됨. <PRE></PRE> 화면에 입력한 그대로 내용이 웹 브라우저 상에서 보이게 하기 위해 사용하는 태그. 종료 태그가 반드시 필요함.
제목 지정하기 <H> 태그 제목 지정 1~6까지 지정할 수 있음 자동으로 글자 스타일이 두껍게 표시됨 <FONT> 태그의 SIZE 속성의 값과는 반대로 크기가 지정 형식 : <H크기 속성=값> 내용 </H크기> 속성 : ALIGN 예제 : <BODY> <H1> H 태그 예제 </H1> <H4> H 태그 예제 </H4> </BODY>
프로그램 2-11
글씨 모양을 바꾸는 태그 Html+javaScript 글씨 모양 태그 이름 설명 이탤릭체 <CITE> </CITE> 이탤릭체로 설정함. <EM> </EM> <I> </I> <VAR> </VAR> <DFN> </DFN> 위첨자 <SUP> </SUP> 위첨자로 설정함. 아래첨자 <SUB> </SUB> 아래첨자로 설정함. 강조글자 <STRONG> </STRONG> 굵은 글씨로 설정함. <B> </B> 밑줄 <U> </U> 밑줄 그은 글씨로 설정함. 타자기체 <KBD> </KBD> 타자기체로 설정함. <CODE> </CODE> <TT> </TT> 조금 크게 <BIG> </BIG> 조금 큰 글씨로 설정함. 조금 작게 <SMALL> </SMALL> 조금 작은 글씨로 설정함. 깜박임 <BLINK> </BLINK> 글자가 깜박이게 설정함. Netscape에서만 지원 가능함. 가운데 줄그은 글자 <STRIKE> </STRIKE> 가운데 줄을 그은 글씨로 설정함.
<HR WIDTH="선길이" SIZE="선굵기" ALIGN="정렬형태" COLOR="색 이름" NOSHADE> Html+javaScript <HR> 태그 활용 <HR WIDTH="선길이" SIZE="선굵기" ALIGN="정렬형태" COLOR="색 이름" NOSHADE> ￭ <HR> 태그의 속성 속성 설명 WIDTH 선의 길이를 설정함. 속성 값은 %나 픽셀 값을 사용함. SIZE 선의 굵기를 설정함. ALIGN 정렬 방식을 설정함. 속성 값 left는 표를 왼쪽으로 정렬, center는 가운데로, right는 오른쪽으로 정렬함. COLOR 선의 색을 설정함. 속성 값은 RGB 값이나 색상의 영어 이름으로 설정함. NOSHADE 수평선의 초기값에 SHADE가 설정되어 3D음영이 나타나는데, 3D음영을 원하지 않을 때 사용함.
문제 설명 메모장을 이용하여 웹 페이지를 만드는 방법을 익히기 위해 다음과 같이 간단한 시를 웹 페이지로 만드시오. Html+javaScript HTML을 이용한 웹 페이지 만들기 문제 설명 메모장을 이용하여 웹 페이지를 만드는 방법을 익히기 위해 다음과 같이 간단한 시를 웹 페이지로 만드시오. 윤동주 님의 시1 계절이 지나가는 하늘에는 윤동주 별 헤는 밤 가을로 가득 차 있습니다. 가을 속의 별들을 다 헤일 듯합니다. 나는 아무 걱정도 없이 가슴속에 하나 둘 새겨지는 별을 내일 밤이 남은 까닭이요, 쉬이 아침이 오는 까닭이요, 이제 다 못 헤는 것은 아직 나의 청춘이 다하지 않은 까닭입니다. 별 하나에 추억과 별 하나에 동경(憧憬)과 별 하나에 쓸쓸함과 별 하나에 사랑과 어머님, 나는 별 하나에 아름다운 말 별 하나에 어머니, 어머니, 별 하나에 시와 한 마디씩 불러 봅니다. 이런 이국소녀(異國少女)들의 이름과, 패(佩), 경(鏡), 옥(玉) 소학교 때 책상을 같이 했던 아이들의 이름과, 벌써 애기 어머니 된 계집애들의 이름과, 프랑시스 짬, 라이너 마리아 릴케, 비둘기, 강아지, 토끼, 노새, 노루, 가난한 이웃 사람들의 이름과, 이런 시인의 이름을 불러봅니다. 어머님 별이 아슬히 멀듯이, 이네들은 너무나 멀리 있습니다. 그리고 당신은 멀리 북간도에 계십니다. 내 이름자를 써보고, 이 많은 별빛이 내린 언덕 위에 나는 무엇인지 그리워 흙으로 덮어 버리었습니다. 부끄러운 이름을 슬퍼하는 까닭입니다. 딴은 밤을 새워 우는 벌레는 그러나 겨울이 지나고 내 이름자 묻힌 언덕 위에도 무덤 위에 파란 잔디가 피어나듯이 나의 별에도 봄이 오면 자랑처럼 풀이 무성할 게외다. 윤동주 님의 시2 십자가 쫓아오던 햇빛인데 십자가에 걸리었습니다. 지금 교회당 꼭대기 어떻게 올라갈 수 있을까요. 첨탑이 저렇게도 높은데 휘파람이나 불며 서성거리다가, 종소리도 들려오지 않는데 괴로웠던 사나이, 십자가가 허락된다면 행복한 예수 그리스도에게 처럼 어두워가는 하늘 밑에 꽃처럼 피어나는 피를 모가지를 드리우고 조용히 흘리겠습니다.
￭ 주어진 파일 "윤동주 님의 시.txt"의 내용을 적절한 형태로 화면에 나타낸다. Html+javaScript HTML을 이용한 웹 페이지 만들기 지시 사항 ￭ 배경 화면의 색을 ADD8E6으로 설정한다. ￭ 주어진 파일 "윤동주 님의 시.txt"의 내용을 적절한 형태로 화면에 나타낸다. ￭ 띄어쓰기와 줄 바꿈 등 문단을 구성하는 태그를 사용한다. ￭ HTML 소스에 주석문을 삽입한다. ￭ 삽입하는 수평선이 너비의 80%가 되도록 설정하고 왼쪽 정렬을 한다. ￭ 제목 글자의 크기를 H4의 크기로 설정한다. ￭ 시 제목의 글자 크기를 SIZE 속성 값 5로 설정한다. ￭ 첫 번째 시의 제목은 파랑색으로 설정한다. ￭ 두 번째 시의 제목은 빨강색으로 설정한다. ￭ 첫 번째 시의 내용은 이탤릭체로 나타낸다. ￭ 두 번째 시의 내용은 타자기체로 나타낸다.
<P> 계절이 지나가는 하늘에는<BR> 가을로 가득 차 있습니다.</P> Html+javaScript 띄어쓰기와 줄 바꿈 태그 <PRE> 별 헤는 밤 윤동주 </PRE> <P> 계절이 지나가는 하늘에는<BR> 가을로 가득 차 있습니다.</P>
윤동주 <SUB>님의 시1</SUB> 윤동주 <SUB>님의 시2</SUB> Html+javaScript 글씨 모양을 설정하는 태그 윤동주 <SUB>님의 시1</SUB> 윤동주 <SUB>님의 시2</SUB> <CITE> ... 생략 ... </CITE> <B> 별 헤는 밤</B> <B> 십자가</B> <U> 윤동주 </U> <CODE> ... 생략 ... </CODE>
<BODY BGCOLOR="#ADD8E6"> <!-- 윤동주 님의 시 하나 --> Html+javaScript 주석문과 수평선 삽입하기 <BODY BGCOLOR="#ADD8E6"> <!-- 윤동주 님의 시 하나 --> <HR WIDTH="80%" ALIGN="left"> 윤동주 <SUB>님의 시1</SUB>
Html+javaScript 모든 단계를 정리하여 완성된 HTML
목록 지정하기 – 기호 목록 <UL> 태그 목록에 대하여 각 항목 앞에 기호를 붙일 때 사용 형식 : <LI 속성=값> 항목 1 <LI 속성=값> 항목 2 <LI 속성=값> 항목 3 </UL> 속성 : TYPE TYPE의 값 : disk (기본) circle square 예제 : <BODY> <UL> <LI> 목록 태그 사용하기 <LI TYPE="disk"> 목록 태그 사용하기 <LI TYPE="square"> 목록 태그 사용하기 <LI TYPE="circle"> 목록 태그 사용하기 </UL> </BODY>
프로그램 2-15 [그림 2-18] ULTag의 실행결과
목록 지정하기 – 숫자 목록 <OL> 태그 목록에 대하여 각 항목 앞에 기호를 붙일 때 사용 형식 : <LI 속성=값 속성=값> 항목 1 <LI 속성=값 속성=값> 항목 2 <LI 속성=값 속성=값> 항목 3 </OL> 속성 : <OL> 태그 - TYPE, START <LI> 태그 - TYPE, VALUE
<OL> 태그와 <LI> 태그 속성 숫자 형식 값 : 1, a, A, i, I
특수 문자 입력하기 특수 문자 입력 엔티티(Character Entities) 를 사용하여 화면상에 표시 캐릭터 엔티티는 시작부분인 ‘&’, 엔티티 이름을 나타내는 ‘#’ (엔티티 이름이나 번호를 사용함), 그리고 끝을 나타내는 ‘;’ 3부분으로 구성됨
다음과 같이 작성하시오. <html> <head> <title>커피 요리</title> </head> <body text="#AA4928" bgcolor=#FFCC99 leftmargin=100 oncontextmenu="return false" onselectstart="return false"> <basefont size=2> <center><font face="서울아나바다M" size=7>커피요리</font></center><p> <font face="서울아나바다M"><h2>핫모카자바</h2> <font size=+1 color=#996666><ul>생크림 위에 초콜릿을 듬뿍 올려 멋스럽게</ul></font></font> <!-- 코딩1 --> <b>재료</b> : 추출한 커피 120cc, 초코시럽 30cc, 휘핑한 생크림 1스푼(20cc 정도) <b>만드는 법 :</b> 우선 컵을 따뜻하게 데워 둔다. 컵에 초코시럽을 넣은 후 끓인 커피를 붓는다. 생크림 한 스푼을 위에 띄운 후, 생크림 위를 다시 초코시럽으로 장식한다. 초코시럽 대신 잘게 다진 초콜릿을 얹어도 볼품있다. <br><br> <font face="서울아나바다M"><h2>카페카푸치노</h2> <font size=+1 color=#996666><ul>진한 에스프레소 커피에 부드러운 우유를 넣어 감미롭게</ul></font></font> <!-- 코딩2 --> <b>재료 :</b> 추출한 커피 100cc, 따뜻한 우유 20cc(또는 생크림 조금), 설탕 2작은술, 시나몬가루 조금 진한 에스프레소 커피를 만들어 두고 컵을 따뜻하게 데운다. 컵에 설탕을 넣은 후 커피를 붓는다. 우유는 작은 냄비에 끓이면서 거품기로 거품낸다. 따뜻한 우유를 커피에 넣고, 거품은 스푼으로 떠내어 컵 위에 올린다. 여기에 시나몬 가루를 적당히 뿌린다. </basefont> </body> </html>