5 Passos para a compreensão do código html básico

HTML é curto para HyperText Markup Language. Esse é o jargão para ‘algo que faz texto simples boa aparência`. É o ‘código` que está por trás de cada página. Mesmo este. E, surpreendentemente, é realmente muito simples.

Os ensinamentos de código HTML básico pode (quase) ser dividido em duas disciplinas de todos os dirigentes: estilo a.k.a manipular a aparência, e referindo, a.k.a marcação e apontando para localizações de, e dentro de documentos. HTML não pode fazer nada mais complicado do que o desenho de uma mesa, ou a criação de quadros, e nós não vamos cortar em PHP ou Java.

No entanto, HTML ainda está longe fora do caminho batido para a sua média Joe. É magia, e nenhum de seu negócio. Meu objetivo hoje é dar-lhe alguns dos blocos de construção HTML no curso de alguns minutos. Você não vai ser um programador ainda, mas você vai ser capaz de roçar a fonte de uma página web, compreendê-lo e agarrar essa imagem que Flickr está se esforçando para manter-se de você.

Primeiro Passo - a noção de Tag

Como dito anteriormente, o código HTML básico manipula um documento de texto simples para aplicar estilo e referência. Fá-lo através da aplicação de ‘tags`. A tag não faz nada mais do que indicando uma posição ou a seleção do documento, e especificar o tipo de magia que precisa ser feito.

Este, e apenas isso parte do documento é afetado.lt;/-Tag exemplo 1GT;

Algo aconteceu, precedente esta parte do documento

Exemplo 1 mostra uma frase que está encapsulado por duas marcas, uma início- e tag end. Tudo entre é afetado. exemplos muito comuns são tornando texto em negrito, cursivo, ou a criação de um ligação. A etiqueta final é idêntica ao marcador começar, mas é precedida em suportes angulares por uma barra (/).

Exemplo 2 mostra uma marcação que trabalha sozinha e (possivelmente) não faz necessidade para ser fechada. Embora não seja obrigatório, é ocasionalmente também escrito como para enfatizar este atributo muito. Tag solitário não afetam ‘parte` do documento, mas significam magia local, coisas que acontecem‘entre`. Exemplos comuns são quebras de linha e quebras de parágrafo.

Nota: para tags solitário, , , e significam a mesma coisa.

Este, e só esta parte do documento é afetado.

Às vezes, as tags permitem atributos adicionais a serem fornecidos. Exemplos comuns são a fonte do texto e cor, ou largura da imagem, altura e fonte. Nesses casos, o nome da marca é seguido por um espaço, e um número de atributo com um valor, de novo, separadas por espaços. O valor é a parte variável desta fórmula. Note que a tag final permanece o mesmo, independentemente dos atributos.

Vamos rever algumas tags comuns nos próximos passos.

Segundo Passo - O Parcelamento de HTML, CABEÇA & CORPO

As HTML, cabeça e do corpo tags são para um documento HTML que um quarto, cozinha e sala de estar são para uma casa. Estas tags encapsulando parcelar as grandes partes de um documento.

• simplesmente indica o uso de código HTML. Eles vão mostrar em cada página da Web, geralmente no início e final, e abraçar praticamente todo o outro código, incluindo os dois seguintes.
• marcar o ‘edifício administrativo`. Estes irão encapsule o título, e ativar determinados scripts. Normalmente, o próprio cabeça (sem trocadilhos) do documento, este é o lugar onde você não precisa ser.
• está localizado abaixo as tags HEAD, e torna-se a maior parte do documento. Esta parte narra o conto de que está realmente mostrando na sua página. Viver aqui são os textos, imagens, links, e praticamente qualquer coisa que você pode ver no seu browser. Este é o lugar onde nós jogamos. As seguintes tags todos ocorrem dentro da parte do corpo de um documento HTML.

Terceiro Passo - Porque , & Make You Feel Pretty

Nós já disse HTML era uma linguagem de marcação. Isso significa tanto quanto tornando texto sinto muito. Lembre-se, HTML remonta a quando a web foi uma experiência muito texto-y. Além disso, a internet teria sido demasiado lento para apoiar YouTube. Aqui estão alguns dos mais comuns tags de fazer bonito.

• faz seu olhar texto negrito
• faz você escrever em cursivo
• sublinhadas o que você acabou de escrever

Você ficará encantado de saber que estes também trabalhar na seção de comentários. Não overuse-los, no entanto.

• atinge o intervalo, fazendo você continuar em uma nova linha
• indica um parágrafo, criando uma grande ruptura adicional

Estes sistemas permitem estruturar o documento, porque uma ruptura real não significa nada em um documento HTML.

permite que você manipule um monte de outras coisas com o texto, usando atributos como tamanho, rosto e cor.

Um exemplo ideal seria Smurfs.

• para
  permitem a desenvolverem rapidamente cabeçalhos diferentes tamanhos. H1 é maior e H7 menor. As que usamos em artigos MakeUseOf são geralmente cerca de H3.

Hoje em dia, a marcação é muitas vezes mantidos em separado CSS Arquivo. Os números de estilo exatas são explicados externamente, e um só precisa parte ‘marca` do documento para aplicá-las. Isto é feito através da utilização div Tag. Por exemplo,

irá procurar um headermakeuseof classe no arquivo CSS. Nós não vamos discutir isso em detalhes.

Video: Curso de HTML (aula 6) Iniciantes / básico - Tabelas e alinhamento de página

Passo Quatro - Incorporado Imagens com

Imagens tornaram-se habitual em páginas HTML, e ainda há um pedaço de código por trás dele. o é uma das duas marcas que vamos discutir em detalhes, porque é algo que você vai ser capaz de usar. Basta pensar desses sites irritantes que não permite o download de algumas fotos para o seu desktop (estou olhando para você, Flickr). Da próxima vez, basta ir na fonte e agarrar a fonte si mesmo.

Aqui estão algumas das atributos utilizado em conjunto com a guia IMG.

• src =”http://site.com/image.jpg/”

Muito importante. O atributo de origem especifica a localização de uma imagem. É isso mesmo, uma imagem nunca é realmente processado em uma página web, mas é puxado dentro de uma fonte externa. Assim que tiver o endereço, você tem a imagem.

Às vezes, apenas uma parte da URL é exibido. O URL real vai depender da localização do arquivo HTML. Isso é chamado de um endereço relativo, contrastando com um endereço absoluto. um exemplar http://site.com/dir1/dir2/dir3/page.html pode mostrar um valor de “image.jpg” quando a imagem está localizado no mesmo diretório que a página da web. Neste exemplo, o endereço completo seria http://site.com/dir1/dir2/dir3/image.jpg.

Se você encontrar um endereço relativo de “dir4 / image.jpg”, a imagem será localizada em http://site.com/dir1/dir2/dir3/dir4/image.jpg

Da mesma forma, “../image.jpg” terá que voltar um diretório “../../image.jpg” dois diretórios, e assim por diante.

• altura =”200" width =”50%”

Essas marcas definir como grande a imagem é exibido. Ela não diz nada sobre o tamanho real da imagem. Os tamanhos podem ser adicionados em pixels (onde 200 e 200 px são um e o mesmo) ou por cento. Com apenas a altura ou largura especificada, o outro uma muda consequentemente. Usando ambas as marcas permite ‘esticar`.

Video: Curso de HTML Básico - Aula 3 - Colocando títulos na página

• alt =”nome ou comentário alternativa”

A tag alt especifica o texto mostrado no rato-acabado, ou quando uma imagem não for carregado. Mais especificamente, estes são o que XKCD usa para aqueles afterthoughts engraçadas.

uso adequado seria, por exemplo,

Passo Cinco - Links são feitas com um Tag

Este poderia ser ainda mais importante do que a tag IMG. A tag permite que você marque um ponto em um documento, e conectar-se a documentos, imagens, arquivos e até mesmo âncoras em outros sites HTML. Aqui estão os atributos mais comuns.

• href =”// makeuseof.com”

Um dos atributos mais comuns, texto escrito. Você pode criar links definindo o endereço web e encapsular disse ‘texto âncora`. Os links também podem ser usados ​​na seção de comentários, desde que você não conectar-se a spam ou conteúdo impróprio.

• name =”neverwhere”

Utilizado em conjunto com o atributo nome, a marca irá criar uma âncora. Você pode usar esta âncora para ligar de volta para dentro da mesma página, ou mesmo através da web. Um pode conectar-se a uma âncora usando uma URL relativa ou absoluta, respectivamente, ou.

Em conclusão

Esta é a parte onde eu admito nós só roçou a superfície do código HTML básico. O que vimos hoje lhe permitirá percorrer e compreender uma grande parte de sites simples. Vá em frente, experimentá-lo. Você vai certamente encontrar algumas tags que você não conhece, mas que é onde Google vem a calhar. Se você está disposto há muito mais informações onde que vem, e você pode tudo encontrá-lo online.

Se você está procurando algo muito específico, como uma imagem, um arquivo de áudio ou um link, não há necessidade de ler a página HTML inteira. Pressione Ctrl + F e procure por esses arquivos ou as tags relevantes. Você sabe o que você está procurando agora, e especialmente quando você encontrou.

O que você acha? Seu primeiro ou último encontro com HTML? Deixe-nos saber o que você pensa na seção de comentários abaixo, e não tenha medo de experimentar alguns dos códigos de marcação!