HTML(Hyper Text Markup Language) : 웹페이지를 만드는 코드
Editor(ex.Atom,메모장)를 이용하여 웹페이지를 만든다.
파일의 제목 + .html 로 저장할 것!
Tag <></>
<strong> text </strong> : 굵은 글씨체
<u> text </u> : 밑줄(underline)
<h1> text </h1> : 제목(heading)
<h1>~ <h6>
<br> : 줄바꿈(new line tag)-단락처럼 표현하고 싶을 땐 여러번 쓰기!
<p> text </p> : 단락을 나타내줌. <br>에 비해 정보를 더 가치있게 나타내줌.
이미지 추가
<img src = "title.jpg" width = "100%">태그 내의 src="title.jpg" 와 width="100%" 같은 것들을 속성(Attribute) 이라고 부른다.
자식 태그와 부모태그
자식 태그에는 늘 따라다니는 부모 태그가 있다.
목록을 나타내는 li (list) 태그에는 ul(unorderd list) 혹은 ol(ordered list)태그가 붙어다닌다.
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
HTML 문서의 구조
<!doctype html>
<head>
<title></title>
<meta charset = "utf-8">
</head>
<body>
</body>
</html>charset = character(문자) set
링크를 걸어주는 태그 : a(anchor)태그
<a></a>
<a href = "http://google.com" target = "_blank" title = "html specification">HTML</a>href : hypertext reference
target = "_black" : 빈 탭에서 새 페이지로 링크를 연다.
title : 링크에 커서를 놓았을 때 설명해주는 역할.
Web Browser 와 Web Server
web browser --request--> web server
client(고객) <--response server(정보 제공자)
웹브라우저에서 정보를 요청하면 웹서버에서 정고를 제공하는 방식.
웹호스팅(Web Hosting)
host : 인터넷 한대 한대
web hosting 업체 : host를 빌려주는 업체 ex. github
github를 통해 내가 제공하고자 하는 웹사이트를 방문자들에게 보여줄 수 있음.
<web hosting 회사 찾는 법!>
(free) static web hosting 이라고 검색하기
ex) http://www.bitballoon.com/
http://neocities.org/
Amazon S3
Google Cloud Storage
Azure Blob
웹서버(Web Server)
http://127.0.0.1/index.html : 전세계 모든 web browser가 가지고 있는 web server 주소
127.0.0.1 : IP 주소(Internet Protocol Address)
<아파치(Apache)라는 웹서버를 윈도우에 설치하여 이용하기>
1.아파치를 윈도우에 설치해주는 프로그램들 검색 ex.how to easy install apache on window
2. bitnami 설치!
3. bitnami-apache2-htdocs 폴더 기존 내용 삭제 후 내 웹사이트 자료를 복붙하면 그 사이트로 바뀌어 이용할 수 있다.
<추가 정보>
- http:// 와 file:// 주소의 차이
http(Hyper Text Transfer Protocol):// : web browser, web server
file:// : web browser (웹 서버가 관여하지 않는다.)
-
댓글 기능 추가하기
DISQUS 혹은 LiveRE
코드복사 -> 붙여넣기
(Bitnami - apache2 - htdocs 에 붙여넣기 해야 댓글 기능 업로드 가능!) -
채팅기능 추가하기
www.tawk.to -
웹사이트 방문자 분석기
analytics.google.com
추적 코드 -> head 안에 넣으면 실시간 방문자 수 확인이 가능하다.
