728x90

부록: 코드의 힘

동영상 삽입

동영상과 같은 비싸고 큰 부품을 합성해서 새로운 제품, 동영상이 포함되어 있는 Web page를 생성, 이것이 코드의 힘

 

유튜브 동영상 삽입해보기

동영상 Web page에서 공유 클릭 > 퍼가기 클릭 > 소스 가져오기 > <p>태그로 감싸기

<!DOCTYPE html>
<html>
<head>
  <title>WEB1 - HTML</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html" title="WEB1 - Welcome">WEB网络</a></h1>
  <h2>计算机语言-常见语言</h2>
<ol>
  <li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
  <li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
  <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
</ol>
<h2>-HTML超文本标记语言</h2>
<p style="margin-top:40px;">
    <strong><u>超文本标记语言HTML(HyperText Makeup Language)</u></strong>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
</p>
<p>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/tZooW6PritE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
<p>
  <a href="https://baike.baidu.com/item/%E8%B6%85%E6%96%87%E6%9C%AC/2832422" target="_blank" title="到百科的HTML意义">更多>></a>
</p>
<img src="coding.jpg" width="50%">
</body>
</html>
댓글 기능 추가

댓글 기능을 추가하는 것을 혼자 하려면 HTML만으로는 부족, 상당한 기술력이 필요

이번 강의에서는 이미 만들어 놓은 서비스를 구현해보자

DISQUS를 사용해보자

로그인 > Admin > Your Sites > +New > Create Site 

> Install Disqus - Select Platform > Universal Code

> ① Place the following code where you'd like Disqus to load: 의 코드를 copy해서 가져온다

<!DOCTYPE html>
<html>
<head>
  <title>WEB1 - Welcome</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html" title="WEB1 - Welcome">WEB网络</a></h1>
<p style="margin-top:40px;">
    <strong><u>WEB（World Wide Web）</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
</p>
<p>
  网络是由若干节点和连接这些节点的链路构成，表示诸多对象及其相互联系。
</p>
<p>
  <a href="https://baike.baidu.com/item/web/150564" target="_blank" title="到百科的WEB意义">
    <u>更多>></u>
  </a>
</p>
<img src="coding.jpg" width="50%">
<h2><a href="https://baike.baidu.com/item/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%AF%AD%E8%A8%80/4456504" target="_blank" title="到百科的计算机语言">计算机语言</a>-常见语言</h2>
<ol>
  <li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
  <li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
  <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
</ol>
<p>
  <div id="disqus_thread"></div>
<script>
    /**
    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
    /*
    var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://web1-welcome-2.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</p>
</body>
</html>

바로 리로드를 해보면 맨 아래에 We were unable to load Disqus. If you are a moderator please see our troubleshooting guide. 라는 문구가 나온다.

Web Server를 이용하지 않으면 보안상의 이유로 작동하지 않는다고 한다.127.0.0.1/index.html로 입력해서 들어가면 제대로 작동한다.

댓글 기능과 사진 업로드 기능까지 잘 되네요...

채팅 기능 추가

tawk(척)을 사용해보자

관리자 표시 클릭 > Add Property > Install Widget > 코드 copy > </body>태그 위에 붙여넣기

<!DOCTYPE html>
<html>
<head>
  <title>WEB1 - Welcome</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html" title="WEB1 - Welcome">WEB网络</a></h1>
<p style="margin-top:40px;">
    <strong><u>WEB（World Wide Web）</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
</p>
<p>
  网络是由若干节点和连接这些节点的链路构成，表示诸多对象及其相互联系。
</p>
<p>
  <a href="https://baike.baidu.com/item/web/150564" target="_blank" title="到百科的WEB意义">
    <u>更多>></u>
  </a>
</p>
<img src="coding.jpg" width="50%">
<h2><a href="https://baike.baidu.com/item/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%AF%AD%E8%A8%80/4456504" target="_blank" title="到百科的计算机语言">计算机语言</a>-常见语言</h2>
<ol>
  <li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
  <li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
  <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
</ol>
<p>
  <div id="disqus_thread"></div>
<script>
    /**
    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
    /*
    var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://web1-welcome-2.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</p>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/60dbf1e07f4b000ac03a40d9/1f9dihm9j';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</body>
</html>

오른쪽 아래에 작동하는 걸 볼 수 있다. 
같은 와이파이에 접속한 친구의 스마트폰으로 들어가 채팅기능이 제대로 작동하는 지 확인.

웹 페이지 분석기 서비스

Google analytics를 사용

생활코딩님의 강의와 다르게 한글버전의 홈페이지로 들어왔다. 

내 Tistory 블로그를 등록해보았다.

 

측정하기 > ①계정설정 - 계정 이름 > ②속성 설정 - 속성 이름 > ③비즈니스 정보 > 만들기 - 대한민국

> 관리 > 데이터 스트림 > 웹 > 태그하기에 대한 안내 > 새로운 온페이지 태그 추가 - 전체사이트 태그(gtag.js) 
> Tistoy 플러그인 - 구글 애널리틱스 > 구글 애널리틱스에 있는 ID 입력후 저장 > Tistory HTML편집 - <head>섹션 안에 전체사이트 태그(gtag.js) 붙여넣기

(24번째 줄부터 </head>섹션 위에 붙여넣음)

 

[검색어] 2021 구글 애널리틱스 사용법

 

2021 구글 애널리틱스 사용법 - Google 검색

구글 애널리틱스로 특정 페이지의 유입경로와 이동경로, 유입시 사용한 검색어, 주요 ... 혹시 뷰저블을 사용하고 있는데 아직 구글 애널리틱스를 도입하지 않으셨다면, ...

www.google.com

구글 애널리틱스가 계속 개발이 되어서 그런지 2021년에 올린 글 이후로 부터 시스템이 동일하다.

저작자표시

'youtube.com|user|egoing2 > WEB1 - HTML & Internet' 카테고리의 다른 글

WEB1 - HTML & Internet 18 to 19.1.3.  (14) 2021.07.01
WEB1 - HTML & Internet 15 to 17  (4) 2021.06.30
WEB1 - HTML & Internet 11 to 14  (8) 2021.06.29
WEB1 - HTML & Internet 1 to 10  (4) 2021.06.28

티스토리툴바