web1-html& Internet
7. 혁명적인 변화
<h1> ~ <h1/>
<h2> ~ <h2/>
:
<h6> ~ <h6/>
글자가 점점 커진다.
<strong> ~ <strong/>
글씨가 진해진다.
<u>~<u/>
밑줄이 생겨요
HTML Study | Advanced Web Ranking
HTML Study
Overview This HTML usage data comes from 11.3 million index pages gathered from top twenty Google results, for about 30 million keywords - chosen by keyword volume. To learn more about this data, visit the FAQ section. Total 11,264,652 pages Doctype The
www.advancedwebranking.com
통계를 기반한 학습!
<br> 줄바꿈-시각적인 의미만 가지고 있기 때문에 닫지 않는다.
줄바꿈 자유롭게
<p> ~ <p/> 하나의 단락을 그룹핑하므로 열고 닫는 태그 존재
단락이다를 표현 가능
+CSS <p style="~"> ~<p/>을 추가하여 자유롭게 변경가능
<img src="coding.jpg" width="100%">
속성 , 크기조성 순서상관X
공공재 사진
Beautiful Free Images & Pictures | Unsplash
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.
unsplash.com
<li>~</li> 리스트
o
o
o
<li>의 부모인 <ul>~</ul> :그룹핑하기 위한 부모태그 (unordered list)
<ol>~</ol> 자동적으로 numbering(ordered list)
1.
2.
3.
html구조파악
<!doctype html>
<head>~<head/>:본문을 설명하는 head
head안에서
<title>제목</title>
<meta charset="utf-8"> utf-8로 만들어졌기 때문에 utf-8로 열어야한다.웹브라우저에게 알아듣게한다.
<body>~</body> :본문
</html>
W3C 용어
W3Schools Online Web Tutorials
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
<a href="">~</a>
hyper text reference 이값을 참조(링크)
<p><a href="https://www.w3.org/TR/html5/" target="_blank" title="html speicification">
target -> 새탭이 열림
title ->누르기전 어떤건지 설명
용어
Wikipedia
www.wikipedia.org
webhosting 이용
GitHub: Where the world builds software
GitHub is where over 83 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat...
github.com
저장소 New클릭
Repository name 쓰고 public 클릭
unloading existing file클릭
code메뉴에서 코드 올리고
settings메뉴-페이지눌러서 main으로 설정후 save하기
수정하고나서
code메뉴에서 addfile- unloadfiles클릭
수정된코드 올리기
webserver 원리파악
Web Server for Chrome
A Web Server for Chrome, serves web pages from a local folder over the network, using HTTP. Runs offline.
chrome.google.com
동영상삽입
공유하기 -> 퍼가기 ->iframe 코드 삽입
댓글기능추가
DISQUS 사이트이용
Disqus - The #1 way to build an audience on your website
Disqus – The #1 way to build your audience
Disqus offers the best add-on tools for websites to increase engagement. We help publishers power online discussions with comments and earn revenue with native advertising.
disqus.com
코드를 따온 후 , webserver를 이용하여 열기
ex) 127.0.0.1/index.html
채팅기능추가
tawk.to – "100% FREE live chat software for your website!"
100% FREE Live Chat Software, Ticketing & Knowledge Base! - www.tawk.to
tawk.to is 100% free live chat software to monitor and chat with visitors on your website or from a free customizable page.
www.tawk.to
설정->chat widget코드 따오기
웹사이트 방문자 분석기
설정->데이터스트림->태그안내보기 클릭해서 소스따오기
소스를 head안에 넣기