본문 바로가기
웹프로그래밍/HTML

HTML 속성(예제코드)

by 유노brain 2023. 9. 3.
반응형

제목 속성(the title arrtibute)

<!DOCTYPE html>
<html>
    <body>

        <h2 title="I'm a header">The title Attribute</h2>
        <p title="I'm a tooltip"> Mouse over this paragraph, 
            to display the title attribute as a tootip.</p>
    </body>
</html>

-> 마우스로 제목부분이나 단락 부분에 놓을경우 title 속성에 대한 정보를 나타낸다.

 

href 속성(the href attibute)

<!DOCTYPE html>
<html>
    <body>

        <h2> The href Attribute</h2>

        <p>HTML links are defined with the a tag. 
            The link address is specified in the href attribute</p>

        <a href="https://www.naver.com">Visit naver</a>
    </body>
</html>

-> 링크를 정의하는 태그로 <a href>를 사용한다.

-> 페이지에 써있는 Visit naver를 클릭할 경우 naver화면으로 넘어간다.

 

 너비와 높이(the width and height attributes)

<!DOCTYPE html>
<html>
    <body>
        <h2>Width and Height Attribute</h2>

        <p>The width and height attributes of the img tag, defines the width
            and height of the image:
        </p>

        <img src="eximage.jpg" width="500" height="600">
    </body>
</html>

-> 너비를 나타내는 태그: width

-> 높이를 나타내는 태그: height

 

alt 속성(the alt attribute)

<!DOCTYPE html>
<html>
    <body>
        <h2>The alt Attribute</h2>
        <p>The alt attribute should reflect the image content, 
            so users who cannot see the image get an understanding of what the image contains</p>
    </body>

    <img src="eximage.jpg" alt = "fish" width="500" height="600">
</html>

-> 이미지가 나오지 않을경우 이 이미지가 무엇을 뜻하는지 알려주기위한 속성이다.

-> 태그는 alt를 사용

 

" "없는 link속성(attribute without quotes)

<!DOCTYPE html>
<html>
    <body>

        <a href=http://www.naver.com>This is a link</a>
    </body>
</html>

-> 위의 link속성과 다르게 ""가 없어도 링크에 접속이 가능하다.

반응형

댓글