|
★한국복지정보통신 경기지부 PC교육장 -교육용
▶tag 공부따라하기 --컴퓨터 문자 공부
HTML 문서는 tag 라는 문법으로 이루어 진다.
Ⅰ.학습 안내와 방법
|
1.tag 공부 요약 열기
http://bicho3.com.ne.kr 주소란에 입력하고 엔타 하면 첫 화면이 열린다. 왼쪽 메뉴에서 tag공부 따라하기 클릭하면 내용이 열린다.
2.학습요령과 방법
tag 마다 아래와 같은 양식으로 ‘기본’을 익히고, ‘뜻’을 익히고,‘실습’을 한다.
3.학습과 실습
기본을 학습하고, 뜻을 이해하고, 실습을 합니다. 실습란에 <tag 실습내용>을 (복사)하여 (HTML) 을 열고 <body>와 </body>사이에 붙이기를 한 다음, 미리보기를 클릭하면 나타난다.
4.요점 정리
요점정리는 표 안에 수록하였고, 요점정리 표시는 #로 표시 하였다. ‘#요점정리’ 는 꼭 기억해 두자.
tag 마다 뜻을 이해하면 기본의 짜임을 알고, tag 를 꼭 암기해야 한다. 3~4회 기록을 하면 암기된다.
5.tag의 종류
글자 tag, 그림 tag, 음악 tag, 동영상 tag, 마퀴 tag, 링크 tag 등 이 있다. |
Ⅱ.실제
1.글자 tag
|
글자 tag
|
기본
|
<font size=20 color=blue face=md솔체>사랑해요</font> |
|
뜻
|
pre ;글형식 그대로. font ;글자. size ;크기 color ;색. face ;글씨체. |
|
실습
|
★실습 ; 복사하여 붙여넣기
1.<font size=5 color=blue face=md솔체> 한국복지통신 경기지부</font>
2.<font size=4 color=red face=md솔체> 한국복지통신경기지부 </font>
3.<font size=3 color=green face=md솔체>
한국복지통신경기지부</font> |
★실습하기
1)기본을 html 을 열고 한자 한자 입력하거나 또는 드리그 복사하여 html 열고
붙이기를 하고 미리보기를 클릭하면 글씨가 나타난다.
2)실습 1 소스를 드리그 복사하여 html 열고 붙이기를 하고 미리보기를 클릭하면 나타난다.
3)실습 2. 실습 3,도 복사하여 html 열고 붙이기를 하고 미리보기를 클릭하면 나타난다.
4)미리보기에서 실습 1, 2, 3, 의 글자 크기를 비교해보자. 또 color 도 비교해보자.
|
#요점정리
<font size=20 color=blue face=md솔체>사랑해요</font> 기억해 두자.
=오른쪽을 변화시켜보자. 즉 size=10 으로, color=red 로, face=궁체로 바꾸고 미리보기를 해보다. |
나. 그림 tag
★학습과 실습하기
1.위 기본소스 복사하여 나모 html에 붙이기한다.
2.아래 그림에서 우/마 -속성 -주소 복사해서 나모 html에 붙이기하자
3.미리보기하면 그림이 나온다.
4.다른 그림도 같은 방법으로 해보자.
|
#요점정리
<img src="그림주소" width=600 height=450> 를 기억해 두자. width=300 으로 height=200 으로 바꿔 보자. 그림의 크기가 변하였음을 알수 있다. |
3.음악 tag (수강생 교육용)
|
음악tag
|
기본
|
1. <embed src="음악주소">
2. <bgsound src="음악주소"> |
|
뜻
|
embed ;음악. 동영상
bgsound ;배경음악
hidden ;재생기 false ;재생기 생성 loop;재생횟수
autostart ;자동 출발 infinite ;무제한 true ;통과
음악 확장자 ; .mp3 .wma .mid .asx
|
|
실습
|
음악 소스 기본 활용
|
1.기본<embed src="★" autostart="true" hidden="false" loop="-1" volume="0">
2.재생기위에서 우/마 -속성-주소 복사해서 기본음악 소스 중 ★삭제하고, 그 자리에
붙이기 후 미리보기하면 음악이 나온다. |
★ 실습; ㅡmidi 음악
1.갈대의 순정
2. 목포의 눈물
3.울고넘는 박달재
1.갈대의 순정
<embed src="http://bicho3.com.ne.kr/갈대의 순정.mid" autostart="true" hidden="false" loop="-1" volume="0">
2.모포의 눈물
<embed src="http://bicho3.com.ne.kr/목포의 눈물.mid" autostart="true" hidden="false" loop="-1" volume="0">
3.울고넘는 박달재
<embed src="http://bicho3.com.ne.kr/울고넘는 박달재.mid★" autostart="true" hidden="false" loop="-1" volume="0">
|
★학습과 실습하기
1.기본<embed src="★" autostart="true" hidden="false" loop="-1" volume="0">
2.재생기위에서 우/마 -속성-주소 복사해서 기본음악 소스 중 ★삭제하고, 그 자리에
음악주소를 붙이기 후 미리보기하면 음악이 나온다.
3)html 을 열고 hidden=false를 hidden=true 로 바꿔보자 재생기가 나타나지 않는다.
hidden=false은 재생기를 나타내는 명령어이다.
4)html 을 열고 loop=-1 계속 음악이 흐른다. loop=-1을 loop=1로 바꿔 넣어보자.
한번 음악이 나오고 음악이 나오지 않는다. 횟수를 나타내는 명령어이다.
|
#요점정리
<embed src="음악주소" hidden=false loop=-1>은 음악 tag의 기본이다. 음악 주소를 입력하고,
hidden=true loop=1 로 바꿔보자. 재생기가 없어 졌음을 알 수 있다. 재생횟수는 1번으로 음악소리가 끝남을 알 수 있다. |
4. 동영상 tag
★학습과 실습하기
1)<embed src="동영상 주소" width=600 height=500>은 동영상의 기본이다.
“동영상 주소”를 삭제하고, 을 입력하고 미리보기를 해보자. 동영상이 뜰 것이다.
|
#요점정리
1.<embed src="동영상 주소" width=600 height=500> 은 동영상의 기본 태그이다.
‘동영상 주소’를 삭제하고, 그 자리에 http://bicho3.com.ne.kr/tyurip.wmv 을 복사하여 붙이기를 해보자. 동영상이 뜬다.
2.동영상의 기본 <embed src="동영상 주소" width=600 height=500>를 기억해 두고 활용하자. |
5. 마퀴 tag
|
마퀴 tag
|
기본
|
<marquee>안녕하세요</marquee> |
|
뜻
|
기본속성들 설명
scrollamount 빠르기지정.(숫자가 높을수록 빨라짐^^;)
scrolldelay 흔들리는 속성
direction 방향설정 ( left, right, up, down )
behavior=alternate 좌 우,상 하 왕복
loop 숫자지정(예: loop="2" 를 했을경우 두번 실행됨.)
width 가로 왕복 지정 height 세로 왕복 지정 |
|
실습
|
★실습 ; 복사하여 붙여넣기
1.<marquee behavior=alternate>글자가 좌우로 왕복*^^* </marquee>
2.<marquee direction="left">이건왼쪽이네요^^ </marquee>
3.<marquee direction="right">이건 오른쪽이구여^^ </marquee>
4.<marquee direction="down">요번에는 아래로? </marquee>
5.<marquee direction="up">요번에는 위로</marquee>
|
★실습하기
1)실습 1의 소스를 드리그 복사하여 html 을 열고, 붙이기를 하고 미리보기를 해보자. 어느 쪽으로 움직이는 가? behavior=alternate 는 왕복으로 움직이는 명령어이기 때문이다.
2)실습 2의 소스를 드리그 복사하여 html 을 열고, 붙이기를 하고 미리보기를 해보자. 어느 쪽으로 움직이는 가? direction="left"는 왼쪽으로 움직이는 명령어이기 때문이다.
3)실습 3의 소스를 드리그 복사하여 html 을 열고, 붙이기를 하고 미리보기를 해보자. 어느 쪽으로 움직이는 가? direction="right"오른쪽으로 움직이게하는 명령어이기 때문이다.
4)실습 4의 소스를 드리그 복사하여 html 을 열고, 붙이기를 하고 미리보기를 해보자. 어느 쪽으로 움직이는 가? direction="down" 은 아래로 움직이게 하는 명령어이기 때문이다.
5)실습 5의 소스를 드리그 복사하여 html 을 열고, 붙이기를 하고 미리보기를 해보자. 어느 쪽으로 움직이는 가? direction="up" 은 위로 움직이게 하는 명령어이기 때문이다.
|
#요점정리
1.<marquee>안녕하세요</marquee> 는 마퀴 tag 의 기본이다. <marquee 옆에 direction=left 를 넣어보자 왼쪽으로 움직임을 알 수 있다. direction=right 를 입력 해보자. 오른쪽으로 움직임을 알 수 있다. direction 은 방향을 나타내는 명령어임을 알 수 있다.
2.마퀴의 기본 <marquee 옆에 behavior=alternate 를 입력해 보자. ‘안년하세요’ 라는 단어가 왔다 갔다함을 알 수 있다.
behavior=alternate 은 왕복하는 명령어임을 알 수 있다.
3. <marquee 옆에 scrollamount=1을 넣었다가 scrollamount=10 으로 바꿔 입력해 보자. 숫자가 크면 속도가 빠름을 알수있다.
4.#요점정리 내용을 실습을 자주하여 기억하고 활용하자. |
★글이 그림 위로 올라가는 소스
실습 ; (뜻을 알고 소스를 읽을 줄 알아야한다.)
1.복사하여 붙여넣기하고, 글은 다른 글로 대입해 보기
2. 그림주소도 다른 것으로 대입해 보기
|
글이 그림 위로 올라가는 소스
<table background=http://bicho3.com.ne.kr/002-2.gifwidth=518 height=362 border=10>
<tr><td>
<marquee direction=up scrollamount=1>
<font color=white size=4><center>
<b>
제목: 홀로서기 1 <br><br>
지은이 : 서정윤<br><br> 기다림은<br>
만남을 목적으로 하지 않아도 좋다.<br>
가슴이 아프면<br>
아픈 채로,<br>
바람이 불면<br>
고개를 높이 쳐들면서,<br>
아득한 미소.<br>
</b></center> </font> </marquee> </td></tr></table>
|
|
고시조
제목 : 가마귀 검다하고
가마귀 검다하고 백노야 웃지마라
겉이 검을들 속조차 검을소냐
아마도 겉희고 속 검은손 너뿐인가 하노라 |
|
제목 : 검으면 희다하고
검으면 희다하고 희면 검다하네
검거나 희거나 몰타하리 전혜없다
찰하로 귀막고 눈감아 듣도 보도 말리라 |
6.링크 tag
1) <a href="링크 시킬 주소">여기를 누르세요.</a> 는 링크 tag 이 기본이다. 기본을 복사하여 html창을 열고 붙이기를 한다음,
2) ‘링크 시킬 주소’를 삭제하고, 연결시킬 주소를 그 자리에 입력하고 미리보기하면 ‘여기를 누르세요’ 뜬다. ‘여기를 누르세요’ 를 클릭하면 연결한 화면이 뜬다. 이것이 링크 tag 이다.
★★slide 동영상 만들기
1.사이트에 들어가기
주소: http://www.slide.com :주소 복사 주소창에 붙이기
2.새 슬라이드 만들기는 4파트로 나뉘어 있다. (구조 설명)
가. 미리보기 창
나. 디자인 선택하는 창
다.select image 눌러 그림 가저오기와 글자 입력
라.취향에 맞는 쑈 선택하기 ---스타일. 스킨. 주제. 등 각각 눌러 움직임 살펴보기
3.그림 삽입
또는
위와 같은 탭을 눌러 그림을 가저온다. 그림 아래에 글씨를 쓰기도 한다.
위와 같은 탭을 눌러 작업장으로 업로드한다.
★자막 넣기
가.그림아래 숫자를 삭제하고 글을 입력한다. 크릭하면 숫자가 없어진다
나.크기를 선택: 색깔을 눌러 글자색 선택, 배경을 눌러 글자배경색을 선택.
다.슬라이드쑈 이름을 눌러 이름을 입력한다.
4.취향에 맞는 슬라이드쇼
가.아래와 같은 스타일탭을 눌러 스타일 한가지만 선택하기
(생략하는것이 좋다)
스타일-------------------------------
나.아래와 같은 스킨탭을 눌러 스킨 한가지만 선택하기
스킨---------------------------------
다.아래와 같은 주제탭을 눌러 주제를 한가지만 선택한다.
주제-------------------------------
라.아래와 같은 music탭을 눌러 music한가지만 선택하기
Music/Video ------------------------------
마.아래와 같은 배경탭을 눌러 검정색을 다시 눌러 배경색한가지만 선택하기
배경 -------------------------------
바.아래와 같은 Effects탭을 눌러 효과를 선택한가지만 선택하기
Effects -------------------------------
|
사.아래와 같은 크기탭을 눌러 크기를입력하기-
(크게하기는 필수)
크기 : 클릭 ----------------------
폭:600 높이:500 최신판 클릭하면 화면이커진다. |
아.아래와 같은 개인정보 탭을 눌러 공개. 비공개 한가지만 선택하기
개인정보 -------------------------------
자.속도를 클릭하여 빠른. 중간. 느린 중하나를 선택한다.
5. (복사)저장하기를 클릭한다.
가.저장을 클릭하면 저장이 되면서 소스가 나온다.
나.소tm를 클리하면 불럭이된다. ctrl + C 하면 복사가 된다.
6. (붙이기)편지쓰기 창에 HTML을 눌러 붙이기(ctrl+v)하고 미리보기를 한다. 끝 | 
