HTML 발산동성당 홍보부
HTML http://www.w3schools.com Hyper Text Markup Language markup tags로 이루어진 것 HTML documents are described by HTML tags Each HTML tag describes different document content <!DOCTYPE html> <html lang=“ko”> <body> <h1>이것은 머릿글입니다.</h1> <p>여기는 본문입니다.</p> </body> </html> <html> and </html> <head> and </head> <title> and </title> <body> and </body> <h1> and </h1> <p> and </p> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> </head>
HTML http://www.w3schools.com Hyper Text Markup Language HTML Elements 태그명 <tagname>Content goes here...</tagname> <!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html> 시작태그 종료태그 HTML Attributes 1. All HTML elements can have attributes 2. Attributes provide additional information about an element 3. Attributes are always specified in the start tag 4. Attributes usually come in name/value pairs like: name="value”
HTML http://www.w3schools.com Hyper Text Markup Language HTML Headings <h1~6> 본문 </h1~6> 헤드라인 1~6까지의 글자크기를 갖는다. <hr> 주제 <head> 본문 </head> Html 문서의 제목명을 기술 HTML Paragraphs <p> 본문 </p> 본문을 의미한다. <br> 줄바꾸기 <pre>본문</pre> 작성한 그대로 문장을 표현 HTML 문서에서는 뛰어쓰기는 1자만 인정 자동 줄바꿈 없음 HTML Styles <h1 style="font-family:verdana 문장.제목.본문등의 글자정렬,색상, ;">This is a heading</h1> 배경색상등을 지정한다. HTML Text Formatting <b> - 굵은글자 <strong> - 강조 <i> - 이태리체<em> - 글자크게<mark> - Marked text <small> - Small text <del> - Deleted text <ins> - Inserted text <sub> - Subscript text <sup> - Superscript text HTML Quotations < q> 본문 </q> 인용구 표현 “ ＂ HTML Comments <!-- Comments are not displayed in the browser --> HTML Colors <h2 style="background-color:rgb(255,0,0)"> <h2> (R,G,B) HEX code HTML Computer Code
_blank 새로운 윈도우창을 만들고 오픈 _self 기존의 윈도우창에서 오픈 _parent 부모 프레임에서 오픈 _top 윈도우창 전체를 이용하여 오픈 _framename 지정된 프레임에서 오픈 1. HTML Links 주소 <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> 2.HTML Images 링크속성태그 이미지 부연설명 (사진에 마우스를 올리면 나오는 글) <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0"> <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
3.HTML Tables 가로<td> 세로<tr> Cel 합치기 Colspan, rowspan <colgroup> (테이블 가로칸의 크기지정) <col width="20%" /> <col width="*" /> </colgroup> <thead> 머릿글내용 <tr>한줄 만듬 <th>Num</th> <td>Name</td> 가로칸만듬 <td>ID</td> <td>Moblil</td> <td>etc</td> </tr> </thead> <tbody> 본체 내용 <tr> <th>1</th> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <th>6</th> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tbody> 3.HTML Tables 가로<td> Cel 합치기 Colspan, rowspan 세로<tr> <table style="width:100%"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td>Eve</td> <td>Jackson</td> <td>94</td> </table> 제목줄로 가운데정렬, 굵게표시
defines the description 4.HTML Lists(메뉴) Order List Unorder list type="1" type="A" type="a" type="I" type="i" <ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> <ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> 메뉴표시 disc (default) circle square none 메뉴 서브메뉴 시작 Description Lists 열람표 defines the term 이름 <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> defines the description 설명
5. HTML Block and Inline Elements Block: 태그들끼리 자동 줄 바꿈이 되고 width, height 크기를 지정할 수가 있습니다. <div> <h1> - <h6> <p> <form> 이에 대해 중국의 해군 군사전문가 리제(李杰)는 훙치-9 미사일의 철수가 지난 5일 미국 태평양함대 소속 항공모함 '존 C 스테니스'를 남중국해 해역에서 철수하기로 한 미국 국방부의 결정에 대한 응답일 것이라고 추측했다. Inline: 태그들끼리 자동 줄 바꿈이 되지 않고 크기를 지정할 수가 없습니다 이에 대해 중국의 해군 군사전문가 리제(李 杰)는 훙치-9 미사일의 철수가 지난 5일 미국 태평양함대 소속 항공모함 '존 C <span> <a> <img> none : 태그를 사라지게 합니다. block : div 처럼 블록 지정으로 자동 줄 바꿈과 크기를 지정할 수 있도록 합니다. inline : span 처럼 줄 바꿈이 되지 않고 크기를 지정할 수 없습니다. inline-block : 혼합된 형태로 크기는 지정할 수 있으되 줄 바꿈이 되지 않습니다.
<html> <head> <meta charset="euc-kr"> <title>CSS 속성</title> <style type="text/css"> body { background-color: #e7e7e7; } div { width: 200px; height: 20px; border: 1px solid; padding: 5px; margin: 10px; #div1 {background-color: #F9F249;} #div2 {background-color: #69F354;} #div3 {background-color: #36FFFF;} span { #span1 {background-color: #F9F249; padding: 5px;} #span2 {background-color: #69F354;} #span3 {background-color: #36FFFF;} </style> </head> <body> <div id="div1">div 1</div> <div id="div2">div 2</div> <div id="div3">div 3</div> <span id="span1">span 1</span> <span id="span2">span 2</span> <span id="span3">span 3</span> </body> </html> <html> <head> <meta charset="euc-kr"> <title>CSS 속성</title> <style type="text/css"> body { background-color: #e7e7e7; } div { width: 200px; height: 20px; border: 1px solid; padding: 5px; margin: 10px; display: inline; #div1 {background-color: #F9F249;} #div2 {background-color: #69F354;} #div3 {background-color: #36FFFF;} span { display: block #span1 {background-color: #F9F249; padding: 5px;} #span2 {background-color: #69F354;} #span3 {background-color: #36FFFF;} </style> </head> <body> <div id="div1">display: inline div 1</div> <div id="div2">display: inline div 2</div> <div id="div3">display: inline div 3</div> <span id="span1">display: block span 1</span> <span id="span2">display: block span 2</span> <span id="span3">display: block span 3</span> </body> </html>
6. HTML Iframes 현제 위치에서 다른 웹페이지를 불러서 놓는다. <iframe src="demo_iframe.htm" height="200" width="300"></iframe> 7. HTML Layouts 웹페이지 구성 단위 웹페이지 제목 또는 이미지 메뉴 본문 광고, 로그인정보… 회사 주소,연락처…
8. HTML Responsive Web Design 반응형 웹페이지
9. HTML Forms 사용자가 다양한 정보를 입력하고 서버에 전달하고자 할 때 form 태그를 사용한다. 입력된 데이터를 전달하고자 하는 웹페이지 Get: 보안이 필요없는 방식으로 전달 Post: 보안이 필요한 전달 방식 <form action='/posts.html' method='post‘ > <input type="text" name="firstname“ value=“이름”><br> <input type='submit' value=＇완료'> </form> Text Radio submit 전달되는 정보의 이름 캡션같은 것 완료버튼과 같은것 Fieldset 과 legend
9. HTML Forms <select>태그 <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea> 클릭시 이동할 웹페이지 또는 <button type="button" onclick="alert('Hello World!')">Click Me!</button> Html 5 태그들