WEB1 - HTML & Internet 11 to 14 — Taking an extra step

728x90

HTML (HyperText Makeup Language) & Internet

속성 Attribute
Tag의 이름만으로는 정보가 부족할 때

이미지 넣기
<img src="이미지의 주소" width="이미지 크기">
(img= 이미지, src = source)

태그가 태그의 이름만으로는 정보가 부족할 때는 이런 속성을 통해서 더 많은 의미를 부가할 수 있다.

(순서는 상관없다. <img width="75%" src="coding.jpg" >

Tip. Unsplash
(저작권 없는 무료 이미지 사이트, 앱버전도 있네요)

<h1>WEB网络</h1>
<p style="margin-top:40px;">
<strong>WEB<u>（World Wide Web）</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
</p>
<img src="coding.jpg" width="100%">
<p>
网络是由若干节点和连接这些节点的链路构成，表示诸多对象及其相互联系。
</p>

부모와 자식 관계의 태그?

<parent>

<child> </child>

</parent>

목록 list
어디서부터 어디까지가 항목인지 경계를 짓기 위한, 그룹핑을 하기 위한 부모 태그가 필요

<li> </li>
Unordered List
순서 없는 목록; li태그의 부모태그, 그래서 반드시 자식태그인 <li></li>를 가지고 있다.

<ul>
<li> <li>
</ul>
Ordered List
자동으로 항목에 순서가 매겨진다.

<ol>
<li> </li>
</ol>
표 table
<tabel> </table>
<li></li>태그와 다르게 3대가 같이 다닌다.
- 표 내부에서 행을 나타내는 태그
  <tr> </tr>
  (tr = table row)
- 헤더 칸(cell)을 나타내는 태그
  <th> </th>
  (th = table header)
- 일반적인 칸(cell)을 나타내는 태그
  <td> </td>
  (td = table data)
  
  <table>
  <tr>
  <td> </td>
  </tr>
  <tr>
  <td> </td>
  </tr>
  </table>

https://poiemaweb.com/html5-tag-list-table

속성: 표 테두리 두께 지정
<table border="">
그냥 <tabel>태그만 쓰면 두께 설정이 없어서 그런지 표가 안 보이고 텍스트처럼 보인다.

<ul>
  <li>HTML超文本标记语言</li>
  <li>CSS层叠样式表</li>
  <li>JavaScript</li>
</ul>

<ol>
  <li>HTML超文本标记语言</li>
  <li>CSS层叠样式表</li>
  <li>JavaScript</li>
</ol>

<table border="1">
  <tr>
    <td>HTML</td>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>
  <tr>
    <td>超文本标记语言</td>
    <td>层叠样式表</td>
    <td>-</td>
  </tr>
</table>

<h1>WEB网络</h1>
<p style="margin-top:40px;">
<strong>WEB<u>（World Wide Web）</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
</p>
<img src="coding.jpg" width="100%">
<p>
网络是由若干节点和连接这些节点的链路构成，表示诸多对象及其相互联系。
</p>

태그계의 슈퍼스타
웹 페이지의 구조파악

웹페이지의 제목을 사용자에게 명시적으로 알려줄 수 있을 뿐만 아니라 검색 엔진과 같은 기계들은 바로 이 <title>이라는 것을 책이라고 치면 책표지와 같이 사용한다.
<title> </title>
웹브라우저야 이 파일을 열때에는 utf파일로 열렴 이라고 얘기할 때
<meta charset="utf-8">
(char = character 문자, set = 규칙)
본문
<body>
</body>
<body>를 설명하는 태그
(<body>와 <head> 태그는 고위층 태그)
<head>
</head>
최고위층 태그
<html>
</html>
맨 위에 관용적으로 쓰이는 태그
<!doctype html>

<!DOCTYPE html>
<html>
<head>
  <title>WEB1 - Welcome</title>
  <meta charset="utf-8">
</head>
<body>
<ul>
  <li>HTML超文本标记语言</li>
  <li>CSS层叠样式表</li>
  <li>JavaScript</li>
</ul>
<ol>
  <li>HTML超文本标记语言</li>
  <li>CSS层叠样式表</li>
  <li>JavaScript</li>
</ol>
<table border="1">
  <tr>
    <td>HTML</td>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>
  <tr>
    <td>超文本标记语言</td>
    <td>层叠样式表</td>
    <td>-</td>
  </tr>
</table>
<h1>WEB网络</h1>
<p style="margin-top:40px;"><strong>WEB<u>（World Wide Web）</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。</p>
<img src="coding.jpg" width="100%">
<p>网络是由若干节点和连接这些节点的链路构成，表示诸多对象及其相互联系。</p>
</body>
</html>

HTML 태그의 제왕

링크걸기 anchor
배가 정박할 때 사용하는 닻을 의미, 정보의 바다에 정박한다는 의미의 시적인 표현인 태그
<a href="링크주소"> </a>
(h = hypertext, ref = reference 참조)
- 새탭으로 열고 싶다면 속성 target="_blank" 추가
  <a href="링크주소" target="_blank"> </a>
- 링크를 열기전 마우스 커서를 올렸을 때 툴팁으로 무엇인지 알려주고 싶을 때 속성 title="" 추가
  <a href="링크주소" target="_blank" title=""> </a>
  
  [추천 검색어] html specification - HTML 설명서

<!DOCTYPE html>
<html>
<head>
  <title>WEB1 - Welcome</title>
  <meta charset="utf-8">
</head>
<body>
<ul>
  <li>HTML超文本标记语言</li>
  <li>CSS层叠样式表</li>
  <li>JavaScript</li>
</ul>
<ol>
  <li>HTML超文本标记语言</li>
  <li>CSS层叠样式表</li>
  <li>JavaScript</li>
</ol>
<table border="1">
  <tr>
    <td>HTML</td>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>
  <tr>
    <td>超文本标记语言</td>
    <td>层叠样式表</td>
    <td>-</td>
  </tr>
</table>
<h1>WEB网络</h1>
<p style="margin-top:40px;">
  <a href="https://baike.baidu.com/item/web/150564" target="_blank" title="到百科的WEB意义">
    <strong><u>WEB（World Wide Web）</u></strong>
  </a>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
</p>
<img src="coding.jpg" width="100%">
<p>
  网络是由若干节点和连接这些节点的链路构成，表示诸多对象及其相互联系。
</p>
</body>
</html>

Tip. ATOM 상단의 메뉴바 되살리기

Ctrl + Shift + P > Toggle Menu Bar 검색 > 클릭
~~(쓸데 없이 조작하다 메뉴바 없어져서 다시 살리느라 20분 태웠습니다...)~~

저작자표시 (새창열림)

'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 15 to 17 (4)	2021.06.30
WEB1 - HTML & Internet 1 to 10 (4)	2021.06.28

HTML (HyperText Makeup Language) & Internet

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

티스토리툴바