기술이 계속 발전함에 따라 어린 아이들에게 프로그래밍 기본 사항을 소개해야합니다. HTML은 웹 개발에 사용되는 필수 언어이며 초등학교 학생들이 기본 개념을 이해하는 것이 중요합니다. 이 블로그에서는 HTML 기본 사항에 대해 논의하고 초등학생조차도 이해할 수있는 예제 코드를 제공 할 것입니다.

HTML이란 무엇입니까?

HTML은 하이퍼 텍스트 마크 업 언어를 나타냅니다. 인터넷에서 볼 수있는 웹 페이지 및 응용 프로그램을 만드는 데 사용되는 언어입니다. HTML은 태그를 사용하여 페이지의 구조와 내용을 정의하여 작동합니다. 태그는 각도 브래킷 (<>)으로 밀폐되어 있으며 제목, 단락, 이미지, 링크 등을 만드는 데 사용됩니다.

HTML 기본 사항

1. 문서 구조

HTML 문서의 구조는 세 가지 주요 부분, 즉 머리, 신체 및 제목으로 구성됩니다. 헤드 섹션에는 페이지 제목 및 스타일 시트 링크와 같은 메타 데이터가 포함되어 있습니다. 본문 섹션에는 텍스트, 이미지 및 비디오와 같은 페이지의 내용이 포함되어 있습니다.

2. 태그

HTML 태그는 페이지의 구조와 내용을 정의하는 데 사용됩니다. HTML에 사용되는 기본 태그 중 일부는 다음과 같습니다.

- <html> : HTML 문서의 루트 요소를 정의합니다.
- <head> : 제목 및 스타일 시트 링크와 같은 문서에 대한 메타 데이터가 포함되어 있습니다.
- <body> : 문서의 내용이 포함되어 있습니다.
- <H1>- <H6> : 다양한 크기의 제목을 정의합니다.
- <p> : 단락을 정의합니다
- <Img> : 이미지를 정의합니다
- <a> : 하이퍼 링크를 정의합니다

3. 속성

HTML 속성 요소에 대한 추가 정보를 제공합니다. HTML에 사용 된 몇 가지 일반적인 속성은 다음과 같습니다.

-SRC : 이미지의 URL을 지정합니다
-ALT : 이미지의 대체 텍스트를 지정합니다.
-Href : 하이퍼 링크의 URL을 지정합니다
-Target : 링크 된 문서를 여는 위치를 지정합니다.

예제 코드
예제 코드는 다음과 같습니다. 

<! doctype html>
<html>
<헤드>
<title> 내 첫 HTML 페이지 </title>
</head>
<body>
<H1> 내 웹 사이트에 오신 것을 환영합니다 </h1>
<p> 이것은 나의 첫 번째 HTML 페이지입니다. 나는 당신이 그것을 좋아하기를 바랍니다! </p>
<img src = ""https://www.example.com/myimage.jpg""alt = ""my image"">
<br>
<a href=""https://www.example.com"" target=""_blank""> 내 웹 사이트 방문 </a>
</body>
</html>


이 예에는 제목, 단락, 이미지 및 하이퍼 링크가있는 간단한 HTML 페이지가 있습니다. 이미지에는 표시 할 수없는 경우 대체 텍스트가 있으며 새 탭에서 하이퍼 링크가 열립니다.

 

다음은 위 코드를 HTML로 표현한 결과 입니다.


<헤드> 내 첫 HTML 페이지

내 웹 사이트에 오신 것을 환영합니다

이것은 나의 첫 번째 HTML 페이지입니다. 나는 당신이 그것을 좋아하기를 바랍니다!


내 웹 사이트 방문

 

출처 :

-https://www.w3schools.com/html/html_intro.asp
-https://www.w3schools.com/html/html_basic.asp