티스토리 뷰

FRONT-END/HTML

[HTML] BASIC THINGS

진심스테이크 2018. 4. 3. 09:37

 

HTML : Hyper Text Markup Language

- HyperText : 웹페이지를 이동할 수 있도록 만들어진 문장

 

#f12

 

 

<head>

- HTML 문서의 시작과 끝을 표시

- <HEAD> 태그는 HTML 문서에 대한 정보 표시

 

 

기본 형태

이름.HTML

<html>

<head>

<title> 문서 이름 </title>

</head>

<body>

내용

</body> //닫는 태그

</html> //닫는 태그

 

 

<META>

- 닫는 태그가 없다

- 정보를 표시

<!DOCTYPE html>
<html>
<head>
    <title>aaa</title>
    <META http-equiv ="refresh" content="5; 
    url=http://cho-coding.tistory.com/">
</head>
<body>
hello
</body>
</html>

 

배경화면 지정

- 색깔 : bgcolor = "원하는색"

- 사진 : background ="사진파일이름.jpg" 

<!DOCTYPE html>
<html>
<head>
    <title>aaa</title>
</head>
<body background="aa.jpg">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

하이퍼링크 색상 조정

<!DOCTYPE html>
<html>
<head>
    <title>link</title>
</head>
<body link="blue" vlink="red" alink="darkgreen"> 
    <!--
        link : 누르기 전에
        vlink : 누르고 나서
        alink : 누르고 있을 때
    -->
    <a herf="cho-coding.tistory.com"> 당떨어질땐초코딩! </a> <!--링크 연결-->
</body>
</html>

 

텍스트 움직이게 함

<!DOCTYPE html>
<html>
<head>
    <title>markquee</title>
</head>
<body>
    <h2 align="center">텍스트 무빙!!</h2>
    <p>
        <MARQUEE behavior="scroll">이 텍스트가 움직인답니다</MARQUEE>
    </p>
</body>
</html>

 

다양한 글자 관련 태그들

<!DOCTYPE html>
<html>
<head>
    <title>다양한 글자 관련 태그들</title>
</head>
<body>
    <h2 align="center">다양한 글자 관련 물리 태그들</h2>
    <p><B>B 태그는 글자를 굵게 표현</B></p>
    <p><I>I 태그는 글자를 기울여서 표현</I></p>
    <p><STRIKE>STRIKE 태그는 글자에 취소선 표시</STRIKE></p>
    <p>Sup 태그는 글자를<Sup>위첨자</Sup>로 표시합니다.</p>
    <p>Sub 태그는 글자를<Sub>아래첨자</Sub>로 표시합니다.</TT></p>
    <p>BIG 태그는 글자를 주변의 글자보다 <BIG>크게</BIG>표현합닌다.</p>
    <p>SMALL 태그는 글자를 주변의 글자보다 <SMALL>작게</SMALL>표현합니다.</p>
</body>
</html>
 

 

저작자표시 비영리 변경금지

'FRONT-END > HTML' 카테고리의 다른 글

[HTML] SEMANTIC TAG  (0) 2019.01.21
[HTML] FORM  (0) 2019.01.16
[HTML] TAGS  (0) 2019.01.16
[HTML] 회원가입 양식 만들기  (0) 2018.04.04
[HTML] 테이블 만들기  (0) 2018.04.03
댓글