반응형
2.1 Introduction
- HTML(HyperText Markup Language)
- HyperText : 평문 이상의 데이터(비디오, 오디오 등등)
- Markup Language : 시작과 끝 을 표현하는 언어
2.2 Markup Languages
HTML Markup 의 특징
모든 태그들이 인터프리터(브라우저)에 저장되어 있다.
모든 태그들은 닫힘이 있어야한다.
Not Case Sensitive : 대문자 소문자 구분하지 않는다.
2.3 Editing HTML
- HTML Source Code
- HTML 문서는 텍스트 에디터 를 통해 만들 수 있다.
- Notepad(WIN), Vi(UNIX), Atom 등등
- HTML 인터프리터는 Line by Line 으로 문법 검사를 하며 만약에 발생하는 문법 오류를 무시 한다.
- 홈페이지는
index.html파일이다. (브라우저는 자동으로index.html파일을 불러온다.)
- HTML 문서는 텍스트 에디터 를 통해 만들 수 있다.
2.4 Common Elements
<!DOCTYPE HTML5>
<html>
<!-- Fig.2.1 : main.html -->
<!-- Our first Web page -->
<head>
<title>XML How to Program - Welcome</title>
</head>
<body>
<p>Welcome to Our Web Site!</p>
</body>
</html><html> ~ </html>: HTML 로 제작된 페이지임을 나타내는 태그<!-- ~~ -->: 주석(Comments)<head> ~ </head>: 페이지의 정보를 명시하는 태그<title> ~ </title>: 브라우저의 맨 위에 보여지는 페이지 이름을 설정하는 태그<body> ~ </body>: 페이지의 본문에 해당되는 태그, 컨텐츠를 표시하는 공간<p> ~ </p>: 문단을 뜻하는 태그<head>태그는 옵션이지만<body>태그는 필수적으로 입력해야 한다.위 예시를 보면 코드가 마치 트리구조 같이 보인다. 실제로 HTML 파일은 트리 구조로 저장된다.
2.5 Headers
<!DOCTYPE HTML5>
<html>
<!-- Fig 2.2 : header.html -->
<!-- HTML headers -->
<head>
<title>XML How to Program - Headers</title>
</head>
<body>
<h1>Level 1 Header</h1>
<h2>Level 2 Header</h2>
<h3>Level 3 Header</h3>
<h4>Level 4 Header</h4>
<h5>Level 5 Header</h5>
<h6>Level 6 Header</h6>
</body>
</html>
- 제목의 단계를 명시하는 머릿말 태그
2.6 Linking (Hyperlinks)
<!DOCTYPE HTML5>
<html>
<!-- Fig. 2.3 : links.html -->
<!-- Introduction to hyperlinks -->
<head>
<title>XML How to Program - Links</title>
</head>
<body>
<h1>Here are my favorite Internet Search Engine</h1>
<p><strong>Click on the Search Engine address to go to that page.</strong></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.altavista.com">AltaVista</a></p>
<p><a href="http://www.askjeeves.com">Ask Jeeves</a></p>
<p><a href="http://www.webcrawler.com">WebCrawler</a></p>
</body>
</html>
<a> ~ </a>: Anchors- 텍스트나 이미지를 표현하는 태그
- href 속성과 함께 사용하여 하이퍼링크문을 생성할 수 있다.
2.7 Images
<!DOCTYPE HTML5>
<HTML>
<!-- Fig. 2.5 : pictue.html -->
<!-- Adding images with HTML -->
<HEAD>
<TITLE>XML How to Program - Welcome</TITLE>
</HEAD>
<BODY>
<P><IMG SRC="xmlhtp.jpg" HEIGHT="238" WIDTH="183" ALT="Deonstration of the alt attribute"></P>
</BODY>
</HTML>
<img>태그의 속성은 다음과 같다.- src : 이미지의 파일 위치 를 나타낸다.
- height : 이미지의 높이 를 나타낸다.
- width : 이미지의 너비 를 나타낸다.
- alt : 이미지를 성공적으로 불러오지 못했을 때 대체문구 를 나타낸다.
2.8 Special Characters and More Line Breaks
<!DOCTYPE HTML5>
<html>
<!-- Fig. 2.7 : contact.html -->
<!-- Inserting special characters -->
<head>
<title>XML How to Program - Contact Page</title>
</head>
<body>
<!-- Special characters are entered using the form &code; -->
<p>My email address is <a href = "mailto:deitel@deitel.com">deitel@deitel.com</a>. Click on the address and your browser wil automatically open an email message and address it to my address.</p>
<hr><!-- Inserts a horizontal rule -->
<p>All information on this site is <strong>©</strong>Deitel <strong>&</strong> Associate, 1999.</p>
<!-- Text can be struck out with a set of <del>...</del> -->
<!-- tags, it can be set in subscript with <sub>...</sub>, -->
<!-- and it can be set into superscript with <sup>...</sup> -->
<p><del>You may copy up to 3.14 x 10<sup>2</sup> characters worth of information from this site.</del> Just make sure you <sub>do not copy more information</sub> than is allowable.</p>
<p>No permission is needed if you only need to use <strong>< ¼</strong> of the information presented here.</p>
</body>
</html>
- 특수 문자(예약어, 키워드) 사용
- 형식 : &
code; <: less than, < 를 나타낸다.&fracXY;: X/Y 를 나타낸다.(분수)
- 형식 : &
- 글을 꾸미는 태그
<del>...</del>: 태그 안에 텍스트를 지우는 것처럼 줄을 긋는다.<sup>...</sup>: 태그 안에 텍스트를 어깨 문자 로 출력한다.<sub>...</sub>: 태그 안에 텍스트를 아래에 쓰는 문자 로 출력한다.<hr>: 페이지 안에 수평선을 긋는다.
반응형
'KoreaTech' 카테고리의 다른 글
| [인터네트워킹] 2. 기본 네트워크 구축 (0) | 2019.09.12 |
|---|---|
| [인터네트워킹] 1. 인터네트워킹 개요 (0) | 2019.09.11 |
| [데이터분석개론] Gephi로 데이터 분석 및 시각화 실습 (0) | 2019.05.03 |
| [데이터분석개론] Gephi 실습하기 - 데이터 수집과 시각화 (2) | 2019.04.26 |
| [데이터분석개론] Gephi 설치, 메모리 설정, 업데이트 (0) | 2019.04.19 |