Download presentation
Presentation is loading. Please wait.
1
HTML 문서 작성 PART 2 Chapter 2 Part 2
이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 2 Part 2
2
텍스트 서식 관련 태그
3
text.html <!DOCTYPE html> <html> <body>
<p><b>이 텍스트는 bold입니다.</b></p> <p><strong>이 텍스트는 strong입니다.</strong></p> <p><i>이 텍스트는 italic입니다.</i></p> <p><em>이 텍스트는 emphasized입니다.</em></p> <p><code>이 텍스트는 code입니다.</code></p> <p><sub> subscript</sub> 이고 <sup>superscript</sup> 입니다.</p> </body> </html>
5
text2.html <!DOCTYPE html> <html> <body>
<p>Do not forget to buy <mark>milk</mark> today.</p> <p>오늘 <mark>우유</mark> 사오는 것 잊지 마세요.</p> <p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <p>내가 좋아하는 색은 <del>파란색</del> <ins>빨간색</ins>입니다!</p> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <p> <abbr title="World Health Organization">WHO</abbr> 는 1948년에 설립되었다.</p> </body> </html>
7
도전 실습 practice/0314/special.html
8
특수문자 입력
9
링크 걸기 - <A> … </A> 태그
하이퍼링크(또는 링크)는 다른 문서로 점프할 수 있는 단어나 이미지 <a href="사이트 주소">링크 이름</a> <a href="
10
링크 예제 – practice/0314/a.html
다음과 같이 구글, 다음, 네이버의 링크를 걸어보자. <!doctype html> <html> <body> <p><a href=" <p><a href=" <p><a href=" </body> </html>
11
결과 기본적으로 링크를 클릭하면 현재 페이지에 새로운 링크 페이지가 열린다.
12
target 설정 링크된 페이지가 열릴 창을 설정한다. target 설명 _blank 새로운 창에서 문서를 연다 _self
현재 창에 문서를 연다(default: 생략 가능) _parent 부모 프레임에 문서를 연다 _top 해당 프레임을 포함한 최고 상단 창에 문서를 연다. frame이름 지정된 창에 문서를 연다
13
target 예제 – practice/0314/target.html
다음과 같이 구글, 다음, 네이버의 링크를 걸어보자. <!doctype html> <html> <body> <p><a href=" target= "_blank">구글</a></p> <p><a href=" target="_self">다음</a></p> <p><a href=" target="_top">네이버</a></p> </body> </html>
14
북마크로 설정하기/이동하기 북마크 설정 북마크로 링크 걸기 <a id=“bookmark”></a>
<h1 id=“first”>여기는 첫번째 북마크입니다.</h> <p id=“second”>여기는 두번째 북마크입니다.</p> <a href=“URL주소#북마크이름”>첫번째 북마크로</a>
15
북마크 예제 – practice/0314/bookmark.html
다음과 같이 구글, 다음, 네이버의 링크를 걸어보자. <!doctype html> <html> <body> <p> <a href=" <a href=" <a href=" <a href=" <a href=" </p> </body> </html>
16
실행 결과
17
링크 경로 – 상대경로/절대경로 절대경로 상대경로
상대경로는 현재 문서의 디렉토리를 기준으로 경로표시가 없으면 같은 디렉토리에서 찾는다. <a href=" <a href="poem.html">시</a> <a href="test/poem.html">test 디렉토리에 있는 시</a>
18
리스트- <ul>, <ol>, <li> 태그
리스트: 항목들을 나열 <ul>: unordered list 즉 번호 없는 리스트 <ol>: ordered list 즉 번호 있는 리스트 <li>: 나열하는 리스트의 각 항목
19
리스트 예제 – practice/0314/list.html
<!doctype html> <html> <body> <h2>순서없는 리스트 ul</h2> <ul> <li><a href=" <li><a href=" <li><a href=" </ul>
20
리스트 예제 – list.html(계속) <h2>순서있는 리스트 ol</h2> <ol>
<li><a href=" <li><a href=" </ol> </body> </html>
21
결과
22
중첩 리스트 <ul> <li>리스트1 <li> … </li> </ul>
23
중첩 리스트-practice/0314/nestedlist.html
<!doctype html> <html> <body> <ul> <li>순서없는 리스트 ul <li><a href=" <li><a href=" <li><a href=" </ul> </li> <li>순서있는 리스트 ol <ol> <li><a href=" <li><a href=" </ol> </body> </html>
24
결과
25
Q&A Have a Nice Day!!!
Similar presentations
