티스토리 뷰
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 가 존재한다.
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
복습 - 링크가 포함된 이미지, 그냥 이미지, 그냥 링크