#15. 웹 페이지 완성
1. 웹 페이지의 개념
지금까지 하나의 웹 페이지를 구성하는 코드 여러 개를 배웠다.
화려하고 복잡하진 않아도 이 코드만으로도 웹페이지를 구성하는 것은 가능하다!
※ 그런데, '웹 페이지'를 구성했다고 했지 아직 '웹 사이트'를 구성한 것은 아니다.
=> 웹 페이지와 웹 사이트는 무슨 차이가 있나?
웹 페이지 = 책의 한 페이지라면,
웹 사이트 = 완성된 책 한 권 이다.
즉 '여러 개의 웹 페이지'가 서로 '연결(link)'되어야 비로소 웹 사이트가 구성되는 것이다.
다음의 예시를 보자:
<html>
<head>
<meta charset="utf=8">
<title>Lunch</title>
</head>
<body>
<h1>Menu</h1>
<ol>
<li><a href="https://starbucks.co.kr/" target="_blank">Coffee</a></li>
<li><a href="https://subway.co.kr/" target="_blank">Sandwich</a></li>
<li><a href="https://outback.co.kr/" target="_blank">Steak</a></li>
<li><a href="https://momstouch.co.kr/" target="_blank">Burger</a></li>
<li><a href="http://www.baskinrobbins.co.kr/" target="_blank">Ice Cream</a></li>
</ol>
</body>
</html>다음은 내가 좋아하는 점심메뉴를 나타낸 HTML 코드이다.
현재 페이지를 메인 페이지라고 치면, Coffee, Sandwich, ... , Ice Cream 이라는 또 다른 다섯 개의 웹페이지가 이 메인 페이지와 연결되어 있는 것이다. 각각의 페이지에 <a> 태그로 하이퍼링크를 걸어서 여러 페이지를 연결시킬 수 있다!
2. 웹 페이지 예시
하지만 위의 코드는 실제로 저 웹페이지들을 서로 연결시킬 순 없으므로, 다른 예시를 만들어 보았다.
보통 index.html 파일을 홈페이지의 메인 페이지로 사용하는 것 같다!
아래 예시의 경우, index.html -> 메인 페이지, 그리고 나머지를 머신러닝의 세 종류를 설명하는 파일들인 1.html, 2.html, 3.html 파일로 각각 구성해 보았다.
index.html 페이지
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>IT-ML</title>
</head>
<body>
<h1><a href="index.html">IT</a></h1>
<ol>
<li> <a href="1.html"> Supervised Learning</a>
<li> <a href="2.html"> Unsupervised Learning</a>
<li> <a href="3.html"> Reinforcement Learning</a>
</ol>
<h2>Useful Sites</h2>
<h3>First Web</h3>
<a href="http://info.cern.ch" target="_blank">PRIMITIVE WEB</a>
<h3>Free Images without Copyright</h3>
<a href="https://unsplash.com/" target="_blank">UNSPLASH</a>
<h3>HTML specification</h3>
<a href="https://www.w3schools.com/" target="_blank">W3SCHOOLS</a>
<h2>Machine Learning</h2>
<p>
Machine learning (ML) is the study of computer algorithms that improve automatically through experience and by the use of data.[1] It is seen as a part of artificial intelligence. Machine learning algorithms build a model based on sample data, known as "training data", in order to make predictions or decisions without being explicitly programmed to do so.[2] Machine learning algorithms are used in a wide variety of applications, such as email filtering and computer vision, where it is difficult or unfeasible to develop conventional algorithms to perform the needed tasks. <br><br> A subset of machine learning is closely related to computational statistics, which focuses on making predictions using computers; but not all machine learning is statistical learning. The study of mathematical optimization delivers methods, theory and application domains to the field of machine learning. Data mining is a related field of study, focusing on exploratory data analysis through unsupervised learning.[4][5] In its application across business problems, machine learning is also referred to as predictive analytics.
</p>
</body>
</html>1.html 페이지
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>IT-Supervised</title>
</head>
<body>
<h1><a href="index.html">IT</a></h1>
<ol>
<li> <a href="1.html"> Supervised Learning</a>
<li> <a href="2.html"> Unsupervised Learning</a>
<li> <a href="3.html"> Reinforcement Learning</a>
</ol>
<h2>Supervised Learning</h2>
<p>
Supervised learning is the machine learning task of learning a function that maps an input to an output based on example input-output pairs.[1] It infers a function from labeled training data consisting of a set of training examples.[2] In supervised learning, each example is a pair consisting of an input object (typically a vector) and a desired output value (also called the supervisory signal). A supervised learning algorithm analyzes the training data and produces an inferred function, which can be used for mapping new examples. An optimal scenario will allow for the algorithm to correctly determine the class labels for unseen instances. This requires the learning algorithm to generalize from the training data to unseen situations in a "reasonable" way (see inductive bias). This statistical quality of an algorithm is measured through the so-called generalization error.[3]
</p>
</body>
</html>
2.html 페이지
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>IT-Unsupervised</title>
</head>
<body>
<h1><a href="index.html">IT</a></h1>
<ol>
<li> <a href="1.html"> Supervised Learning</a>
<li> <a href="2.html"> Unsupervised Learning</a>
<li> <a href="3.html"> Reinforcement Learning</a>
</ol>
<h2>Unsupervised Learning</h2>
<p>
Unsupervised learning (UL) is a type of algorithm that learns patterns from untagged data. The hope is that through mimicry, the machine is forced to build a compact internal representation of its world. In contrast to supervised learning (SL) where data is tagged by a human, e.g. as "car" or "fish" etc, UL exhibits self-organization that captures patterns as neuronal predelections or probability densities.[1] The other levels in the supervision spectrum are reinforcement learning where the machine is given only a numerical performance score as its guidance, and semi-supervised learning where a smaller portion of the data is tagged. Two broad methods in UL are Neural Networks and Probabilistic Methods.
</p>
</body>
</html>
3.html 페이지
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>IT-Reinforcement</title>
</head>
<body>
<h1><a href="index.html">IT</a></h1>
<ol>
<li> <a href="1.html"> Supervised Learning</a>
<li> <a href="2.html"> Unsupervised Learning</a>
<li> <a href="3.html"> Reinforcement Learning</a>
</ol>
<h2>Reinforcement Learning</h2>
<p>
Reinforcement learning (RL) is an area of machine learning concerned with how intelligent agents ought to take actions in an environment in order to maximize the notion of cumulative reward.[1] Reinforcement learning is one of three basic machine learning paradigms, alongside supervised learning and unsupervised learning.
<br><br>
Reinforcement learning differs from supervised learning in not needing labelled input/output pairs be presented, and in not needing sub-optimal actions to be explicitly corrected. Instead the focus is on finding a balance between exploration (of uncharted territory) and exploitation (of current knowledge).[2]
<br><br>
The environment is typically stated in the form of a Markov decision process (MDP), because many reinforcement learning algorithms for this context use dynamic programming techniques.[3] The main difference between the classical dynamic programming methods and reinforcement learning algorithms is that the latter do not assume knowledge of an exact mathematical model of the MDP and they target large MDPs where exact methods become infeasible.
</p>
</body>
</html>
이처럼 위에 <ol>과 <li> 태그로 목차를 표시하고 <a> 태그로 하이퍼링크를 걸어 주면, 언제든지 다른 페이지에서도 또 다른 페이지로 쉽게 이동할 수 있다.
#16. 원시웹
1. 웹과 인터넷의 개념
이번 강의는 쉬어가는 강의. '원시웹'의 역사를 알아보았다.
현재의 웹은 아주 복잡해서, 초보자가 그 구조를 파악하거나 어떤 공간인지 쉽게 알기 어렵다.
그래서 초기의 웹을 보았다. 가장 초기의 웹은 웹의 본질만 있고, 부가적이고 편리하며 때론 복잡한 여러 기능들이 아직 추가되지 않았을 때의 모습일 것이다.
그렇다면 웹을 웹으로 만드는 그 본질은 무엇일까?
그러려면 웹이 무엇인지부터 알아봐야 한다.
때론 의미가 모호한 여러 용어들이 있는데, 나한테는 인터넷과 웹이 그랬다.
인터넷과 웹은 다를까? 다르다.
더보기
인터넷 : 여러 자동차가 있는 도로.
웹 : 도로 위의 자동차 하나.
인터넷은 '공간'이다. 구체적으로는 정보를 주고받을 수 있는 공간이다.
그런데 웹도 '공간'이다. 다만 인터넷은 email, FTP 등 웹과 다른 역할을 하는 공간들도 포함하는 개념이다.
(더 자세하게 인터넷의 개념을 이해하려면 email, FTP 등은 어떻게 웹과 다르고 인터넷에는 포함되는지를 알아보면 좋을 것 같다!)
2. 웹의 대중화
웹은 원래 소수의 엘리트 집단과 거대한 기관에서만 사용되었다가, 1990년대 이후 대중에게 유행하면서 훨씬 더 편리하면서도 복잡해진 지금의 웹이 되었다고 한다.
=> 지금은 소수 집단에서 쓰이고 있지만 웹처럼 미래에는 대중이 널리 사용하게 될 것들이 또 있을 수 있다.
'front-side > HTML' 카테고리의 다른 글
| 새로운 태그 공부 (0) | 2021.03.23 |
|---|---|
| HTML 정리편#1 - 복습 (0) | 2021.03.23 |
| 18. 웹호스팅 ~ 19. 웹서버 운영하기 + HTML 태그 공부 (0) | 2021.03.22 |