1 / 47

HyperText Markup Language (HTML)

HyperText Markup Language (HTML). Internet Computing Laboratory @ KUT Youn-Hee Han. URL. URL Uniform Resource Locator WWW Address Syntax URL Format protocol://host.domain[:port]/directory/filename#name E.g. http://www.kut.ac.kr/kor_new/sub1/sub1_8_1.jsp

addo
Télécharger la présentation

HyperText Markup Language (HTML)

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. HyperText Markup Language (HTML) Internet Computing Laboratory @ KUT Youn-Hee Han

  2. URL • URL • Uniform Resource Locator • WWW Address Syntax • URL Format • protocol://host.domain[:port]/directory/filename#name • E.g. • http://www.kut.ac.kr/kor_new/sub1/sub1_8_1.jsp • http://local.daum.net/map/index.jsp#company • http://icl.kut.ac.kr/zb5/ • ftp://icl.kut.ac.kr/~yusong/sample.file • telnet://mis.gsnu.ac.kr • rlogin://bbs@ara.kaist.ac.kr Web Programming

  3. HTML Page • My First HTML <html> <head> <title>간단한 html 예제</title> </head> <body> <h1>머릿글</h1> 첫번째 단락<p> 두번째단락<p> </body> </html> Head Part (Optional, but recommended) Body Part Web Programming

  4. How to edit HTML • You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like 나모웹에디터, FrontPage, or Dreamweaver, instead of writing your markup tags in a plain text file. • However, if you want to be a skillful Web developer, we strongly recommend that you use a plain text editor to learn your primer HTML!!! Web Programming

  5. HTML Tag • HTML Tag • Web Browser에게 단어 또는 문장의 형태를 지정 • 사용형태 • <tag-name> • <tag-name> text </tag-name> • <tag-name attribute=“argument”> • <tag-name attribute=“argument”> text </tag-name> • Note: • Tag의 대소문자를 구별 않음 (하지만소문자 추천) • [ENTER]는 무시 또는 공백 취급 • 두 개 이상의 공백은 하나로 취급 Web Programming

  6. HTML Tag • HTML Tag • HTML tags are used to mark-up HTML elements • HTML tags are surrounded by the two characters < and > • The surrounding characters are called angle brackets • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • The text between the start and end tags is the element content • HTML tags are not case sensitive, <b> means the same as <B> • But, lowercase is recommended Web Programming

  7. HTML Tag • HTML Tag의 중첩 • 여러 Tag을 한번에 사용할 수 있다. • <b><i>이탤릭 볼드</i></b> • <b><i>이탤릭 볼드</i>볼드</b> • 그러나, 올바르게 중첩(nest)되어야 한다. • 잘못된 예: <b><i>이탤릭 볼드</b></i> • 잘못된 예: <i><b>이탤릭 볼드</i>볼드</b> • 주석 • <!-- ... --> Web Programming

  8. Why do We Use Lowercase Tags? • We have just said that HTML tags are not case sensitive: <B> means the same as <b>. • If you surf the Web, you will notice that plenty of web sites use uppercase HTML tags in their source code. • But, we always use lowercase tags. Why? • If you want to follow the latest web standards, you should always use lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags. Web Programming

  9. Text Formatting Tag • 종류 • paragraph: <p> ... </p> • line break: <br/> • centering: <center> ... </center> • bold: <b> ... </b> (가급적사용 금지) • italic: <i> ... </i> (가급적사용 금지) • font: <font size=[+/-]n> ... </font> (가급적사용 금지) • headline: <h1> ... </h1> ~ <h6> ... </h6> • preformatted text: <pre> ... </pre> • longquotation: <blockquote> ... </blockquote> • short quotation: <q> … </q> • address: <address> ... </address> • subscript: <sub>아래 첨자</sub> • superscript: <sup>윗 첨자</sup> Web Programming

  10. Text Formatting Tag • 논리적 태그 종류 • <code> 프로그램 코드 </code> • <em> 강조 </em> • <strong> 강한 강조 </strong> 위 태그들은 표현이 중요한 것이 아니라그 의미(Semantic)가 중요하다. Web Programming

  11. Text Formatting Tag • <p> & <br/> • <br/> 태그: 줄바꾸기 태그 • 홈페이지 연습입니다.<BR> • 홈페이지<BR> 연습입니다. : 두 줄로 화면에 출력된다. • <p> 태그: 문단 바꾸기 태그(반드시한 쌍으로 입력한다.) • <p>문단 연습<P>: 문단이 끝나면 줄 바꿈과 동시에 1줄을 띄운다. • <p align=“center”> 문단 연습 </p>: 중앙 정렬된문단 <html> <body> <center> 홈페이지 연습 <br/><br/><br/> <p>홈페이지 연습 </p><p/><p/> 홈페이지 연습 </center> </body> </html> <body align=“center”> Web Programming

  12. Text Formatting Tag <pre> 태그 사용 예 <html> <body> <pre>This is preformatted text. It preserves both spaces and line breaks. </pre> <p>The pre tag is good for displaying computer code:</p> <pre>for i = 1 to 10 print i next i </pre> </body> </html> Web Programming

  13. Text Formatting Tag <blockquote>와 <q> 태그 사용 예 <html> <body> Here comes a long quotation: <blockquote> This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. </blockquote> Here comes a short quotation: <q> This is a short quotation. </q> <p> <b>Note:</b> With the blockquote element, the browser inserts line breaks and margins. The q element does not render as anything special. </p> </body> </html> Web Programming

  14. Text Formatting Tag address 태그 사용 예 <html> <body> <address> Author: of this document:<br /> <a href="mailto:donald@disneyland.com">Donald Duck</a> </address> </body> </html> Web Programming

  15. HTML Entities • Character Entities • Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text. • To display a less than sign (<) in HTML, we have to use a character entity. Web Programming

  16. HTML Frames • Frames • With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. • <frameset> & <frame> <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> <frameset rows="30%,*"> <frame name="frame1" src="hs1frm.html"> <frame name="frame2" src="hs2frm.html"> </frameset> Web Programming

  17. HTML Frames • Frame Example 1 <html> <head> <title>프레임세트(frameset) 문서</title> </head> <frameset cols="16%,45%,39%"> <frame src="hs1frm.html" name="frame3" frameborder="1"> <frameset rows="150,*,40%"> <frame src="hs2frm.html" name="frame1" scrolling="no" frameborder="1"> <frame src="hs3frm.html" marginwidth="100" marginheight="150" noresize name="frame5" frameborder="1"> <frame src="hs4frm.html" name="frame2" scrolling="yes" frameborder="1"> </frameset> <frame src="hs5frm.html" name="frame4" frameborder="1"> <noframes><a href="hs2frm.html">hs2frm.html</a></noframes> </frameset> </html> Web Programming

  18. HTML Frames • Frame Example 2 (frame navigation) <html> <frameset cols="120,*"> <frame src="1.html"> <frame src="frame_a.html" name="showframe"> </frameset> </html> 1.html <html> <body> <a href ="frame_a.html" target ="showframe">Frame a</a><br><a href ="frame_b.html" target ="showframe">Frame b</a><br><a href ="frame_c.html" target ="showframe">Frame c</a> </body></html> Web Programming

  19. HTML Frames • The disadvantages of using frames • The web developer must keep track of more HTML documents • It is difficult to print the entire page • Inline Frame • create an inline frame (a frame inside an HTML page) • <iframe></iframe> • Example <html> <body> <iframe src="http://www.daum.net"></iframe> <p>Some older browsers don't support iframes.</p> <p>If they don't, the iframe will not be visible.</p> </body> </html> Web Programming

  20. Link Tag • Anchor Tag와 href 속성 • <a href = “path"> ... </a> • 예 • <a href="http://www.apple.com">애플컴퓨터</a> • Relative Path vs. Absolute Path • Relative Path • href="abc.html" • href="../ddd/abc.html" • Absolute Path • href="http://www.joongang.co.kr " Web Programming

  21. Link Tag • Target 속성 • With the target attribute, you can define where the linked document will be opened. • <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> • 종류 • _blank • all the links will open in new windows • _self • all the links will open in the same frame they where clicked • _parent • all the links will open in the parent frameset • _top • all the links will open in the full body of the window Web Programming

  22. Link Tag • Target 속성에서 _top이나 _parent의 차이점 • _top이나 _parent의 차이점을 구별하시기 위해서는 여러 레벨의 frame을 고려 • _parent • 자기보다 바로 한 단계 위의 부모 frame을 의미 • 만약 frame이 여러 개가 있고 "frame1 > frame2 > frame3 > frame4" 라는 계층순서라면 frame4에서 _parent 속성을 지닌 링크를 클릭하면 frame3에 페이지가 띄워짐. • _top • 가장 상위단계에 있는 frame을 의미 • frame1 > frame2 > frame3 > frame4 라는 똑같은 계층 순서에서 frame4에서 _top 속성을 지닌 링크를 클릭하면 frame1에 페이지가 띄워짐 • 결과적으로 차이점은 한 단계 위인가, 아니면 최상위를 의미하는 가의 차이. Web Programming

  23. Link Tag • Name 속성 • We can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. • Name 태그 설정 • <a name="abc">aaa</a> • 연결 • <a href="http://mis.gsnu.ac.kr/a.html#abc> ... </a> • 같은 문서 내에서의 연결 • <a href="#abc"> ... </a> Web Programming

  24. Link Tag • Name 속성 사용 예 • Link to a e-mail address • <a href="mailto:yhhan@kut.ac.kr">이메일 보내기</a> <html> <body> <a href = "#abc">클릭</a> <br/> <br/> . . <br/> <a name="abc">aaa</a> </body> </html> 100개 이상의 <br/> Web Programming

  25. List Tag • 종류 • Unnumbered Lists • <ul> <li> ... <li> ... </ul> • Numbered Lists • <ol> <li> ... <li> ... </ol> • Definition Lists • <dl> [<dt> ...] <dd> ... [<dt> ...] <dd> ... </dl> - <litype=“disk”> 원 : 원모양(●)의 기호 출력 - <litype=“circle”> 원 : 원모양(○)의 기호 출력 - <litype=“square”> 사각형 : 사각형(■)의 기호 출력 - <ol type=“A”>: 순서가 A, B, C ․ ․ ․로 나타남. - <ol type=“a”>: 순서가 a, b, c ․ ․ ․로 나타남. - <ol type=“I”>: 순서가 I, II, III ․ ․ ․로 나타남. - <ol type=“i”>: 순서가 i, ii, iii ․ ․ ․로 나타남. - <ol start=“10”>: 순서가 10, 11, 12 ․ ․ ․로 나타남. Web Programming

  26. List Tag • List Tag 사용 예 <dl> <dt>경영정보전공 <dd>경영정보시스템, 전문가시스템 <ol> <li>인공지능프로그래밍 <li>전문가시스템 </ol> <dt>금융공학전공 <dd>재무분석, 원가회계, 마케팅 <ul> <li>재무분석 <li>회계 </ul> </dl> Web Programming

  27. Line Tag • <hr> 태그 • Horizontal Line • 사용법 • <hr size=n width=n[%] align=left/center/right [noshade] > • 예 • <hr size=50 width=50> <hr align=“left” width=“30%” color=“pink” size=“5”> : 웹 화면의 30% 길이, 색상이 핑크 색, 굵기 5픽셀, 왼쪽 정렬하여 선을 그린다. Web Programming

  28. Image Tag • Background image • <body background=“image file”> • <body bgcolor="#000000"> • <body bgcolor="rgb(0,0,0)"> • <body bgcolor="black"> • <body background="http://www.w3schools.com/clouds.gif"> • <body> 태그와 글자 색상 <html> <body background="background.jpg"> <h3>Look: A background image!</h3> <p>Both gif and jpg files can be used as HTML backgrounds.</p> <p>If the image is smaller than the page, the image will repeat itself.</p> </body> </html> NOTE: If the image is smaller than the page, the image will repeat itself. <body bgcolor=“skyblue” text=“#0000ff” link= “#ff0000” vlink=“#00ff00”> Web Programming

  29. Image Tag • <img> 태그 • 사용법 • <img src="address/... .gif" align="top|middle|bottom|left|right" /> • <img src="address/... .jpg" /> • alt 속성 • The alt attribute is used to define an "alternate text" for an image. • <img src="boat.gif" alt="Big Boat" /> • border 속성 • <imgsrc="boat.gif" border="0" /> Web Programming

  30. Image Tag • <img> 태그 사용 예 - 1 <html> <body> <p> An image <img src="bird.jpg" align="bottom" width="48" height="48"> in the text </p> <p> An image <img src ="bird.jpg" align="middle" width="48" height="48"> in the text </p> <p> An image <img src ="bird.jpg" align="top" width="48" height="48"> in the text </p> <p>Note that bottom alignment is the default alignment</p> <p> An image <img src ="bird.jpg" width="48" height="48"> in the text</p> </body> </html> Web Programming

  31. Image Tag • <img> 태그 사용 예 - 2 <html> <body> <p> <img src ="bird.jpg" align ="left" width="48" height="48"> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p> <p> <img src ="bird.jpg" align ="right" width="48" height="48"> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. </p> </body> </html> Web Programming

  32. Image Tag • <img> 태그 사용 예 - 3 <html> <body> <p> You can also use an image as a link: <a href="lastpage.htm"> <img border="0" src="bird.jpg" width="65" height="38"> </a> </p> </body> </html> Web Programming

  33. Image Map • Image Map • 용도 • 이미지 내의 클릭 위치에 따라 다른 사이트로 하이퍼 링크 • 사용법 • <img src="image" usemap="#name"> • <map name="name"> • <area shape="poly" coords="x1,y1,x2,y2,…" href="address"> • <area shape="rect" coords="x1,y1,x_size,y_size" href="address"> • <area shape="circle" coords="x,y,radius" href="address"> • </map> <map>: Defines an image map <area>: Defines a clickable area inside an image Web Programming

  34. Image Map • Image Map 사용 예 <html> <body> <p> Click on one of the planets to watch it closer: </p> <img src="planets.gif" width="145" height="126" usemap="#planetmap"> <map id="planetmap" name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun” href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury” href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus” href="venus.htm"> </map> </body> </html> Web Programming

  35. Image Map • How to know coordination for creating Image Map • In the execution of the above example, you will see that if you move the mouse over the image, the coordinates will be displayed on the status bar. <html> <body> <p> <a href="tryhtml_ismap.htm"> <img src="planets.gif” ismap width="146" height="126"> </a> </p> </body> </html> Web Programming

  36. Table Tag • Table내 각 컬럼에 제목 달기 • Heading 속성 • Headings in a table are defined with the <th> tag <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Web Programming

  37. Table Tag • 비어있는 셀 디자인 <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table> <td>&nbsp;</td> or <td><pre> </pre></td> Web Programming

  38. Table Tag • Caption 달기 <html> <body> <table border="6"> <caption>My Caption</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> Web Programming

  39. Table Tag • Colum Spanning <html> <body> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> </body> </html> Web Programming

  40. Table Tag • Row Spanning <html> <body> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> Web Programming

  41. Table Tag • Cell Padding <html> <body> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> Web Programming

  42. Table Tag • Cell Spacing <html> <body> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> Web Programming

  43. Table Tag • Add a background color or a background image to a table <html> <body> <table border="1" bgcolor="red"> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table> <table border="1" background="bgdesert.jpg"> <tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr> </table> </body> </html> Web Programming

  44. Table Tag • Add a background color or a background image to a table cell <html> <body> <table border="1"> <tr> <td bgcolor="red">First</td> <td>Row</td> </tr> <tr> <td background="bgdesert.jpg“>Second</td> <td>Row</td> </tr> </table> </body> </html> Web Programming

  45. Table Tag • Align the content in a table cell <html> <body> <table width="400" border="1"> <tr> <th align="left">Money spent on....</th> <th align="right">January</th> <th align="right">February</th> </tr> <tr> <td align="left">Clothes</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">Make-Up</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">Food</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">Sum</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr> </table> </body> </html> Web Programming

  46. Exercise • 1. Make the following table • 2. Make the following table Web Programming

  47. Exercise • 3. Make the following table Web Programming

More Related