Tutorial Exemplos html.
HTML Tutorial 💻
Aprendizado fácil com HTML "Experimente você mesmo"
Example
<!DOCTYPE html>
<html>
<head>
<title>Titulo da Página</title>
</head>
<body>
<h1>Aqui é o Cabeçalho.</h1>
<p>Aqui é o Paragrafo.</p>
</body>
</html>
Execute esse código através de um editor de texto mas lembre-se de salvar seu documento coma extensão .html por exemplo no meu caso salvei meu arquivo como: new1.html Depois de salvo execute no navegador de sua preferência, não se preocupe se houver algum errode codificação nas fontes caso ocorra é só inserir o "meta charset utf8" e será resolvido.
<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8”> 👈
exemplo simples html head e paragraph
HTML Examples
Aqui é um exemplo onde utilizaremos a tag link para direcionar a um site.
<!DOCTYPE html>
<head>
<meta charset=”UTF-8”>
<title>HTML Links</title>
</head>
<body style=color:#F4F269;background-color:#82C26E><!Aqui eu usei um css para colorir a fonte,mais adiante iremos abordar esse aprendizado.>
<h2>HTML Links</h2>
<p>Os links são definidos na tag a seguir:</p>
<a href="https://criandoseusitecomhtml5.blogspot.com/">Aqui vai o link escolha um e teste</a>
</body>
</html>
A tag <img> - O que é e para que serve
Para colocar uma imagem em um site, vamos usar a tag <img> do HTML.Através dela, vamos dizer ao HTML todas as informações da imagem que queremos exibir naquele documento.
Já essas informações serão informadas através dos mais diversos atributos que existem para essa tag.
No exemplo abaixo segue o código para inserir a imagem ao site que estamos construindo lembrando
que aqui estamos abordando apenas a estrutura básica do html.
Lembre-se de salvar o arquivo de imagem no mesmo ambiente do arquivo html,por exemplo no meu caso eu salvei os dois arquivos na área de trabalho para facilitar na inserção da imagem ao código.
 |
| Exemplo do código com a tag <img> |
Por exemplo, com o src iremos dizer onde está localizada a imagem.
Já com o alt iremos exibir um texto descrevendo a imagem.
Também podemos escolher o alinhamento da imagem (se em cima, na esquerda, direita etc).
Podemos definir a altura (height) e largura (width) de uma figura, ou até a transparência (caso seja GIF ou PNG).
Enfim, podemos manusear fotos e imagens através de uma infinidade de maneiras em HTML
Já com o alt iremos exibir um texto descrevendo a imagem.
Também podemos escolher o alinhamento da imagem (se em cima, na esquerda, direita etc).
Podemos definir a altura (height) e largura (width) de uma figura, ou até a transparência (caso seja GIF ou PNG).
Enfim, podemos manusear fotos e imagens através de uma infinidade de maneiras em HTML
 |
| Exemplo do site no navegador com a imagem |
Exibindo duas ou mais figuras com a <img>
Com certeza a maioria dos sites possui muito mais de uma imagem.Se for um portal de notícias, por exemplo, você verá dezenas de pequenas figuras na home page.
Vamos agora adicionar outra imagem em nosso site, através do código HTML usado.
Agora é hora de adicionarmos outra figura. Vamos colocar ao lado o logotipo do Google.
Veja que a segunda imagem tem outro caminho que vem diretamente da url:
 |
| Exemplo do código para imagem através de url |
 |
| Exemplo do código para imagem através de url sendo exibida no navegador |
Comentários
Postar um comentário