A gente já falou sobre a história e a importância do HTML. Agora vamos colocar em prática,
vamos desenvolver um código HTML, vamos criar uma página web.
Por onde você deve começar? Afinal do que você precisa para criar um código HTML?
A rigor, basta ter um editor de texto simples (bloco de notas) para criar um código HTML (neste
caso você deve salvar como um arquivo .html) e um navegador para visualizar o resultado do
referido código. Existem dezenas de ambientes de desenvolvimento. Vou apresentar para você
os principais.
Testando os exemplos
Para entender a teoria sobre HTML, é muito importante testar os exemplos e praticar. Vou
apresentar como fazer esses testes, de uma maneira muito simples. Para isso, peço que você
siga estes passos;
1. Abra o aplicativo chamado “bloco de notas”
2. Escreva o código a seguir
3. Salve o arquivo com o nome exemplo.html
4. Dê dois cliques em cima do arquivo exemplo.html
Definições iniciais
Agora que você já sabe que precisa praticar, vamos aprender alguns conceitos iniciais. Por
exemplo, como um navegador sabe o que é um texto simples e o que é um código HTML?
Os códigos HTML ficam entre as marcações (ou também chamadas tags) < e >, que geralmente
são apresentadas aos pares, ou seja, e . Exemplo:
<html>......</html>
Entretanto, há algumas exceções para o funcionamento aos pares, que a gente vai explicar à
medida que elas forem aparecendo, mas já podemos citar a marcação que indica um parágrafo que não necessita, obrigatoriamente, de um </p>
🔔 Você Sabia? (curiosidades)
O navegador é um aplicativo que interpreta códigos em HTML,
permitindo a interação do usuário com o conteúdo apresentado em
uma página web. Esses aplicativos têm evoluído muito, acompanhando
a evolução das tecnologias.
Hoje existem diversos navegadores, desenvolvidos por diferentes empresas. Por exemplo:
Existe um padrão estabelecido pela W3C e determinadas exigências de mercado, mas
não existe uma lei que obrigue todos os desenvolvedores de navegadores a seguir tais
padrões e exigências. E se o navegador não entende uma determinada marcação, ele
simplesmente a ignora. Portanto, é importante realizar um cross-browser, ou seja,
testar uma determinada página em diferentes navegadores.
Existem diversas soluções online que podem lhe ajudar a realizar esses testes. Veja
alguns exemplos:
• Browsera. Disponível em: <https://turbo.net/browsers>
• Browserling. Disponível em: <https://www.browserling.com/>
• Browsershots. Disponível em: <http://browsershots.org/>
• IE NetRenderer. Disponível em: <http://netrenderer.com/index.php>
• Viewlike.us. Disponível em: <https://www.viewlike.us/>>
Além da marcação existem outras, que podem ser consideradas as marcações mínimas
de uma página. Preste atenção!
🔔 Você Sabia? (curiosidades)
Apesar de existir um padrão, na hora em que você está digitando seu código HTML, pode acontecer de você trocar alguma letra maiúscula pela equivalente minúscula e vice-versa. Não esquente a cabeça com isso!!! As marcações HTML não são “case sensitive”, não diferenciam letras maiúsculas de minúsculas. Em outras palavras, <HTML> significa o mesmo que <html>.
Elementos básicos
Vamos agora estudar os elementos básicos de uma página HTML. São várias marcações que
aparecem com maior frequência.
Cabeçalhos
No contexto do HTML, você utiliza cabeçalhos para definir um destaque para um determinado
texto e podem ser definidos 6 níveis de cabeçalhos. Segue a codificação básica:
<Hnúmero>...</Hnúmero>
Exemplo:
Parágrafos
Agora a gente vai estudar como são inseridas quebras de parágrafo no HTML.
O texto de uma página web geralmente é dividido em parágrafos, como normalmente a gente
faz fora da web. Entretanto, os navegadores não reconhecem as quebras de parágrafos que
você coloca no código HTML.
Os navegadores inserem uma quebra de linha ou a marcação de um novo parágrafo apenas quando o texto chega no final da janela. Para inserir a quebra de um novo parágrafo manualmente, você precisa inserir a marcação <p>, preferencialmente seguida da marcação </p>.
Quebra de linha
O espaço entre linhas não pode ser exagerado. Talvez você não queira
colocar o espaço extra as linhas, que aparece sempre que você usa a
marcação.
O que fazer?
Neste caso, você precisa usar a marcação <br>, que quebra a linha, sem acrescentar um
espaço extra entre as linhas.
Formatando textos
Tão importante quanto o texto que você apresenta na página web é a formatação e o destaque
com que você apresenta o referido texto.
A linguagem HTML permite inserir diversas formatações em um texto qualquer. As principais
marcações relacionadas à formatação são as seguintes:
Exemplo:
Ligando uma página a outra
Imagine algo comigo! Você está na página do Youtube, vê um vídeo legal, talvez do seu
Youtuber preferido e clica no link do vídeo. Então, a página com o vídeo que você selecionou
aparece no navegador.
Essa é uma das grande vantagens do HTML: a possibilidade de você poder navegar pelas
diferentes
páginas, sem ter que seguir uma ordem pré-definida e sim o interesse do usuário.
Mas como fazer isso?
Usando a marcação de âncora.
Veja o passo a passo para criar um link para uma outra página:
1. Utilizar a marcação <a>
2. Utilizar o atributo href para indicar qual página será “linkada”
3. Definir o texto ou imagem que servirá de link
4. Fechar com a marcação </a>
Exemplo:
🔔 Você Sabia? (curiosidades)
O chamado Hypertext Transfer Protocol (ou na sigla HTTP, que em
tradução livre do inglês significa Protocolo de Transferência de Hipertexto) é um
protocolo de comunicação (na camada de aplicação segundo o Modelo OSI) utilizado
para sistemas de informação de hipermídia distribuídos e colaborativos.
E, se ao invés de direcionar para uma outra página do seu próprio portal, você quisesse criar um
link para um site externo? Por exemplo, criar para a página do Youtube? Para isso, basta
apresentar o endereço completo, inclusive com o respectivo protocolo, geralmente http.
Exemplo:
Inserindo imagens
Mas uma página não deveria ser feita apenas de textos, correto? E uma imagem pode dizer mais
que 1000 palavras. Para inserir uma imagem em uma página HTML basta utilizar a marcação
![]()
e alguns atributos, a saber:
• src: define o nome do arquivo da imagem;
• alt: define o texto que será apresentado, no lugar da imagem, quando a imagem não pode ser exibida;
• width: define a largura da imagem (em pixels);
• height: define a altura da imagem (em pixels).
Veja o exemplo a seguir:
Inserindo vídeos
Por falar em Youtube, esse é um dos maiores sites de vídeos do mundo, onde todos podem se
divertir,
aprender e, muitas vezes, se chocar.
E se você quiser inserir um vídeo na sua página? É fácil. Vamos aprender a fazer?
Com o HTML 5 a inserção de vídeos em uma página web ficou muito mais fácil. Você precisa
utilizar
basicamente duas marcações:
- <video>: que define que você irá inserir um vídeo;
- <source>: onde você especifica o formato do vídeo;
- <iframe>: use para incorporar um outro documento dentro do HTML.
Junto com essas marcações, você pode utilizar alguns atributos que podem ser muito úteis, a
saber:
- width: você especifica a largura da janela do vídeo;
- width: você especifica a largura da janela do vídeo;
- height: você especifica a altura da janela do vídeo;
- controls: você permite que os controles de reprodução, pausa e volume sejam visualizados;
- autoplay: você define que o vídeo seja inicializado automaticamente;
- src: você especifica onde encontrar o arquivo do vídeo, seja numa pasta local ou na web;
- allowfullscreen: você especifica que o vídeo pode ser visto em tela cheia;
- type: você especifica o tipo de arquivo. Atualmente, os principais tipos de arquivos são os seguintes:
- mp4: formato padrão de compactação de áudio e vídeo;
- ogg: um formato orientado a stream, ou seja, não precisa fazer o download de todo
o vídeo
Criando tabelas
E se você quiser apresentar alguns dados em página de forma organizada e ordenada, divididos
em colunas e linhas? Por exemplo, um site que apresenta os resultados do Brasileirão.
Nesse caso você poderia apresentar os dados na forma de uma tabela do HTML. Agora você vai
aprender a criar tabelas.
Para criar uma tabela, você precisa usar pelo menos as seguintes marcações:
• <table>: define onde começa e termina uma tabela;
• <tr>: define uma nova linha da tabela;
• <th>: define um célula especial, do tipo cabeçalho, com destaque;
• <td>: define uma célula de dados.
Além disso você pode utilizar os seguintes atributos:
• border: permite incluir as linhas de borda;
• align: permite definir o alinhamento ao centro (center), à esquerda (left) ou à direita (right);
• rowspan: permite mesclar duas linhas;
• colspan: permite mesclar duas colunas.
Questões de autoaprendizagem
Vamos pensar e praticar...
Sei que vocês têm seus programas e séries favoritas, seus sites
favoritos, as coisas com as quais você consegue passar horas vendo e se divertindo.
Vamos contar isso para todo mundo?
Crie uma página reproduzindo a página a seguir. Seja criativo mude o conteúdo
e as imagens, mas não a estrutura. Tenho certeza de que você consegue, pois é uma
pessoa muito inteligente. Atenção: as imagens são apenas ilustrativas.
Solução... Para resolver essa questão, utilize o código abaixo, altere a cor do cabeçalho, altere o texto e a descrição e mude também as imagens para trocar as imagens é preciso copiar o link das imagens que você escolher e alterar no código.
Para você testar seu código use esse link: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_editor
Após testar e verificar que está tudo certo, clique no link que está no final da página para enviar o seu código HTML.
Código HTML
<!DOCTYPE html>
<html>
<title> Exemplo </title>
<head>
<meta charset=”UTF-8”>
</head>
<body>
<table border>
<tr>
<th colspan="2" bgcolor="yellow"><h1 style="color: black">Coisas que eu gosto</h1></th>
</tr>
<tr>
<td width="400" height="200" align="center"><h3>Meu desenho favorito</h3> Este é um exemplo do meu desenho favorito na internet.</td>
<td>
<img width="400" height="200" src="https://i.ytimg.com/vi/5_f5Nmt1pRE/maxresdefault.jpg">
</td>
</tr>
<tr>
<td width="400" height="200" align="center"><h3>Meu game preferido</h3> Este é um exemplo do meu game favorito na internet.</td>
<td>
<img width="400" height="200" src="https://images.samsung.com/is/image/samsung/assets/br/apps/gaming-hub/01_gameLauncher_section_kv_mo.jpg?$720_N_JPG$"
</td>
</tr>
<tr>
<td width="400" height="200" align="center"><h3>Meu youtuber preferido</h3> Este é um exemplo do meu game favorito na internet.</td>
<td>
<img width="400" height="200" src="https://s2.glbimg.com/8BrYj3OetdqHBzbUammebQ2o4VA=/620x465/s.glbimg.com/jo/g1/f/original/2016/06/27/whindersson1.png"
</td>
</tr>
</table>
</body>
</html>
CLIQUE AQUI PARA ENVIAR O SEU CÓDIGO
Comentários
Postar um comentário