HTML 문서 작성 PART 1 Chapter 2 Part 1 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 2 Part 1
HTML 문서의 기본 기조 <!DOCTYPE HTML> <html> <head> <title>건국대학교 컴퓨터공학과</title> </head> <body> <h1>Hello Everybody!</h1> <img src="ku_logo.jpg"> <p>건국대학교 컴퓨터공학과에 오신 것을 환영합니다.</p> </body> </html> 문서 유형 문서 정보 웹 문서의 시작과 끝 문서 내용
HTML5 기본 용어 태그(tag) 요소(element) 속성(attribute) <head>, <title>, <p>와 같이 HTML을 기술하기 위한 일종의 명령어 요소(element) (시작태그+콘텐츠+종료태그> 속성(attribute) 태그에 추가 정보를 제공 <img src="ku_logo.jpg">
태그(tag) 시작 태그 + 종료 태그가 있는 태그도 있는데, 종료태그는 /로 시작한다. <br>, <hr>과 같이 종료태그가 없는 태그도 있다.
HTML 문서 작성시 주의 사항 태그 이름은 대소문자를 구별하지 않는다. 연속된 공백은 하나로 취급한다. <HTML> … </html> 연속된 공백은 하나로 취급한다. <p>여러 공백은 하나로 취급</p> 태그 안에 다른 태그를 포함할 수 있다. <p>강조할 때 <b>bold</b>체를 사용한다.<p> 속성을 지정할 때 일반적으로 큰따옴표. 작은 따옴표를 사용하기도 한다. <img src=“ku_logo.jpg”>
주석 (comment) 주석을 추가할 때는 <!– comment -->를 사용한다. 실행
<!DOCTYPE> 선언 웹페이지에 사용된 HTML의 종류와 버전을 지정
주요 태그 알아보기 – tag list <!-- … --> 주석 <span> 작은 블럭 <h1> to <h6> 제목(heading) <audio> 음악 삽입 <p> 문단 <video> 비디오 삽입 <div> 블록 지정 <hr> 가로줄 삽입 <img> 그림 삽입 <br> 줄 바꿈 <a> 링크 걸기 <b> bold <ul>, <ol>, <li> 리스트 만들기 <iframe> 창 속의 창 <table>, <tr>, <td> 테이블 만들기 <form> Input 양식
제목(heading) 태그 - <h1> to <h6> 헤딩(heading): 웹 페이지의 머리기사(headline) <!DOCTYPE html> <html> <body> <h1>이것이 heading 1 입니다.</h1> <h2>이것이 heading 2 입니다.</h2> <h3>이것이 heading 3 입니다.</h3> <h4>이것이 heading 4 입니다.</h4> <h5>이것이 heading 5 입니다.</h5> <h6>이것이 heading 6 입니다.</h6> </body> </html>
문단(paragraph) 태그 - <p> <!DOCTYPE html> <html> <body> 이것이 첫번째 단락입니다. 이것이 두번째 단락입니다. 이것이 세번째 단락입니다. </body> </html>
문단(paragraph) 태그 - <p> <!DOCTYPE html> <html> <body> <p>이것이 하나의 단락입니다.</p> </body> </html>
<hn>, <p> 태그의 속성 - align
속성 사용 예 <!DOCTYPE html> <html> <body> <h1 align=center>웹프로그래밍</h1> <p align=left>Left alignment</p> <p align=right>Right alignment</p> </body> </html>
속성 사용 예
<br> 태그 강제 줄바꿈 태그 <!DOCTYPE html> <html> <body> <p>여기는 <br>br태그를 사용하여 <br>줄을 바꾸었습니다. </p> </body> </html>
<p> 태그를 이용하면 문단 과 문단 사이에 빈 줄 삽입 <b> 태그는 줄만 바꿈
실습#1 - ~/practice/0309/paragraph.html 학과안내 컴퓨터공학과는 21세기 정보화 시대를 이끌어 나갈 전문성, 실용성, 창의력을 겸비한 고급 컴퓨터 전문 엔지니어 양성을 기본 목표로 첨단 과학기술 분야의 급속한 변화에 적응하고 발전을 선도해 나갈 수 있도록 미래 지향적이고 실용적인 교육을 추구합니다. 미래의 정보화 사회와 유비쿼터스 시대를 위한 고급 IT기술의 개발을 위해서는 소프트웨어와 하드웨어를 통합적으로 아우르는 전문 지식이 필요합니다. 우리 학과에서는 컴퓨터 하드웨어 및 소프트웨어 각 분야의 국내외 전문 교수진들을 중심으로 최첨단 IT 서비스 및 정보시스템산업 분야의 고급 인력을 양성하기 위해 최선의 노력을 기울이고 있습니다.
실습#2 - 진달래꽃 진달래꽃 나 보기가 역겨워 가실 때에는 말없이 고이 보내 드리우리다. 영변에 약산 아름따다 가실 길에 뿌리우리다. 가시는 걸음 걸음 놓인 그 꽃을 사뿐히 즈려 밟고 가시옵소서. 죽어도 아니 눈물 흘리우리다.
실습#2 ~/practice/0309/jindallae1.html ~/practice/0309/jindallae2.html <body> … </body> 태그 사이에 본문 그대로 삽입(아무런 태그 사용없이) ~/practice/0309/jindallae2.html <p>태그와 <br> 태그를 사용하여 줄바꿈
텍스트 서식 관련 태그
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>
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>
도전 실습 ~/practice/0309/special.html
특수문자 입력
과제#1 public_html/homework/hw1 디렉토리로 전송 다음 각 문서를 작성하여 제목 태그, 문단 태그, 텍스트 서식 태그 등을 적절히 사용 3 파일을 TLS에 탑재 poem.html : 인터넷을 검색하여 시 5편을 찾아 시집을 만든다. news.html: 5개의 신문기사를 검색하여 작성. 수평선으로 구분선 me.html: 자기소개서 (공개 가능한 수위로 작성)