Embed Size (px)
DESCRIPTION
HTML ( H yper T ext M arkup L anguage). 이미지 나타내기 하이퍼링크 HTML 내에 다른 HTML 삽입 소리 , 플래시 삽입. 특징 기본구조 본문 : Body 제목 : to 문단 , 줄바꿈 , 수평선 글자스타일 참고 : CSS 움직이는 글자. 특 징. HTML 태그는 대소문자 구분이 없다 . ( 소문자로 쓰길 권장 ) = 모든 태그는 ' < ' 와 ' > ' 로 둘러 쌓인다 . - PowerPoint PPT Presentation
Citation preview
HTML(Hyper Text Markup Language)
HTML(Hyper Text Markup Language)
특징 기본구조 본문 : Body 제목 : <h1> to <h6> 문단 , 줄바꿈 , 수평선 글자스타일 참고 : CSS 움직이는 글자
이미지 나타내기 하이퍼링크 HTML 내에 다른 HTML 삽입 소리 , 플래시 삽입
2
HyperText Markup Language
특 징HTML 태그는 대소문자 구분이 없다 . ( 소문자로 쓰길 권장 ) <html> = <HTML>
모든 태그는 '<' 와 '>' 로 둘러 쌓인다 . <html>, <body>, <table>, <tr>, <td>
태그에 따라 필수속성이나 선택속성이 하나 이상 있을 수 있다 . <img src=“home.jpg” width=“200”>
태그는 시작과 끝을 나타내기 위해서 한 개의 쌍으로 이루어진다 . <html></html>, <table></table> cf. empty tag : 태그사이에 내용이 없는 태그
<img src=“”></img> 또는 <img src=“” />
공백 문자나 개행 문자는 무시하고 한칸만 띄우고 이어서 나타남 . 여러 공백을 두려면 공백하나 당 를 쓴다 . 줄을 바꿔 나타나게 하려면 줄 바뀌어질 곳에서 <br /> 을 쓴다 .
보통 파일의 확장자는 3 글자라 HTML 문서의 확장자를 .htm 으로 하지만일반적으로 .html 로 쓴다 .
<!-- 주석 -->
3
HyperText Markup Language
기본구조<html></html> : html 문서의 시작과 끝을 나타냄 .
<head></head>: html 문서에 대한 일반적인 정보를 표시 . head 태그 안에 사용될 수 있는 것
<title></title>:html 문서의 제목으로 웹브라우저 타이틀바에 표시 . <script></script> : 자바스크립트 삽입부분 <meta </meta> : html 문서에 대한 정보 ( 만든이 등 ) <style></style> : 스타일 정의
<body></body> html 문서의 실제적인 내용이 들어가는 부분
html, head, body 등을 쓰지 않은 html 문서도 웹브라우저에 보이기는 함 .
<html> <head> <title> 문서제목 </title> </head> <body> .... </body></html>
4
HyperText Markup Language
본문 : body
배경색 설정 : bgcolor 속성 색상코드 -http://www.w3schools.com/tags/ref_colornames.asp
본문위치지정
배경그림 설정
<body bgcolor="#0000ff"></body><body bgcolor ="blue"></body>
<body topmargin="0" leftmargin="0"></body>
<body background=“ 이미지파일명” ></body>
<body style="background : url(‘ 이미지파일명’ ) no-repeat fixed right bottom"></body>
작은따옴표작은따옴표
5
HyperText Markup Language
제목 : <h1> to <h6>
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers
6
HyperText Markup Language
문단 , 줄바꿈 , 수평선
<p>Defines a paragraph</p><br/>Inserts a single line break<hr/>Defines a horizontal rule
7
HyperText Markup Language
글자 스타일<b>bold</b> : bold
<i>italic</i> : italic
<u>underline</u> : underline
<font style=“font-size:10pt; color:#82909b; font-family: 굴림체 ;”> 글자스타일 </font>
font-size : 글자크기color : 글자색background-color: 배경색font-family : 글씨체종류font-style : italicfont-weight : boldtext-decoration : none | underline| overline | line-through
style 속성은 font 태그뿐 아니라<p>,<div> 등 글자를 출력하는 태그의 속성으로 사용함 .두 개 이상 지정할 땐 각 항목 끝에 ; 을 씀http://www.w3schools.com/css/css_font.asp
8
HyperText Markup Language
참고 : CSS (Cascading Style Sheets)
Styles define how to display HTML elements Cascading Order
1. Inline style (inside an HTML element) <body style=“background-color:black;”>
2. Internal style sheet (inside the <head> tag)
3. External style sheet
4. Browser Default
<head><style type=“text/css”>body {color: black}</style></head>
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
mystyle.css 를 포함하는 법
body {color: black}
mystyle.css
참조 : http://www.w3schools.com/css/css_intro.asp
9
HyperText Markup Language
움직이는 글자<marquee>Marquee</marquee> 속성을 지정하지 않으면 오른쪽에서 왼쪽으로 스크롤 marquee 태그 사이의 img 태그를 사용하면 그림도 움직임 direction =“up|down|right” :
up 이나 down 일때 height 속성값을 지정하면 주어진 높이에서만 스크롤된다 .
width=“ 픽셀” : 스크롤되는 넓이 height=“ 픽셀” : 스크롤되는 높이 behavior=“alternate” : 스크롤되지 않고 왔다갔다 scrolldelay=“1000” : 스크롤 속도 . 밀리초단위라 1000 은 1 초 .
<marquee width=“200” direction=“right” behavior=“alternate”> ghan</marquee> <marquee width=“200” height=“400” direction=“up”>
ghan</marquee>
10
HyperText Markup Language
이미지 나타내기<img src=“ 이미지 파일 이름” /> width 와 height 를 넣지 않았을 경우에는 그림의 원래 크기로
보여짐
width = “ 픽셀 " : 이미지의 가로 크기
height = " 픽셀 " : 이미지의 세로 크기
border = " 픽셀 " : 그림 테두리의 두께
alt = " 그림설명 " : 이미지위에 마우스를 올려놓으면 alt 속성값인
그림설명이 나타남 .<img src=“logo.jpg” width=“100” /> : height 는 width 의 확대축소배율만큼 자동 조절<img src=“logo.jpg” height=“100” /> : width 는 height 의 확대축소배율만큼 자동 조절<img src=“logo.jpg” width=“100” height=“50” /> : 가로 100 세로 50 으로 고정<img src=http://www.sungshin.ac.kr/website3/images/footer_logo.gif />
11
HyperText Markup Language
하이퍼링크<a href=“ 이동할 웹주소” > 텍스트 | 이미지 </a> 같은 사이트내 문서라면 href=“…” 다른 사이트라면 href=“http://...” target 속성 : 링크된 문서가 열릴 때 어느 창에 열리게 할
것인가를 정하는 것 target="_blank" : 새로운 창에 문서가 열림
<a href=“<a href=“http://www.sungshin.ac.kr”>”> 학교학교 </a></a>
<a href=“<a href=“http://www.sungshin.ac.kr” target=“_blank”>” target=“_blank”> 학교학교 </a></a>
<a href=“<a href=“http://www.sungshin.ac.kr” target=“_blank”><img src=“” target=“_blank”><img src=“ 이미지파일명”이미지파일명” ></a>></a>
12
HyperText Markup Language
html 내에 다른 html 삽입
<iframe src=“ 삽입할 웹페이지주소” ></iframe> width =“ 픽셀” height=“ 픽셀” frameborder=“ 픽셀”
<iframe src=“http://www.sungshin.ac.kr” width=“600” height=“400”></iframe>
<iframe src=“http://www.sungshinsungshin.ac.kr” width=“500” height=“500” frameborder=“0”></iframe>
13
HyperText Markup Language
소리 , 플래시 삽입
<embed src=“ 화일경로” ></embed> loop = “true|false| 반복횟수” autostart = “true|false” hidden = “true|false” width = “ 픽셀” height = “ 픽셀”
재생기표시여부
자동실행여부
<embed src=“http://www.sungshin.ac.kr/psd/flash/main2.swf” loop=“true” width=“560”></embed>
<embed src=“myvoice.wma” hidden=“true”></embed>
14
HyperText Markup Language
참고 사이트
www.w3schools.com HTML
http://www.w3schools.com/html/html_intro.asp CSS
http://www.w3schools.com/css/css_intro.asp
