HTML [HTML Basics]

HTML

---

• Surrounds text content with opening and closing tags
• Each tag's name is called an element
• 문법(format)은 <element> content </element> 과 같다
• Mark up language

XHTML

• a newer version of HTML
• XML + HTML is XHTML
• A strict XHTML page uses some different syntax and tags

the header 는 페이지를 묘사하고 body는 페이지의 내용을 채운다.

HTML 문법

---

<title>

• Placed within the head of the page
• Displayed in the web browser's title bat and when bookmarking the page

<p>

• Placed within the body of the page
• tage안의 text출력

<h1>, <h2>, ... <h6>

• h1이 가장 글씨가 크고 tag안의 text출력

<hr /> or <br />

• hr 은 밑줄 치기 br은 new line

<span>

• inline으로 글자안을 색칠하거나 등등 

Wait!

inline 과  block의 차이를 알고가자.

• block element는 content의 큰영역을 다룰때 사용함 그래서 요소하나하나가 한줄을 차지한다.
• inline은 text내의 특정부분만 효과를 주기위해 사용 그래서 요소들이 한줄에 들어간다.

<a>

• anchors are inline elements , so they must be placed inside a block element such as h1 or p

some tags can contain addtional information called attirbutes

• syntax: <elements attribute ="value" attribute ="value"> content</element>
• example: <a href="page2.html"> Next page </a>
• href은 연결할 주소를 지정하는 속성

<img>

• Ex: <img src= "image/hi.jpg" alt="hi pic" title="hi man" />
• src는 이미지의 url , alt는 alternate의 약자로 이미지를 불러오지 못할경우 대체하는 문자이고 title은 이미지를 마우스로 hovering했을때 나타나는 문자이다.

<!-- content -->

• 주석 즉, comment역할
• comment는 nested할 수 없고 -- 을 포함 못한다.

<em> , <strong>

• em 은 강조된 text (usually rendered in italic)
• strong은 strongly emphasized text (usually rendered in bold)

<ul> , <li> , <ol>

• ul 은 bulleted list of item을 말하며 실제로 ul안의 텍스트를 tab 시켜준다
• li 는 리스트 안의 single item 을 말한다.
• ol 은 리스트 안의 number을 매겨준다 (li와 similar function)
• ul을 nest안해주면 계속 내용들이 들여쓰기 됨

<dl> ,<dt> , <dd> : definition list

• dl represents a list of definitions of item (block)
• dt represents each term , and dd its definition

<blockquote> :Quotations

<q> : inline quotations

• 따옴표 

밑은 특수 기호 쓰는 방법들

<code>

• a short section of computer code (fixed-width font)

<pre>

• displayed with exactly the whitespace /line breaks given in the text
• shown in a fixed-width font by default
• how would it look if we had instead enclosed it in code tags

-> when showing a large section of computer code, enclose it in a <pre> to preserver whitespaec and a code to describe the semantics of the cotent

Web standards

---

• why use XHTML and web standards?
• more rigid and structured language
• more interoperable across different web browsers
• more likely that our pages will display correctly in the future
• can be interchanged with other XML data

<meta> : web page metadata

• information about ur page
• placed in the head of ur XHTML page
• meta tags often have both the name and content attributes
• some meta tags use the http-equiv attribute instead of name

-Content-Type은 W3C의 tentatively valid 경고를 없애준다. 즉, 문서의 타입을 정함

-refresh tag는 한페이지에서 다른 페이지로 redirect해줌

• Ex) <meta http-equiv="refresh" content="5;url="http://www.ex.com" />

keywords , description 메타 정보는 content안의 내용이 검색엔진에 검색

meta tag는 (x)html 문서가 어떤 내용을 담고 있고, 그 문서의 핵심어는 무엇이며, 누가 만들었는지, 문자 세트는 어떤 것을 사용하는지 등의 메타 정보를 담고 있습니다.