코드 여행 일기

HTML 웹사이트 만들기 본문

코딩/HTML

HTML 웹사이트 만들기

할짝개발자 2024. 1. 14. 04:30
728x90
반응형

 

HTML 기초 1~3 을 기반으로 간단한 웹사이트 만들기

 

index.html

<!DOCTYPE html>
<html>
<head>
  <title>HTML - 수업소개</title>
  <meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
  <li><a href="1.html">기술소개</a></li>
  <li><a href="2.html">기본문법<a/></li>
  <li><a href="3.html">하이퍼텍스트와 속성</a></li>
  <li><a href="4.html">리스트와 태그의 중첩</a></li>
</ol>
 
<h2>선행학습</h2>
 
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 
</body>
</html>

 

1.html

<!DOCTYPE html>
<html>
<head>
  <title>HTML - 수업소개</title>
  <meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
  <li><a href="1.html">기술소개</a></li>
  <li><a href="2.html">기본문법<a/></li>
  <li><a href="3.html">하이퍼텍스트와 속성</a></li>
  <li><a href="4.html">리스트와 태그의 중첩</a></li>
</ol>
 
<h2>기술소개</h2>
HTML은 HyperText Markup Language의 약자로서 웹페이지를 만드는 언어입니다. 1번 파일입니다.
</body>
</html>

 

2.html

<!DOCTYPE html>
<html>
<head>
  <title>HTML - 수업소개</title>
  <meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
  <li><a href="1.html">기술소개</a></li>
  <li><a href="2.html">기본문법<a/></li>
  <li><a href="3.html">하이퍼텍스트와 속성</a></li>
  <li><a href="4.html">리스트와 태그의 중첩</a></li>
</ol>
 
<h2>기본문법</h2>
 
기본문법 2번 파일입니다 
</body>
</html>

 

3.html

<!DOCTYPE html>
<html>
<head>
  <title>HTML - 수업소개</title>
  <meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
  <li><a href="1.html">기술소개</a></li>
  <li><a href="2.html">기본문법<a/></li>
  <li><a href="3.html">하이퍼텍스트와 속성</a></li>
  <li><a href="4.html">리스트와 태그의 중첩</a></li>
</ol>
 
<h2>하이퍼텍스트와 속성</h2>
 
하이퍼텍스트와 속성 3번 파일 입니다.
</body>
</html>

 

4.html

<!DOCTYPE html>
<html>
<head>
  <title>HTML - 수업소개</title>
  <meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
  <li><a href="1.html">기술소개</a></li>
  <li><a href="2.html">기본문법<a/></li>
  <li><a href="3.html">하이퍼텍스트와 속성</a></li>
  <li><a href="4.html">리스트와 태그의 중첩</a></li>
</ol>
 
<h2>리스트와 태그의 중첩</h2>
 
리스트와 태그의 중첩 4번 파일 입니다.
</body>
</html>

 

 

결과

 

index.html

 

1.html

 

2.html

 

3.html

 

4.html

 

 

위 글은 생활코딩 영상을 정리하여 쓴 글 입니다.

728x90
반응형

'코딩 > HTML' 카테고리의 다른 글

HTML 기초 3 <title> <meta charset="utf-8"> <head> <body> DOCTYPE  (0) 2024.01.14
HTML 기초 2 <li> <ul> <ol>  (0) 2024.01.14
HTML 기초 1 <strong> <h1> <a>  (0) 2024.01.14
meta  (0) 2023.07.24
주요 태그 3 <입력 양식 4>  (0) 2023.07.24
'코딩/HTML' Related Articles more