Mesmo que sites modernos são geralmente construídos com interfaces amigáveis

, ainda é bom saber um pouco de HTML básico. Se você conhece as seguintes 17 marcas (e os poucos extra que ir com eles), você vai ser capaz de criar uma página web básica do zero ou ajustar o código criado por um app como WordPress.10 maneiras de criar um site pequeno e simples sem o Overkill10 maneiras de criar um site pequeno e simples sem o OverkillWordPress pode ser um exagero. Como esses outros serviços excelentes provar, WordPress não é o princípio eo fim de toda a criação website. Se você quer soluções mais simples, há uma grande variedade para escolher.consulte Mais informação

Video: Algoritmo - Método fácil de aprender

Eu forneci exemplos para a maioria das marcas, mas se você quiser vê-los em ação, baixar o arquivo HTML ligada no final do artigo. Você pode jogar com ele em um editor de texto e carregá-lo em um navegador para ver o que suas mudanças fazer.

1.

Você precisa ter essa tag no início de cada documento HTML que você cria. Ele garante que um navegador sabe que é HTML leitura, e que espera HTML5, a última versão.O que é o HTML5, e como ele mudar o que eu Procurar? [MakeUseOf Explica]O que é o HTML5, e como ele mudar o que eu Procurar? [MakeUseOf Explica]Ao longo dos últimos anos, você pode ter ouvido o HTML5 termo de vez em quando. Se você sabe alguma coisa sobre o desenvolvimento web ou não, o conceito pode ser um pouco nebuloso e confuso. Obviamente,...consulte Mais informação

Mesmo que este não é realmente um tag HTML, ainda é uma boa para saber.

2.

Esta é uma outra tag que diz um navegador que ele está lendo HTML. Por que precisamos de ambos? Quem sabe? Mas é uma boa idéia para colocá-lo de qualquer maneira.

E no final do documento, adicione uma tag.

3.

Para páginas básicas, a tag conterá seu título, e é sobre isso. Mas existem algumas outras coisas que você pode incluir, o que nós vamos passar por cima de um momento.

4.

Como você poderia esperar, este define o título da sua página. Tudo que você precisa fazer é colocar o seu título na tag e fechá-lo, como este (eu incluí as tags de cabeçalho, bem):

lt;cabeçagt;lt;títulogt;Meu websitetítulogt;cabeçagt;

Esse é o nome que será exibido como o título da página quando é aberto em um navegador.

5.

Como a tag título, metadados é colocado na área de cabeçalho da sua página (isto metadados, ao contrário metadados de seus dispositivos móveis, não é sensível). Metadados é usada principalmente pelos motores de busca, e é - como você poderia esperar - informações sobre as informações na sua página. Há um número de diferentes campos de meta, mas estes são alguns dos mais comumente utilizados:Metadados - as informações sobre sua InformaçãoMetadados - as informações sobre sua Informaçãoconsulte Mais informação

• descrição - A descrição básica de sua página.
• palavras-chave - A seleção de palavras-chave relevantes para a sua página.
• autor - O autor de sua página.
• janela de exibição - A tag para garantir que sua página fica bem em todos os dispositivos.

Aqui está um exemplo que pode se aplicar a esta página:

lt;meta nome="descrição" conteúdo="Um tutorial HTML básico"gt;lt;meta nome="palavras-chave" conteúdo="HTML, código, tags"gt;lt;meta nome="autor" conteúdo="Dann Albright"gt;lt;meta nome="janela de exibição" conteúdo="largura=dispositivo de largura, escala inicial=1.0"gt;

A tag “viewport” deve sempre ter “width = device-width, initial-scale = 1.0” como o conteúdo se certificar que sua página exibe bem em dispositivos móveis e desktop.

6.

O corpo de sua página - basicamente tudo que não seja o título é definido dentro da tag body. É tão simples quanto parece:

lt;corpogt;Tudo o que você deseja exibir em sua página.corpogt;

7.

o

tag define cabeçalhos de nível um na sua página.

define cabeçalhos nível de dois,

nível três, e assim por diante, até

. Como exemplo, os nomes das tags neste artigo são de nível dois cabeçalhos.

lt;h1gt;Cabeçalho grande e importanteh1gt;lt;h2gt;Um pouco menos Big Headerh2gt;lt;h3gt;Sub-cabeçalhoh3gt;

Resultado:

Cabeçalho grande e importante

Um pouco menos Big Header

Sub-cabeçalho

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, no intervalo entre a linha anterior e este. Isso é o que a

tag vai fazer.

lt;pgt;Seu primeiro parágrafo.pgt;lt;pgt;O seu segundo parágrafo.pgt;

Resultado:

Seu primeiro parágrafo.

O seu segundo parágrafo.

Você também pode usar estilos CSS em suas tags de parágrafo, como este:

lt;p estilo="tamanho da fonte: 120%-"gt;text 20% maiorpgt;

Resultado:

Video: Como Estudar HTML Analisando Código Alheio

text 20% maior

Para saber como usar CSS para estilizar seu texto, confira essas tutoriais HTML e CSS.Aprender HTML e CSS com estes tutoriais passo a passoAprender HTML e CSS com estes tutoriais passo a passoCurioso sobre HTML, CSS e javascript? Se você acha que você tem um talento especial para aprender a criar sites a partir do zero - aqui estão algumas grandes tutoriais passo-a-passo vale a pena tentar.consulte Mais informação

9.

A tag de quebra de linha insere uma única quebra de linha:

lt;pgt;A primeira linha.lt;brgt;A segunda linha (perto da primeira).pgt;

Resultado:

A primeira linha.
A segunda linha (perto da primeira).

Nota: Às vezes você pode ver essa tag escrito como
ou
. Ele faz a mesma coisa (a barra torna a tag legível em XHTML).Aprenda a Falar "Internet": Seu Guia para xHTMLAprenda a Falar "Internet": Seu Guia para xHTMLBem-vindo ao mundo do XHTML - Extensible Hypertext Markup Language - uma linguagem de marcação que permite a qualquer um construir páginas web com muitas funções diferentes. É a principal língua da Internet.consulte Mais informação

10.

Esta tag define importante texto. Em geral, isso significa que ele vai ser ousado. No entanto, é possível usar CSS para fazer exibição de texto diferente.

No entanto, você pode usar com segurança para texto em negrito.

lt;Fortegt;coisas muito importantes que você quer dizer.Fortegt;

Resultado:

coisas muito importantes que você quer dizer.

Se você estiver familiarizado com o tag para texto em negrito, você ainda pode usá-lo. Não há nenhuma garantia de que vai continuar a trabalhar em futuras versões do HTML, mas, por enquanto, ele funciona.

11.

Gostar e , e são relacionados. o etiqueta identifica texto enfatizado, o que geralmente significa que ele vai ficar em itálico. Mais uma vez, há a possibilidade de que CSS fará enfatizou exibição de texto diferente.

lt;emgt;Uma linha enfatizou.emgt;

Resultado:

Uma linha enfatizou.

o tag ainda funciona, mas novamente, é possível que ele se tornará obsoleto em futuras versões do HTML.

12.

o , ou âncora, tag permite criar ligações. Um simples link parecido com este:

Ir para MakeUseOfuma>

Resultado:

Ir para MakeUseOf

O atributo “href” identifica o destino do link. Em muitos casos, este será mais um website. Também poderia ser um arquivo, como uma imagem ou um PDF.

Outros atributos úteis incluem “target” e O atributo de destino é quase exclusivamente usado para abrir um link em uma nova aba ou janela, como esse “título.”:

<uma href="//makeuseof.com/" alvo="em branco"gt;Ir para MakeUseOf em uma nova abaumagt;

Resultado:

Ir para MakeUseOf em uma nova aba

O atributo “título” cria uma dica de ferramenta. Passe o mouse sobre o link abaixo para ver o que eu quero dizer:

lt;uma href="//makeuseof.com/" título="Esta é uma COOLtip"gt;Passe o mouse sobre um presenteumagt;

Resultado:

Passe o mouse sobre um presente

13.

Se você deseja incorporar uma imagem em sua página, você precisará usar a tag de imagem. A maneira mais simples para usá-lo é adicionar simplesmente a origem da imagem no atributo “src”, como este:

lt;img src="images / HDR-moderation.png"gt;

Resultado:

Isso inclui a imagem. No entanto, há uma série de outros atributos que você vai gostar deseja utilizar, como “altura”, “width” e “alt” Aqui está como isso pode parecer.:

lt;img src="images / HDR-moderation.png" largura="320" alt="o nome da sua imagem"gt;

Resultado:

Como você poderia esperar, a “altura” e atributos “largura” definir a altura e largura da imagem. Em geral, é uma boa idéia para definir apenas um deles para que a imagem escalas corretamente. Se você usar ambos, você pode acabar com uma imagem esticada ou esmagado.

A tag “alt” diz ao navegador o que texto a ser exibido se a imagem não pode ser exibida, e é uma boa idéia de incluir em qualquer imagem. Se alguém tem uma conexão especialmente lento ou um navegador antigo, eles ainda podem ter uma idéia do que você tem na sua página.4 razões pelas quais seu Wi-Fi é tão lento (e como corrigi-los)4 razões pelas quais seu Wi-Fi é tão lento (e como corrigi-los)Quando você contar com Wi-Fi, problemas de velocidade pode ferir - e problemas de velocidade Wi-Fi nem sempre são fáceis de diagnosticar. Aqui estão algumas coisas que você deve verificar.consulte Mais informação

14.

A tag lista ordenada permite criar uma lista ordenada. Em geral, isso significa que você vai ter uma lista numerada. Cada item na lista precisa de um tag item da lista (

), Então sua lista será parecido com este:

lt;olgt;lt;ligt;Primeira coisaligt;lt;ligt;segunda coisaligt;lt;ligt;coisa terceiroligt;olgt;

Resultado:

1. Primeira coisa
2. segunda coisa
3. coisa terceiro

Em HTML5, você pode usar

para inverter a ordem dos números. E você pode definir o valor inicial com o atributo início. O atributo “tipo” permite dizer ao navegador que tipo de símbolo a ser usado para os itens da lista. Ele pode ser definido como “1”, “A”, “a”, “I” ou “i”, definindo a lista para exibir com o símbolo indicado.

15.

A lista não ordenada é muito mais simples do que sua contraparte ordenada. É simplesmente uma lista com marcadores.

lt;ulgt;lt;ligt;primeiro itemligt;lt;ligt;segundo itemligt;lt;ligt;terceiro itemligt;ulgt;

Resultado:

• primeiro item
• segundo item
• terceiro item

Listas não ordenadas também têm atributos “tipo”, e você pode configurá-lo para “disco”, “círculo” ou “quadrado”.

16.

Enquanto o uso de tabelas para formatação é desaprovada, há uma abundância de momentos em que você vai querer usar linhas e colunas para informações do segmento em sua página. Há uma série de tags que você vai precisar usar para obter uma mesa para trabalhar. Dê uma olhada neste exemplo e você verá o que quero dizer:

lt;mesagt;lt;tbodygt;lt;trgt;lt;ºgt;A primeira colunaºgt;lt;ºgt;A segunda colunaºgt;trgt;lt;trgt;lt;tdgt;A linha 1, coluna 1tdgt;lt;tdgt;A linha 1, coluna 2tdgt;trgt;lt;tdgt;Linha 2, coluna 1tdgt;lt;tdgt;Linha 2, coluna 2tdgt;tbodygt;mesagt;

A primeira coluna	A segunda coluna
A linha 1, coluna 1	A linha 1, coluna 2

Cada tag envolve um cabeçalho (às vezes você pode ver esses envolto em um tag, como bem). desencadeia o corpo da tabela. o tag desencadeia uma nova linha da tabela, e cada etiqueta identifica uma célula nessa linha.

17.

Quando você está citando outro site ou pessoa e você deseja definir a citação à parte do resto do documento, a tag blockquote vai fazer isso por você. Tudo que você precisa fazer é colocar a citação na abertura e fechamento BlockQuote tags:

Video: Curso de HTML

lt;bloco de citaçãogt;Eu não devo temer. O medo é a mente-killer. O medo é a pequena morte que traz obliteração total. Eu irei enfrentar o meu medo. Vou permitir que ele passe por cima de mim e através de mim. E quando ele passou passado eu vai virar o olho interior para ver seu caminho. Quando o medo se foi não haverá nada. Apenas eu permanecerei.bloco de citaçãogt;

Resultado:

Eu não devo temer. O medo é a mente-killer. O medo é a pequena morte que traz obliteração total. Eu irei enfrentar o meu medo. Vou permitir que ele passe por cima de mim e através de mim. E quando ele passou passado eu vai virar o olho interior para ver seu caminho. Quando o medo se foi não haverá nada. Apenas eu permanecerei.

A formatação exata que é usado pode depender do navegador que você está usando ou o CSS do seu site. Mas a marca continua a mesma.

Vá em frente e HTML

Com estes 17 tags HTML (e alguns mais queridos de atendimento) você deve ser capaz de criar uma página web simples. Para ver como colocá-los todos juntos, você pode baixar o código HTML de exemplo que eu criei. Você pode abri-lo no seu navegador para ver como tudo vem junto, ou em um editor de texto para ver exatamente como o código funciona.

Você usa HTML em uma base regular? Que outras marcas você achar que você normalmente usa? Compartilhe suas dicas nos comentários abaixo!