47
HyperText Markup Language (HTML) Internet Computing Laboratory @ KUT Youn-Hee Han
| Date post: | 03-Jan-2016 |
| Category: |
Documents |
| Upload: | noah-gordon |
| View: | 224 times |
| Download: | 3 times |
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 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://[email protected]
Web Programming2
My First HTML
Web Programming3
HTML Page
<html><head><title> 간단한 html 예제 </title></head><body><h1> 머릿글 </h1>첫번째 단락 <p>두번째단락 <p></body></html>
Head Part (Optional, but recommended)
Body Part
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 Programming4
How to edit HTML
Web Programming5
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 Programming6
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
HTML TagHTML Tag 의 중첩
여러 Tag 을 한번에 사용할 수 있다 . <b><i> 이탤릭 볼드 </i></b> <b><i> 이탤릭 볼드 </i> 볼드 </b>
그러나 , 올바르게 중첩 (nest) 되어야 한다 . 잘못된 예 : <b><i> 이탤릭 볼드 </b></i> 잘못된 예 : <i><b> 이탤릭 볼드 </i> 볼드 </b>
주석 <!-- ... -->
Web Programming7
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 Programming8
Why do We Use Lowercase Tags?
종류 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> long quotation: <blockquote> ... </blockquote> short quotation: <q> … </q> address: <address> ... </address> subscript: <sub> 아래 첨자 </sub> superscript: <sup> 윗 첨자 </sup>
Web Programming9
Text Formatting Tag
논리적 태그 종류 <code> 프로그램 코드 </code> <em> 강조 </em> <strong> 강한 강조 </strong>
Web Programming10
Text Formatting Tag
위 태그들은 표현이 중요한 것이 아니라그 의미 (Semantic) 가 중요하다 .
<p> & <br/> <br/> 태그 : 줄바꾸기 태그
홈페이지 연습입니다 .<BR> 홈페이지 <BR> 연습입니다 . : 두 줄로 화면에 출력된다 .
<p> 태그 : 문단 바꾸기 태그 ( 반드시 한 쌍으로 입력한다 .) <p> 문단 연습 <P>: 문단이 끝나면 줄 바꿈과 동시에 1 줄을
띄운다 . <p align=“center”> 문단 연습 </p>: 중앙 정렬된 문단
Web Programming11
Text Formatting Tag
<html><body><center> 홈페이지 연습 <br/><br/><br/><p> 홈페이지 연습 </p><p/><p/>홈페이지 연습</center></body></html>
<body align=“center”>
Web Programming12
Text Formatting Tag
<pre> 태그 사용 예<html><body><pre>This ispreformatted text.It preserves both spacesand line breaks.</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>for i = 1 to 10 print inext i</pre></body></html>
Web Programming13
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 Programming14
Text Formatting Tag
address 태그 사용 예<html><body><address> Author: of this document:<br /><a href="mailto:[email protected]">Donald Duck</a></address></body></html>
HTML EntitiesCharacter 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 Programming15
HTML FramesFrames
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>
Web Programming16
<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>
HTML FramesFrame Example 1
Web Programming17
<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>
HTML FramesFrame Example 2 (frame navigation)
Web Programming18
<html><frameset cols="120,*"><frame src="1.html"><frame src="frame_a.html" name="showframe"></frameset></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>
1.html
HTML FramesThe 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
Web Programming19
<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>
Link TagAnchor 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 Programming20
Link TagTarget 속성
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 Programming21
Link TagTarget 속성에서 _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 Programming22
Link TagName 속성
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 Programming23
Web Programming24
Link Tag
Name 속성 사용 예
Link to a e-mail address <a href="mailto:[email protected]"> 이메일 보내기 </a>
<html><body><a href = "#abc"> 클릭 </a><br/><br/>..<br/><a name="abc">aaa</a></body></html>
100 개 이상의 <br/>
List Tag종류
Unnumbered Lists <ul> <li> ... <li> ... </ul>
Numbered Lists <ol> <li> ... <li> ... </ol>
Definition Lists <dl> [<dt> ...] <dd> ... [<dt> ...] <dd> ... </dl>
Web Programming25
- <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 ․ ․ ․ 로 나타남 .
- <li type=“disk”> 원 : 원모양 (●) 의 기호 출력- <li type=“circle”> 원 : 원모양 (○) 의 기호 출력- <li type=“square”> 사각형 : 사각형 (■) 의 기호 출력
List TagList Tag 사용 예
Web Programming26
<dl><dt> 경영정보전공<dd> 경영정보시스템 , 전문가시스템 <ol> <li> 인공지능프로그래밍 <li> 전문가시스템 </ol><dt> 금융공학전공<dd> 재무분석 , 원가회계 , 마케팅 <ul> <li> 재무분석 <li> 회계 </ul></dl>
Line Tag<hr> 태그
Horizontal Line 사용법
<hr size=n width=n[%] align=left/center/right [noshade] >
예 <hr size=50 width=50>
Web Programming27
<hr align=“left” width=“30%” color=“pink” size=“5”> : 웹 화면의 30% 길이 , 색상이 핑크 색 , 굵기 5 픽셀 , 왼쪽 정렬하여 선을 그린다 .
Image TagBackground 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> 태그와 글자 색상
Web Programming28
<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”>
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 속성 <img src="boat.gif" border="0" />
Web Programming29
Image Tag<img> 태그 사용 예 - 1
Web Programming30
<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>
Image Tag<img> 태그 사용 예 - 2
Web Programming31
<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>
Image Tag<img> 태그 사용 예 - 3
Web Programming32
<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>
Image MapImage 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>
Web Programming33
<map>: Defines an image map<area>: Defines a clickable area inside an image
Image MapImage Map 사용 예
Web Programming34
<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>
Image MapHow 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.
Web Programming35
<html><body><p><a href="tryhtml_ismap.htm"><img src="planets.gif” ismap width="146" height="126"></a></p></body></html>
Table Tag Table 내 각 컬럼에 제목 달기
Heading 속성 Headings in a table are defined with the <th> tag
Web Programming36
<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>
Table Tag 비어있는 셀 디자인
Web Programming37
<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> </td>or<td><pre> </pre></td>
Table Tag Caption 달기
Web Programming38
<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>
Table Tag Colum Spanning
Web Programming39
<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>
Table Tag Row Spanning
Web Programming40
<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>
Table Tag Cell Padding
Web Programming41
<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>
Table Tag Cell Spacing
Web Programming42
<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>
Table Tag Add a background color or a background image to a table
Web Programming43
<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>
Table Tag Add a background color or a background image to a table cell
Web Programming44
<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>
Table Tag Align the content in a table cell
Web Programming45
<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>
Exercise1. Make the following table
2. Make the following table
Web Programming46
Exercise3. Make the following table
Web Programming47
A B C
D E F G H
I J
K L M N
O P Q
