Olá indexadores, vamos dar seguimento com a linguagem HTML mostrando de forma mais objetiva o uso de tags, nesta parte vou demonstrar a funcionalidade das seguintes tags: <title>, <p>, <h1>, <h2>, <b>, <i>, <u>, <a> e <img>.
Para escrever a linguagem HTML precisamos de um ambiente de edição de texto, vamos usar o editor do próprio sistema operacional. Se você utiliza Windows clique em Iniciar, depois em Executar, digite notepad e dê OK.Pronto, tudo que precisamos para criar uma estrutura HTML está aí.
Escreva no notepad a estrutura abaixo que vimos na parte anterior:
<html> <head> <!-- Aqui é a cabeça da estrutura --> </head> <body> <!-- Aqui é o corpo da estrutura --> </body> </html>
Muito bem, agora salve esse arquivo. No menu superior clique em Arquivo e depois Salvar como... no nome do arquivo escreva pagina.html e salve no Desktop. Após salvar vá no Desktop e abra o arquivo com seu navegador de internet.
O que apareceu na tela?
Provavelmente nada demais, o conteúdo da página estará em branco e no título o nome do arquivo (pagina.html). Vamos alterar o título da página, insira a tag <title> dentro de <head> assim:
<html> <head> <!-- Aqui é a cabeça da estrutura --> <title>Este é o título da minha página!</title> </head> <body> <!-- Aqui é o corpo da estrutura --> </body> </html>
Salve o arquivo e atualize (F5) sua página no navegador. Note que na aba do seu navegador agora está aparecendo o que foi digitado dentro da tag <title>.
E é basicamente assim o funcionamento das tags, o que estiver dentro de uma tag receberá a ação dessa tag. Criaremos agora, no conteúdo da página, cabeçalhos com as tags <h1> e <h2> e parágrafos com a tag <p>. Aplique no arquivo pagina.html as alterações abaixo:
<html> <head> <!-- Aqui é a cabeça da estrutura --> <title>Este é o título da minha página!</title> </head> <body> <!-- Aqui é o corpo da estrutura --> <h1> Cabeçalho 1 com tamanho maior </h1> <h2> Cabeçalho 2 com tamanho menor </h2> <p> Conteúdo do 1º parágrafo </p> <p> Conteúdo do 2º parágrafo </p> </body> </html>
Atualize a página e veja como ficou. Podemos também personalizar a fonte do texto com as tags: <b> (texto em negrito), <i> (texto em itálico) e <u> (texto sublinhado). Veja:
<html> <head> <!-- Aqui é a cabeça da estrutura --> <title>Este é o título da minha página!</title> </head> <body> <!-- Aqui é o corpo da estrutura --> <h1> Cabeçalho 1 com tamanho maior </h1> <h2> Cabeçalho 2 com tamanho menor </h2> <p> Conteúdo do 1º parágrafo com <b>esta parte em negrito</b> </p> <p> Conteúdo do 2º parágrafo com <i>esta parte em itálico</i> </p> <p> Conteúdo do 3º parágrafo com <u>esta parte sublinhada</u> </p> </body> </html>
Agora veremos um tipo diferente de tag. São tags que além do seu nome de identificação também possuem atributos configuráveis dentro dela, vou demonstrar o uso desses atributos com as tags: <a> (p/ adicionar link em um texto) e <img> (p/ adicionar imagem). Veja:
<html> <head> <!-- Aqui é a cabeça da estrutura --> <title>Este é o título da minha página!</title> </head> <body> <!-- Aqui é o corpo da estrutura --> <h1> Cabeçalho 1 com tamanho maior </h1> <h2> Cabeçalho 2 com tamanho menor </h2> <p> Conteúdo do 1º parágrafo com <b>esta parte em negrito</b> </p> <p> Conteúdo do 2º parágrafo com <i>esta parte em itálico</i> </p> <p> Conteúdo do 3º parágrafo com <u>esta parte sublinhada</u> </p> <a href="http://www.google.com" target="_blank"> Ir para o Google </a> <br/> <img src="http://goo.gl/NkjcSJ" width="250" height="180" /> </body> </html>
Note que dentro da tag <a> estão os atributos href e target, a explicação é que a funcionalidade da tag <a> é aplicar um link em um texto, então obviamente precisamos configurar a página para ser redirecionada quando alguém clicar nesse texto, no exemplo a página é a do Google. E também configuramos o atributo target como _blank que significa que a página será aberta em uma nova janela do navegador.
E por fim com a tag <img> precisamos definir o local da imagem com o atributo src , e os atributos width (largura) e height (altura) definem o tamanho em pixels que a imagem deve ter.
Obs.: Também usei a tag <br/> no exemplo, a funcionalidade dela é a de pular para a próxima linha.
Indico este artigo para conhecer mais a respeito de tags: Principais Tags de HTML
Continuamos na próxima parte, nela irei começar a abordar sobre CSS...
Veja outras partes deste tutorial
- Aprenda o básico da construção de sites com HTML, CSS e PHP (1/10)
- Aprenda o básico da construção de sites com HTML, CSS e PHP (2/10)
- Aprenda o básico da construção de sites com HTML, CSS e PHP (3/10)
Nenhum comentário:
Postar um comentário
Obrigado pelo comentário.