티스토리 뷰

1. HTML Basics

kkd927 kkd927 2014.07.06 02:28

Introduction to HTML


1. Why learn HTML?


HTML : 모든 웹페이지 구조를 제공하는 골격

<> : communicate 를 위한 HTML의 문법

<strong> </strong> : 텍스트를 진하게 해줌





2. HTML and CSS


HTML (HyperText Markup Language)

- HyperText : 링크를 포함한 텍스트

- Markup language : 문서에 포함된 문장이나 그림, 표, 소리 등과 같은 문서 내용에 대한 정보가 아니라 그 문장과 그림,표는 어떻게 배치되고 글자는 어떤 크기와 모양을 가지며, 들여쓰기와 줄간격, 여백 등에 대한 정보를 가지는 언어



CSS (Cascading Style Sheets)

- HTML 을 꾸미는 스킨이나 메이크업



<!DOCTYPE html>

- 웹브라우저에게 HTML 언어로 쓰였음을 알리는 것으로 첫라인에 기입


<html> </html>

- HTML 문서의 시작과 끝을 알림





3. Basic terminology


<> : tags

- 항상 opening tag 와 closing tag 쌍으로 구성된다.

- 예) <html> </html>

- 항상 최근에 연 tag 가 먼저 닫혀야한다.





4. Make the head


HTML 은 head 와 body 두 파트가 존재한다.

head 는 페이지의 title 같은 HTML file 에 대한 정보를 포함한다.

Title 은 웹브라우저의 title bar 나 page tab 에 표시되는 제목이다.




5. Paragraphs in the body


body 는 text, images, links 와 같은 내용물을 넣는 곳


<p> </p> : 문단을 구성하는 태그












Body elements


6. Paragraphs and headings


<h1> </h1> : headig tags. 콘텐츠가 크게 표시





7. More about headings & 8. Using every heading


6개의 heading size 가 존재한다.


2014-07-02 오후 3-50-32.png




Adding images to your site!


10. You’re going places!


<a href> </a> : 웹사이트의 다른 페이지나 다른 웹사이트로 이동시킴





11. Adding images


<img src=”url” /> : 이미지를 보여줌.




12. Click that image


<a href=”url”>

<img src=”imag url” />

</a>

: image 에 url 링크 걸기





13. Images and links


복습 - 링크가 포함된 이미지, 그냥 이미지, 그냥 링크




댓글