HTML HTML 기본 구조와 태그 다양한 태그 다루기

HTML HTML 기본 구조와 태그 다양한 태그 다루기
<IMG> <A> <TABLE> 태그 다루기 프레임 나누기 폼 양식 및 재미있게 활용할 수 있는 태그

HTML 기본 구조 에디트플러스에서 HTML 문서 제작해보기 HTML에서 태그 사용법

HTML 기본 구조와 태그 – HTML 기본 구조
<head> <title></title> </head> <body> </body> </html>

[웹 문서 구조] 머리부 몸체부

[<head> 태그 사이에 기록되는 문서 정보] <title> 홈페이지를 대표할 수 있는 문서 제목을 지정한다. <meta> 다양한 속성을 가지고 있어 다양한 역할을 한다. <script> 홈페이지를 역동적으로 변화시킨다. <style> 문서 전체의 레이아웃을 결정하여 문서에 통일감을 준다.

[태그의 구성 요소] 복합 태그 <태그명> 내용 </태그명> 속성을 가지는 태그 <태그명 속성명=값> 내용 </태그명> 단독 태그 <태그명> 사용 예 여러분을 <font size=5 color=blue>진심으로</font> 환영합니다!

[태그 사용 규칙] <태그명></태그명>과 같이 여는 태그와 닫는 태그가 쌍으로 사용된다. 닫을 때는 태그명으로만 닫는다. 태그명과 속성명, 속성명과 속성명 사이는 한 칸씩 띄운다. 그 외 공백을 두어서는 안 된다. 속성명과 값은 = 부호를 사용하여 표시한다. 값이 두 단어 이상일 경우는 “”로 묶어서 표시한다. 속성이 있는 태그가 있고 없는 태그가 있다. 속성을 반드시 하나 이상 사용해야 하는 태그도 있고 생략해도 되는 태그가 있다. 여는 태그만 독립적으로 존재하는 태그도 있다. 태그를 중첩해서 사용할 경우 먼저 열어준 태그를 나중에 닫아준다.

[태그 사용 예] <font size=5 color=blue>환영합니다!</font><p> <b>우리집 너무 <u>하얗고</u> 깨끗하죠^^;; </b><br> <p align=center>조금씩 알찬 내용들로 채워가겠습니다.^^</p>

문단 관련 태그 위지윅과 특수문자 <BODY> 태그로 컬러 문서 만들기 글꼴 관련 태그 목록 관련 태그
04장. 문단, 컬러, 글꼴, 목록 다루기 문단 관련 태그 위지윅과 특수문자 <BODY> 태그로 컬러 문서 만들기 글꼴 관련 태그 목록 관련 태그

<p> 태그와 <br> 태그 비교
문단, 컬러, 글꼴, 목록 태그 다루기 – 문단 관련 태그 <br> <p> <div> <h숫자> <center> <p> 태그와 <br> 태그 비교 내용1<p>내용2 = <p>내용1</p>내용2 = 내용1<br><br>내용2

<center>내용</center> <p align=center>내용</p>
문단, 컬러, 글꼴, 목록 태그 다루기 – 문단 관련 태그 [내용을 가운데 정렬하는 법] <center>내용</center> <p align=center>내용</p> <div align=center>내용<div> <h4 align=center>내용</h4>

문단, 컬러, 글꼴, 목록 태그 다루기 – 위지윅과 특수문자
[자주 사용하는 특수문자] 문자 엔티티 결과 설명 non-breaking space의 약어. 공백문자 하나를 추가한다. < Less than 의 약어. <를 표시한다. > Greater than의 약어. >를 표시한다. & & Ampersand의 약어. &부호를 표시한다. " “ quotation maker의 약어. “를 표시한다. ⓒ Copyright의 약어. 저작권,판권을 표시한다. ™ ™ Trademark의 약어. 상표를 표시한다.

문단, 컬러, 글꼴, 목록 태그 다루기 – 위지윅과 특수문자
[<pre> 태그와 <xmp> 태그] <pre> <xmp> 주용도 눈에 보이는 대로 출력 태그를 문자 취급 위지윅 방식 ○ 태그 적용 여부 ×

문단, 컬러, 글꼴, 목록 태그 다루기 – <body> 태그
[색상 표기법] HTML 문서에서 색상을 표현하는 방식은 영문의 색상명, 16진수 RGB 값 2가지가 있다. 16진수 표기법은 RGB표기법 이라고도 하는데, R(red) 2자리, G(green) 2자리, B(blue) 2자리 총 6자리로 구성된다. RR GG BB

[RGB 컬러 값] 칼라 영문명 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

bgcolor background text link vlink alink leftmargin topmargin oncontextmenu onselectstart bgproperties scroll

<basefont> 태그와 비교
문단, 컬러, 글꼴, 목록 태그 다루기 – 글꼴 관련 태그 [<font> 태그의 속성] color face size <basefont> 태그와 비교

문단, 컬러, 글꼴, 목록 태그 다루기 – 글꼴 관련 태그
[물리적인 글꼴의 종류] 태그 설명 결과 <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

[논리적인 글꼴의 종류] 태그 설명 결과 <em> emphasis(강조할 때) 이탤릭체로 표현 emphasis <strong> strong emphasis(강한 강조) 굵은 문자로 표현 strong emphasis <code> code(컴퓨터 코드를 나타낼 때) 고정폭 글자체로 표현 code <samp> sample(샘플 출력할 때) 고정폭 글자체로 표현 sample <kbd> keyboard(키보드의 키 입력을 표현할 때) 고정폭 글자체로 표현 keyboard <var> variable(변수 이름을 지정할 때) 기울임체로 표현 variable <cite> citation(인용구를 나타낼 때) 기울임체로 표현 citation <dfn> defining instance(단어를 정의하거나 사례를 들 때) 기울임체로 표현 defining instance

<h숫자> <font size=숫자> <big> <small>
문단, 컬러, 글꼴, 목록 태그 다루기 – 글꼴 관련 태그 [글자크기를 지정하는 태그] <h숫자> <font size=숫자> <big> <small> <basefont>

[<h숫자> 태그와 <font size=숫자> 태그] 비교 항목 <font size=숫자> <h숫자> 기본 값 <font size=3> <h4> 같은 결과 출력 <b>내용</b><p> <h4>내용</h4> 문단 구분 × ○ 빈 행 추가 한 문단 안에서 글자크기 다양하게 설정 가능 불가능

문단, 컬러, 글꼴, 목록 태그 다루기 – 목록 관련 태그
[<ul> 태그와 <ol> 태그] 비교 항목 <ul> <ol> 약어 unorderlist orderlist 용도 순서 없는 목록 순서 있는 목록 Type 속성 Dsik(●),circle (○) ,square(□) 1, A(알파벳 대문자), a(알파벳 소문자), I(로마숫자 대문자), I(로마숫자 소문자) 기본 값 disk 1 사용 예 <ul type=square> 목록 </ul> <ol type=A> 목록 </ol>

홈페이지용 그림 활용법 그림 삽입 태그 <IMG> 배경 그림 다루기 그림과 문자열의 어울림
5장. 그림으로 꾸며보는 홈페이지 홈페이지용 그림 활용법 그림 삽입 태그 <IMG> 배경 그림 다루기 그림과 문자열의 어울림

<IMG> 태그로 그림 삽입하기 – 홈페이지용 그림 파일
[형식] GIF Graphic Interchange Format의 약어 256컬러만 지원하므로 주로 홈페이지용 버튼, 메인,문자 처럼 단순한 그림에 사용된다. JPG 1980년, Joint Photographic Experts Group(JPEG)에서 개발 16만 컬러를 지원하므로 인물사진, 배경사진과 같이 고해상도 그림에 주로 사용된다. PNG BMP

투명그림(Transparent GIF) 인터레이스 그림(Interaced GIF)
<IMG> 태그로 그림 삽입하기 – 홈페이지용 그림 파일 [GIF 형식의 특징] 애니메이션(Animated GIF) 투명그림(Transparent GIF) 인터레이스 그림(Interaced GIF)

<IMG> 태그로 그림 삽입하기 – 홈페이지용 그림 파일
[이미지 모음 사이트] 홈페이지 제작과 관련된 이미지 제공 유료 사이트 검색엔진을 이용한 이미지 검색 사이트

<IMG> 태그로 그림 삽입하기 – 그림 삽입 태그 <IMG>
src alt width height align border hspace vspace 배경 그림과 관련된 <body> 태그의 속성 background bgproperties

<IMG> 태그로 그림 삽입하기 – 그림 삽입 태그 <IMG>
[그림 깨져 보일 경우 해결 방법] 문서를 저장하지 않은 경우 웹 브라우저 환경설정이 잘못된 경우 [도구 → 인터넷옵션] - [고급] - “멀티미디어” - “그림표시” 체크 그림을 인터넷에서 다운로드받을 때 확장자를 변경했거나, 확장자를 생략했는데 확장자가 자동 설정되지 않았을 때 코딩 시 잘못 입력한 경우 파일의 경로, 오타, 대소문자 구별, 특수문자 내 컴퓨터에서는 잘 나타나는데 인터넷에 올리면 안 되는 경우

수평정렬 수직정렬 <IMG> 태그로 그림 삽입하기 – 그림과 문자열의 어울림 left right
top, middle, bottom texttop absmiddle, absbottom baseline

<img src=" poster.jpg" align=left>
[양쪽 어울림] <img src=" poster.jpg" align=left> <img src=" poster.jpg" align=right> 내용

06장. <A> 태그로 하이퍼링크 설정하기
링크의 핵심 상대경로 타겟(Target)을 효과적으로 설정하는 법 위치까지 찾아주는 책갈피 사용하기 그림에 링크 또는 이미지맵 설정하기 모든 종류의 파일 링크하기

href target name title <A> 태그로 하이퍼링크 설정하기 – 하이퍼링크 설정

<A> 태그로 하이퍼링크 설정하기 – 하이퍼링크 설정
[사용 예] <a href=" <a href="photo.jpg"><img src=”photo.gif”></a> <a </a> <a href="totoro.mp3">영화 토토로 OST</a> <a href="totoro.avi">영화 토토로 예고편</a> <a href="alzip.exe">압축의 최강자 알집</a> <a href="samp.htm">예제</a> <a href="samp/samp.htm">예제</a> <a href="../../samp.htm">예제</a> <a href="#top">위로</a> <a href="samp.htm#chap1">예제1</a>

[하이퍼링크 가능한 파일의 종류] 웹 브라우저 안에서 보이는 파일들 htm, html, gif, jpg, txt 플러그인 프로그램이 자동 연결되는 파일들 wav, mid, mp3, asf, avi, swf, wmv 플러그인 프로그램이 자동 연결되지 않아 해당 프로그램을 설치해야만 실행 가능한 파일들 ra, rm, ram, mov 실행되지 않고 저장되는 파일들 exe, zip, hwp, doc, xls, ppt, psd

[<body> 태그의 문자색 관련 속성] 속성 설명 기본 값 text 일반 문자색 black link 한 번도 방문하지 않은 링크 문자색 blue vlink 한 번이라도 방문한 링크 문자색 purple alink 누르는 순간에 변하는 링크 문자색 red

<A> 태그로 하이퍼링크 설정하기 – 절대경로와 상대경로
<a href=” 미디어 도서검색</a> 상대경로 작업 폴더 <a href=”samp.htm”>예제</a> 상위 폴더 <a href=”../../samp.htm”>예제</a> 하위 폴더 <a href=”sample/chap1/samp.htm”>예제</a>

<A> 태그로 하이퍼링크 설정하기 – 대상 창 설정법
[target의 속성] 예약어 4가지 _blank _self _top _parent 사용자 정의 창 이름 new, newWin, menu 기본 대상 창 변경 <base target="_blank">

책갈피 설정 하이퍼링크 설정 <A> 태그로 하이퍼링크 설정하기 – 책갈피 [책갈피 설정에 필요한 설정 2가지]
찾아갈 곳에 name을 설정한다. <a name="top"></a> 하이퍼링크 설정 문서내의 특정 위치 또는 다른 문서의 특정 위치로 이동할 수 있게 하이퍼링크 설정한다. <a href="#top">위로</a> <a href="samp1.htm#chap1">예제1-1</a>

이미지맵에서 제공하는 맵 종류로는 rect, circle, poly 세가지가 있다.
<A> 태그로 하이퍼링크 설정하기 – 이미지맵 이미지맵 기본 문법 <img src="그림 파일의 전체 경로" usemap="#맵 이름"> <map name="맵 이름"> <area shape="맵의 종류" coords="좌 표값" href="링크될 주소" alt=”설명툴 팁”> </map> 이미지맵에서 제공하는 맵 종류로는 rect, circle, poly 세가지가 있다.

<A> 태그로 하이퍼링크 설정하기 – 이미지맵
[이미지맵 사용 예] <img src="map.gif" width="540" height="336" border="0" usemap="#ImageMap1"> <map name="ImageMap1"> <area shape="poly" coords="384, 27, 367, 115, 408, 216, 466, 148, 490, 94, 454, 47, 413, 24" href=" target="_blank" alt="제주도 동부 여행 정보"> <area shape="circle" coords="103, 158, 77" href=" target="_blank" alt="제주도 서부 여행 정보"> <area shape="rect" coords="180, 189, 311, 268" href=" target="_blank" alt="서귀포시 여행 정보"> </map>

07장. <TABLE> 태그로 표 디자인하기
표를 구성하는 태그들의 속성까지 꼼꼼히 살펴보기 실습으로 <TABLE> 태그 사용법 익히기

<TABLE> 태그로 표 디자인하기 – 기본 사용법
[표로 구성된 사이트]

<caption>제목</caption> <tr> <td>셀내용 </td>
<TABLE> 태그로 표 디자인하기 – 기본 사용법 [기본 구조] <table> <caption>제목</caption> <tr> <td>셀내용 </td> </tr> </tabel>

<TABLE> 태그로 표 디자인하기 – 기본 사용법
[2행 2열의 표 만들기] <table border=1 width=300> <caption>2*2표</caption> <tr> <td>셀1</td> <td>셀2</td> </tr> <td>셀3</td> <td>셀4</td> </table>

<TABLE> 태그로 표 디자인하기 – 기본 태그 속성
[테이블 관련 속성] <table> <tr> <td> <th> 태그 모두에 적용할 수 있는 속성들 width height bgcolor background align <table> 태그에서만 사용하는 속성들 border cellspacing cellpadding bordercolorlight bordercolordark frame rules

height width bordercolordark cellpadding cellspacing bordercolorlight

[테이블 관련 속성] <tr> <td> 태그에서 사용되는 속성들 colspan rowspan Valign <caption> 태그에서 사용하는 속성 Align 가운데 정렬 비교 <table align=center> <tr align=center> <td align=center> <center>테이블소스 </center> <center>테이블제목 </center>

[셀 합치기: colspan, rowspan]

<TABLE> 태그로 표 디자인하기 – 사용법 익히기
[항상 브라우저의 중앙에 보이도록 하는 소스] <table align="center" border="0" width="100%" height="100%"> <tr> <td align="center"> <img src="house.gif" width="300" height="300"> <br><br> <font size="1" color="#CCCCCC"> 언제나 브라우저 중앙에 놓여집니다. </font> </td> </tr> </table>

[사각 실선 테두리가 생성되는 소스] <table width=300 height=50 align=center bgcolor=skyblue cellspacing=1 cellpadding=0> <tr><td align=center> <table width=300 height=50 bgcolor=white> </td></tr> </table>

[선 그리기] <hr> 태그의 속성 size width align noshade color 도트 이미지 활용법 <tr height=1><td background="dot.gif"></td></tr>

08장. 프레임 나누기 프레임 개요 프레임 관련 태그 원하는 프레임에 문서 보여주기 부모 프레임 안에 자식 프레임 종속시키기
<IFRAME>으로 문서 안에 독립적인 프레임 창 넣기

프레임 나누기 – 프레임 개요 [프레임 분할 예] 상단 프레임 좌측 프레임 우측 프레임

프레임 나누기 – 프레임 개요 장점 단점 한 화면에 문서 여러 개를 동시에 보여줄 수 있다.
문서가 독립적이어서 서로 다른 창의 변화는 영향을 받지 않는다. 내용을 체계적으로 관리할 수 있고, 작업 효율도 높일 수 있다. 집안에서 편하게 정보를 찾아보는 것과 같은 안정감을 준다 메뉴를 찾아 헤매는 시간을 절약해 주므로 쉽게 원하는 정보를 찾아볼 수 있다. 단점 프레임 안에서 내용을 보여주어야 하므로 답답한 느낌을 준다. CGI 프로그램 사용 시 프레임 때문에 제한을 받으므로 가급적 사용하지 않는다.

프레임 나누기 – 프레임 관련 태그 [프레임 수직 분할] 기본형식 사용예
<frameset cols="왼쪽 창의 크기, 오른쪽 창의 크기"> <frame src="왼쪽 창에 표시할 문서의 전체 경로"> <frame src="오른쪽 창에 표시할 문서의 전체 경로"> </frameset> 사용예 <frameset cols="200, *"> <frame src="left.htm"> <frame src="right.htm">

프레임 나누기 – 프레임 관련 태그 [프레임 관련 속성] <frameset> 태그의 속성
cols rows border <frame> 태그의 속성 src name scrolling marginwidth marginheight noresize

프레임 나누기 – 원하는 프레임에 문서 보여주기
[target 속성의 예약어] _blank 무조건 새 창에 띄운다. _self 기본 값으로 자기자신의 창(현재 창)에 띄운다. _top 프레임을 모두 제거하고 하나의 창에 띄운다. _parent 프레임이 주종관계를 이룰 때 종속 프레임을 제거하고 하나의 창에 보여주므로 프레임의 형태는 주(상위)프레임 상태가 된다.

프레임 나누기 – 원하는 프레임에 문서 보여주기
[프레임 문서 비교] 1 3 2 4 frame.htm 1 3 2 4 frame1.htm frame2.htm

프레임 문서에서 보여줄 프레임에 사용자 정의 창 이름(‘name’)을 설정한다.
프레임 나누기 – 원하는 프레임에 문서 보여주기 [원하는 프레임에 문서 보여주는 법] 프레임 문서에서 보여줄 프레임에 사용자 정의 창 이름(‘name’)을 설정한다. <frame src="bottom.htm" name="contents"> 링크 설정된 문서에서 기본 대상 프레임을 설정한다. <base target="contents">

프레임 나누기 – <IFRAME> 태그
src name width height frameborder scrolling marginwidth marginheight align 내부 프레임(inline frame)이라는 의미. 일반 프레임 문서와는 달리 HTML 문서 내에 창이 단독으로 삽입된다. 기본형식 <iframe src="iframe안에 보여줄 문서의 전체경로" width="창의 너비" height="창의 높이"></iframe>

09장. 재미있게 활용할 수 있는 태그 <EMBED> 태그로 멀티미디어 홈페이지 만들기
09장. 재미있게 활용할 수 있는 태그 <EMBED> 태그로 멀티미디어 홈페이지 만들기 <MARQUEE> 태그로 움직이는 글자 만들기 팔방 미인 <META> 태그

재미있게 활용할 수 있는 태그 – <EMBED> 태그
[멀티미디어 파일의 종류] wav mid mp3 wma asf avi mov mpegmpg swf

음악 파일을 다운로드하거나 윈도우 미디어 플레이어로 감상할 수 있다.
재미있게 활용할 수 있는 태그 – <EMBED> 태그 [음악 파일 활용법] 음악 파일을 다운로드하거나 윈도우 미디어 플레이어로 감상할 수 있다. <a href=”song.mid”>음악 파일 실행 및 다운로드</a> 제어상자가 문서 안에 표시되어 음악을 실행, 정지하는 등 제어가 가능하다. <embed src=”song.mid”> 배경 음악이 끝없이 흐르게 한다. <embed src=”song.mid” hidden=true loop=-1>

재미있게 활용할 수 있는 태그 – <EMBED> 태그
src width height loop autostart hidden volume

재미있게 활용할 수 있는 태그 – <MARQUEE> 태그
direction(진행방향) behavior(행동방식) scrollamount(스크롤 속도) scrolldelay(지연 시간) loop(반복 횟수) bgcolor(배경색) width(너비) height(높이) hspace(수평여백) vspace(수직여백)

재미있게 활용할 수 있는 태그 – <META> 태그
[<meta> 태그의 name 속성 값] reply-to title subject publisher other agent date classification author copyright keyword description generator pragma expires

재미있게 활용할 수 있는 태그 – <META> 태그
<meta name="keywords" content="html,css,javascript,강좌,스타일시트,자바스크립트 "> <meta name="description" content="초보자를 위한 홈페이지 학습 사이트입니다. HTML, CSS, Javascript 사용법 및 다양한 소스를 제공합니다."> <meta http-equiv="Content-Type" content="text/html;charset=euc-kr"> <meta http-equiv="refresh" content="10;url= hanbitbook.co.kr”> <meta http-equiv="refresh" content=60>

<meta http-equiv="page-enter" content="blendtrans(duration=3)">
[화면 전환 효과] <meta http-equiv="page-enter" content="revealtrans(duration=3, transition=5)"> <meta http-equiv="page- exit " content="revealtrans(duration=3, transition=5)"> <meta http-equiv="page-enter" content="blendtrans(duration=3)">

폼 관련 태그 폼 양식 직접 만들어보기 회원가입 절차 4단계
10장. 폼 양식으로 회원전용 공간 만들기 폼 관련 태그 폼 양식 직접 만들어보기 회원가입 절차 4단계

HTML로 폼 양식 만들기 CSS로 폼 양식 꾸미기 자바스크립트로 문서 검증하기 웹 프로그램 실행하기
폼 양식으로 회원전용 공간 만들기 – 폼 관련 태그 [회원가입 구현 절차] HTML로 폼 양식 만들기 CSS로 폼 양식 꾸미기 자바스크립트로 문서 검증하기 웹 프로그램 실행하기

폼 양식으로 회원전용 공간 만들기 – 폼 관련 태그
[폼 관련 태그(1)] 태그명 결과 설명 <form></form> 안 보임 폼 양식의 시작과 끝 <input type=text> 한 줄 입력 상자 <input type=password> *로 표시되는 암호 입력상자 <input type=raido> 라디오 버튼 <input type=checkbox> 체크상자 <input type=button> 일반 버튼

[폼 관련 태그(2)] <input type=submit> 전송확인 버튼 <input type=reset> 초기화 버튼 <input type=image> 이미지 버튼 <input type=file> 파일 업로드 <input type=hidden> 안 보임 숨겨진 필드 <textarea></textarea> 여러 줄 입력상자 <select></select> 목록 상자의 시작과 끝 <option> 목록 상자에 포함될 항목 지정 태그명 결과 설명

[폼 관련 태그의 속성] <form> 태그 관련 속성 name method action target <input> 태그 관련 속성 Size maxlength value readonly checked disabled

일반 버튼 초기화 버튼 전송 버튼 이미지 버튼 폼 양식으로 회원전용 공간 만들기 – 폼 관련 태그 [버튼 4가지]
<input type=button value=국적변경> 초기화 버튼 <input type=reset value=다시 작성> 전송 버튼 <input type=submit value=가입하기> 이미지 버튼 <input type=image src="check.gif”>

[폼 관련 태그의 속성] <textarea> 태그 관련 속성 Cols Rows wrap <select> <option> 태그 관련 속성 selected size multiple

<select name=phone1>
폼 양식으로 회원전용 공간 만들기 – 폼 관련 태그 [목록상자의 예] <select name=phone1> <option value=1 selected>011</option> <option value=2>016</option> <option value=3>017</option> <option value=4>018</option> <option value=5>019</option> </select>

HTML HTML 기본 구조와 태그 다양한 태그 다루기

Similar presentations

Presentation on theme: "HTML HTML 기본 구조와 태그 다양한 태그 다루기"— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

HTML HTML 기본 구조와 태그 다양한 태그 다루기

Similar presentations

Presentation on theme: "HTML HTML 기본 구조와 태그 다양한 태그 다루기"— Presentation transcript:

Similar presentations

About project

지원