Curso IT Fundamentos HTML 009_Hello HTML
O que é HTML?
A rede, ou mais especificamente, a World Wide Web, é composta por muitos documentos e recursos interligados. Esses documentos e recursos são escritos em HTML e são chamados de páginas web. HTML é a base das páginas web, definindo sua estrutura e conteúdo.
Quando você digita um endereço web no navegador (por exemplo, www.zhaojian.net), o navegador envia uma solicitação ao servidor que fornece essa página web. O servidor responde a essa solicitação e envia a página web solicitada (ou seja, algum HTML) de volta ao navegador. Em seguida, o navegador analisa esse HTML e o exibe como a página web que você normalmente vê.
HTML (HyperText Markup Language, Linguagem de Marcação de Hipertexto) é uma linguagem de marcação usada para criar e projetar a estrutura de páginas web. HTML é composto por uma série de elementos (element), que podem ser usados para envolver diferentes partes do conteúdo, fazendo com que apareçam ou funcionem de determinada maneira. Um par de tags (tag) pode adicionar hyperlinks a um texto ou imagem, definir texto como itálico, negrito, parágrafos, listas, etc.
[!Resumo]
- HTML não é uma linguagem de programação, mas uma linguagem de marcação
- Documentos HTML contêm tags HTML e conteúdo de texto (por que não há imagens)
- Documentos HTML também são chamados de páginas web, páginas da web
Um elemento HTML completo (element)
Exemplo:
<p>hello HTML!</p>Efeito:
Análise da estrutura:
[!Resumo]
- Um elemento HTML completo é composto por três partes: tag de abertura, conteúdo e tag de fechamento
- Tag de abertura (Opening tag): contém o nome do elemento (neste exemplo, p), envolvido por colchetes angulares esquerdo e direito. A tag de abertura marca onde o elemento começa ou onde seu efeito começa
- Conteúdo (Content): o conteúdo do elemento
- Tag de fechamento (Closing tag): semelhante à tag de abertura, mas inclui uma barra antes do nome do elemento. Isso marca o fim do elemento. Não incluir a tag de fechamento é um erro comum de iniciantes e pode produzir resultados estranhos
Uma página HTML completa
Exemplo:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hello HTML</title></head><body> <p>hello HTML!</p></body></html>Efeito:
Análise da estrutura:
[!Resumo]
<!DOCTYPE html>— Declara o tipo de documento HTML, o tipo de documento é uma herança histórica, usado para informar ao navegador a versão e o tipo do documento. Declaração DOCTYPE do modo estrito HTML4:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html></html>— elementohtml, todo o conteúdo da página HTML, às vezes chamado de elemento raiz.<head></head>— elementohead, seu conteúdo não é visível para o usuário, inclui, por exemplo, palavras-chave de pesquisa (keyword) para mecanismos de busca, descrição da página, estilos CSS, arquivos JavaScript e declaração de codificação de caracteres.<meta charset="utf-8">— elementometa, usado para fornecer metadados sobre o documento HTML. O atributo charset define o conjunto de caracteres do documento como UTF-8.<title></title>— elementotitle. Este elemento define o título da página, exibido na aba do navegador e também usado como texto descritivo ao favoritar a página.<body></body>— elementobody. Este elemento contém o conteúdo que você espera que os usuários vejam ao visitar a página, incluindo texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis ou outros conteúdos.<p></p>— elemento de parágrafo, representa um parágrafo de texto.
Nome do elemento | Função | Exemplo |
|---|---|---|
<!DOCTYPE html> | Define o tipo e versão do documento HTML | <!DOCTYPE html> |
<html> | Define o elemento raiz do documento HTML | <html lang="en"> |
<head> | Contém meta informações do documento, como título, declaração de conjunto de caracteres, links de estilos e scripts | <head>...</head> |
<title> | Define o título do documento, exibido na barra de título ou aba do navegador | <title>My Web Page</title> |
<meta> | Fornece meta informações sobre o documento, como conjunto de caracteres, configurações de viewport, palavras-chave, etc. | <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<link> | Referencia recursos externos, como folhas de estilo e ícones | <link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"> |
<style> | Define estilos internos do documento | <style>body { font-family: Arial, sans-serif; }</style> |
<script> | Define ou referencia scripts, pode estar incluído no documento ou referenciar scripts externos | <script src="script.js"></script> |
<noscript> | Define o conteúdo exibido quando o navegador não suporta scripts | <noscript>Sorry, your browser does not support JavaScript.</noscript> |
<base> | Especifica a URL base para todos os links relativos na página | <base href="https://www.zhaojian.net/"> |
Links:
Plugins VS Code: Remote - SSH Remote Development
Navegador web Google Chrome Navegador web Google Chrome (China)