HTML 문서의 구조: HTML의 기본 구조 배우기
게시 됨: 2020-12-14HTML은 브라우저 데이터를 통해 인터넷에서 액세스할 수 있는 문서의 표준 마크업 언어로 사용되었습니다. HTML은 일련의 짧은 요소, 태그 및 코드로 구성되며, 구조화된 형식으로 함께 컴파일되면 적절한 인터넷 액세스가 있으면 누구나 볼 수 있는 웹 페이지가 생성됩니다.
사람들의 일하는 방식이 바뀌었습니다. HTML 및 CSS는 javascript와 함께 웹 페이지의 요소를 만들고 조작하는 데 사용됩니다. HTML은 제작자가 각 요소에 대해 다른 역할을 정의하여 생성 과정에서 완전한 사용자 정의 자유를 제공합니다.
HTML은 Hyper Text Markup Language의 약자로 웹 사이트에 표시되는 웹 페이지를 디자인하는 데 사용됩니다.
함께 모이면 웹 페이지를 구축하는 데 도움이 되는 세 가지 주요 측면이 있습니다.
- HTML 구조 — 구조적 요소 지원
- CSS 스타일 — 디자인을 돕고 이러한 구조적 요소에 스타일을 부여합니다.
- JS 상호 작용 - 해당 요소 간의 상호 작용을 활성화합니다.
HTML 구조 에서 요소와 태그는 콘텐츠를 표시하기 위해 서로 쌍을 이룹니다.
인터넷에서 사용할 수 있는 모든 페이지에는 HTML 태그가 포함되어 있습니다. 이러한 태그는 항상 조정 및 변경할 수 있는 명확하고 열린 관점으로 콘텐츠를 온라인으로 표시하는 데 도움이 됩니다. 좀 더 간단하게 설명하기 위해 프로그램에서 요소와 태그가 어떻게 사용되는지 설명하겠습니다.
여는 요소와 닫는 요소는 변경되지만 태그는 그대로 유지됩니다. 태그는 문장 앞뒤에 삽입되어 페이지에서 서식을 지정할 수 있습니다. 이상적인 웹 페이지는 다음 세 가지 주요 섹션으로 구성됩니다.
- 제목
- 머리
- 신체
Head 요소 는 헤드 섹션의 시작/제목을 강조 표시하는 데 사용됩니다. 헤드 섹션은 항상 페이지에 대한 설명으로 도움이 됩니다. head 태그 내의 내용, 즉 표제는 페이지의 내용을 식별하기 위한 소스로 사용된다.
다음은 head 요소에서 사용할 수 있는 모든 태그입니다.
- <베이스>
- <링크>
- <메타>
- <노스크립트>
- <스크립트>
- <스타일>
- <제목>
예를 들어:
<머리>
<TITLE> HTML의 Hello World 예제<TITLE>
</HEAD>
블록 수준 요소 는 단락, 부제목 또는 생성할 일부 목록과 같은 웹 페이지의 특정 섹션을 식별하는 데 사용됩니다.
단락: <P>및 </P>
제목, 수준 1:<H1>제목, 수준 2:<H2>및 </H2>
가로자:<HR> 중심:<CENTER>
바닥글 : 그것을 표시하는 특별한 태그는 없지만 저자와 연락이 필요한 섹션을 식별하는 데 도움이 되도록 웹 페이지에 바닥글을 두는 것이 좋습니다. 여기에는 FAQ 섹션이나 뉴스레터 구독을 위한 이메일이 포함될 수 있습니다.
<HTML>
<머리>
<TITLE>신발회사 <TITLE>
</HEAD>
<바디>
<H1>어메이징 슈즈에 오신 것을 환영합니다! </H1>: </H2>
<IMG SRC= .”.http://example.com/ images /image1.jpg”><HR>
<CENTER> <A HREF =..http://www.example1.com/..>예제 웹사이트를 방문하지 않으시겠습니까?
</A>
</센터>
</바디>
</HTML>
위 섹션에서는 HTML 구조의 웹 페이지에 있는 주요 요소에 대해 설명했습니다.
이제 HTML 소스로 이동하여 프로그램 구조와 해당 요소를 이해하기 위해 HTML 소스를 사용하는 방법을 이해하려고 합니다.
초보자로서 이것은 다른 페이지가 어떻게 개발되는지 이해하는 데 많은 도움이 되며 참조로 사용하여 자신의 웹페이지에 대한 사용자 정의 버전을 만들 수 있습니다.
웹페이지 아무 곳이나 오른쪽 버튼을 클릭한 다음 '페이지 소스 보기'를 선택합니다. 그러면 페이지의 소스 코드가 포함된 창이 열립니다.
페이지를 검사하려면
웹페이지의 아무 곳이나 오른쪽 버튼을 클릭한 다음 '검사'를 선택하여 해당 특정 웹페이지를 구축하는 데 사용된 요소의 목록과 유형을 확인합니다. 여기에는 스타일 패널을 통해 수정할 수 있는 HTML과 CSS가 모두 포함됩니다.
HTML 의 기본 구조 와 태그에 대해 설명했으니 이제 HTML로 콘텐츠를 작성하는 데 필요한 기본 요소에 대해 알아보겠습니다.
<p> 이 태그는 웹페이지에서 단락이 필요할 때 사용되며, 이를 끝내기 위해 </p> 태그를 사용합니다.
<br> 이 태그는 줄을 나누는 데 사용되며 주로 한 줄(연락처 또는 주소)을 쓰는 데 사용됩니다.
<hr> 이 태그는 웹 페이지의 내용을 두 섹션으로 분리하는 데 사용됩니다.
여기에 있는 모든 태그는 샘플 웹페이지 코드에서 구현됩니다.
배우기: 21가지 웹 개발 프로젝트 아이디어
입력
<html>
<머리>
<제목></제목>
</head>
<본체>
<h1>HTML의 구조</h1>
<p>
upGrad Education 제공<br>
<시간>
기본 사항 배우기 <br>
<시간>
upGrad Education 제공<br>
</p>
</바디>
</html>
속성
언급된 모든 태그에 대해 추가 정보가 필요한 경우 속성이 사용됩니다. 속성은 '값'과 '이름'이라는 두 개의 매개변수로 정의됩니다.
여기서 'name' 매개변수는 할당된 것으로 간주되는 속성의 이름을 가져오는 기능이 있습니다. 그리고 'value' 매개변수는 요소에 맞춰 속성 이름의 값을 취하는 유사한 기능을 가지고 있습니다.
<img> 이 속성은 웹페이지에 이미지를 추가/삽입하는 데 사용됩니다. 이 태그는 이미지 경로를 지정하는 데 도움이 됩니다. 그리고 <height>와 <width>는 각각 이미지의 높이와 너비를 나타냅니다.
<alt> 이 속성은 연결 오류 또는 기타 이유로 이미지를 로드할 수 없을 때 적용됩니다. alt 태그는 이미지의 자막 역할을 합니다.
세계 최고의 대학 에서 소프트웨어 엔지니어링 과정 에 등록하십시오 . 이그 제 큐 티브 PG 프로그램, 고급 인증 프로그램 또는 석사 프로그램을 획득하여 경력을 빠르게 추적하십시오.
읽기: 8가지 흥미로운 전체 스택 프로젝트 아이디어 및 주제
예시
<html>
<본체>
<h2>src 속성</h2>
<p>HTML 이미지는 img 태그로 정의되며 이미지 소스의 파일 이름은 src 속성에 지정됩니다.</p>
<img src=”img_101.jpg” alt=”빈 그림” 너비=”500″ 높이=”600″>
</바디>
</html>
텍스트 스타일, 크기, 글꼴 및 텍스트와 관련된 기타 기능을 변경하려면 <style> 태그가 사용됩니다.
예시
<html>
<본체>
<h2>스타일 속성</h2>
<p>속성은 색상과 같은 스타일을 변경하는 데 사용됩니다.</p>
<p style="color:red;”>빨간색 단락입니다.</p>
</바디>
</html>
텍스트 수정 응용 프로그램에서 HTML은 이러한 태그를 사용하여 사용자 정의된 요청에 대한 텍스트를 수정하는 태그도 제공합니다.
- <b> – 굵은 글씨
- <strong> – 중요한 텍스트
- <i> – 기울임꼴 텍스트
- <em> – 강조된 텍스트
- <mark> – 표시된 텍스트
- <작은> – 더 작은 텍스트
- <del> – 삭제된 텍스트
- <ins> – 삽입된 텍스트
- <sub> – 아래 첨자 텍스트
- <sup> – 위 첨자 텍스트
이 기사를 요약하기 위해 HTML의 다음 기능과 기본 사항을 배웠습니다.
- HTML 구조
- 태그, 요소 및 해당 유형
- 기본 태그 및 해당 응용 프로그램
이러한 모든 기능, 태그 및 속성은 HTML의 필요성을 이해하는 데 도움이 됩니다.
전체 스택 소프트웨어 개발에 대해 자세히 알아보려면 upGrad & IIIT-B의 전체 스택 소프트웨어 개발 이그 제 큐 티브 PG 프로그램을 확인하십시오. 이 프로그램은 작업 전문가를 위해 설계되었으며 500 시간 이상의 엄격한 교육, 9 개 이상의 프로젝트, 및 과제, IIIT-B 동문 자격, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.
