HTML 1 멀티미디어 저작 도구 I (드림 위버 CS3)
홈페이지 제작 과정 사이트 주제와 메뉴 결정 홈페이지 기획서 작성 홈페이지에 필요한 이미지, 정보 수집하기 홈페이지 레이아웃 구상하기 시나리오 작성 그래픽 프로그램에서 웹디자인 하기 웹 에디터로 HTML 문서 제작 하기 최종 검사한 후 인터넷 계정에 등록하기 홈페이지완성
HTML 이란 HTML(Hyper Text Markup Language) 용어 정리 주)INVENTORNICS 노창배 2018-11-22 HTML 이란 HTML(Hyper Text Markup Language) 월드 와이드 웹(World Wide Web)을 위한 하이퍼텍스트(Hypertext) 문서를 작성하는 언어. 브라우저를 통하여 사용자에게 보여지는 문서의 내부 형식을 규정하는 언어 HTML 문서는 문서의 내용과 이를 둘러싼 태그로 그 형식을 정한다. 웹페이지 문서는 “*.html”, “*.htm”, “*.shtml” 확장자 사용 용어 정리 Hyper Text : 한 문서 안의 특정 단어나 그림에 또 다른 문서가 연결된 형태 Hyper Link : 특정 단어나 그림에 또 다른 문서나 그림을 꼬리에 꼬리를 물고 연결하는 것 Markup Language : 문서를 작성할 때 각종 HTML 태그를 사용하여 명령을 주는 언어 태그 : 특정한 기능이나 모양 등을 정의하기 위한 꼬리표 주)INVENTORNICS 노창배
HTML 로 작성된 문서를 네티즌들이 보기까지 자신의 컴퓨터에서 홈페이지 작성 홈페이지 파일을 서버에 올린다. 인터넷에 접속하여 홈페이지 주소를 입력
HTML 기본 구조 <HTML> <HEAD> <TITLE> 웹 문서의 제목 </TITLE> </HEAD> <BODY> 웹 문서의 내용 </BODY> </HTML> <HTML>: HTML문서임을 명시 <TITLE>: 브라우저의 바에 나타나는 문서의 제목을 명시 <HEAD>: 문서에 관해 브라우저에 알릴 정보 <BODY>: 문서의 실제 내용부분을 기술
HTML 태그의 특성 대문자와 소문자 구분이 없다 웹서버의 운영체제가 UNIX 일 때 대/소문자 구별 파일명은 대/소문자를 구분하여 다른 파일로 인식 <태그> </태그>의 한 쌍으로 구성 <HR> <BR> <P> 등 쌍을 이루지 않는 태그도 있음 여러 개의 태그를 사용할 때는 반드시 포함관계를 이루어야 함 시작 태그 : <태그 이름> 끝 태그 : </태그 이름> 시작 태그와 끝 태그 사이에 문서 내용이 오며, 다른 태그들도 포함 가능. 시작 태그 안에 ' 속성 이름="속성값" '의 쌍들로 속성을 지정. <HTML> <HEAD> <TITLE>….. </TITLE> </HEAD> <BODY> ….. </BODY> </HTML> 포함관계 교차된 관계 바른 사용법 잘못된 사용법
HTML 문서 작성 예 실습 1: 아래와 같이 태그를 이용하여 문서를 작성 한 후 hpage1.html로 저장
HTML 문서 저장 파일 다른 이름으로 저장 “홈페이지” 폴더를 만듦 파일 이름에 “hpage1.html” 이라고 입력 ”저장” 버튼 클릭 파일 저장을 위한 폴더 파일명 : hpage1.html 새 폴더 만들기 TIP> 저장할 파일 이름의 주의사항 영문, 숫자,’-” 기호의 조합으로 사용 특수문자나 한문, 한글 이름은 되도록이면 피한다.
작성한 HTML 익스플로러에서 불러오기 인터넷 익스플로러 실행 파일 열기 “찾아보기” 버튼 작성한 문서 클릭 열기 혹은 홈페이지 폴더에서 더블클릭
결과 확인 <TITLE> 과 </TITLE> 사이의 내용 <BODY> 와 </BODY> 사이의 내용
문서 배경 문서 전체에 배경 색상, 배경그림, 글자색상, 링크색상을 결정 형식 : <body 속성=값 > Bgcolor =단색을 배경으로 설정 (색상 표현은 RGB( #ff00ff ) 코드로 표현 Background = 파일 경로 및 그림파일명 Text= 전체 글자 색상 결정 Link= 하이퍼링크 색상 결정 Vlink= 방문한 링크색상 결정 Alink= 링크를 선택할 때의 색상 결정 색상 표기법 영문의 색상명, RGB 코드값 R(red) 2자리, G(green) 2자리, B(blue) 2자리 총 6자리로 구성 HTML 문서에서 색상을 표현하는 방식은 영문의 색상명, 16진수 RGB 값 2가지가 있다. 16진수 표기법은 RGB표기법 이라고도 하는데, R(red) 2자리, G(green) 2자리, B(blue) 2자리 총 6자리로 구성 칼라 영문명 16진수 Black #000000 Green #008000 Silver #C0C0C0 Lime #00FF00 Gray #808080 Olive #808000 White #FFFFFF Yellow #FFFF00 Maroon #800000 Navy #000080 Red #FF0000 Blue #0000FF Purple #800080 Teal #008080 Fuchsia #FF00FF Aqua #00FFFF
배경 바꾸기 Body-back.html Body-back1.html
링크 색상 조절 실습 : 메모장에서 작성한 뒤 body-link.html 로 저장 Body-link.html
줄 바꾸기 HTML에서는 엔터(Enter)와 탭(Tab)을 무시하고 하나의 공백(space)로 처리하며, 연속된 공백을 하나의 공백으로 처리하므로 줄을 바꾸기 위해서는 별도의 태그를 사용 <BR> : 문단 내에 간단하게 공백 줄 없이 줄 바꿈하는 경우 사용 실습: 메모장에서 작성한 뒤 br.html로 저장 br.html 웹페이지의 정보 전달을 위한 가장 기본적인 요소는 텍스트라고 할수 있습니다. 웹페이지의 텍스트를 꾸미기 위하나 여러 태그들을 사용하는 방법과 목록으로 내용을 정리하기 위한 목록 태그, 웹페이지 화면을 적절히 분할 할 수 있는 수평선 태그를 사용하는 방법에 대해서 알아보자.
문단 바꾸기 <P> : 문단 단위로 줄을 바꿈 하고자 할 때 사용 형식 : <P align =”정렬”> 내용물 </P> align =“left, right, center”의 속성값을 사용 실습: 메모장에서 작성한 뒤 p.html로 저장 p.html
문서 제목설정 문서의 헤더 문서에서 제목에 해당하는 문자열을 표시 형식 : <Hn align =정렬>...</Hn> N: 1~6사이의 숫자로 할당 <H1> ~ <H6>가 있으며 숫자가 작을 수록 글씨 크기가 커지며, 한 줄을 차지 즉 <H1>이 최대, <H6>이 최소 align = Left/center/right 실습: 메모장에서 작성한 뒤 hn.html로 저장 hn.html
글자 꾸미기 태그-1 글자의 크기 결정 글자 크기를 조절하는데 사용 형식 : <FONT SIZE="n">...</FONT> n은 1~7까지이고 1일때 크기가 가장 작음 실습 : 메모장에서 작성한 뒤 fsize.html로 저장 fsize.html
글자 꾸미기 태그-2 글자 색깔의 결정 형식 : <FONT COLOR="#16진수 색 코드">...</FONT> RGB의 방식으로 표현 R, G, B 모두 0~255 까지의 단계가 가능하며 두 자리의 16진수로 표현 예) 빨간색 : R:FF(255), G:00(0), B:00(0) => "#FF0000“ 실습 : 메모장에서 작성한 뒤 fcolor.html로 저장 fcolor.html
글자 꾸미기 태그-3 글자체 결정 형식 : <FONT face="글꼴 이름 ">...</FONT> 글꼴 이름에는 vedana geargia, 굴림, 궁서 등.. 주의사항 글꼴은 특이한 글꼴을 사용하면 안됨 너무 많은 글꼴을 사용하지 않은 것을 원칙 실습 : 메모장에서 작성한 뒤 fface.html로 저장 fface.html
글자 꾸미기 태그-4 [물리적인 글꼴 스타일] 태그 설명 결과 <b> bold(굵은 글자) bold <i> italic(이탤릭체) italic <u> underline(밑줄) underline <strike> strike through(취소선을 표시) strike through <tt> typewriter text(타이핑체) typewriter text <sup> superscript(위첨자) superscript <sub> subscript(아래첨자) subscript <big> big(더 크게) big <small> small(더 작게) small
글자 꾸미기 태그-5 [논리적인 글꼴 스타일 ] 태그 설명 결과 <em> [논리적인 글꼴 스타일 ] 태그 설명 결과 <em> emphasis(강조할 때) 이탤릭체로 표현 emphasis <strong> strong emphasis(강한 강조) 굵은 문자로 표현 strong <code> 컴퓨터 코드를 나타낼 때 고정폭 글자체로 표현 code <samp> sample(샘플 출력할 때) 고정폭 글자체로 표현 sample <kbd> 키보드의 키 입력을 표현할 때 keyboard <var> 변수 이름을 지정할 때 기울임체로 표현 variable <cite> 인용구를 나타낼 때기울임체로 표현 citation <dfn> 단어를 정의하거나 사례를 들 때 기울임체로 표현 defining
글자 꾸미기 태그- 6 실습 : 메모장에서 작성한 뒤 fstyle로 저장 fstyle.html
문장 구별 <PRE> : 태그 안의 문장에서 여백이나 줄 바꿈 등이 그대로 브라우저에 출력 형식 : <PRE>…..</PRE> <CENTER> : 문자열 가운데 정렬 태그 형식 : <CENTER>…..</CENTER> <!-- … --> : 주석달기 태그 실습 :메모장에서 작성한 뒤 pre.html 로 저장 Pre.html
수평선 긋기 문서의 중간에 입체감 있는 수평선을 그어 문단을 구분. 수평선 긋기 문서의 중간에 입체감 있는 수평선을 그어 문단을 구분. 형식 : <HR WIDTH=" " SIZE=" " ALIGN=" ">...</HR> WIDTH = " 백분율 또는 픽셀의 수" : 선의 길이 SIZE = "n" : 선의 굵기 ALIGN = “left/right/center : 선의 위치 정렬 color : 선의 색상 설정 실습 : 메모장에서 작성한 뒤 hr.html 로 저장 Hr.html
목록 만들기-순서 없는 목록 기호 형태로 목록를 만들고자 할때 기호 형태로 목록를 만들고자 할때 형식 : < UL TYPE= disk > ~~</UL > <ul>목록의 시작과 끝을 표시 <li> : 각 항목의 내용을 쓴다. Type : DISC( 검은 원) CIRCLE ( 하얀 원) SQUARE ( 검은 사각형 ) <UL> <LI> 대항목 <LI> 중항목 ……. </UL> Ul.html
목록 만들기 - 순서 있는 목록 순서가 자동으로 정해지는 목록을 만들고자 할 때 형식 :<OL TYPE= “” start=“숫자” > ~~</OL > <ol> : 목록의 시작과 끝을 표시 <LI> : 각 항목의 내용을 쓴다. Type : I : 로마자 (I, II, III,...) A : 알파벳 (A,B,C...) Start : 시작 순서 <OL> <LI> 대항목 <LI> 중항목 ……. </OL> ol.html
Ul+ OL 혼합 목록 서로 다른 형식의 목록을 겹쳐서 사용 문서가 계층적인 구조를 갖게 되어 더욱 효율적으로 정보를 전달하는 페이지를 만들 수 있다. 실습 : 메모장에서 작성한 뒤 ul_ol.html 로 저장 Ul_ol.html
스크 롤 되어 움직이는 글자 만들기-1 익스플로러4.0이상에서만 보이는 태그로 정적인 텍스트나 그림을 움직일 수 있도록 지원 좌/우, 위/아래와 같이 일정 방향으로 움직이는 스크롤 효과를 만들 수 있음 형식 : <marquee 속성=값 >내용 </marquee> <marquee>행복한 하루 되세요.!!</marquee> <marquee><img src=“laputa.jpg"></marquee> 속성 값 의 미 Behavior (움직이는 스타일) scroll 일정한 방향으로 움직이는 속성 slide 내용이 좌우로 한번 반복 후 화면 끝에서 멈추는 속성 alternate 내용이 좌우로 계속 왕복하는 속성 Scrolldelay (속도) 수치 움직이는 속도를 지정하는 것으로 수치를 작게 할 수록 속도가 빨라짐 Scrollamout 글자들이 한번에 움직이게 되는 길이를 픽셀 단위로 지정 loop 반복횟수를 정해준다. infinite이면 무한반복 bgcolor RGB칼라 스크롤 영역의 배경색을 정해준다 width 스크롤 영역의 넓이를 정해준다 height 스크롤 영역의 높이를 정해준다 direction left, right, up, down 왼쪽,오른쪽,위로,아래로 방향을 정해준다.
스크롤 되어 움직이는 글자 만들기-2 Marquee1.html
스크롤 되어 움직이는 글자 만들기-3 Marquee2.html 실습: 메모장에서 작성한 뒤 marquee2.html로 저장 <HEAD> <TITLE> MARQUEE 를 이용한 시 컨텐츠 </TITLE> </HEAD> <BODY> <BR><BR><BR><BR><BR> <CENTER> <MARQUEE width="500" height="300" bgcolor="#ffccff" direction="up" scrolldelay="200"> <PRE> <FONT face="궁서" size="4"> 내 마음은 울고 있다네 도시 위에 비 내리듯 , 이 우수는 무엇일까, 내 마음에 파고드는 이 우수는 오 부드러운 비의 소리여 땅 위에 지붕 위에 내 지겨운 마음을 위해 오 비의 노래여! 이유 없이 우는구나, 이 역겨워진 마음은. 뭐라고! 배반은 없다고?... 이 슬픔은 이유가 없구나. 가장 나쁜 고통이구나, 이유를 모르는 것은 사랑도 없이 증오도 없이 내 마음은 그토록 많은 아픔을 가지고 있구나 [ 아르튀르 랭보 Arthur Rimbaud 도시 위에 가볍게 비 내리네] </FONT> </PRE> </MARQUEE> </CENTER> </BODY> </HTML> Marquee2.html
스크롤로 되는 그림 만들기 -4 실습: 메모장에서 작성한 뒤 marquee3.html로 저장 Marquee3.html