Web: Lecture 2

# HTML: Hypertext Markup Language

    > 구조와 내용을 담고 있음 (어떻게 보여지느냐와는 다름)

    > Text content 를 closing tag로 감싸야함

    > 각 tag 는 element 라 불린다

        >> ex) <element> content </element>

    > HTML 구조

    > Header: 해당 페이지의 요약된 설명을 제공

    > DOCTYPE: 페이지의 코드를 어떻게 해석할지에 대한 정보

    > title: 웹페이지의 제목

        >> <title> Chapter 2 : HTML BASICS </title>

        >> page 의 head에 작성

        >> Web Brower의 title bar 에 위치

 

    > Paragraph : web page 의 body

        >> <p> content </p>

 

    > Headings : 구획별로 나누기 위한 이정표

        >> <h1> header 1 </h1>

        >> <h2> header 2 </h2>

 

    > Horizontal Rule : 시각적으로 페이지를 나누는 역할

    > 몇몇 tag는 추가 정보를 가진다 -> Attributes

        >> <element attribute="value" attribute="value"> content </element>

        >> <a href="page2.html"> NEXT PAGE </a>        

 

    > Link : 다른 페이지로의 이동경로

    > href 를 사용해 경로 명시

 

    > Block : paragraphs, lists, table cells

    > Inline: bold text, code fragment, images

 

    > img : 이미지

        >> <img src="images/gollum.jpg" alt="Gollum from LOTR" />

        >> anchor 를 사용해 이미지를 링크로 만들 수 있다

    

 

    > Line Break : 줄바꿈

        >> <p> Hello, <br /> Bye </p>

 

    > <em> , <strong>

        >> em: emphasize

        >> strong: emphasized & bold

 

    > <!-- content --> : 주석

    

    > <ul> , <li>

        >> <ul> : bulleted list, <li> : items within a list

 

    > <ol> : ordered list (with numbers)

 

    > <dl> : definition of each term

    > <dt> : each term

    > <dd> : each term definition

 

    > <blockquote> : quotation

        >> inline quotation: <p> He said <p> content </p> </p>

        

    > <meta>

        >> head 섹션에 위치하며 페이지에 대한 대략적인 설명 

 

    > table, tr, td, th, caption

       

table example 1

 

    > 왜 HTML 을 형식에 맞춰 사용할까?

        >> 분명하고 구조적이도록

        >> 여러 웹사이에 왔다갔다 하기 위해

        >> 미래에 무언가가 바뀌어도 웹페이지가 똑바로 출력되기 위해

 

    > W3C HTML Validator

        >> HTML 코드가 형식에 맞는지 검증하는 

 

    > HTML 5란?

        >> 새로운 HTML 구조의 기준

        >> 브라우저의 플러그인을 줄임

        >> 이전 HTML 버전에 비해 more rich, semantically meaningful, descriptive, accessible

            -> Forms 2.0 : sliders, search bars, color/number/email/url/date... etc

            -> audio & video tags

            -> canvas tags

 

    > File Formats

        >> Multimedia format은 파일 크기를 줄이기 위해 압축을 사용한다

        >> 몇몇 format은 patented

        >> 몇몇 format은 encrypted

        >> 몇몇 format은 streaming

            -> JPEG, GIF, PNG etc

        >> Audio File Formats

            -> MP3: uses lossy compression that eliminates inaudible sounds

            -> AAC: Apple's iTunes audio file format

            -> WMA : Microsoft Windows Media Audio format

            -> OGG: Linux hippie audio/video format

            -> RA/RM/RAM: Real Audo Format

            -> Sequenced Music: MID, MOD

        >> Video File Formats

            -> MPEG: Motion Picture standard video format

            -> MOV: Apple's QuickTime movie format

            -> WMV: Microsoft's Windows Media Video format

            -> AVI: Classic Microsoft video format

            -> SWF: Macromedia Flash Multimedia format

            -> RV: Real Video Format

 

    > <object>

        >> 어떻게 video를 embed 할지

    > <param>

        >> 어떤 파라미터를 넘길지