HTML - 이미지 표시, 기사, 테이블, 목록 및 링크 만들기 -

이미지 디스플레이 정보

HTML에 이미지를 표시할 때 태그를 사용합니다.
라벨에 경로를 사용하여 표시할 이미지를 지정합니다.

경로

경로는 대상 파일이나 디렉토리를 가리키는 경로입니다.
경로는 두 가지가 있는데 절대 경로와 상대 경로가 있다.
file5를 표시하기 위해서 실제로 쓰겠습니다.
절대 경로

 /dirA/dirB/file5

절대 경로는 디렉터리 차원의 정점/(루트 디렉터리) 경로입니다.
・상대 경로

 ./file5

상대 경로는 현재 위치에서 보는 경로입니다.
지금 소재지는점을 클릭합니다.
또한 상대 경로를 사용하여 상부의 경로를 지정하는 경우 상부의 층으로 나뉜다.추가
실제로 쓰면 그렇습니다.

../file5

절대 경로는 처음부터 경로를 볼 수 있기 때문에 직관적으로 이해하기 쉽습니다!
단, 절대 경로의 경우 기본적으로 중도 디렉터리가 변경된 경우 모두 고쳐야 하기 때문에 상대 경로로 기술해야 합니다!
실제로 이미지 파일의 애플 이미지(apple.pg)를 표시하는 프로그램을 써 보세요.

<img src="./images/apple.png">

src 속성은 이미지나 스크립트 등의 위치를 설정하는 데 사용되는 속성입니다.

글을 쓰다

P 태그를 사용하여 글을 만듭니다.

<P>私の名前はReyowといいます。プログラミングを勉強しています。</P>

테이블 작성

테이블 태그를 사용하여 테이블을 만듭니다.
table 탭에서tr 탭,th 탭,td 탭을 사용합니다.

tr 태그
테이블 행을 정의할 수 있습니다.
테이블의 행 수tr 태그를 설명하고 하위 요소에서 요소를 설명합니다.
tr는 "table raw"의 생략입니다.

th 태그
테이블의 데이터를 설명하는 데 사용됩니다.
열 이름과 줄 이름을 설명하려면th 탭을 사용하십시오.
th는 "table header"의 생략입니다.

td 태그
표의 데이터를 설명하는 데 사용합니다.
하나의 탭에 대해 기술할 수 있는 데이터가 하나이기 때문에 데이터의 수량으로만 td 탭을 기술합니다.
td는 "table data"의 생략입니다.

나는 개인적으로 측면에서 표를 읽는 의식으로 쓰면 비교적 이해하기 쉽다고 생각한다!
실제로 상술한 라벨을 사용해 표를 써 보면 이렇다.

<table>
     <tr>
	<th></th>
	<th>2017年</th>
	<th>2018年</th>
	<th>2019年</th>
	<th>2020年</th>
     </tr>
　　　<tr>
	<th>10~20代</th>
	<td>380</td>
	<td>2300</td>
	<td>5300</td>
	<td>1500</td>
     </tr>
     <tr>
	<th>30~40代</th>
	<td>1</td>
	<td>100</td>
	<td>300</td>
	<td>1000</td>
     </tr>
     <tr>
	<th>50~60代</th>
	<td>25</td>
	<td>10</td>
	<td>1000</td>
	<td>20000</td>
     </tr>
</table>

롱사이즈는 언뜻 보기에는 어렵지만 뜯어보면 똑같은 일이 반복되기 때문에 쉬워요!
또한 테이블 탭에 여러 개의 표가 있다면 thead 탭, tbody 탭, tfoot 탭을 작성해야 합니다.

목록 만들기

l 태그나 ol 태그를 사용하여 목록을 만듭니다.
각자의 차이를 설명하다.

ul 태그
순서가 없는 글머리 기호 목록을 표시하는 데 사용합니다.
이것은'unorderd list'의 약칭이다.

ol 태그
순서가 있는 목록을 표시하는 데 사용합니다.
이것은'orderd list(주문 명세서)'의 약칭이다.

목록의 항목은 li (list의 약식) 라벨로 설명합니다.
ol 라벨이든 l 라벨이든 모두 리 라벨을 사용합니다.
실제로 Google, Amazon, 애플의 목록을 작성해 보겠습니다.순서는 상관없다.

<ul>
  <li>Google</li>
  <li>Amazon</li>
  <li>Apple</li>
</ul>

링크 만들기

a 태그를 사용하여 링크를 만듭니다.
a 라벨은 HTML 내(같은 페이지 내)의 특정 요소로 이동할 수도 있고, 웹에 공개된 다른 사이트로 이동할 수도 있다!아주 편리한 표시네요.
HTML 내의 특정 요소로 이동할 때 id 속성을 지정합니다.
나는 개인적으로 id 속성이 합어와 같다고 생각한다.
지정된 구호가 있는 곳으로 이동할 수 있다.
다른 사이트로 이동할 때 URL을 지정하여 이동합니다.
이동 전 코드에 href 속성 추가!
실제로 Google, Amazon, Apple 목록에는 웹 사이트별 링크가 추가되어 있습니다.

<ul>
   <li><a href="https://www.google.com/?hl=ja">Google</a></li>
   <li><a href="https://www.amazon.co.jp/ref=nav_logo">Amazon</a></li>
   <li><a href="https://www.apple.com/jp/">Apple</a></li>
</ul>

링크의 제작은 다른 사이트로 이동할 수도 있고 페이지 안에서 좋아하는 곳으로 이동할 수도 있습니다. 저는 매우 편리한 코드라고 생각하기 때문에 잘 제어하고 싶습니다!