• IT/따로 공부

    [HTML] 기본정리(2)

    2021. 8. 18.

    by. ziasu

    반응형

    DOCTYPE이란...?

    • HTML에는 여러 종류가 존재하기 때문에 DOCTYPE을 선언하여 올바른 출력을 도와줌
    • HTML5가 나온 현시점에서는 아래에 보이는 DOCTYPE으로 단일화되었음
    <!DOCTYPE html>

    상대 경로 <a> 태그 활용으로 간단한 웹페이지 만들기

     

    [index.html(main)]

    • '몸풀기' 텍스트를 클릭하면 1.html로 이동
    <html>
<head>
<title>운동하자</title>
<meta charset="utf-8">
</head>

<body>
<h1><a href="index.html">운동순서</a></h1>
<ol>
  <li><a href="1.html">몸풀기</a></li>
  <li><a href="2.html">조깅하기</a></li>
  <li><a href="3.html">근력운동하기</a></li>
</ol>

<h2>몸풀기</h2>
몸을 잘 풀어야 부상을 예방할 수 있다
</body>
</html>

     

    [1.html]

    • '운동순서' 텍스트를 클릭하면 index.html로 이동
    <html>
<head>
<title>운동하자</title>
<meta charset="utf-8">
</head>

<body>
<h1><a href="index.html">운동순서</a></h1>
<ol>
  <li><a href="1.html">몸풀기</a></li>
  <li><a href="2.html">조깅하기</a></li>
  <li><a href="3.html">근력운동하기</a></li>
</ol>

<h2>몸풀기</h2>
몸을 잘 풀어야 부상을 예방할 수 있다
</body>
</html>

    주요 태그

    [<pr> 태그]

    • paragraph의 줄임말로 단락을 표현

     

    [<br> 태그]

    • a forced line break의 줄임말로 줄 바꿈 기능(직접 줄 바꿈)

     

    [<img> 태그]

    • 문서에 이미지를 포함
    • <img src="①" height="②" width="③" alt="④" title="⑤">

    ①: 같은 디렉터리의 이미지 파일 이름

    ②: 이미지 높이

    ③: 이미지 너비

    ④: 이미지가 깨졌을 때 보이는 정보

    ⑤: 이미지 위에 커서를 올려놨을 때 보여지는 정보

     

    [<table> 태그]

    • 표를 만드는 태그로 여러 다른 태그들과 함께 사용됨
    <html>
<body>
  <table border='2'>
    <trhead>
    <tr>
      <th>이름</th> <th>가격</th>
    </tr>
    </trhead>
    <trbody>
    <tr>
      <td>수박</td> <td>5000</td>
    </tr>
    </trbody>
  </table>
</body>
</html>

    결과

     

    반응형
    저작자표시

    'IT > 따로 공부' 카테고리의 다른 글

    [HTML] 기본 정리(1)  (0) 2021.08.18
    [WEB] HTTP(HyperText Transfer Protocol)란...?  (0) 2021.08.16
    [Python] enumerate 함수란...?  (0) 2021.08.13
    [Python] Lambda 표현식란...?  (0) 2021.08.13

    댓글

    관련글

    맨 위로
전체 글 보기

티스토리툴바