본문 바로가기
Coding/Client - HTML

주요태그

by 그냥그렇듯이 2017. 9. 4.
반응형

모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.

문제시, 비공개로 전환하겠습니다.


<주요태그>

- p 태그 -
p: paragraph의 줄임말
<p>....</p>

 예제

 <html>

    <head><meta charset="utf-8"></head>

    <body>

 

<p>HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.</p>

 

<p>HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>

 

<p>The language is written in the form of HTML elements consisting of tags enclosed in angle brackets . Browsers do not display the HTML tags and scripts, but use them to interpret the content of the page.</p>

    </body>

</html>



- br 태그 -
A forced line-break의 줄임말
<br>...<br>...<br> => void element이다. 내용이 없는 태그이다. 열리는 태그만 있으면 됨.

예제

 <html>

<head><meta charset="utf-8"></head>

<body>

HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.<br><br><br>

 

HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.<br><br><br>

 

The language is written in the form of HTML elements consisting of tags enclosed in angle brackets. Browsers do not display the HTML tags and scripts, but use them to interpret the content of the page<br><br><br>

</body>

</html>


-img 태그-
<img src="....." height="...." alt="....." title=".....">

*사용할 img의 디렉토리는 html이 속한 폴더 안이여야한다.
*alt = "...."는 이미지가 깨졌을 때 나타나는 정보이다.

 예제

 <html>

<body>

    <img src="img.jpg" height="300" alt="산 이미지" title="산 이미지">

</body>

</html>



- table 표 1.기본 -
테이블의 셀(필드)에 들어갈 항목 하나하나를 <td>...</td>로 묶어준다.
같은 행들을 grouping 시켜야한다. 이는 <tr>.... </tr>로 가능하다.
tr: table row의 줄임말
td: table date의 줄임말

 예제 1

 <html>

<head><meta charset="utf-8"></head>

<body>

<table border="2">

    <tr>

        <td>이름</td>     <td>성별</td>   <td>주소</td>

    </tr>

    <tr>

        <td>최진혁</td>  <td>남</td>      <td >청주</td>

    </tr>

    <tr>

        <td>최유빈</td>  <td>여</td>      <td>청주</td>

    </tr>

</table>

</body>

</html>



- table 표 2.구조 -

<table>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
</table>

 예제

 <html>

<head>

<meta charset="utf-8">

</head>

 <body>

 <table border="2"> 

<thead> 

<tr> <th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th> </tr> 

</thead> 

<tbody> 

<tr> <td>최진혁</td> <td>남</td> <td >청주</td> <td>1000</td> </tr

 <tr> <td>최유빈</td> <td>여</td> <td>청주</td> <td>500</td> </tr>

</tbody> 

<tfoot> 

<tr> <td>합계</td> <td></td> <td></td> <td>1500</td> </tr> 

</tfoot> 

</table> 

</body> 

</html>


- table 표 3.병합 -
수직으로 병합하기
<td rowspan="..."> : 큰 따옴표안에 병합할 셀의 숫자를 넣는다.

수평으로 병합하기
<td colspan="..." > : 큰 따옴표안에 병합할 셀의 숫자를 넣는다.

예제

 <html>

<head><meta charset="utf-8"></head>

<body>

<table border="2">

    <thead>

        <tr>

            <th>이름</th>     <th>성별</th>   <th>주소</th> <th>회비</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>최진혁</td>  <td>남</td>      <td rowspan="2">청주</td> <td>1000</td>

        </tr>

        <tr>

            <td>최유빈</td>  <td>여</td>      <td>500</td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <td colspan="3">합계</td>      <td>1500</td>

        </tr>

    </tfoot>

 

</table>

</body>

</html>



- 입력양식 form -

사용자가 입력한 정보를 서버로 전송할 때 사용하는 태그

 예제

<html>
<head>
<meta charset="utf-8">
</head>
<body>

<form action="http://localhost/login.php"> ===> 이곳으로 id, pwd, address를 모두 전송한다.
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="password" name="pwd"></p>
<p>주소 : <input type="text" name="address"></p>
<input type="submit">
</form>

</body>
</html>

댓글