Tutorial de HTML para Iniciantes
O ponto de partida para o início no mundo do Desenvolvimento.
|
|
|---|---|
| Apresentação | Pra quem quer iniciar no mundo da Programação/Desenvolvimento, HTML é o início de tudo, pra aprender HTML basta saber ligar um computador, saber navegar na internet e usar um Bloco de Notas da vida, somente. HTML5 É a quinta versão da linguagem HTML. É muito simples e fácil, mas aprender do jeito certo é o alicerce pra entender muitas coisas nesse mundo do Desenvolvimento e da Internet. Documentos HTML escritos de maneira correta, aumentam significadamente a possibilidade de um buscador encontrar rapidamente seu site e colocá-lo nas primeiras ocorrências para pesquisa de um determinado assunto. |
| Pré-requisitos | Ter conhecimentos básicos de informática, tais como navegar na internet, acessar seu e-mail e utilizar editores de texto (Exemplo: Bloco de Notas do Windows). |
| O que aprender | Vamos criar um site da internet somente com HTML na sua última versão: HTML5. Clique aqui para ver o Exemplo do site que iremos criar do zero. |
| Conceitos | HTML é o formato padrão para criação de páginas online e aplicações de web. O nome HTML é uma abreviação para a expressão inglesa de HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto. HTML5 é quinta versão do HTML, essa versão reúne os recursos do HTML numa única linguagem simples de marcação que possa ser escrita em HTML e suas variantes. Traz um conceito global para ser utilizado em qualquer dispositivo: comutadores, notebooks, smartphones, tablets e televisões digitais, entre outros. |
| História | Tim Berners-Lee (físico britânico) criou o HTML original. Na época a linguagem não era uma especificação, mas uma coleção de ferramentas para resolver um problema de Tim: a comunicação e disseminação das pesquisas entre ele e seu grupo de colegas. Sua solução, combinada com a então emergente internet pública (que tornar-se-ia a Internet) ganhou atenção mundial. |
| Curiosidade | A tecnologia é fruto da junção entre os padrões HyTime e SGML, que não são mais utilizados. |
| Ferramentas mínimas | Editor de Texto. Exemplo: Bloco de Notas do Windows. Mas preferencialmente instale um que colorize o código, exemplos: Vim, Gedit, Notepad++, ... |
| Grade | Essa própria página já contém todos os tópicos abordados. |
| Estrutura Básica |
Tudo que fica entre < e > são chamadas de tag As tags são elementos HTML que identifica o tipo de elemento que serão lidos pelo o navegador da internet. Geralmente as tags abrem assim: <NOME_DA_TAG> e fecham com uma barra antes do seu nome, assim: </NOME_DA_TAG>, com exceção de algumas tags que veremos mais à frente, que por sinal são poucas. As tags que ficam entre o documento fica entre as tags: <html> e </html>, dentro dessas tags temos as tags: <head> e </head> que são o cabeçalho do documento e as tags <body> e </body> que é o corpo do documento, dentro delas, colocamos as demais tags. Algumas tags devem ficar entres as tags head, como a tag title, por exemplo. E outras obrigatoriamente tem de ficar entre as tags body, a h1, como exemplo. Dentro dos nomes dentro das tags, podemos ainda inserir atributos: href, lang, class, target,... Ex.:<html lang="pt-BR",... HTML5 adiciona várias novas tags: video, audio, header, canvas, svg, section, article, header e nav. |
| Primeiro HTML |
|
| <!DOCTYPE> |
Em HTML5 existe apenas usasse assim: <!DOCTYPE html> Deve ser a primeira coisa no seu documento HTML, antes da tag <html>. NÃO é uma tag HTML; é uma instrução para o navegador da web sobre qual versão do HTML a página está escrita. Outras declarações em versões anteriores ao HTML5:
|
| <html> |
Define a raiz de um documento HTML. Como vimos dentro dela ficam as tags head e body, consequentemente todo o documento HTML. Em HTML5 você também pode definir a linguagem do documento (ISO), como vimos: <html lang="pt-BR". |
| <head> | Define informações sobre o documento Dentro dele devem ficar as tags: title (Esse é necessário para o documento HTML), style, base, link, meta, script e noscript. |
| <title> | Define um título para o documento |
| <body> | Define o corpo do documento Dentro dele devem ficar as demais tags que não ficam em head: h1,h2,h3,h4,h5,p,br,hr,div,img,a,... |
| <h1>até<h6> | Define os cabeçalhos dos textos dentro HTML. |
| <a> | Define um hiperlink Usando o atributo href="http://url" ao clicar sobre a tag, a página informada dentro de href será aberta, se usar em conjunto com o atributo target="_blank" a página será aberta em outra janela/aba/objeto do navegador. Exemplo: <a href="http://www.terminalroot.com.br" target="_blank">Vai para o blog Terminal Root</a> |
| <img> | Define uma imagem. O atributo src="imagem.jpeg" exibe a imagem informada, se a imagem não estiver dentro
da mesma pasta onde está o arquivo HTML, será necessário informar o caminho completo. Essa tag também exige o uso
do atributo alt="Descrição da Imagem" de acordo com as regras da W3C que regulamenta o uso dos documentos HTML,
pois os softwares para deficientes visuais, lêem esse atributo e transforma em voz para quem está acessando a página. Exemplos: <img src="nome_da_imagem.jpeg" alt="Imagem do Carro X"><img src="/pasta/nome_da_imagem.jpeg" alt="Imagem do Carro X"> |
| <p> | Define um parágrafo |
| <!--...--> |
Define um comentário Se você quiser inserir um trecho no seu documento que não será exibido na leitura do navegador, coloque a frase/texto/comentário entre essa tag, exemplos: <!-- Nessa linha eu tive que pôr cor vermelha.--> <!-- Preciso mudar os hiperlinks desse trecho --> |
| <meta> |
Define metadados sobre um documento HTML Fica entre as tags head Exemplo de formas de uso:
|
| Vídeo | https://youtube.com/TerminalRootTV |
| <abr> | Define uma abreviação ou um acrônimo
|
| <acronym> | Não suportado em HTML5. Use <abbr> em seu lugar. Define um acrônimo |
| <address> | Define informações de contato para o autor/proprietário de um documento |
| <applet> | Não suportado em HTML5. Use <object> em seu lugar. Define um applet incorporado |
| <area> | Define uma área dentro de um mapa de imagem |
| <article> | Define um artigo |
| <aside> | Define conteúdo além do conteúdo da página |
| <audio> | Define o conteúdo de som |
| <b> | Define o texto em negrito |
| <base> | Especifica o URL/destino base para todos os URLs relativos em um documento |
| <basefont> | Não suportado em HTML5. Use CSS no lugar. Especifica uma cor, um tamanho e uma fonte padrão para todo o texto em um documento |
| <bdi> | Isola uma parte do texto que pode ser formatado em uma direção diferente de outro texto fora dele |
| <bdo> | Substitui a direção do texto atual |
| <big> | Não suportado em HTML5. Use CSS no lugar. Define texto grande |
| <blockquote> | Define uma seção que é citada de outra fonte |
| <br> | Define uma quebra de linha única |
| <button> | Define um botão clicável |
| <canvas> | Usado para desenhar gráficos, on the fly, via script (geralmente JavaScript) |
| <caption> | Define uma legenda de tabela |
| <center> | Não suportado em HTML5. Use CSS no lugar. Define o texto centralizado |
| <cite> | Define o título de um trabalho |
| <code> | Define um código de computador |
| <col> | Especifica as propriedades da coluna para cada coluna em um<colgroup>elemento & nbsp; |
| <colgroup> | Especifica um grupo de uma ou mais colunas em uma tabela para formatação |
| <data> | Vincula o conteúdo fornecido a uma tradução legível por máquina |
| <datalist> | Especifica uma lista de opções predefinidas para controles de entrada |
| <dd> | Define uma descrição/valor de um termo em uma lista de descrição |
| <del> | Define o texto que foi excluído de um documento |
| <details> | Define detalhes adicionais que o usuário pode ver ou ocultar |
| <dfn> | Representa a instância de definição de um termo |
| <dialog> | Define uma caixa de diálogo ou janela |
| <dir> | Não suportado em HTML5. Use<ul>em seu lugar. Define uma lista de diretórios |
| <div> | Define uma seção em um documento |
| <dl> | Define uma lista de descrições |
| <dt> | Define um termo/nome em uma lista de descrições |
| <em> | Define o texto enfatizado & nbsp; |
| <embed> | Define um contêiner para um aplicativo externo (não HTML) |
| <fieldset> | Agrupa elementos relacionados em um formulário |
| <figcaption> | Define uma legenda para uma tag<figure>elemento |
| <figure> | Especifica conteúdo independente |
| <font> | Não suportado em HTML5. Use CSS no lugar. Define fonte, cor e tamanho do texto |
| <footer> | Define um rodapé para um documento ou seção |
| <form> | Define um formulário HTML para entrada do usuário |
| <frame> | Não suportado em HTML5. Define uma janela (um quadro) em um conjunto de quadros |
| <frameset> | Não suportado em HTML5. Define um conjunto de quadros |
| <header> | Define um cabeçalho para um documento ou seção |
| <hr> | Define uma alteração temática no conteúdo |
| <i> | Define uma parte do texto em uma voz ou humor alternativo |
| <iframe> | Define um quadro in-line |
| <input> | Define um controle de entrada |
| <ins> | Define um texto que foi inserido em um documento |
| <kbd> | Define a entrada do teclado |
| <label> | Define um rótulo & nbsp; para uma tag<input>elemento |
| <legend> | Define uma legenda para um<fieldset>elemento |
| <li> | Define um item de lista |
| <link> | Define o relacionamento entre um documento e um recurso externo (a maioria
usado para vincular a folhas de estilo) <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="icon" href="meu_icone.gif" type="image/gif"> Mostra o ícone na janela do navegador |
| <main> | Especifica o conteúdo principal de um documento |
| <map> | Define um mapa de imagem do lado do cliente |
| <mark> | Define texto marcado/realçado |
| <menu> | Define uma lista/menu de comandos |
| <menuitem> | Define um item de comando/menu que o usuário pode invocar em um menu pop-up |
| <meter> | Define uma medida escalar dentro de um intervalo conhecido (um medidor) |
| <nav> | Define os links de navegação |
| <noframes> | Não suportado em HTML5. Define um conteúdo alternativo para usuários que não suportam quadros |
| <noscript> | Define um conteúdo alternativo para usuários que não suportam scripts do lado do cliente |
| <object> | Define um objeto incorporado |
| <ol> | Define uma lista ordenada |
| <optgroup> | Define um grupo de opções relacionadas em uma lista suspensa |
| <option> | Define uma opção em uma lista suspensa |
| <output> | Define o resultado de um cálculo |
| <param> | Define um parâmetro para um objeto |
| <picture> | Define um contêiner para vários recursos de imagem |
| <pre> | Define o texto pré-formatado |
| <progress> | Representa o progresso de uma tarefa |
| <q> | Define uma cotação curta |
| <rp> | Define o que mostrar em navegadores que não suportam anotações de ruby |
| <rt> | Define uma explicação/pronúncia de caracteres (para o leste asiático tipografia) |
| <ruby> | Define uma anotação rubi (para tipografia do leste asiático) |
| <s> | Define o texto que não está mais correto |
| <samp> | Define a saída de amostra de um programa de computador |
| <script> | Define um script do lado do cliente |
| <section> | Define uma seção em um documento |
| <selecione> | Define uma lista suspensa |
| <small> | Define texto menor |
| <source> | Define vários recursos de mídia para elementos de mídia (& lt; video>e<audio>) |
| <span> | Define uma seção em um documento |
| <strike> | Não suportado em HTML5. Use<s>em seu lugar. Define o texto tachado |
| <strong> | Define texto importante |
| <style> | Define informações de estilo para um documento |
| <sub> | Define o texto subscrito |
| <summary> | Define um título visível para um<details>elemento |
| <sup> | Define o texto sobrescrito |
| <svg> | Define um contêiner para gráficos SVG |
| <table> | Define uma tabela |
| <tbody> | Agrupa o conteúdo do corpo em uma tabela |
| <td> | Define uma célula em uma tabela |
| <template> | Define um modelo |
| <textarea> | Define um controle de entrada de múltiplas linhas (área de texto) |
| <tfoot> | Agrupa o conteúdo do rodapé em uma tabela |
| <th> | Define uma célula de cabeçalho em uma tabela |
| <thead> | Agrupa o conteúdo do cabeçalho em uma tabela |
| <time> | Define uma data/hora |
| <tr> | Define uma linha em uma tabela |
| <track> | Define faixas de texto para elementos de mídia (& lt; video>e<audio>) |
| <tt> | Não suportado em HTML5. Use CSS no lugar. Define o texto do teletipo |
| <u> | Define o texto que deve ser estilisticamente diferente do texto normal |
| <ul> | Define uma lista não ordenada |
| <var> | Define uma variável |
| <video> | Define um vídeo ou filme |
| <wbr> | Define uma possível quebra de linha |
| Bibliografia |
https://pt.wikipedia.org/wiki/HTML https://pt.wikipedia.org/wiki/HTML5 https://www.w3.org/html/ http://www.terminalroot.com.br/html |
Tutorial Completo de HTML e HTML5
