150 likes | 439 Views
HTML ( H yper T ext M arkup L anguage). 이미지 나타내기 하이퍼링크 HTML 내에 다른 HTML 삽입 소리 , 플래시 삽입. 특징 기본구조 본문 : Body 제목 : <h1> to <h6> 문단 , 줄바꿈 , 수평선 글자스타일 참고 : CSS 움직이는 글자. 특 징. HTML 태그는 대소문자 구분이 없다 . ( 소문자로 쓰길 권장 ) <html> = <HTML> 모든 태그는 ' < ' 와 ' > ' 로 둘러 쌓인다 .
E N D
HTML(Hyper Text Markup Language) 이미지 나타내기 하이퍼링크 HTML내에 다른 HTML삽입 소리, 플래시 삽입 특징 기본구조 본문 : Body 제목 : <h1> to <h6> 문단,줄바꿈,수평선 글자스타일 참고 : CSS 움직이는 글자
특 징 • 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로 쓴다. <!-- 주석 -->
기본구조 • <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>
본문 : body • 배경색 설정 : bgcolor속성 • 색상코드-http://www.w3schools.com/tags/ref_colornames.asp • 본문위치지정 • 배경그림 설정 <bodybgcolor="#0000ff"></body> <bodybgcolor ="blue"></body> <bodytopmargin="0"leftmargin="0"> </body> <bodybackground=“이미지파일명”></body> <bodystyle="background : url(‘이미지파일명’) no-repeat fixed right bottom"> </body> 작은따옴표 작은따옴표
제목 : <h1> to <h6> • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers
문단,줄바꿈,수평선 • <p>Defines a paragraph</p> • <br/>Inserts a single line break • <hr/>Defines a horizontal rule
글자 스타일 • <b>bold</b> : bold • <i>italic</i> : italic • <u>underline</u> : underline • <fontstyle=“font-size:10pt; color:#82909b; font-family:굴림체;”>글자스타일</font> font-size : 글자크기 color : 글자색 background-color: 배경색 font-family : 글씨체종류 font-style : italic font-weight : bold text-decoration : none | underline| overline | line-through style속성은 font태그뿐 아니라<p>,<div> 등 글자를 출력하는 태그의 속성으로 사용함. 두 개 이상 지정할 땐 각 항목 끝에 ;을 씀 http://www.w3schools.com/css/css_font.asp
mystyle.css body {color: black} mystyle.css를 포함하는 법 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 참고: CSS (Cascading Style Sheets) • Styles define how to display HTML elements • Cascading Order • Inline style (inside an HTML element) <body style=“background-color:black;”> • Internal style sheet (inside the <head> tag) • External style sheet • Browser Default <head><styletype=“text/css”>body {color: black}</style></head> 참조 : http://www.w3schools.com/css/css_intro.asp
움직이는 글자 • <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>
이미지 나타내기 • <imgsrc=“이미지 파일 이름”/> • 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 />
하이퍼링크 • <ahref=“이동할 웹주소”>텍스트|이미지</a> • 같은 사이트내 문서라면 href=“…” • 다른 사이트라면 href=“http://...” • target속성 : 링크된 문서가 열릴 때 어느 창에 열리게 할 것인가를 정하는 것 • target="_blank" : 새로운 창에 문서가 열림 <a href=“http://www.sungshin.ac.kr”>학교</a> <a href=“http://www.sungshin.ac.kr” target=“_blank”>학교</a> <a href=“http://www.sungshin.ac.kr” target=“_blank”><img src=“이미지파일명”></a>
html내에 다른 html삽입 • <iframesrc=“삽입할 웹페이지주소”></iframe> • width =“픽셀” • height=“픽셀” • frameborder=“픽셀” <iframe src=“http://www.sungshin.ac.kr” width=“600” height=“400”> </iframe> <iframe src=“http://www.sungshin.ac.kr” width=“500” height=“500” frameborder=“0”> </iframe>
소리, 플래시 삽입 • <embedsrc=“화일경로”></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>
참고 사이트 • www.w3schools.com • HTML • http://www.w3schools.com/html/html_intro.asp • CSS • http://www.w3schools.com/css/css_intro.asp