1 / 14

HTML ( H yper T ext M arkup L anguage)

HTML ( H yper T ext M arkup L anguage). 이미지 나타내기 하이퍼링크 HTML 내에 다른 HTML 삽입 소리 , 플래시 삽입. 특징 기본구조 본문 : Body 제목 : <h1> to <h6> 문단 , 줄바꿈 , 수평선 글자스타일 참고 : CSS 움직이는 글자. 특 징. HTML 태그는 대소문자 구분이 없다 . ( 소문자로 쓰길 권장 ) <html> = <HTML> 모든 태그는 ' < ' 와 ' > ' 로 둘러 쌓인다 .

krysta
Download Presentation

HTML ( H yper T ext M arkup L anguage)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML(Hyper Text Markup Language) 이미지 나타내기 하이퍼링크 HTML내에 다른 HTML삽입 소리, 플래시 삽입 특징 기본구조 본문 : Body 제목 : <h1> to <h6> 문단,줄바꿈,수평선 글자스타일 참고 : CSS 움직이는 글자

  2. 특 징 • 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=“”/> • 공백 문자나 개행 문자는 무시하고 한칸만 띄우고 이어서 나타남. • 여러 공백을 두려면 공백하나 당 &nbsp;를 쓴다. • 줄을 바꿔 나타나게 하려면 줄 바뀌어질 곳에서 <br />을 쓴다. • 보통 파일의 확장자는 3글자라 HTML문서의 확장자를 .htm으로 하지만일반적으로 .html로 쓴다. <!-- 주석 -->

  3. 기본구조 • <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. 본문 : 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> 작은따옴표 작은따옴표

  5. 제목 : <h1> to <h6> • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers

  6. 문단,줄바꿈,수평선 • <p>Defines a paragraph</p> • <br/>Inserts a single line break • <hr/>Defines a horizontal rule

  7. 글자 스타일 • <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

  8. 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

  9. 움직이는 글자 • <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. 이미지 나타내기 • <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 />

  11. 하이퍼링크 • <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>

  12. 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>

  13. 소리, 플래시 삽입 • <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>

  14. 참고 사이트 • www.w3schools.com • HTML • http://www.w3schools.com/html/html_intro.asp • CSS • http://www.w3schools.com/css/css_intro.asp

More Related