WEB1 - HTML & Internet 11 to 14

2021. 6. 29. 17:50·youtube.com|user|egoing2/WEB1 - HTML & Internet
728x90

HTML (HyperText Makeup Language) & Internet


속성 Attribute
Tag의 이름만으로는 정보가 부족할 때
  • 이미지 넣기
    <img src="이미지의 주소" width="이미지 크기">
    (img= 이미지, src = source)

<img src="coding.jpg" width="75%">

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

(순서는 상관없다.  <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
'youtube.com|user|egoing2/WEB1 - HTML & Internet' 카테고리의 다른 글
  • WEB1 - HTML & Internet 부록: 코드의 힘
  • WEB1 - HTML & Internet 18 to 19.1.3.
  • WEB1 - HTML & Internet 15 to 17
  • WEB1 - HTML & Internet 1 to 10
ro117youshin
ro117youshin
코딩 / 외국어공부 (영어, 중국어) / 독서 등 자기계발을 기록합니다.
  • ro117youshin
    Taking an extra step
    ro117youshin
  • 전체
    오늘
    어제
    • 분류 전체보기 (153)
      • DDD (5)
      • JAVA (13)
      • Spring Boot (2)
      • Spring (4)
      • MySQL (1)
      • C (1)
      • Algorithm & Data Structure (34)
        • study (15)
        • programmers (0)
        • boj (18)
        • assignments (1)
      • CS: Computer Science (6)
        • CS50 2019 (4)
        • Network (2)
        • Database (0)
      • Git (3)
      • foreign language (16)
        • English (0)
        • Chinese (16)
      • BOOK (2)
      • ETC (2)
      • youtube.com|user|egoing2 (64)
        • WEB1 - HTML & Internet (5)
        • WEB2 - CSS (9)
        • WEB2 - JavaScript (18)
        • JavaScript Immutability (0)
        • DATABASE1 (4)
        • DATABASE2 MySQL (12)
        • JAVA1 (16)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
    • 글쓰기
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    css
    HTML
    HSK6급필수어휘
    코딩공부
    BOJ
    백준
    나의 앱 만들기
    HSK6급공부
    HSK6급모의고사
    javascript
    Java
    Java자료구조
    JAVA1
    HSK6급
    baekjoon
    개발공부
    variable
    중국어공부
    알고리즘문제
    조건문
    최범균
    js
    Domain Driven Design
    ddd
    자바
    생활코딩
    DATABASE2
    객체
    mysql
    도메인 주도 설계
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
ro117youshin
WEB1 - HTML & Internet 11 to 14
상단으로

티스토리툴바