Dream Lovers

[생활코딩] 01. html 본문

데잇걸즈/생활코딩

[생활코딩] 01. html

yun.bagus 2022. 8. 4. 23:56 
<!DOCTYPE html>
<html>
<head>
    <title>WEB</title>
    <meta charset="utf-8">
</head>
<body>
    <h1><a href=index.html>WEB</a></h1>
</body>
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
    </ol>
    <h2>WEB</h2>
    <img src="https://images.unsplash.com/photo-1657829376052-a4f42f5bb838?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
    <p> The World Wide Web Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi sint nam cupiditate rerum optio, consequuntur, unde, maiores ratione consectetur quo ab. Velit deserunt accusantium consequuntur pariatur odit commodi nobis quisquam?</p>
</html>

html의 용도 : 웹페이지를 만드는 컴퓨터 언어

태그 (tag) : 콘텐츠를 설명함. 

속성 (attribute) : 부가적인 정보 추가. 순서는 상관이 없음 

기본 구조는 아래와 같다. 

<!doctype html>
<html>
	<head>
    </head>
    <body>
    </body>
</html>

 

주요 태그와 뜻 

태그  뜻 
<a href=index.html>WEB</a>
 링크, 하이퍼 텍스느 
 <title>WEB</title>
 제목 
<h1>heading</h1>
<h2>heading</h2>
<h3>heading</h3>
<h4>heading</h4>
<h5>heading</h5>
<h6>heading</h6>
 본문 내 제목 
숫자가 커질수록 그 크기는 작아진다. 
 <li>HTML</li>
 리스트 목록
 <ul>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
  </ul>
 순서가 없는 목록 표시 
 <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
</ol>
 순서가 있는 목록 표시 
<p>
 하나의 문단을 표시 

 

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

'데잇걸즈 > 생활코딩' 카테고리의 다른 글

[생활코딩] 03. JavaScript (버튼 생성, 계산기 만들기)  (0) 2022.08.08
[생활코딩] 02. css  (0) 2022.08.05
'데잇걸즈/생활코딩' Related Articles more