html 수업

*글씨의 모양과 크기 색깔을 결정하는 방법
인터넷 문서에서 글꼴이나 색깔, 크기등을 바꾸고 싶을 때는 다음과 같이 해보세요.

<font color=red size=8 face=궁서>지금 이 글씨는 빨간색 글씨로 크기는 3,글씨모양은 궁서체입니다</font>
이렇게 쓰면 다음과 같이 됩니다

지금 이 글씨는 빨간색 글씨로 크기는 3,글씨모양은 궁서체입니다
 
글씨의 크기를 바꾸고 싶으면 위의
색깔을 바꾸고 싶을 때는 만약 파란색으로 하고 싶으면 color를 blue로 바꿔주면 됩니다.인터넷 문서의 기본이 되는 html(hyper text markup language)이라는 언어가 기본적으로 영어로 되어있기 때문에 영어를 좀 하면 훨씬 쉽습니다. 만약 복잡한 색깔을 표현하고 싶을 때는 색상기호를 사용해야 합니다.컴퓨터에서 사용하는 색깔은 기본적으로RGB(Red,Green, Blue)입니다. 이 세가지 색깔을 적절히 배합하면 온갖 색상이 다 나옵니다. 미술시간에 배웠던 빛의 요소를 생각해 보세요
예를 들면 <font color=123456>무슨 색깔일까요?</font>라고 쓰면 이 글에 있는 123456이라는 숫자중 앞의 두 숫자 12는 R(빨?을 12%사용하라는 말이고 가운데 두 숫자 34는 G(녹색)을
34% 사용하라는 말입니다. 마지막 두 숫자 56은 B(파랑)를 56%사용하라는 말이죠. 그래서 다음과 같은 색깔의

 

 

글씨가 나옵니다

무슨 색깔일까요?

어떤 색갈을 100% 넣고 싶으면 해당색깔에 ff라고 쓰면 됩니다.예를 들면 빨강100%,녹색 30%, 파랑100%로 넣고 싶으면

<font color=ff30ff>이라고 쓰고 그 뒤에 필요한 글씨를 쓰면 됩니다. 이렇게요색깔 예쁘죠? 참, 그리고 이런 용어들을 태그라고 하는데 기본적으로 태그들은 한쌍으로 쓰이고 뒤에 쓸 때는 반드시</앞의 태그>로 닫아줘야 합니다. 그렇지 않으면 앞의 태그가 계속 영향을 미쳐서 문서가 엉망이 됩니다.
글자에 밑줄을 긋고 싶으면 <u>글씨</u>라고 쓰고 글을 쓰면 됩니다.
즉 이렇게 밑줄 그은 글씨
됩니다.
굵은 글씨로 쓰고 싶으면 <b>글씨</b>로 하면 됩니다.
즉 이렇게 됩니다.굵은 글씨

번호없이 글머리 넣고 배열하기 <ul> <li>사과 <li>복숭아 <li>배 <li>포도 <li>멜론 </ul> <br><br><br> <h2>번호 넣고 배열하기 </h> <ol> <li>사과 <li>복숭아 <li>배 <li>포도 <li>멜론 </ol> * 글 아래 위로 작은 글 쓰기
H2
H11
* 사진에 글 풍선 넣기
<img src=사진 주소 alt="설명하는 글">이 때 " "를 쓰지 않으면 띄어쓰기한 앞 까지만 보인다.
줄을 바꿔야 할 경우에는 alt=설명글 1 설명글 2 설명글3 >으로 한다
오늘은 font에 관해서 공부했습니다.
다음 시간에는 배경색깔과 배경그림을 넣는 방법에 관해서 공부하겠습니다.

 

* 그림을 LINK시키는 방법

 

<br> <img src="주소">

 

* 그림의 크기를 조절하는 방법

 

 

<img src="주소" height="원하는 크기의 숫자" width="원하는 크기의 숫자">

 

* 그림에 테두리를 만들려면

 

 

<img src="주소" border="원하는 굵기의 숫자">

* 그림이나 사진의 주소를 아는 방법

 

인터넷상에 떠있는 그림(이미지)은 고유의 주소가 있다. 그 주소는 그림 위에서 마우스 오른쪽을 클릭해보면 속성(등록정보)이라는 것이 있는데 그것을 클릭하면 그 그림의 주소(URL)가 보인다. 그 주소를 복사해서 < img src= 뒤에 붙이면 된다

 

이제 지난 시간에 배웠던

<a href="주소">태그와 이미지 링크 태그를 이용하면 그림을 클릭해서 원하는 사이트로 가는 것도 가능해진다.

 

먼저 선생님의 사진을 클릭하면 선생님의 카페로 가는 방법을 설명해보겠습니다.

 

아래와 같이 쓰면 되지요

 

 

http://blog.daum.net/singingman target="self">

선생님 사진을 클릭하면 선생님 블로그로 갑니다

위의 것을 실제로 한번 만들어볼까요?

 

선생님 사진을 클릭하면 선생님 블로그로 갑니다

* 인터넷 문서에서 줄바꾸기
줄을 바꾸고 싶은 곳에서

<br>이라고 쓰면 줄이 바뀝니다
<br>을 여러번 쓰면 쓰는 만큼 줄이 벌어집니다
*인터넷문서에서 한줄 건너뛰기
한줄 건너뛰고 싶을 때는<p>라고 쓰면 한줄 건너뜁니다. 즉 <br>을 두번 쓴 것과 같은 효과가 납니다.
* 괘선을 그리는 방법

 

<br> <hr size=1 width=150 align=center><p><br> <hr size=10 width=200 align=center noshade><p><br> <hr size=10 width=200 align=center>

hr은 horizontal rule의 첫글자로 이해해라. size는 괘선의 굵기를 나타내고
width는 무엇을 나타낼까? 그림자가 있고 없고의 차이점은 왜 생길까?
실제로 한번 그려볼까?

 

---

 

 

---

 

 

---

* 테두리에 색깔을 넣고 싶다!

 

http://photos.chosun.com/photo/0/1/152/small/152566.jpg border=3 height=100 width=130 bordercolor=red>

실제로 넣어볼까여?

 

 

 

* 표만들기

표에색깔을 넣고 싶을 때는 우리 전에 body에 색깔 넣던 것처럼 이렇게 하면 된다.

<b><table bgcolor="원하는 색이나 RGB기호" height="숫자" width="숫자"><tr><td></b></table>

위의 태그에서 height와 width는 표의 크기를 결정하는 것이니까 잘 조절하면 되겠죠? 원래의 크기대로 하고 싶으면 그 이미지의 속성에 나와있는 크기를 그대로 쓰면 되겠지? 그리고 반드시 </table>로 닫아줘야 다음에 나오는 내용들이 table 안으로 안 들어가겠지?
만약 내용을 table 안에 넣고 싶으면 <tr><td>내용</td></tr> 하고 </table>로 닫으면 되겠져?

 

<tr><td>는 가로 세로를 나타내는 표의 한 내용이라고 우선 알아두고 다음에 표 나누기 할 때 설명하겠다.

 

우선 표에 배경색깔 넣고 그 안에 내용을 담는 것을 한번 해보자.

표 안에 글을 집어 넣는다는 것이 재미있지 않니?

다음은 표에 배경그림을 넣어보자.

표에 배경그림을 넣고 싶을 때는 아래와 같이 하면 되겠지?

 

<table background="이미지가 있는 주소" height="숫자" width="숫자"><tr><td></table>

여기서도 table안에 내용을 넣고 싶으면 다 넣고 </table>을 닫으면 되겠지?

여기다 테두리도 하고싶으면 <>안에다 border="숫자"를 넣으면 되겠지?

이제 실제로 한번 해볼까?

명지 중학교

 

* 음악을 들려주고 싶어요.

다른 사람에게 좋은 음악을 들려주고 싶을 때 그 음악의 주소를 안다면

전에 우리가 링크 사이트 할 때 배웠던 태그

<a href="음악이 있는 주소">노래제목</a>라고 하면 되지요

그런데 배경음악으로 만들어서 시와 함께 들려주고 싶을 때는 다음과 같이 하면 되지요.

<embed src=음악이 있는 주소>그런데 문제는 그 음악의 주소를 어떻게 알 수 있느냐 하는 것인데 인터넷상에 음악을 올리는 사람들이 주소를 감추거나 하면 알 수는 없지만 윈도우 깔 때 같이 깔리는 Windows media player라는 것 있지? (없는 사람은 당장 다운 받아라).이 연주기로 연주되는 음악은 오른쪽에 나와있는 제목줄을 마우스 오른쪽으로 클릭해보면 이 음악의 등록 정보가 있단 말이야. 그 주소를 붙이면 되겠지? 혹은 Real audio player라는 연주기로 나오는 음악도 마찬가지로 알 수 있다.혹시 또 다른 연주기를 아는 사람은 선생님께도 좀 알려주라.하여튼 이렇게 하면 음악의 주소를 알아서 다른 사람을 즐겁게 해 줄 수도 있다는 말씀이야.혹은 소스보기를 이용하든지

* 음악을 계속해서 끝없이 듣고 싶으면 이렇게 해라

<embed src=음악주소 loop=-1> loop=-1 이라고 써주면 컴퓨터 꺼질 때까지 끝없이 음악이 반복된다.

* 창을 열면 저절로 음악이 나오게 하고싶으면 이렇게 해라

<embed src=음악 주소 autostart=true>autostart=true 라는 글만 써주면 창을 열면 저절로 음악이 시작된다. 만약 저절로 시작하는게 싫으면 autostart=false 라고 써주면 된다

* 연주기의 크기를 조정하고 싶으면 이렇게 해라
<embed src=음악 주소 height=30 width=250>이렇게 써주면 연주기의 크기가 결정된다. 더크게 만들고 싶으면 숫자를 키우면 된다

* 연주기를 숨기고 싶으면 이렇게 해라
<embed src=음악주소 hidden=true>hidden=true 라고 써주면 연주기가 숨겨지고 hidden=false 라고 쓰면 연주기가 보인다

* 연주기에서 속성이 안 보일때 보이게 하는 방법
<embed src=음악 주소 enablecontextmenu=1>

* 연주기에 상태(연주시간,정지.재생중.버퍼링등)를 보여주는 bar를 설정할려면
<embed src=음악주소 height=100 width=250 showstatusbar=true>로 하면 된다,즉,showstatusbar=true를 넣어주면 된다는 얘기죠

*** Marquee 태그에 관해 알아보자***

* 기본 사용법

 

<marquee>움직이는 글자를 만들자</marquee>

* 이미지가 움직일 수도 있죠

 

<marquee width="300">←♡--<</marquee><font size="5">{><font>

실제로는 이렇게 된다

←♡--<{>

 

 

http://www.guys.nl/extra/image001.gif>

** 움직이는 방향을 결정하자**

* 오른쪽에서 왼쪽으로 한번만 오고 스톱하자

 

<marquee behavior=slide>오른쪽에서 왼쪽으로</marquee>

실제로는 이렇게 된다

오른쪽에서 왼쪽으로

* 오른쪽 왼쪽으로 왕복하자

 

<marquee behavior=alternate>오른쪽 왼쪽 왕복</marquee>

실제로는 이렇게 된다

오른쪽 왼쪽 왕복

 

<marquee direction="up">위로</marquee>

실제로는 이렇게 된다

위로

 

<marquee direction="down">아래로</marquee>

실제로는 이렇게 된다

아래로

 

<marquee direction="left">왼쪽으로</marquee>

실제로는 이렇게 된다

왼쪽으로

 

<marquee direction="right">오른쪽으로</marquee>
실제로는 이렇게 된다

오른쪽으로
<marquee behavior="alternate" width="300" height="300"><marquee align="center" behavior="alternate" direction="up" width="200" height="300">아래위로</marquee></marquee>

실제로는 이렇게 된다

아래위로

* 스크롤 속도를 결정하자

 

<br> <marquee scrolldelay="100">빠르니 느리니?</marquee><p><br> <marquee scrolldelay="300">아까보다 어떻니?</marquee><p><br> <marquee scrolldelay="1000">엄청 느리지?</marquee>

실제로는 이렇게 된다

빠르니 느리니?

아까보다 어떻니?

엄청 느리지?

* 스크롤 속도 결정의 또 다른 방법

 

 

<br> <marquee scrollamount="3">거북이</marquee><br> <marquee scrollamount="6">토끼</marquee><br> <marquee scrollamount="9">치타</marquee>

실제로는 이렇게 된다

거북이
토끼
치타

* 반복횟수를 결정하자

 

<br> <marquee loop="3">3번만 움직이자</marquee><br> <marquee loop="5">5번 움직이자</marquee>

실제로는 이렇게 된다

3번만 움직이자
5번 움직이자

* 배경색을 넣자

<br> <marquee bgcolor="00ff00">녹색배경이네</marquee><p><br> <marquee bgcolor="0000ff">< font color=red>파란 바탕에 빨강색 글씨네</marquee>

실제로는 이렇게 된다

녹색배경이네

파란 바탕에 빨강색 글씨네

 

 

* 마키가 스크롤되는 가로 세로의 크기를 만들자

 

<br> <marquee bgcolor=ffff00 width="600" height="250">< font size=6> 가로 세로의 크기를 결정하자</font></marquee>

실제로는 이렇게 된다

가로 세로의 크기를 결정

* 반짝반짝하는 스크롤

 

<br> <marquee behavior=alternate width=1100 scrollamount=1000> ★★★반짝반짝★★★</marquee>

실제로는 이렇게 된다

★★★반짝반짝★★★
* 도리도리하는 스크롤

 

<br> <marquee behavior=alternate width=30><font color=red>(@^.^@)</font></marquee>

실제로는 이렇게 된다

( @^.^@)

 

* 멋있는 시를 써보자
배경화면에 사진을 넣고 시가 서서히 올라온다면 보기 좋겠지?

거기다 배경음악까지 있다면 금상첨화일테고, 한번 해보자

먼저 시를 쓸 배경표를 만들어야지 지금까지 배운 표만들기 실력을 총동원해서 멋있는 배경화면이 들어간 표를 만들자

배경음악을 넣으려면 아래와 같이 하면 된다

즉 이렇게 되지

그리고 표와 마키 태그를 이용하면 되겠지?

<br> <table background="이미지가 있는 주소" height="원래 크기" width="원래크기" border=3 bordercolorlight="00ff00" bordercolordark="ff0000"><tr><td><marquee direction=up scrollamount=1.5><font face=신명조 color="950095" size=3><br> 향수<p><br> 넓은 벌 동쪽 끝으로 옛이야기 지줄대는 <br><br> 실개천이 휘돌아 나가고 <br><br> 얼룩백이 황소가 헤슬피 금빛 게으른 울음을 우는 곳<br><br> 그곳이 차마 꿈엔들 잊힐리야 우우우우 <br><br> </font></marquee></td></tr></table>

실제로 해보면 이렇게 되지

 

향수 넓은 벌 동쪽 끝으로 옛이야기 지줄대는 실개천이 휘돌아 나가고 얼룩백이 황소가 헤슬피 금빛 게으른 울음을 우는 곳 그곳이 차마 꿈엔들 잊힐리야 우우우우

<br> <!--<br> h1 {font-family:궁서; size:30pt; color=olive}<br> h2 {font-family:굴림; font-size:20pt; color=green}<br> h3 {font-family:돋움; font-size:12pt; color=purple}<br> -->

html의 궁서 글꼴보여주기

굴림 글꼴

ehednarmfrhf

뭐라카노

• fldf;dkkdldk
• 
  
  
• dkret;g'fgdf;gk
• 
  
  
• ektldg;dg;fg;afg
• 
  
  

 

1. jddkgld
   
   
2. gliteotddfg
   
   
3. dlkjfldkg;
4. 1장 나의 생애

2장 나의

 생애와 사랑

 

[본문내용]

1장 나의 생애

 나는 참 행복했다

사랑하는 사람이 있기 때문에

나의 생애와 사랑

사람이 누구를 사랑하느다는 것은 얼마나 아름다운가?
삶의 의미를 알게?구고

음악 태그는 아래와 같습니다

＜embed src= 음악 주소＞

embed 는 음악을 삽입하라 라는 명령어 이지요
src 는 그 경로를 말하고요


여기에 몇가지가 추가될 수도 있습니다

첫번째, 음악을 자동으로 들을 것인가 수동으로 들을 것인가

a. 자동으로 들을려면.... autostart=true
b. 수동으로 들을려면.... autostart=false

두번째, 노래바를 감출 것인가 노출 시킬 것인가

a. 감출 경우..........hidden=true
b. 노출 시킬 경우.....width=100 height=20
(노래바의 크기임)

세번째, 한번만 들을 것인가,날 새도록 들을 것인가

a. 제한적으로 들을 때......loop=듣고 싶은 수
b. 날 새도록 듣고 싶을 때..loop=true

네번째, 통상적으로 볼륨은 0 으로 하세요

a. 볼륨.....volume=0

그러면 음악 태그를 다시 만들어 볼까요

*자동으로 듣고 노래바는 감추고 밤새도록 듣고 싶을 때


＜embed src=음악주소 autostart=true hidden=true loop=true volume=0＞