Web_01 HTML

01

HTML

본 교육자료는 팀 에어 내의 팀원 교육용으로 제작되었음을 알려드립니다. 팀에어 팀원 외 허락을 받지 않은 사람의 무단도용을 일체 금합니다.

HTML CSS JavaScript

+

Back-End

Front-End

HTML

아니에요

HyperText Markup Language

HyperText Markup Language= 뼈대잡는 놈

<> … </>태그(Tag) 라고 불러요

<tag attribute=“”>

Word = Code초등학교 영어실력만 갖고 있으면 되요

<!DOCTYPE html> <html> <head> <title>제목</title> <meta charset=“UTF-8”> </head> <body> <p>헬로우-월드!</p> </body> </html>

1 2 3 4 5 6 7 8 9 10


1 2 3 4 5 6 7 8 9 10

독타입 (Doctype)

최신버전의 HTML을 사용하기 위해

문서 가장 처음에 입력함.


1 2 3 4 5 6 7 8 9 10

<head> 태그

head = 머리.

가장 중요한 정보들이

이 영역 안에 들어가 있음.

<title>

<meta>*

<style>

<script>

<link>*

* 표시가 붙어있는건 </>가 붙지 않음 (중요!)


1 2 3 4 5 6 7 8 9 10

<body> 태그

웹페이지의 구조, 이미지, 글씨 등

실질적인 내용을 이루는 부분

아까 본 태그 말고

나머지 태그들이 여기에 쓰임

<a>

<h1> ~ <h6>

<img>*

<p>

<form>

<input>*

<button>

<ul><li><div>

Semantic Tags

<textarea>

* 표시가 붙어있는건 </>가 붙지 않음 (중요!)

<br>

Semantic Tag

<header>

<nav>

<aside>

<article>

<section>

<footer>

<article>

<div> 주로 레이어 개념으로 쓰임 (현실은 마땅히 쓸 태그가 생각 안날때 사용)

<form>

(매우 중요함)

웹에서 이걸 모르면 앞으로 웹서비스는 죽어도 못만든다.

사용자들로부터 데이터를 입력받아서

데이터 처리하는 페이지로 전송하는 태그

HTML

class, name, introduce

처리결과

<form method=“POST” action=“/process”> <input type=“number” name=“class”> <input type=“text” name=“name”> <textarea name=“introduce”></textarea> </form>

1 2 3 4 5

<a href=“http://teamair.kr”>누르면 페이지 이동!</a>

<img src=“./img/iknowhtml.jpg”>

<h1>제목</h1>

<p>문단</p>

<ul>

<li>목록1</li>

<li>목록2</li>

</ul>

그외에 많이 쓰이는 것들…

= Paragraph (문단)

= List

= Unordered List

1~6은 사이즈와 중요도, 1이 가장 크고 아름답다 중요하다

HTML에서 안먹는 키들(대표적인 예)

HTML도 언어인지라 쓸데없이

고스란히 있는 키보드 키를 치지 못한다.

HTML에서 안먹는 키들(대표적인 예)

그래서 요렇게 쓴다.

& <br>

< >

백코딩이여일견백번의 코딩이 한번 보는 것보다 훨 낫다.

구 글 신 께 영어로(…)

모 르 는 건

Stack Overflow당신이 겪는 에러들은 모두 여기에 있다.

http://stackoverflow.com

생활코딩http://opentutorials.org

http://facebook.com/groups/codingeverybody

자기소개 사이트 모킹 + HTML파일과 인증샷 찍어서 밴드에 업로드! 마감기한은 5일 뒤 오후 11시 59분까지

아직은 충격과 공포가 아닌 숙제

GET READY FOR THE NEXT LECTURE

(feat. 장문석쌤)

Education

Web_01 HTML