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 |
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 |
