Tudo sobre HTML

Babi.lunetta quinta-feira, maio 22, 2014 Nenhum comentário

HTML
O HTML (HyperText Markup), é uma linguagem  de marcação para criar páginas na Web.

Elemento root, HTML:
O HTML elemento, retrata a raiz de um documento. É entre ele (a tag de início e de fim) que estará toda estruturação de códigos do documento.
Tag do elemento HTML: <html></html>
                                            início         fim
Estrutura básica de HTML:
Como se pode ver, entre o elemento raiz (<html></html>) estão as demais tags de estruturação da linguagem de marcação HTML.
<!DOCTYPE>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Resultado no navegador:
Nada foi exibido no navegador, porque se trata de um estrutura básica, ou seja, não foi exposta nenhuma informação, porque entre as tags não estão nenhum tipo de textos/dados/imagens e etc.





  









  
Obs: Para melhor visualização, clique na imagem.

Metadados:

São informações específicas, informações chaves, que te mostra os tipos de dados que serão exposto no decorrer restante do documento, ou seja, te apresenta do que se trata aquele dado.

HEAD (em português, cabeçalho)
O HEAD é o elemento responsável em agregar informações gerais sobre o documento, podendo ser chamado também meta-informação, porém ele incorpora somente algumas tags com informações. 
Tag do elemento HEAD: <head></head>
                                         
Sendo algumas delas:

*TITLE (em português, título)
Esse elemento é responsável em determinar o título do documento, que é exibido na aba do navegador em que está aberto o documento.
Tag do elemento TITLE: <title></title>
                                            
*LINK
O link é você criar um vínculo com outro documento. Para isso, é usado a tag âncora <a> e o atributo href; sendo que essa tag pode te direcionar a qualquer recurso da Web, uma página HTML, uma imagem e assim vai.

*META
O elemento meta é utilizado para prendar informação que seja essencial aos navegadores ou ferramentas de busca, por exemplo, na descrição do conteúdo do seu documento ou palavras-chaves da sua página.
Tag do elemento META: <meta>
Código:
<!DOCTYPE>
<html>
<head>
<title>Sistemas para Internet</title>
<a href="http://www.w3c.br/Home/WebHome">W3C</a>
<meta name="keywords" content="sites, web, html">
</style>
</head>
<body>
</body>
</html>

Resultado no navegador:
No navegador vemos então na aba o título defino na tag <title>; as informações dos elementos meta, não é exibido pelo fato de ser uma informação interna do documento, vemos o hiperlink, o vínculo criado e nomeado como "W3C".













Obs: Para melhor visualização, clique na imagem.

Sessões:
É a parte do documento que molda sua página.

BODY (em português, corpo)
O body é  elemento que carrega todo o conteúdo do seu documento HTML. Entre esse elemento, é colocado os demais "objetos" da sua página para Web.
Tag do elemento BODY: <body></body>

*H1, H2, H3, H4, H5, H6.
São seções de cabeçalhos - TÍTULOS, que vão desde o nível heading1 até o heading6.

*HGROUP
Serve para agrupar os títulos.
Tag HGROUP: <hgroup></hgroup>
Com o HTML5, foram criadas tags semânticas, ou seja, tags contendo um valor no seu sentido;

*ARTICLE
Esse elemento institui um artigo, ou seja, ele possibilita você a partilhar informações na sua página de maneira independente.
Tag do elemento ARTICLE: <article></article>


*SECTION
Define seções dentro de um artigo, ou seja, ele acomoda os artigos da página.
Tag do elemento SECTION: <section></section> 

*NAV
Cria barra de navegações com links no site, que pode ser tanto na barra lateral quanto na barra horizontal, perto do cabeçalho.
Tag do elemento NAV: <nav></nav>

*ASIDE
Esse elemento relaciona conteúdos específicos de um artigo dentro de um artigo ou página da web.
Tag do elemento ASIDE: <aside></aside>

*HEADER
É também um cabeçalho, só que diferente do <head> que define o cabeçalho próprio do documento, o <header> define o cabeçalho de uma seção da página.
Tag do elemento HEADER: <header></header>

*FOOTER
Define a área do rodapé da página.
Tag do elemento FOOTER: <footer></footer>


*ADDRESS
Serve para aderir informações a ver com o documento, ou seja, ele especifica um endereço relacionado ao autor da página ou seção do documento.
Tag do elemento ADDRESS: <address></address>

Exemplo básico:


Obs: Para melhor visualização, clique na imagem.
Código:
<!DOCTYPE>
<html>
<head>
<title>Sistemas para Internet</title>
</head>
<body>
<h1>Cabeçalho de nível primeiro na página</h1>
<h2>Cabeçalho de nível segundo na página</h2>
<h3>Cabeçalho de nível terceiro na página</h3>
<h4>Cabeçalho de nível quarto na página</h4>
<h5>Cabeçalho de nível quinto na página</h5>
<h6>Cabeçalho de nível sexto na página</h6>
    <p>Cabeçalho da página</p>
 </header>
    <p>Barra de navegação com links do Site</p>
 </nav>
    <p>Conteúdo da Seção 1</p>
   </article>
    <p>Conteúdo da Seção 2</p>
   </article>
    <p>Conteúdo da Seção 3</p>
   </article>
 </section>
    <p>Rodapé da Página</p>
 </footer>
<hgroup>
<h1>Exemplo H1</h1>
<h2>Exemplo H2</h2>
</hgroup>
</body>
</html>

Resultado no navegador:
Em primeiro, está a sequência de seções de cabeçalhos em seus níveis, em seguida c está a área de cabeçalho da página <header>, e a barra de navegação da página <nav>, logo depois são os artigos da página <article> postos dentro da seção, tem também o espaço do rodapé da página. E por fim dois exemplos de títulos agrupados <hgroup>.














Obs: Para melhor visualização, clique na imagem.

Comentários

Os comentários serve para o desenvolvedor como um lembrete entre os códigos, e para o leitor, serve como uma maneira de identificar "os assuntos" que se trata cada parte do código fonte.


Código:
<!DOCTYPE>
<html>
<head>
<title>Blog</title>
</head>
<body>
<!--Comentário-->
</body>
</html>

Resultado no navegador:
Nada é exibido no navegador, somente no código fonte.
Obs: Para melhor visualização, clique na imagem.



Elementos de agrupamento:

*P
Indica um parágrafo no documento.
Tag do PARÁGRAFO: <p></p>
*HR
Exibe um linha na horizontal no seu documento.
Tag do HORIZONTAL RULE: <hr>
*BLOCKQUOTE 
Serve para exibir uma citação na sua página.
Tag do BLOCKQUOTE: <blockquote></blockquote>
*OL
Cria uma lista ordenada na página.
Tag OL: <ol></ol>
*UL 
Cria uma lista não ordenada na página.
Tag UL: <ul></ul>

*LI
Indica o item de uma lista.
Tag LI: <li></li>

*DL
Cria uma lista de definição.
Tag DL: <dl></dl>

*DT
Define um termo da lista de definição (<dl>).
Tag DT: <dt></dt>
*DD
Defime um termo.
Tag DD: <dd></dd>

*DIV
Antes das tags semânticas, a div era usada para definir o posicionamento do conteúdo na página, mas agora é utilizada mais para agrupar os princípios do documento. 
Tag da DIV: <div></div>

Código:
<!DOCTYPE>
<html>
<head>
<title>Blog</title>
</head>
<body>
<p>So a tolerância é capaz de fazer o educador admitir modos de pensar, agir
e de sentir que seja diferente dos de um indivíduo ou de grupos determinados,
políticos ou religiosos.
</p>
<blockquote cite="http://www.w3c.br/Sobre/MissaoW3C">A 
visão do W3C para a Web pressupõe a participação e o 
compartilhamento de conhecimentos para gerar confiança em uma 
escala global.</blockquote>
<hr>
  <ul>
    <li>Docente</li>
    <li>Discente</li>
  </ul>
  <ol>
     <li>Docente</li>
    <li>Discente</li>
  </ol>
  <dl>
    <dt>Docente</dt>
      <dd>Instrutor</dd>
    <dt>Discente</dt>
      <dd>Aprende</dd>
  </dl>
<div id="blog">TAG DIV<div>
</body>
</html>

Resultado no navegador:
Esse primeiro conteúdo, seria o parágrafo <p> e seguido de uma citação <blockquote>, depois há uma linha horizontal <hr>, abaixo tem as listas, não ordenadas <ul> e ordenadas <ol>, e por fim temos um exemplo de termo e definição do termo.













Obs: Para melhor visualização, clique na imagem.

Elementos de texto semânticos: 


*A
É a tag âncora que junto com o atributo href, serve para inserir hiperlinks na página.
Tag da ÂNCORA: <a></a>
*ABBR
 Essa tag indica uma abreviatura ou acrónimo.
Tag ABBR: <abbr></abbr>

*SPAN
Essa tag adiciona um gancho para uma parte específica de um texto ou parte do documento.
Tag SPAN: <span></span>
*STRONG
Define a importância do texto.
Tag STRONG: <strong></strong>
*EM
Define um texto com ênfase.
Tag EM: <em></em>
*BR
Serve para pular linha.
Tag BR: <br>

Código:
<!DOCTYPE>
<html lang="pt-br">
<head>
<body>
<p>Texto 1 <br>
<b>com</b> quebra br <br>
Texto 2</p>
<p>Texto 1 
<b>sem</b> quebra br
Texto 2</p>
<a href="http://seriesparaassistironline.com/">Séries</a>
<p>Os professores são o futuro da nova <abbr title="geração">SP</abbr>
<p>Exemplo de texto importante: <br>
<strong>Faculdade de Tecnologia de Carapicuíba</strong>
</p>
<p> Exemplo de texto em ênfase: <br>
<em> Professora Carol </em>
</p>
</body>
<html>
Resultado no navegador:














Obs: Para melhor visualização, clique na imagem.

Conteúdo embutido: 

*IMG

Elemento utilizado para inserir imagens.
Tag IMG: <img>


Código:
<!DOCTYPE>
<html>
<head>
<title>Sistemas para Internet</title>
</head>
<body>
<img src="Minhas Imagens/Flor.jpg">
</body>
</html>


Resultado no navegador:


Obs: Para melhor visualização, clique na imagem.




Tabelas HTML:
As tabelas são estabelecidas com a tag <table>. Elas são classificadas por linhas (tag <tr>) e cada linha é repartida por células (tag <td>). As tabelas podem conter dados como, textos, imagens, listas, parágrafos, formulários, e também tabelas.

Código:
<!DOCTYPE>
<html>
<head>
<title>Tabelas</title>
</head>
<body>
<table border=1>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>

Resultado no navegador:
Obs: Para melhor visualização, clique na imagem.

Os Formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário.

Exemplos

Campos de texto
Este exemplo demonstra como criar campos de texto em uma página HTML. Um usuário pode escrever o texto em um campo de texto.
Campos de senha
Este exemplo demonstra como criar um campo de senha em uma página HTML.
(Você encontrará mais exemplos no final desta página.)

Formulários

Um formulário é uma área que pode conter elementos de formulário.
Os elementos de formulário são elementos que permitem o usuário entrar informação (como campos de texto, campos de área de texto, menus drop-down, botões radiais, caixas de seleção, etc.) em um formulário.
Um formulário é definido pela tag <form>.
<form>
  <input>
  <input>
</form>

Entrada (Input)

A tag de formulário mais usada é a tag <input>. O tipo de input é especificado com o atributo type (tipo). Os tipos de input mais cumumente usados são explicados abaixo.

Campos de Texto

Os campos de texto são usados quando você quer que o usuário digite letras, números, etc. em um formulário.
<form>
Primeiro nome: 
<input type="text" name="firstname">
<br>
Último nome: 
<input type="text" name="lastname">
</form>
Como aparece no navegador:
Primeiro nome:
Último nome:
Observe que o formulário propriamente não está visivel. Também observe que em muitos navegadores, o comprimento do campo de texto é de 20 caracteres por padrão (default).

Botões Radiais

Botões Radiais são usados quando você quer que o usuário selecione uma entre uma quantidade limitada de escolhas.
<form>
<input type="radio" name="sex" value="male"> Masculino
<br>
<input type="radio" name="sex" value="female"> Feminino
</form>
Como aparece no navegador:
Masculino
Feminino
Observe que somente uma opção pode ser escolhida.

Caixas de Seleção

As Caixas de Seleção são usadas quando você quer que o usuário selecione uma ou mais opções de uma quantidade limitada de escolhas.
<form>
<input type="checkbox" name="bike">
Eu tenho uma bicicleta
<br>
<input type="checkbox" name="car">
Eu tenho um carro
</form>
Como aparece no navegador:
Eu tenho uma bicicleta
Eu tenho um carro

O Atributo Ação do Formulário (Form's Action) e o Botão Enviar (Submit)

Quando o usuário clica no botão "Enviar", o conteúdo do formulário é enviado para outro arquivo. O atributo de ação do formulário define o nome do arquivo para o qual enviar o conteúdo. O arquivo definido no atributo action geralmente faz algo com a entrada recebida.
<form name="input" action="html_form_action.asp"
method="get">
Nome do Usuário: 
<input type="text" name="user">
<input type="submit" value="Enviar">
</form>
Como aparece no navegador:
Nome do Usuário:
Se você digitar alguns caracteres no campo de texto acima, e clicar no botão Enviar", você irá enviar a sua entrada para a página chamada "html_form_action.asp". Esta página irá mostrar-lhe a entrada recebida.

Mais Exemplos

Caixas de Seleção (Checkboxes)
Este exemplo demonstra como criar caixas de seleção numa página HTML. Um usuário pode selecionar ou deselecionar uma caixa de seleção.
Botões Radiais (Radiobuttons)
Este exemplo demonstra como criar botões radiais numa página HTML.
Caixa drop down Simples
Este exemplo demonstra como criar uma caixa drop down simples numa página HTML. A caixa drop-down é uma lista selecionável.
Outra caixa drop down
Este exemplo demonstra como criar uma caixa drop down simples com um valor pré-selecionado.
Área de Texto
Este exemplo demonstra como criar uma área de texto (um controle de entrada de texto multi-linhas). Um usuário pode escrever texto na área de texto. Numa área de texto você pode escrever uma quantidade ilimitada de caracteres.
Criar um botão
Este exemplo demonstra com criar um botão. No botão você pode definir o seu próprio texto.
Conjunto de campo em torno dos dados
Este exemplo demonstra como desenhar uma borda com um título em torno dos seus dados.

Exemplos de Formulários

Formulário com campos de entrada e um botão de envio
Este exemplo demonstra como adicionar um formulário em um apágina. O formulário contém dois campos de entrada e um botão de envio.
Formulário com caixas de seleção
Este formulário contém duas caixas de seleção, e um botão de envio.
Formulário com botões radiais
Este formulário contém dois bot~es radiais, e um botão de envio.
Enviar e-mail de um formulário
Este exemplo demonstra como enviar um e-mail de um formulário.

Tags de Formulário

Tag Descrição
<form> Define um formulário para entradas do usuário
<input> Define um campo de entrada
<textarea> Define uma área de texto (um controle de entrada de texto multi-linhas)
<label> Define um rótulo para um controle
<fieldset> Define um conjunto de campos
<legend> Define um título para um conjunto de campos
<select> Define uma lista selecionável (uma caixa drop-down)
<optgroup> Define um grupo de opção
<option> Define uma opção em uma caixa drop-down
<button> Define um botão para pressionar

Table/Caption/Thead/Tfoot/Tbody/Tr/Td/Th

TABLE
Essa é a tag para se criar uma tabela na linguagem de marcação HTML;

CAPTION
Inseri um título na tabela;

THEAD
Indica o cabeçalho da tabela;

TFOOT
Indica o rodapé da tabela;

TBODY
Indica o corpo da tabela;

TR
É a tag de linhas da tabela;

TD
É a tag de células das linhas da tabela;

TH
É tag de células das linhas da tabela também, só que faz com que o texto fique destacado.

Código:

<!DOCTYPE>
<head>
<title>Tabelas</title>
</head>
<body>
<table border=1>
<theader>
<tr>
<td>CABEÇALHO DA TABELA</td>
<td>A</td>
<td>B</td>
</tr>
</theader>
</t>
<tbody>
<tr>
<th>TAG DE DESTAQUE</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>RODAPÉ DA TABELA</td>
<td>H</td>
<td>I</td>
</tr>
</tfoot>
</table>
</body>
</html>

Resultado no navegador:











Obs: Para melhor visualização, clique na imagem. 


Nenhum comentário :

Postar um comentário

Assinar: Postar comentários ( Atom )