marcoszf
11/22/2013 - 12:53 AM
HTML
HTML
<!-- ESTRUTURAS BÁSICAS DE UMA PÁGINA WEB -->
<!-- Códigos de status do HTTP: http://pt.wikipedia.org/wiki/Lista_de_c%C3%B3digos_de_status_HTTP -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <!-- Definir UTF-8 -->
<!-- Data atributos para passar valores ao elemento DOM -->
<input type="hidden" name="aluno" data-nome="joao" data-sobren="silva" data-idade="55">
<!DOCTYPE html> <!-- Em html5 basta apenas por esta tag de inicio antes de <html> --><!-- Elementos de sessões de conteúdos -->
<div>..</div> <span>..</span> <!-- divs e spans são elementos que atuam como containers
para diferentes conteúdos. uma div serve para identificar uma larga sessão de conteúdos,
enquanto o span serve para identificar um pequeno trecho de texto dentro de um bloco como <p> ex:-->
<p>Lorem ipsum.. <span class="tooltip">consectetur</span> elit.</p>
<!-- Novas tags de blocos html5 que melhoram a semântica substituindo a tag <div> -->
<header>...</header> <!-- nome auto-explicativo para envolver conteúdos de cabeçalhos em geral como:
textos de introdução ou navegação (não deve ser confundido com o <head>) -->
<nav>...</nav> <!-- Navigation: <nav> usado para a sessão de maior navegação da página (não todos os links)
geralmente são: navegação universal, tabela de conteúdos,anterior/próximo ou outros grupos de links -->
<nav>
<ul>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</nav>
<article>...</article> <!-- Representa um conteúdo independente como: post de um fórum,
um artigo de jornal ou revista, um comentário enviado por usuário.. -->
<article>
<h2>Titulo 1</h2>
<p>Texto do conteúdo – Texto do conteúdo</p>
</article>
<article>
<h2>Titulo 2</h2>
<p>Texto do conteúdo – Texto do conteúdo</p>
</article>
<section>...</section> <!-- uma section é geralmente mais confundido com uma div do que um <article>,
representa uma genérica sessão de um documento. Sua principal deferença da
<div> é que não é conveniente estilizar ou utlizar outros scripts
-->
<section id=”conteudo”>
<article>
<h2>Titulo</h2>
<h3>Subtitulo</h3>
</article>
<article>
<h2>Titulo 2</h2>
<p>Texto do conteúdo – Texto do conteúdo</p>
</article>
</section>
<aside>...</aside> <!-- representa uma sessão de conteúdo de uma página relacionado com
o conteúdo em volta dele, que poderia ser considerado separado daquele conteúdo:
Geralmente utilizado para sidebars -->
<footer>...</footer> <!-- identico ao header contúdo deve se inserido ao final da mesma -->
<!-- Formulário HTML -->
<!-- Forms são usados para coletar dados inseridos pelos usuários, pode ser utilizado
por uma interface de aplicação web ou para enviar dados através da web -->
<form>..</form> <!--define o conteúdo do formulário, ATRIBUTOS:
action: necessário para dizer ao form para onde enviar o conteúdo
method: diz ao form como enviar os dados "get" ou "post"-->
<form action="form_SEND.php" method="post"> </form>
<input>..<!-- É o elemento principal dos forms e pode apresentar diversas aparências,
da qual as principais serão listadas abaixo: -->
<input type="text"> <!--caixa de texto padrão, attr value que define um texto dentro-->
<input type="password"> <!--igual ao anterior porém esconde os caracteres-->
<input type="checkbox"> <!--poder escolher/selecionar várias opções-->
<input type="radio"> <!--escolher/selecionar somente uma opção de um grupo-->
<input type="submit"> <!--botão para enviar o formulário-->
<input type="image" src="imagem.jpg" alt="Submit"> <!--HTML5: Botão gráfico para enviar o formulário-->
<input type="hidden" name="estado" value="parana"> <!--um campo escondido-->
<input type="range" name="pontos" min="1" max="10"> <!--HTML5: controle a entrada de numeros
com os Atributos: max: maximo permitido. min: minimo permitido. value: valor padrão-->
<textarea>..</textarea> <!--escrever multi-linhas-->
<textarea rows="5" cols="20">texto</textarea> <!--5 linhas e 20 colunas-->
<select>..</select> <!--escolher/selecionar, caixas drop-down
Attr: multiple name="matriz[]" -> quando houver multipla seleção,
deve-se informar um array no attr name para enviar os dados.
Attr: selected, define o item selecionado(que será enviado pelo form)-->
<select>
<option>Opção 1</option>
<option value="valor para enviar" selected>Opção 2</option>
</select>
<!-- !!ORGANIZANDO ELEMENTOS DO FORM!! -->
<label>..</label> <!--texto para Descrever/ilustrar os elementos do form,
labels devem incluir um elemento "for" que deve ser igual ao id do elemento associado
deste modo, quando o usuário clicar no elemento label será entrará em foco o elemento associado ex:-->
<label for="usuario">Usuário</label>
<input type="text" name="usuario" id="usuario">
<!--quando utilizar com radio buttons ou checkbox o elemento input deve ser involvido pelo label-->
<label><input type="radio" name="dia" value="sexta" checked> Sexta</label>
<label><input type="radio" name="dia" value="sabado"> Sábado</label>
<fieldset>..</fieldset> <!--Agrupar/organizar grupos de elementos, assim como uma div, é um elemento de bloco,
por padrão inclui uma borda que pode ser modificada por CSS-->
<legend>..</legend> <!--fornece uma "caption" para um fieldset, deve ser inserido
após a abertura do fieldset, sua aparencia pode ser modificada com CSS -->
<fieldset>
<legend>Login</legend>
<label for="usuario">Usuario</label>
<input type="text" name="usuario" id="usuario">
<label for="senha">Senha</label>
<input type="text" name="senha" id="senha">
</fieldset>
<!--ATRIBUTOS OPCIONAIS-->
- name: utilizado para referenciar os dados do form antes de ser enviado, e poder utilizar Javascript
no lado do cliente.
- size: especificar o width dos campos text, password ou file input.
<input type="senha" name="pin" id="pin" maxlength="4" size="6"/>
- type: especificar o tipo do input (password, checkbox, radio, submit,
reset, hidden, image, file ou button)
- checked: utilizado nos elementos checkbox ou radio para definir o elemento selecionado
deve ser utilizado no formato checked="checked"
- maxlength: especificar o número máximo de caracters permitido em um text box, maxlength="num",
- src: utilizado quando o type é definido como image para especificar a localização
do arquivo image.
- alt: utilizado em type="image" para especificar um texto alternativo da imagem (pequena descrição)
- accept: utilizado em type="file" para especificar quais os tipos de arquivos devem ser aceitos, alguns exemplos:
<input type="file" accept="image/*"> <!--Associa todos os arquivos de imagens-->
<input type="file" accept=".ext,video/*,audio/*"> <!--permite videos, audios, e arquivos .ext-->
- disabled: para desabilitar um elemento, formato disabled="disabled",
sua utilidade mais provável é desabilitar os checkbox até que uma condição seja alcançada,
o valor do elemento desabilitado não será enviado com o form.
- readonly: para não permitir mudança de conteúdo, formato readonly="readonly"
- accesskey: associar uma tecla de atalho ao elemento
- tabindex: especificar o local onde o elemento vai aparecer odem da página