N

4. HTML 웹 페이지 이동 본문

Node.js

4. HTML 웹 페이지 이동

naeunchan 2021. 1. 8. 22:46
728x90
반응형

생활코딩 강의를 바탕으로 쓴 글입니다 :)

웹 페이지 이동

이제 간단하게 클릭을 통해 웹 페이지를 이동시켜 보도록 하겠습니다.

우선 4개의 html 파일이 필요합니다.

저는

1) html.html

2) css.html

3) js.html

4) index.html

로 이름을 정하겠습니다.

 

index.html은 가장 처음 페이지를 나타내며, Web의 정의를 쓴 페이지 입니다.

html.html은 html의 정의가 써져있는 페이지,

css.html은 css의 정의가 써져있는 페이지,

js.html은 javascript의 정의가 써져있는 페이지 입니다.

 

아래는 index.html로 나머지 3개의 파일에서도 공통적인 부분을 가져다 쓰겠습니다

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WEB1 - Welcome</title>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
      <li><a href="html.html">HTML</a></li>
      <li><a href="css.html">CSS</a></li>
      <li><a href="js.html">JavaScript</a></li>
    </ol>
    <h2>WEB</h2>
    <p>
      The World Wide Web (abbreviated WWW or the Web) is an information space where documents and
      other web resources are identified by Uniform Resource Locators (URLs), interlinked by
      hypertext links, and can be accessed via the Internet.[1] English scientist Tim Berners-Lee
      invented the World Wide Web in 1989. He wrote the first web browser computer program in 1990
      while employed at CERN in Switzerland.[2][3] The Web browser was released outside of CERN in
      1991, first to other research institutions starting in January 1991 and to the general public
      on the Internet in August 1991.
    </p>
  </body>
</html>

 

 

 

 

처음으로 보이는 태그들이 있습니다.

!DOCTYPE부터 head, body, meta, title이 보입니다.

오늘은 head, body, meta, title만 간단하게 집어보고 가겠습니다.

 

우선 head 태그와 body 태그.

<head> 태그는 페이지를 열 때 웹 브라우저에는 표시되지 않습니다.

대신 위 처럼 <meta>, <title>이 들어가며, 이 외에도 css 링크, 파비콘(favicon) 등이 들어갈 수 있습니다.

 

<meta>태그는 메타 데이터로 작성자, 중요한 키워드, HTML에 대한 내용을 포함합니다.

대표적으로 charset.

charset="UTF-8"을 써놓지 않으면 웹 페이지에 한글을 표시할 수 없습니다.

한글을 사용하려면 반드시 필요한 태그입니다.

 

<body> 태그는 head를 제외한 화면에 표시되는 것들을 넣어주면 됩니다.

이제까지 써왔던 태그들과 전달할 내용, 그림, 동영상 등이 해당됩니다.

 

index의 설명은 여기까지 하고, 나머지 html 파일들을 저장해보겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WEB1 - HTML</title>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
      <li><a href="html.html">HTML</a></li>
      <li><a href="css.html">CSS</a></li>
      <li><a href="js.html">JavaScript</a></li>
    </ol>
    <h2>HTML</h2>
    <p>
      <a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">Hypertext Markup Language (HTML)</a>
      is the standard markup language for <strong>creating <u>web</u> pages</strong> and web
      applications.Web browsers receive HTML documents from a web server or from local storage and
      render them into multimedia web pages. HTML describes the structure of a web page semantically
      and originally included cues for the appearance of the document.
      <img src="./html.jpg" width="100%" alt="img" />
    </p>
    <p style="margin-top: 45px">
      HTML elements are the building blocks of HTML pages. With HTML constructs, images and other
      objects, such as interactive forms, may be embedded into the rendered page. It provides a
      means to create structured documents by denoting structural semantics for text such as
      headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by
      tags, written using angle brackets.
    </p>
  </body>
</html>

index.html과 같은 부분이 많습니다.

728x90
반응형
저작자표시

'Node.js' 카테고리의 다른 글

6. Node.js  (9) 2021.01.20
5. bitnami를 이용한 웹 서버 운영  (0) 2021.01.15
3. HTML Tag(table, a, img, iframe)  (0) 2021.01.08
2. HTML Tag(p, br, ul, li)와 style 속성  (0) 2020.12.31
1. HTML Tag(strong, u, div, h1 ~ h6)  (0) 2020.12.29
'Node.js' Related Articles more