HTML: 그것이 무엇인지, 웹에 얼마나 중요한지.

뉴스 사이트, 소셜 네트워크, 은행 시스템 등에 들어갈 때 사용자 상호 작용을 가능하게 하는 여러 요소가 화면에 표시됩니다.

그런데 이 모든 것이 어떻게 만들어졌는지 생각해 본 적이 있나요?

웹사이트 구축을 담당하는 전문가 중 한 명은 UX/UI 디자인팀에서 만든 레이아웃을 figma를 이용해 코드로 변환하는 프론트엔드 개발자입니다.

기술적으로 웹사이트 구축은 여러 가지 기술을 통해 이루어지며, 그 중 하나가 HTML입니다.

이 기사에서는 HTML이 무엇인지, HTML의 용도와 사용 방법에 대해 알아봅니다.

HTML이란 무엇입니까?

웹사이트를 개발하는데 사용되는 기술인 만큼 HTML로 프로그래밍한다고 생각하는 것이 일반적입니다. 중요한 점은 HTML은 프로그래밍 언어가 아니라 마크업 언어라는 것입니다.

프로그래밍 언어는 알고리즘을 생성하고 변수와 데이터 구조를 조작하는 데 사용됩니다. Hypertext Markup Language의 영어 약어인 HTML은 웹페이지의 콘텐츠를 구성하고 형식을 지정합니다.

이 기술을 사용하여 프로젝트를 구축하려면 ".html" 형식의 파일이 필요합니다. 이를 통해 브라우저에서 해당 파일을 열면 소스 코드를 해석하여 화면에 요소를 표시할 수 있습니다.

HTML 파일 분석

HTML 파일의 구조는 트리로 해석될 수 있습니다.

요소인 루트가 있고 거기에서 하위 요소로 해석될 수 있는 새 요소(분기와 유사)를 선언할 수 있으며 결과적으로 상위 요소를 생성하는 것도 가능합니다. 또한, 동일한 원점 행을 공유하는 요소를 형제라고 부를 수 있습니다.

HTML 요소의 구조

HTML 요소의 구조는 꺾쇠괄호로 둘러싸인 태그를 열어 구성됩니다.

예를 들어 단락 태그

뒤에는 표시될 콘텐츠가 오고 마지막으로 여는 태그와 동일하지만 요소 이름 앞에 슬래시가 있는 태그로 닫힙니다:

.

최종 결과는 다음과 같습니다.

예.

<p> O nome do meu cão é Retovem. </p>

HTML로 무엇을 만들 수 있나요?

HTML을 사용하면 블로그, 온라인 상점, 뉴스 페이지 등 원하는 테마로 웹페이지를 구축하기 위한 다양한 요소를 만들 수 있습니다.

우리가 만들 수 있는 주요 요소는 다음과 같습니다.

• 제목 및 단락
• 링크 및 버튼
• 이미지
• 목록 및 테이블
• 양식
• 비디오 및 오디오

이 마크업 언어는 광범위한 리소스를 제공하며 그중 몇 가지만 언급되었으며 프로젝트 요구에 따라 사용할 수 있습니다.

HTML의 진화

Tim Berners-Lee는 NeXTSTEP 개발 환경을 사용하여 CERN(유럽 원자력 연구 기구)에서 HTML을 개발했습니다. 원래는 검색과 그 사이의 커뮤니케이션을 관리하기 위한 도구 모음이었습니다.

인터넷이 발전하면서 이 솔루션은 전 세계적으로 주목을 받았습니다. 첫 번째 버전은 유연성이 있어 현장 초보자에게 도움이 되었습니다.

시간이 지남에 따라 구조는 더욱 엄격해졌지만 오늘날에도 브라우저는 이전 버전과의 호환성을 통해 이전 방식으로 작성된 웹 페이지를 해석할 수 있습니다.

1990년대에 사양이 정의된 후 HTML의 진화가 시작되어 1995년에 HTML 2.0 버전이 발표되었습니다.

1997년 말 HTML 3.5 버전이 출시되었고, 이를 계기로 W3C 워킹그룹은 2000년부터 XHTML 개발에 집중하기 시작했고, 마침내 2014년에 이르러 HTML이 출시되었습니다. 오늘.

현재 사용하는 HTML이 나올 때까지 여러 버전의 HTML이 출시된 것을 보았지만 HTML과 HTML5의 차이점은 무엇인가요?

HTML과 HTML5의 차이점

이전 버전에서는

, .

HTML5에는 머리글, 바닥글, 섹션 구분 등을 통해 요소의 목적을 나타내는 시맨틱 태그가 있습니다.

또한 오늘날 HTML5를 통해 오디오에 대한 기본 지원이 제공되므로 페이지에 직접 삽입할 수 있습니다.

또한 양식은 버전에서 더 많은 유형의 필드를 다룰 수 있습니다. 이제 요소에 대한 기본 유효성 검사를 생성하는 이메일, 번호, 날짜 및 사양 필드를 사용할 수 있습니다.

그러나 HTML은 정적 버전이라는 것을 아는 것이 중요합니다. 기능과 기능이 수시로 추가되면서 오늘날에도 계속 개발 및 개선되고 있습니다.

HTML vs XML: Quais são suas diferenças?

Tanto o XML (Extensible Markup Language) quanto o HTML são linguagens de marcação utilizadas na web, mas apesar disso, possuem propósitos e estrutura diferentes.

O XML é projetado para representar informações hierárquicas e legíveis para humanos e máquinas. Não se preocupa com a apresentação visual e não possui estrutura pré-definida. Em vez disso, descreve a estrutura dos dados de forma consistente e portátil.

No Brasil, é o formato mais utilizado na emissão de notas fiscais.

O HTML, é usado para criar e exibir conteúdo em páginas web, é limitado devido à sua estrutura e elementos pré-definidos, focando na apresentação visual e exibição dos elementos no navegador. Ele é comumente utilizado na construção de sites.

Podemos considerar que as principais diferenças são: enquanto o XML é usado para armazenar e transportar dados, o HTML é utilizado para criar páginas web com conteúdo formatado e que possibilita a interação.

Como funciona o HTML?

Como falamos anteriormente, o HTML é utilizado para estruturar e formatar o conteúdo de páginas web através de tags, que são interpretadas pelo navegador.

Para que seja possível essa interpretação, é importante declarar qual a versão do HTML será usada.

Essa declaração é feita através do , garantindo que o navegador interprete corretamente o código.

É importante observar que isso não é uma tag HTML, e sim uma instrução para o navegador que deve ser colocada no início do documento sem espaços entre ela.

Dom

A representação estruturada do conteúdo HTML de uma página web é feita através do DOM (Document Object Modal), que é uma interface de programação que permite o acesso e manipulação dos elementos.

É o DOM que faz a estruturação em forma de árvore dos elementos, em que cada um deles é representado por um nó organizado hierarquicamente de acordo com a estrutura do documento.

Podemos analisar um exemplo de código em HTML para a exibição de uma frase na tela:

<span class="cp"><!DOCTYPE html>
<html>
  <head>
    <title>Aprendendo HTML</title>
  </head>
  <body>
    <h1>Olá, mundo!</h1>   
    <p>Este é o meu primeiro projeto HTML</p>
  </body>
</html>

A estrutura do DOM seria a seguinte:

• : É o elemento raiz da página, de maneira hierárquica, está acima de todos.
• : Se refere à “cabeça” da página, onde é possível inserir configurações que auxiliam na renderização, assim como o título da página. Ele está dentro do elemento , portanto ele é um elemento filho dele.
• : Define o título da página, aquele que ficará visível na aba do navegador. É uma ramificação do , sendo um elemento filho.
• : É o “corpo” da página, onde serão inseridos os elementos visuais que deverão aparecer, como os textos. Ele também está hierarquicamente inserido dentro do , portanto, é filho dele.

• : Refere-se ao título principal que ficará visível no corpo da página. Como está dentro do , consequentemente pode ser considerado como filho.

• : Constrói um parágrafo de texto de acordo com o conteúdo inserido dentro dele. Também está dentro do body, portanto é filho dele e irmão do

Assim, podemos visualizar que o DOM é uma representação em forma de árvore do conteúdo inserido no HTML e que, ao criar um nó para cada elemento, permite que eles sejam acessados por meio do JavaScript.

HTML semântico

O HTML semântico é uma abordagem no desenvolvimento web que enfatiza o uso correto e significativo dos elementos, escolhendo aqueles que melhor descrevem o conteúdo que está sendo apresentado.

Em vez de usar uma

genérico para todo o conteúdo, podemos usar elementos mais específicos, como , , , , , , entre outros, de acordo com a estrutura e a natureza do conteúdo. isso é utilizado para melhorar o SEO ( Search Engine Optimization).

Uma das principais características dessas abordagem é a importância dos cabeçalhos, que são representados pelos elementos

a

, sendo essenciais para indicar a hierarquia do conteúdo.

Os sites de pesquisas dão importância aos cabeçalhos, por isso é um ponto de foco.

O texto alternativo em imagens é crucial tanto para a acessibilidade quanto para o SEO. Tendo o cuidado de inserir o atributo “alt” nas tags de imagem, fornecendo um texto descritivo, isso permite que leitores de tela leiam o texto e que sites de pesquisas considerem esse texto ao classificar as páginas.

의미론적 맥락에서 텍스트에 관해서는 일반적인 링크 대신 설명 링크를 사용하는 것이 중요합니다. 예를 들어, "여기를 클릭하세요" 링크를 만드는 대신 해당 링크의 목적지를 명확하게 만드는 텍스트를 작성하세요.

이러한 방식을 적용하면 Google과 같은 검색 엔진에 친숙하고 모든 사용자가 액세스할 수 있는 페이지를 만들 수 있습니다. 결과는 다음과 같습니다.

• 더 나은 사용자 경험
• 더 넓은 잠재고객 도달범위
• 더 많은 웹이 포함되어 있습니다.

HTML, CSS 및 JavaScript의 관계는 무엇입니까?

프런트엔드 개발자는 웹사이트를 개발할 때 다양한 기술을 사용하지만 프레임워크와 라이브러리를 사용하든 기본은 HTML, CSS, JavaScript로 항상 동일합니다.

이 기사에서 본 것처럼 HTML은 페이지 콘텐츠를 구성하고 구성하는 데 사용되는 마크업 언어입니다. 하지만 HTML만으로는 요소의 스타일을 지정하거나 복잡한 상호 작용을 구축할 수 없습니다.

벽, 문, 창문이 있는 건물의 구조와 같습니다. 그런데 HTML 언어와 CSS 언어의 차이점은 무엇인가요?

HTML과 CSS의 차이점

HTML과 달리 CSS(Cascading Style Sheets)는 웹페이지에서 HTML 요소의 모양과 레이아웃을 정의하는 스타일 언어입니다.

이를 사용하여 요소에 색상, 글꼴, 여백, 크기, 위치 및 기타 속성을 배치할 수 있습니다.

건물을 그림으로 그리고 장식하고 인테리어를 디자인하여 미적으로 매력적이고 즐겁게 만드는 것과 같습니다.

HTML은 어떤 영역에서 사용되나요?

HTML은 일반적으로 웹 개발 영역에서 사용되지만 다음과 같은 프로그래밍의 다른 영역에서도 사용할 수 있습니다.

• 이메일 마케팅의 발전 속에서
• 모바일 개발 중
• 게임 개발 중
• 데스크톱 애플리케이션 개발

HTML은 종종 CSS, JavaScript 등의 다른 기술과 결합되어 이러한 경험과 다른 경험을 만들어낸다는 점에 유의하는 것이 중요합니다.

결론

이 기사에서는 HTML, HTML의 역사, 작동 방식, 태그와 요소를 통해 HTML을 사용하는 방법에 대해 배웠습니다. HTML이 어디에 적용될 수 있는지, HTML, CSS, JavaScript 간의 관계를 아는 것 외에도.

HTML은 프로그래밍 언어가 아닌 마크업 언어입니다. 요소를 생성하고 웹 페이지를 구성하는 데 사용됩니다. 일반적으로 CSS 및 JavaScript와 함께 프런트엔드 개발자가 사용하는 기술입니다.

이 콘텐츠가 마음에 드셨다면 댓글로 의견을 남겨주시고, 더 많은 분들이 보고 좋아요를 받을 수 있도록 공유해주세요.

나중에 봐요!

위 내용은 HTML: 그것이 무엇인지, 웹에 얼마나 중요한지.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!