<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Introdução ao HTML5</title>
</head>
<body>
<h1>Entendendo a estrutura</h1>
<h2>HTML é ou não linguagem de programação?</h2>
<p>O HTML não é uma linguagem de programação, mas sim de marcação!</p>
<img src="img/html.png" alt="Logo do HTML5">
<ol>
<li> HTML;</li>
<li> CSS;</li>
<li> JScript;</li>
</ol>
</body>
</html>
hoje, com a Alura e o Google Gemini
Oi, Vanderson, tudo bem?
Muito obrigado por compartilhar seu código. Parabéns pela indentação, uso de tags semânticas e personalização do conteúdo do projeto apresentado no curso. Tenho certeza que sua postagem vai ser uma inspiração as pessoas que estão realizando essa mesma atividade.
Continue mergulhando em seus estudos e caso tenha dúvidas, conte com o fórum!
Abraços e bons estudos!
Também desenvolvi o meu projetinho inicial em HTML, estou no primeiro curso de HTML. Até agora não aprendemos ainda a separar o texto das imagens. O alinhamento do parágrafo da lista também ficou após a imagem, e não na linha seguinte, pular linhas no VS Code não resolve. Acho que esse tópico deve entrar nas próximas aulas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Portfolio</title>
</head>
<body>
<h1>Projeto inicial em HTML</h1>
<p> As aulas de HTML estão sendo muito agradáveis.</p>
<h2> Minha trilha de desenvolvimento</h2>
<p> Fiz o curso inicial de javascript, porém só a prática para construir soluções e maneiras de escrever o código para atingir os resultados esperados. A formatação em HTML está sendo mais fácil, pelo menos até agora.</p>
<img src="html.png" alt="Logo do HTML 5>"
<p>Duas de sete competências desenvolvidas:</p>
<ol>
<li> Como fazer o Linkedin trabalhar para você</li>
<li> Como aprender a aprender</li>
</ol>
</body>
</html>
Tenho algumas dúvidas também com relação aos problemas que aparecem no próprio navegador.
Oi, tudo bem?
Os problemas que você está enfrentado acontecem por vários fatores.
A primeira mensagem sugere que a tag <html> precisa ter um idioma atribuído a ela. Para solucionar esse problema, podemos utilizar o seguinte código na abertura da tag:
<html lang="pt-BR">
O aviso "A viewport meta element was not specified" significa que a página da web não contém um elemento meta "viewport" na seção head do HTML. Esse elemento é crucial para o design responsivo, pois ele instrui o navegador sobre como controlar as dimensões e a escala da página em diferentes dispositivos, especialmente em dispositivos móveis. Podemos solucionar esse aviso por meio do código abaixo:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esses comandos são cruciais para garantir que um site seja responsivo e que se apresente bem em dispositivos de diferentes tamanhos e resoluções. Eles ajudam a melhorar a experiência do usuário ao acessar o site em um dispositivo móvel, garantindo que o conteúdo seja legível e acessível sem a necessidade de zoom manual.
O aviso "content-type header charset value should be utf-8" uma recomendação para que o valor do charset no cabeçalho Content-Type seja UTF-8, isso geralmente significa que o padrão de codificação dos caracteres não está sendo identificado. Isso pode ter acontecido por você digitar este comando com letrar minúsculas. Para solucionar podemos tentar deixar com letras maiúsculas, como no código abaixo:
<meta charset="UTF-8">
Os dois últimos problemas, podem estar associados a versão do navegador ou o tipo de navegador que você está usando. Peço que tente abrir seu projeto em outro navegador como o Edge ou o Mozilla.
Uma última observação seria a sua tag <img> que onde o fechamento da tag acontece dentro das aspas da descrição do seu alt e podem gerar erros ao carregar a imagem. Por isso, basta reescrever o código removendo o fechamento da tag para fora das aspas, da seguinte forma:
<img src="html.png" alt="Logo do HTML 5">
Algo bem interessante que você pode fazer para evitar esses problemas é utilizar o atalho do emmet utilizando o sinal de exclamação (!) e clicando em ENTER, pois dessa forma, você garante que todas as tags iniciais importantes do arquivo HTML estejam presentes.
Espero ter ajudado. Caso tenha dúvidas, crie um novo tópico no fórum para podermos te ajudar de forma mais assertiva. Abraços!
Obrigada, Rodrigo. Agora que avancei mais no curso, com o CSS e a parte de responsividade, consegui entender melhor o que esses elementos significam na página. Ah, realmente, tinha muitos erros de desatenção mesmo, como as aspas depois da tag. Agora consigo visualizar melhor essas questões.