Home-theater-designers
Embora os sites modernos sejam geralmente construídos com interfaces amigáveis ao usuário, é útil conhecer um pouco de HTML básico. Se você conhece as 17 tags de exemplo HTML a seguir (e alguns extras), poderá criar uma página da web básica do zero ou ajustar o código criado por um aplicativo como o WordPress.
Fornecemos exemplos de código HTML com saída para a maioria das tags. Se você quiser vê-los em ação, baixe o arquivo HTML de amostra no final do artigo. Você pode brincar com ele em um editor de texto e carregá-lo em um navegador para ver o que suas alterações fazem.
1
Você precisará dessa tag no início de cada documento HTML que criar. Ele garante que um navegador saiba que está lendo HTML e que espera HTML5, a versão mais recente.
Mesmo que esta não seja realmente uma tag HTML, ainda é uma boa conhecê-la.
2
Esta é outra tag que informa ao navegador que ele está lendo HTML. A tag vai logo após a tag DOCTYPE e você a fecha com uma tag bem no final do arquivo. Todo o resto em seu documento fica entre essas marcas.
3
A tag inicia a seção de cabeçalho do seu arquivo. As coisas que vão aqui não aparecem na sua página da web. Em vez disso, ele contém metadados para mecanismos de pesquisa e informações para seu navegador.
Para páginas básicas, a tag conterá seu título, e isso é tudo. Mas há algumas outras coisas que você pode incluir, que examinaremos em um momento.
Quatro.
Esta tag define o título da sua página. Tudo que você precisa fazer é colocar seu título na tag e fechá-la, assim (eu incluí as tags de cabeçalho, também, para mostrar o contexto):
My Website
Esse é o nome que será exibido como o título da guia quando for aberta em um navegador.
5
Como a tag de título, os metadados são colocados na área do cabeçalho de sua página. Os metadados são usados principalmente por mecanismos de pesquisa e são informações sobre o que está em sua página. Existem vários metacampos diferentes, mas estes são alguns dos mais comumente usados:
- Descrição : Uma descrição básica de sua página.
- palavras-chave : Uma seleção de palavras-chave aplicáveis à sua página.
- autor : O autor da sua página.
- janela de exibição : Uma tag para garantir que sua página tenha uma boa aparência em todos os dispositivos.
Aqui está um exemplo que pode se aplicar a esta página:
A tag 'viewport' deve sempre ter 'width = device-width, initial-scale = 1.0' como conteúdo para garantir que sua página seja exibida bem em dispositivos móveis e desktop.
6
Depois de fechar a seção do cabeçalho, você chega ao corpo. Você abre isso com a tag e fecha com a tag. Isso vai bem no final do seu arquivo, logo antes da tag.
Todo o conteúdo da sua página da web fica entre essas tags. É tão simples quanto parece:
Everything you want displayed on your page.
7
Cabeçalho ligeiramente menor
Subcabeçalho
Resultado:
Como você pode ver, eles ficam menores a cada nível.
8
A tag de parágrafo inicia um novo parágrafo. Isso geralmente insere duas quebras de linha.
Veja, por exemplo, a quebra entre a linha anterior e esta. Isso é o que
tag vai servir.
Your first paragraph.
Your second paragraph.
Resultado:
Seu primeiro parágrafo.
Seu segundo parágrafo.
Você também pode usar estilos CSS em suas tags de parágrafo, como esta que altera o tamanho do texto:
This is 50% larger text.
Resultado:
9
A marca de quebra de linha insere uma única quebra de linha:
The first line.
The second line (close to the first one).
Resultado:
Trabalhar de maneira semelhante é o
marcação. Isso desenha uma linha horizontal em sua página e é bom para separar seções de texto.
10
Esta tag define um texto importante. Em geral, isso significa que será em negrito. No entanto, é possível usar CSS para fazer exibição de texto de forma diferente.
quanto tempo duram os laptops da apple
No entanto, você pode usar com segurança para texto em negrito.
Very important things you want to say. Resultado:
Coisas muito importantes que você quer dizer.
Se você está familiarizado com o tag para texto em negrito, você ainda pode usá-la. Não há garantia de que continuará a funcionar em versões futuras do HTML, mas por enquanto, funciona.
onze.
Gostar e , e são relacionados. o tag identifica texto enfatizado, o que geralmente significa que ficará em itálico. Novamente, existe a possibilidade de que o CSS faça com que o texto enfatizado seja exibido de maneira diferente.
An emphasized line. Resultado:
Uma linha enfatizada.
o tag ainda funciona, mas, novamente, é possível que seja descontinuado em versões futuras do HTML.
12
o , ou âncora, a tag permite criar links. Um link simples é parecido com este:
Vá para MUO O atributo 'href' identifica o destino do link. Em muitos casos, esse será outro site. Também pode ser um arquivo, como uma imagem ou PDF.
Outros atributos úteis incluem 'destino' e 'título'. O atributo target é quase exclusivamente usado para abrir um link em uma nova guia ou janela, como esta:
Go to MUO in a new tab Resultado:
O atributo 'título' cria uma dica de ferramenta. Passe o mouse sobre o link abaixo para ver como funciona:
Hover over this to see the tool tip Resultado:
Passe o mouse sobre isso para ver a dica de ferramenta
13 ![]()
Se você deseja incorporar uma imagem em sua página, você precisará usar a tag de imagem. Você normalmente o usará em conjunto com o atributo 'src'. Isso especifica a origem da imagem, assim:
Resultado:
como encontrar uma lista de desejos na amazon
Outros atributos estão disponíveis, como 'altura', 'largura' e 'alt.' Veja como isso pode parecer:
Como você pode esperar, os atributos 'altura' e 'largura' definem a altura e a largura da imagem. Em geral, é uma boa ideia definir apenas um deles para que a imagem seja dimensionada corretamente. Se você usar os dois, poderá acabar com uma imagem esticada ou comprimida.
A tag 'alt' informa ao navegador qual texto exibir se a imagem não puder ser exibida e é uma boa ideia incluir com qualquer imagem. Se alguém tiver uma conexão especialmente lenta ou um navegador antigo, ainda poderá ter uma ideia do que deveria estar em sua página.
14
A tag de lista ordenada permite criar uma lista ordenada. Em geral, isso significa que você obterá uma lista numerada. Cada item da lista precisa de uma tag de item de lista (
), então sua lista ficará assim:
- First thing
- Second thing
- Third thing
Resultado:
- Primeira coisa
- Segunda coisa
- Terceira coisa
Em HTML5, você pode usar
para inverter a ordem dos números. E você pode definir o valor inicial com o atributo start. O atributo 'tipo' permite que você diga ao navegador que tipo de símbolo usar para os itens da lista. Pode ser definido como '1,' 'A,' 'a,' 'I,' ou 'i,' definindo a lista para exibir com o símbolo indicado como este:
quinze.
A lista não ordenada é muito mais simples do que sua contraparte ordenada. É simplesmente uma lista com marcadores.
- First item
- Second item
- Third item
Resultado:
- Primeiro item
- Segundo item
- Terceiro item
Listas não ordenadas também têm atributos de 'tipo' e você pode definir como 'disco', 'círculo' ou 'quadrado'.
16
Embora o uso de tabelas para formatação seja desaprovado, muitas vezes você desejará usar linhas e colunas para segmentar informações em sua página. Várias tags são necessárias para fazer uma tabela funcionar. Este é o exemplo de código HTML:
1st column
2nd column
Row 1, column 1
Row 1, column 2
Row 2, column 1
Row 2, column 2
o
e
tags especificam o início e o fim da tabela. otag contém todo o conteúdo da tabela. Cada linha da tabela está contida em um
marcação. Cada célula dentro de cada linha é envolvida em qualquertags para cabeçalhos de coluna ou tags para dados da coluna. Você precisa de um para cada coluna em cada linha. Resultado:
1ª coluna 2ª coluna Linha 1, coluna 1 Linha 1, coluna 2 Linha 2, coluna 1 Linha 2, coluna 2
17
Quando você estiver citando outro site ou pessoa e quiser diferenciá-la do resto do documento, use a tag blockquote. Tudo o que você precisa fazer é incluir a citação na abertura e no fechamento das tags blockquote:
The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.
Resultado:
A Web como eu a imaginei, ainda não a vimos. O futuro ainda é muito maior do que o passado.
A formatação exata usada pode depender do navegador que você está usando ou do CSS do seu site. Mas a tag permanece a mesma.
Amostras de código HTML
Com esses 17 exemplos de HTML, você deve ser capaz de criar um site simples. Você pode testá-los todos agora mesmo em um editor de texto online para ter uma ideia de como eles funcionam.
Para obter mais lições curtas em HTML, experimente alguns aplicativos de microlearning para codificação. Eles ajudarão você a começar a trabalhar rapidamente.
Compartilhado Compartilhado Tweet O email Quer aprender codificação básica? Experimente 5 aplicativos de codificação de tamanho reduzido no seu tempo livre Quer aprender codificação básica, mas tem pouco tempo? Esses aplicativos de codificação pequenos ocuparão apenas alguns minutos do seu dia atarefado.
Leia a seguir Tópicos relacionados - Programação
- Wordpress
- HTML
- Desenvolvimento web
- Tutoriais de codificação
Sobre o autor Andy Betts(221 artigos publicados) Andy é um ex-jornalista impresso e editor de revista que escreve sobre tecnologia há 15 anos. Nesse período, ele contribuiu para inúmeras publicações e produziu trabalhos de redação para grandes empresas de tecnologia. Ele também forneceu comentários de especialistas para a mídia e apresentou painéis em eventos do setor.
Mais de Andy BettsAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever