HTML의 정의 HTML이란 [Hyper Text Markup Language]의 약자로 하이퍼넥스트(Hypertext) 기능을 가진 문서를 만드는 언어를 말합니다. 쉽게 말해서 홈페이지를 만드는 [프로그래밍 언어]라고 할 수 있습니다. 홈페이지를 만든다는 것은 HTML 규칙에 맞는 파일을 만든다는 뜻입니다. 요즈음은 [나모 웹에디터]나 [프론트페이지]와 같은 웹에디터가 있어서 홈페이지를 쉽게 작성할 수 있습니다. 테그(Tag)의 정의 태그는 HTML 문서의 기본 바탕으로 HTML 문서를 만들기 위한 명령어입니다. 테그는 “<>”로 둘러싸여 있으며, 다른 내용들과 구별됩니다. 태그는 시작과 끝이 한 쌍을 이루어 사용하고 명령의 끝에는 “/”가 붙습니다. 즉 “<태그 명령어>내용</태그 명령어>”와 같은 형태가 됩니다.
테그 기본기 익히기 1. 메모장을 이용하여 태그를 직접 입력하여 HTML 문서를 만들어 봅니다. ☞ 메모장 실행방법 ◉ 윈도우 화면 좌측 하단의 [시작] 단추를 누르고 [모든 프로그램]→[메모장] 실행 ◉ [시작]→ [실행]→ [notepad]→ [확인] 클릭 또는 [엔터] 키를 눌러 실행 1.1. 메모장을 실행하고 다음과 같이 입력합니다. 1.2. [파일]→ [저장] 메뉴를 선택합니다. 1.3. 저장 위치를 본인의 폴더나 바탕화면으로 하고 파일 형식을 [모든 파일]로 변경한 후 파일 이름을 [test.html]이라고 입력하고 [저장]단추를 클릭합니다. 1.4. 본인의 폴더나 바탕화면에 만들어진 아이콘을 더블 클릭하면 웹브라우저가 실행되고 웹페이지가 표시됩니다. 2. 태그를 이용하여 줄 바꾸기와 문단 나누기를 연습하겠습니다. ① 줄만 바꾸어 주는 태그는 <BR> 태그로서 쌍으로 이루어지지 않고 줄을 바꾸고 싶은 위치에 <BR>태그를 단독으로 사용합니다. <TIP> <BR> 태그는 <Shift>+<Enter>와 같은 효과를 같습니다. ② 문단을 나눌 때에는 <P>~</P> 태그를 사용하여 한 문단을 이루게 됩니다.
2.1. 메모장을 실행하여 [파일]→ [새로 만들기]메뉴를 실행하고 다음과 같이 입력합니다.
2.2. 바탕화면에 [test.html]이라는 파일명으로 저장합니다. 2.3. 바탕화면에 만들어진 아이콘을 더블 클릭하여 확인을 합니다. 3. 태그를 이용하여 아래와 같이 제목 글자를 꾸미는 연습입니다.
3.1. [메모장]에서 다음과 같이 입력합니다.
3.2. [파일]→ [저장] 메뉴를 실행하고 바탕 화면에 [font01.html]이라고 파일명으로 저장합니다. 3.3. 바탕 화면에 만들어진 4. 태그를 이용하여 글자를 꾸미기 연습 ① 글자를 굵게 하려면 <B>내용</B> 태그를 사용합니다. ② 글자를 기울어지게 하려면<I>내용</I> 태그를 사용합니다. ③ 글자에 밑줄을 그으려면 <U>내용</U> 태그를 사용합니다. ④ 글자 크기를 지정하려면 <FONT SIZE="숫자“>내용</FONT> 태그를 사용 ⑤ 글자에 색을 넣으려면 <FONT COLOR="색상명“>내용</FONT> 태그를 사용 4.1. 다음과 같이 입력합니다.
4,2. [파일]]→ [저장] 메뉴를 실행하고 파일 형식을 [모든 파일]로 한 후 파일 이름을 [font02.html]로 하여 바탕화면에 저장합니다. 4.3 바탕화면에 생성된 아이콘을 더블 클릭하여 확인합니다. ※ 알아 두셔야 할 사항 빨강색 : red(#FF0000) 주황색 : Orange(#FF7F00) 노랑색 : yellow(#FFFF00) 초록색 : Green(#009900) 파랑색(청색) : blue(#0000FF) 보라색 : Purple 검정색 : black(#000000) 남색 : Indigo(#082567) 녹색 : #00FF00 연두색 : Yellow Green(#66CC00) 흰색 : white(#FFFFFF) 밤색 : maroon 은색 : silver 회색 : gray(#808080) 자주색 : purple 짙은 감색 : navy 분홍색 : pink(#FF3399) 갈색 : brown(#964B00)
5. 문단 정렬하기 연습 ☞ 문단을 정렬하는 태그는 <P> 태그 안에 입력합니다. 정렬 방법은 left(왼쪽), center(가운데), right(오른쪽) 중 하나를 사용. 예 : <P ALIGN=정렬방법>내용</P> <html> <head> <title>문단 정렬하기 연습</title> </head> <body> <P ALIGN=left>왼쪽 정렬</P> <P ALIGN=center>가운데 정렬</P> <P ALIGN=right>오른쪽 정렬</P> </body> </html>
▶ <align.html>로 저장하면 됩니다.
6. 태그로 링크 걸기 연습 ☞ ① <a>,</a> 태그는 하이퍼텍스크로 지정될 텍스트를 표시하기 위해 사용된다. 즉 <a>태그 와 </a> 태그 사이에 위치한 텍스트는 하이퍼텍스트로 지정된다. ② <a> 태그는 name나 href의 둘 중 하나는 반드시 포함하고 있어야 한다. ③ <a href="목적지 즉 링크시킬 주소">링크를 걸어줄 글자</a> ④ <a href="mailto:자신의 인터넷 주소">하이퍼텍스트 문자열</a> ⑤<a name="앵커 이름">링크를 걸어줄 글자</a> 주위: 앵커 이름은 자유롭게 지정할 수 있지만 한 HTML 문서에서는 이름으로 두 개의 앵 커를 지정할 수 없습니다. <실습 예> <link.html>로 저장하면 됩니다.
7. 홈페이지의 기본 글자색과 배경색을 지정하는 태그 연습 ☞ ① 문서의 기본 배경색 지정 : <body bgcolor="색상“> 색상은 영어로 색명을 쓰거나 [색 코드]로 대신합니다. ② 문서의 기본 글자색 지정 : <body text="색상“> 색상은 영어로 색명을 쓰거나 [색 코드]로 대신합니다. <color.html>로 저장하면 됩니다.
8. 동적인 글씨 나 이미지 태그 연습 ☞ ① 태그는 <marquee> </marquee>로 이루어진다. ② <marquee scrollamount=5 direction=left/right/up/down behavior=alternate width=50 height=10>
<marquee.html>로 저장하면 됩니다.
9. 웹 문서에 음악 재생기 삽입하기 ☞ ① 태그는 <embed src= "음악의주소"> 나 [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-bgsound src="음악의 주소"> ② <추가기능 은 hidden=true loop=-1 autostart=false> * [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-bgsound 태그는 배경음악을 넣을 때 사용하는 태그로 문서가 열릴 때 자동으로 음악이 재생되지만 재생기가 보이지 않으므로 사용자가 재생하거나 정지할 수는 없어요. * embed 태그는 웹문서에 삽입되므로 사용자가 재생하거나 정지할 수 있고 소리도 조절할수 있습니다.
<music.html>로 저장하면 됩니다.
10. 홈페이지에 이미지 넣는 태그 연습 ☞ ①<img> : 이미지를 삽입하는데 사용하는 태그 ② src 요소 : 그래픽 파일의 경로를 지정한다. 예를 들어 HTML문서와 같은 디렉토리에 있 는 plate01.gif를 사용하려면 <img src="plate01.gif">와 같이 정의하면 된다. scr 요소는 반드시 지정해야 한다. ③ border 요소 : 이미지에 테두리를 주고 싶을 경우 테두리를 픽셀 단위로 지정합니다. 이 요소는 반드시 지정할 필요는 없으며 지정되지 않으면 테두리는 만들어지지 않는다. ④ align 요소 : 그래픽을 뒤에 이어지는 본문과 결합하는 방법을 결정한다. 지정할 수 있는 옵션으로는 left, right, middle, bottom이 있습니다. 브라우저에 따라 지원되지 않는 옵 션도 있으니 주의해야 합니다. << 사용 예>> <img src="그래픽 파일의 경로" align=정력 방법 border=테두리 두께 alt="대체 문자열" hspace=거리 vspace=거리> <<이미지 사용상의 요점>> 이미지는 가능하면 640X480 해상도가 적합합니다. 파일 크기가 지나치게 크면 브라우 저 윈도우를 넘쳐서 스크롤바로 조정하면서 이미지를 보아야 하는 불편이 따르며 화면 올리는데도 시간이 걸려서 불편합니다. |
'커피향,삶의향 글' 카테고리의 다른 글
| [스크랩] 현대기아차, 유럽에 스팅어는 팔고 G70은 안 파는 이유는? (0) | 2018.04.28 |
|---|---|
| [스크랩] [오늘의 운세] 4월 27일 금요일 (음력 3월 12일 己丑) (0) | 2018.04.27 |
| [스크랩] 松栢 盆栽 (1) (0) | 2018.04.27 |
| [스크랩] 컴퓨터 바로알기 총 복습 (0) | 2018.04.16 |
| [스크랩] 올바른 PC의 선택 (0) | 2018.04.16 |