WEB1 - HTML & Internet 15 to 17 — Taking an extra step

728x90

HTML (HyperText Makeup Language) & Internet

웹사이트 완성

웹페이지들을 엮어서 웹사이트를 완성해보자

생활코딩님께서 자신이 만들고 싶은데로(?) 하라고 하셔서 WEB과 HTML, CSS, JavaScript에 대해 중국어로 적어보고 바이두백과에 링크를 걸어봤다.

index.html --------------------- WEB
- 1.html --------------------- HTML
- 2.html --------------------- CSS
- 3.html --------------------- JavaScript

영상에서와 골격은 똑같지만 디테일만 조금 변경해봤다.

~~(첫 웹사이트를 만들어봤는데 허접하지만 혼자 감격했네요...)~~

index.html

<!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>
</body>
</html>

1.html

<!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>
  <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>

2.html

<!DOCTYPE html>
<html>
<head>
  <title>WEB1 - CSS</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html" title="到百科">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>-CSS层叠样式表</h2>
<p style="margin-top:40px;">
    <strong><u>层叠样式表CSS</u></strong>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
</p>
<p>
  <a href="https://baike.baidu.com/item/CSS/5457" target="_blank" title="到百科的CSS意义">更多>></a>
</p>
<img src="coding.jpg" width="50%">
</body>
</html>

3.html

<!DOCTYPE html>
<html>
<head>
  <title>WEB1 - JavaScript</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html" title="到百科">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>-JavaScript</h2>
<p style="margin-top:40px;">
    <strong><u>JavaScript</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
</p>
<p>
  <a href="https://baike.baidu.com/item/JavaScript" target="_blank" title="到百科的JavaScript意义">更多>></a>
</p>
<img src="coding.jpg" width="50%">
</body>
</html>

원시웹

Internet VS WEB

인터넷이 도시라면 웹은 그 도시 위에 있는 건물 하나이다.

인터넷이 도시라면 웹은 도로 위를 달리는 자동차 한 대라고 할 수 있다.

1960년 Internet 등장

당시, 핵이 화두였다.
미국은 핵 공격을 받게 되는 시뮬레이션을 돌려본 결과 통신 쪽에서 아주 심각한 약점들이 드러난다. 당시의 통신 시스템은 중앙집중적이었기 때문에 핵 공격을 당하면 통신이 마비되는 심각한 상황이었다. 그래서 핵 공격에도 견딜 수 있는 강인한 통신 시스템의 필요성이 대두됩니다. 그 결과로 탄생한 것이 바로 인터넷이다.

인터넷은 왼쪽 그림과 같이 중앙이 없다.

집에 있는 통신장치들, 그 각각의 통신장치들이 일종의 전화국과 같은 역할을 수행하고 있다. 다시 말해서 수많은 통신 장치들이 분산해서 전화국과 같은 역할을 하기 때문에 그림 안의 점 중에서 하나가 사라져도 나머지 점들이 그 역할을 수행할 수 있는 통신 시스템이 바로 인터넷이다.

이렇게 인터넷이 1960년에 출발하며 30년이라는 시간 동안 천천히 전 세계로 확산된다. 이 시기에는 사람들이 인터넷을 잘 몰랐다. 왜냐하면 인터넷은 기업이나 연구소나 대학 또는 군대와 같은 거대한 기관에서 사용하던 통신 시스템이었기 때문

그러나 1990년 WEB의 출현으로 완전히 새로운 길을 걷게 된다.

웹의 고향은 어디일까?

스위스이다.

스위스가 중요한 것이 아니라 스위스에 무엇이 있느냐가 중요하다. 스위스 제네바에는 유럽 입자 물리 연구소라는 아주 저명한 물리학 연구소(CERN)가 있다. 127개국의 12000명의 과학자가 모여있는 곳.

1980년 유럽 입자 물리 연구소에서 중요한 사건이 조용히 시작된다. 연구소에 '팀 버너스 리'라는 분이 비정규직으로 취직한다.
1990.10 - 웹페이지를 만드는 편집기 탄생

1990.11 - 세계 최초의 웹 브라우저인 World Wide Web 프로그램 탄생

1990.12 - 웹서버 프로그램 탄생 그리고 그 프로그램이 설치되어 있는 컴퓨터에 info.cern.ch라고 주소를 부여

웹브라우저에서 보여주는 전자 문서를 만들 수 있게 되었다.

이제 전자 문서를 전 세계에 누구나 컴퓨터나 인터넷, 그리고 웹이 있다면 마치 자신의 컴퓨터에 있는 문서인 것처럼 볼 수 있도록 하는 방법을 알아보자.

Server와 Client

두 대의 컴퓨터, 두 개의 프로그램을 개발

하나는 Web Browser 하나는 Web Server

Web Server가 설치되어 있는 컴퓨터의 하드디스크에 어느 디렉토리 안에 index.html이라는 파일이 저장되어 있다.

① Web Browser에서 http://info.cern.ch/index.html 입력 Web Server로 신호를 보낸다.

② 그러면 info.cern.ch에 해당되는 컴퓨터에 설치된 Web Server라는 프로그램이 하드디스크에서 index.html이라는
파일을 찾는다.

③ 그것을 Web Browser가 설치되어 있는 컴퓨터에게 전기적 신호로 바꿔서 쏴준다.

④ index.html이라는 파일의 내용이 도착하면 그 코드를 Web Browser가 읽어서 그것을 해석한 다음 화면에 표시하면

우리가 알고 있는 Website가 또 Web이 동작하게 된다.

우리의 관심사는 Web Server로 향해야 한다.

웹서버를 사용할 수 있게 된다는 것은 '내 컴퓨터에 있는 문서를 전 세계에 있는 누구나 인터넷이 연결되어 있는 컴퓨터에 Web Browser을 설치하면 가져다가 볼 수 있도록 할 수 있다'라고 하는 아주 혁명적인 일.

두 가지 방법이 있다.

1. 자신의 컴퓨터에 웹 서버를 직접 깔아서 하는 Web server

2. 이런 일을 대행해주는 업체에게 맡기는 Web hosting

Web hosting으로 쉽게 일단 해보고 Web Server를 통해서 원리를 파악해 보는 방향성으로 가자.

저작자표시

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

WEB1 - HTML & Internet 부록: 코드의 힘 (21)	2021.07.02
WEB1 - HTML & Internet 18 to 19.1.3. (14)	2021.07.01
WEB1 - HTML & Internet 11 to 14 (8)	2021.06.29
WEB1 - HTML & Internet 1 to 10 (4)	2021.06.28

HTML (HyperText Makeup Language) & Internet

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

티스토리툴바