Minicurso de HTML básico - Atualizado para HTML5

Minicurso de HTML básico - Atualizado para HTML5
HTML Básico (Atualizado para HTML5) Compilado com base nas referências por José Augusto Cintra Professor da Faculdade Sumaré – SP Analista deTI da Empresa PRODAM – SP josecintra@josecintra.com http://www.josecintra.com/blog
Introdução O objetivo deste minicurso é fornecer conceitos básicos sobre a HTML – Linguagem de marcação usada para exibir conteúdo na web. 2
Considerações A HTML passou por muitas alterações desde a sua criação até sua versão atual (HTML5), o que mudou até mesmo o seu propósito inicial. Durante esse período, muitas práticas de design tais como Tableless, DIV Mania e Design Responsivo surgiram no cenário de desenvolvimento front-end. Neste minicurso não vamos entrar no mérito de tais abordagens e focaremos apenas na linguagem HTML e o que você pode fazer com ela, embora hoje dia seja quase impossível dissociá-la de seus companheiros, CSS e JavaScript. O leitor interessado encontrará no final desta apresentação alguns endereços onde pode buscar mais informações sobre as técnicas acima citadas. 3
Parte I Conceitos Básicos 4
HTML - Conceito Criada por Tim Bernes Lee com base na SGML, a HTML (HyperText Markup Language) é uma linguagem de marcação usada para apresentar conteúdo estático na Web. Uma linguagem de marcação define um conjunto de códigos (tags) aplicados a um texto, com o fim de estruturá-lo, adicionando informações sobre os elementos. No caso da HTML essas tags são utilizadas para definir formatos e padrões lógicos de exibição. Inicialmente, a HTML era utilizada também para estilizar o documento (fontes, cores, etc). Hoje essa função fica a cargo de arquivos CSS, enquanto que a linguagem Javascript fica encarregada de produzir conteúdo dinâmico. Uma boa fonte de referência sobre HTML na Internet é a organização que a padroniza: WorldWideWeb Consortium (W3C) 5
HTML - Conceito Fonte: Davis’s Blog (adaptação) 6
HTML – Editores e IDEs Os documentos HTML são arquivos textos simples que podem ser escritos em qualquer editor comum, de preferência com suporte para Unicode.Veja abaixo algumas sugestões:  NetBeans – Trabalha com várias linguagens de programação, com excelente suporte para HTML5, CSS3 e Javascript ;  Aptana – Baseado no Eclipse, com ênfase para HTML5 eWEB  SublimeText 3 – Leve, rápido e moderno.  Web Storm –Amplo suporte para programação front-end. 7
HTML - Elementos  Uma página HTML é formada por elementos.  Elementos possuem etiquetas, marcações que são conhecidas como tags, que são divididas entre tags de abertura de fechamento.  Tags de abertura possuem uma marca de início < e de fim > (parênteses angulares).  Tags de fechamento possuem uma marca de início </e de fim >  Tags possuem nomes e atributos. Os atributos modificam os resultados padrões dos elementos e assumem a forma nome-do- atributo = "valor-do-atributo".  Um elemento possui conteúdo (que podem ser outros elementos ou textos).  Alguns elementos não possuem tags de fechamento (void elements) . 8
HTML - Elementos  Para entender melhor os elementos HTML descritos na página anterior, vejamos um exemplo com a tag P, usada para definir parágrafos: <p align = "left">Este é um parágrafo</p> Obs: Em HTML5, o atributo “align” entrou em desuso. Tag de início com o nome P Tag de fechamento (Observe a barra /) Conteúdo a ser formatado O atributo align, indicando que o conteúdo do parágrafo será alinhado à esquerda. Os valores dos atributos devem estar entre aspas (boa prática) 9
HTML –Tags Básicas <!DOCTYPE>  Informa explicitamente o tipo do documento. <html>  Define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma página HTML. <head>  Define o cabeçalho de um documento HTML. Este cabeçalho traz informações adicionais sobre o documento. <body>  Define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. 10
A linguagem HTML está estruturada sobre um modelo de objetos, onde os seus elementos estão classificados dentro de uma cadeia hierárquica.Vejamos a estrutura básica de um documento: <!DOCTYPE HTML> <HTML> <HEAD> </HEAD> <BODY> CONTEÚDO A SER EXIBIDO </BODY> </HTML> HTML – Estrutura do documento Marca o início do documento Informações do cabeçalho Corpo do documento Fim do corpo Fim do documento Indica um documento HTML5 11
HTML –Tags Básicas - Cabeçalho O cabeçalho (tag head) não é exibido. Ele é usado para definir propriedades gerais da página. Entre outras, podemos encontrar: <title>  Define o título da página, que é exibido na barra de título dos browsers. <style>  Define formatação em CSS. <script>  Define programação de certas funções em página com scripts, principalmente JavaScript. <link>  Define ligações da página com outros arquivos como feeds, CSS, scripts, etc. <meta>  Define propriedades da página, como codificação de caracteres, descrição da página, autor, etc. 12
HTML –Tags Básicas - Corpo Tags para formatação básica do texto: <h1>, <h2>,... <h6>  cabeçalhos e títulos em diversos tamanhos. <p>  Define um parágrafo. <br/>  Quebra de linha (void element). <hr/>  Insere uma linha divisória (void element).   Comentários em HTML 13
HTML –Tags Básicas - Corpo Existem diversas tags para definir fontes, estilos, cores, etc. Algumas estão em desuso, devido à popularização do CSS, mas ainda são suportadas por motivos de compatibilização: <b> Texto em negrito. <i>  Itálico. <u>  Sublinhado <font>  Define fontes com seus estilos e cores 14
Hyperlinks ou simplesmente links são elos que ligam uma página a outra (link) ou a si mesma (âncora). O link é definido pela tag A, cujos principais atributos são:  href  Endereço da página ser exibida  target  Especifica onde vai ser aberta a página Exemplo: <a href="http://www.site.com" target="_blank">Clique aqui</a> Neste exemplo, a página vai exibir o texto “Clique aqui” que, quando for clicado, exibirá a página definida no parâmetro HREF em outra janela do browser, conforme determinado pelo parâmetroTARGET. HTML – Hiperlinks 15
HTML – Imagens As imagens são definidas com a tag IMG (void element) cujos principais atributos são:  src  URL da imagem que você quer exibir na sua página.  alt  Atributo de acessibilidade, é usado para definir um "texto alternativo" para a imagem. Exemplo: <img src="boat.png" alt="Figura de um barco" /> Obs: Caso a imagem não esteja na pasta padrão, deve ser fornecido todo o caminho para que ela seja localizada e, caso esteja em outro servidor, deve ser fornecida a URL completa. 16
HTML – Exemplo <!DOCTYPE html> <html> <head> <meta charset="iso-8859-1" /> <title>Título do Documento</title> </head> <body>  <h3><u>Exemplo de página HTML</u></h3> <hr/> <img src="html5.png"/> <hr/> Clique aqui: <a href = “www.w3.org">w3c.org</a> </body> </html> Veja no próximo slide como esse documento será exibido  17
HTML – Exemplo 18
Parte II Tabelas e listas em HTML 19
HTML –Tabelas Para exibirmos os dados em forma de tabelas (com linhas e colunas), podemos usar um conjunto de tags subordinadas à tag TABLE que possui os seguintes atributos: border  Espessura da borda da tabela cellpadding  Espaço entre a célula e seu conteúdo; cellspacing  Espaço entre as células; width  Largura da tabela; Exemplo: <table border="1" cellpading="2" cellspacing="2"> 20
HTML –Tabelas – Linha e Colunas Para definirmos o número de linhas e colunas de uma tabela usamos as tags TR e TD respectivamente.Vejamos seus principais atributos  tr  Define uma linha em uma tabela  align  Alinhamento em relação à tabela  bgcolor  Cor de fundo da linha  td  Define uma célula (coluna) de uma linha da tabela.  align  Alinhamento em relação à célula  bgcolor  Cor de fundo da célula  colspan  Expande a célula um certo número de colunas  rowspanExpande a célula um certo número de linha  width Largura da célula 21
HTML –Tabelas – Exemplo <table border="1"> <tr> <td>Célula 1</td> <td>Célula 2</td> </tr> <tr> <td>Célula 3</td> <td>Célula 4</td> </tr> </table> 22
HTML – Listas de Descrições Podemos criar listas com as tags DL, DT e DD. Exemplo: <dl> <dt>Linguagens orientada a objetos</dt> <dd>Java</dd> <dd>C++</dd> <dt>Linguagens procedurais</dt> <dd>C</dd> <dd>Pascal</dd> </dt> </dl> 23
HTML – Listas Ordenadas Podemos criar listas com as tags OL e LI. Exemplo: <ol > <li >Ferver 600 ml de água em uma panela .</li > <li >Retirar o macarrão do pacote .</li > <li >Colocar o macarrão na panela no fogo baixo .</li > <li >Cozinhar o macarrão por 3 min .</li > <li >Temperar a gosto .</li > </ol > 24
HTML – Listas Não Ordenadas Listas não ordenadas são criadas com as tags UL e LI. Exemplo: <ul > <li >Ferver 600 ml de água em uma panela .</li > <li >Retirar o macarrão do pacote .</li > <li >Colocar o macarrão na panela no fogo baixo .</li > <li >Cozinhar o macarrão por 3 min .</li > <li >Temperar a gosto .</li > </ul > 25
Parte III Formulários em HTML 26
HTML – Formulários Através dos formulários HTML podemos inserir elementos interativos na página que permitem, por exemplo, realizar um diálogo com o usuário da seguinte forma:  O formulário apresenta campos como caixas de texto, botões, listas, etc;  O usuário interage com esses elementos, digitando as informações requeridas;  O usuário envia (submete) essas informações, clicando por exemplo, em um botão.  As informações são recebidas por um script no servidor que processa as informações gravando-as em banco de dados, por exemplo. 27
HTML – Formulários – Elemento FORM O elemento FORM permite definir um formulário e suas propriedades como:  action  Endereço (URL) do script que vai receber e processar os dados no servidor (Normalmente um programa PHP, Java, ASP .NET, etc.)  method  Seleciona o tipo de requisição para envio dos dados ao servidor. Os métodos mais utilizados são:  post  Transfere grande quantidade de dados e estes vão embutidos no corpo da mensagem enviada para o servidor;  get  Transfere dados com no máximo 128 caracteres e estes vão compor a URL (endereço) associado à consulta enviada para o servidor. Ou seja, vão ser exibidos na barra de endereços do browser - 28
HTML – Formulários – Controles Os controles são os elementos através dos quais o usuário pode interagir com a página WEB, digitando, clicando ou selecionando dados. Além disso, os formulários podem conter qualquer outro elemento HTML como parágrafos, listas, tabelas, imagens, etc. No entanto, somente os dados dos controles presentes no formulário é que serão enviados ao servidor para processamento. Para entrada de dados, podemos usar 3 tipos de controle: <INPUT>, <SELECT> e <TEXTAREA> Veremos cada um deles a seguir  29
HTML – Formulários – Atributo Identificador Antes de descrevermos os controles de formulários, vamos falar sobre dois importantes atributos cuja finalidade é identificar os elementos de uma página. São eles: id  Atributo global que identifica de forma única um elemento em uma página HTML para serem usados em scripts e estilos (CSS). Dois elementos distintos não podem possuir o mesmo ID name Identifica os campos do formulário que são enviados para serem tratados pelos scripts nos servidores. Os nomes podem se repetir para elementos do mesmo tipo. 30
HTML – Formulários – Caixas deTexto Este controle permite a entrada de dados digitados em uma única linha e deve ser usado quando forem solicitadas informações como: nome, endereço, CEP, telefone, e-mail etc. Para criar uma caixa de texto usamos a tag INPUT com TYPE = "TEXT ". Principais atributos: size Tamanho visível em caracteres maxlenght Tamanho máximo em caracteres placeholder  Insere uma texto inicial que é automaticamente apagado quando o usuário inicia a digitação Exemplo: <input type = "text" id = "id_nome " name = "nome" size="40" maxlength = "50" placeholder = "Digite seu nome" /> 31
HTML – Formulários – Caixas deTexto Podemos criar vários tipos de caixa de texto, mudando o atributo TYPE, de acordo com o seguinte: <password>  Digitação de senhas <search>  Caixas de busca <number>  Digitação de números <range>  Faixa de números <email>  Digitação de email <telefone>  Digitação de telefone <url>  Digitação de endereçosWWW <color>  Seleção de cores <date>,<datetime>,<time>,etc.  Digitação de datas e horários Exemplos no próximo slide  32
HTML – Caixas deTexto - Exemplos <input id = "senha_id " name = "senha" type = "password"> <input id ="data_id" name = "data" type = "date"> <input id ="numero1_id" name = "numero1" type = "number"> <input id="numero2_id" name ="numero2" type ="range"> 33
HTML – Formulários – Rótulos Os rótulos são textos que normalmente antecedem os campos, descrevendo seu conteúdo. HTML5 definiu um elemento acessível para defini-los, cujo principal atributo é: for  Descreve o ID do campo associado ao label. Exemplo: <label for ="nome_id">Nome : </ label > <input type = "text" name = "nome" id = "nome_id“ /> 34
HTML – Formulários –Textos Longos Podemos definir uma entrada de dados para textos longos usando a tag TEXTAREA, que possui os seguintes atributos: rows  Número de linhas da caixa de texto cols  Número colunas em caracteres Exemplo: <textarea id="msg_id" name ="mensagem" rows ="5" cols ="50"> </ textarea > 35
HTML – Formulários – Caixas deVerificação Caixas de verificação, conhecidas também como CHECKBOX, podem ser exibidas utilizando-se a tag INPUT com TYPE = CHECKBOX. Para agrupar checkbox relacionados, defina o mesmo NAME para cada um. Atributos:  value  Determina qual o valor será enviado ao servidor caso esse checkbox estiver marcado  checked  apresenta a opção previamente selecionada Exemplo: <input id="jv_id" type ="checkbox" value ="jv" name ="lang" checked>Java</input> <input id="ph_id" type ="checkbox" value ="ph " name ="lang">PHP</input> 36
HTML – Formulários – Botões Radio Botões de Opção, conhecidos também como RADIO BUTTONS, podem ser exibidos utilizando-se a tag INPUT com TYPE = RADIO. Para agrupar opções relacionadas, defina o mesmo NAME para cada um. Atributos:  value  Determina qual o valor será enviado ao servidor, caso esse checkbox estiver marcado;  checked  apresenta a opção previamente selecionada. Exemplo: <input id="masc_id" name ="sexo" type ="radio" value ="Masculino">Masculino</input> <input id= “fem_id" name ="sexo" type ="radio" value ="Feminino">Feminino</input> 37
HTML – Listas Drop-Down Muitos formulários permitem que os usuários selecionem um ou mais itens de uma lista de opções. Essa seleção pode ser realizada através de um drop-down list com a tag SELECTe sub-tags OPTION e OPTGROUP: Atributos de SELECT (define uma caixa de seleção): multiple  permite selecionar mais de uma opção Atributos de OPTGROUP (Define subgrupos de opções) label  Define os nome dos subgrupos Atributos de OPTION (Define as opções da lista): value Define o valor a ser enviado ao servidor selected  Define um valor previamente selecionado Exemplo no próximo slide  38
HTML – Listas Drop-Down - Exemplo <select id="estados_id " name ="estado" multiple ="multiple"> <optgroup label =" Região Sudeste "> <option value ="SP" selected >São Paulo </ option > <option value ="RJ">Rio de Janeiro </ option > </ optgroup > <optgroup label =" Região Sul "> <option value ="RS" selected >Rio Grande do Sul </ option > <option value ="PR">Paraná </ option > </ optgroup > <optgroup label =" Região Nordeste "> <option value ="RN">Rio Grande do Norte </ option > <option value ="BA">Bahia </ option > </ optgroup > </ select > 39
HTML – Botões de Comando E possível criar vários tipos de botões para os formulários HTML, com a tag INPUT eTYPE apropriadas, de acordo com o seguinte: submit  Cria um botão que, ao ser pressionado, envia todos os dados definidos no formulário para um script no servidor, de acordo com os atributos ACTION e METHOD do elemento FORM reset  Reinicializa o conteúdo de todos os controle do formulário button  Botão comum Exemplo: <input id="botao_id" type ="submit" value ="enviar"/> Obs: Pode-se obter o mesmo ofeito, utilizando-se a tag BUTTON com TYPE apropriado para a criação de botões. A diferença é que, com esta tag, os botões podem ser estilizados com imagens. 40
HTML – Formulários - Exemplo <FORM action="http://site.com/user/adduser.php" method="post"> <P> <LABEL for="firstname">Primeiro nome: </LABEL> <INPUT type="text" id="firstname"><BR> <LABEL for="lastname">Último nome: </LABEL> <INPUT type="text" id="lastname"><BR> <LABEL for="email">Email: </LABEL> <INPUT type="text" id="email"><BR> <INPUT type="radio" name="sex" value="M"> Masculino<BR/> <INPUT type="radio" name="sex" value="F"> Feminino<BR/> <INPUT type="submit" value="Enviar"> <INPUT type="reset"> </P> </FORM> Resultado no próximo slide  41
HTML – Formulários - Exemplo 42
Parte IV Semântica HTML 43
HTML – Semântica A HTML possui alguns elementos com propósitos puramente semânticos. Eles não recebem nenhum tipo de renderização especial, mas servem para agrupar logicamente os elementos com vistas a facilitar a estilização e a programação por scripts clientes. Os mais conhecidos são os elementos DIV e SPAM. No entanto esses elementos são muito genéricos e acabam poluindo o código. Com o objetivo de organizar o código, a HTML5 introduziu vários outros elementos com essa finalidade. É o que descreveremos a seguir  44
HTML5 – Semântica Algumas das novas tags semânticas: header  Marca textos que estarão localizados em Cabeçalhosde seções; footer  Marca textos que estarão localizados em rodapés de seções; article  Marca conteúdos com maior relevância; section  Marca partes específicas da página (marcação genérica); aside Marca textos que fazem referência ao conteúdo principal à sua volta; nav Marca um conjunto de links. Com esses novos elementos ficou mais fácil estilizar e formatar o documento, através de CSS, como mostra a figura a seguir  45
HTML – Semântica 46
Referências Links WikiPedia W3C W3Schools K19 Treinamentos Caelum Ensino e Inovação Livros HTML5 e CSS3: Domine a web do futuro, Lucas Mazza, Casa Do Código Editora Web Design Responsivo,Tárcio Zemel, Casa Do Código Editora 47
<fim>Obrigado !!!</fim>

Check these out next

Minicurso de HTML básico - Atualizado para HTML5

Recomendados

Mais conteúdo relacionado

Apresentações para você(20)

Similar a Minicurso de HTML básico - Atualizado para HTML5(20)

Último(20)

Minicurso de HTML básico - Atualizado para HTML5