728x90
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
이 웹 페이지를 통해서, 아주 기본적인 HTML 을 공부해보고자 한다.
1. HTML Document
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>
html page
</h1>
<p>hi html page</p>
</body>
</html>
2. HTML Heading
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>its h1 heading</h1>
<h2>its h2 heading</h2>
<h3>its h3 heading</h3>
<h4>its h4 heading</h4>
<h5>its h5 heading</h5>
<h6>its h6 heading</h6>
</body>
</html>
3. HTML Paragraphs
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>its paragraphs</p>
<p>its another paragraphs</p>
</body>
</html>
4. HTML Links
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>HTML Link</h2>
<p>this is HTML Link</p>
<a href="https://www.w3schools.com"> links </a>
</body>
</html>
5. HTML Image
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>HTML Image</h2>
<p>this is HTML Image</p>
<img src="https://www.w3schools.com/html/w3schools.jpg" alt="i can't load your img" width="104" height="142">
</body>
</html>
<!--
<img>: 이미지를 나타낼 수 있는 태그
- src: 이미지의 경로
- alt: 이미지 표시할 수 없을 때 나타내는 문구
- width: 이미지 가로크기
- height: 이미지 세로크기
- loading: 이미지 로딩 방식
기본값: eager
lazy로 설정하면 이미지가 뷰 포트에 일정 거리 안에 들어와야 하는 것, 불필요한 이미지 로딩을 줄일 수 있음
-->
6. HTML Button
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>HTML Button</h2>
<p>this is HTML Button</p>
<!-- 버튼으로 바로이동 -->
<button type="button" onclick="location.href='https://monynony0203.tistory.com/'">go to my blog</button>
<!-- 버튼으로 새창으로 이동 -->
<button type="button" onclick="window.open('https://monynony0203.tistory.com/')">new window</button>
</body>
</html>
7. HTML List
<!DOCTYPE html>
<html>
<head></head>
<body>
<h3>Unordered HTML List</h3>
<ul>
<li>Hello</li>
<li>How are you</li>
<li>Hello</li>
</ul>
<h3>Ordered HTML List</h3>
<ol>
<li>Hello</li>
<li>How are you</li>
<li>Hello</li>
</ol>
</body>
</html>
8. HTML Links, Img, Button, List
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>HTML Button</h2>
<p>this is HTML Button</p>
<button onclick="window.open('https://www.naver.com/')"> naver with new window</button>
<br>
<li>그림을 클릭하면 네이버로 이동합니다.</li>
<a href="https://www.naver.com/" >
<img src="https://www.w3schools.com/html/w3schools.jpg" alt="I can't show you this image" width="100" height="100">
</a>
<br>
<button onclick="location.href='https://www.naver.com/'"> naver with this window </button>
</body>
</html>728x90
728x90
'Programming Language > HTML | CSS | JS' 카테고리의 다른 글
| HTML 4일차 공부 (0) | 2022.01.10 |
|---|---|
| HTML 3일차 공부 (0) | 2022.01.10 |
| HTML 1 일차 공부 (0) | 2021.12.28 |
| VSCODE Html File 생성 (0) | 2021.12.28 |
| Axios 라이브러리 다운로드 (0) | 2021.11.25 |
