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

Blogs: Extinção ou evolução?

Babi.lunetta quarta-feira, maio 21, 2014 Nenhum comentário


Como já é de costume, há sempre quem fale que os blogs deixarão de existir. O fato é que isso vem sendo dito há algum tempo e até agora para pesquisadores como eu, só se percebe que os blogs acabam para aqueles que não se dedicam, não se esforçam e já caíram na comodidade.

 Depois de muito pesquisar, li diversas opiniões, umas me chamaram a atenção, outras nem tanto.
Sou desse universo chamado "Blogosfera", sempre gostei de escrever e pesquisar novas
tecnologias. Contudo já não é de hoje que o cerco sobre blogs e vlogs vem se fechando. Os tempos áureos da Internet não existem mais e está cada dia mais difícil monetizar sites e canais de vídeo. Tanto blogueiros quanto vloggers tem reclamado constantemente das mudanças nas políticas e nos termos dos principais sites geradores de receita e de tráfego, como Facebook e Youtube (Google/Adsense). Mas até que ponto essas reclamações são válidas e qual a parcela de “culpa” dos sites e dos produtores de conteúdo? .
Uma das primeiras coisas que aprendi desde pequeno com meu pai foi o ditado “quem tem dois, tem um, quem tem um, não tem nenhum”. Na Internet esse ditado é perfeito. Um grande problema da maioria dos produtores de conteúdo, seja em blogs ou em vídeos é que ao atingir um certo patamar de sucesso, eles se acomodam. Deixam de se atualizar, buscar novas fontes de renda e de tráfego, abrir novos negócios, explorar outros canais e produzir conteúdos diferentes. E aí, quando a fonte seca, a casa cai. Esse é um erro crasso que deve ser evitado a todo custo. Na Internet, em time que está ganhando, se mexe sim. Nunca coloque todos os ovos na mesma cesta.

Isso é TRABALHO. São pessoas que vivem da Internet mas não passam o dia nela apenas se divertindo. Usam-a como ferramenta para ganhar a vida e fazem isso da forma mais profissional e dedicada possível. Não acho que blogs irão acabar, muito menos vlogs. Tudo é questão de adaptação e trabalho duro. Tomar os bons exemplos como espelhos já é um ótimo passo. O mesmo vale para empresas que cuidam de fanpages de clientes ou fazem anúncios na rede social.
Para quem curte blogs e vlogs, podem ficar tranquilos que sua diversão está garantida. Um ou outro pode sumir pelo caminho, mas isso é normal.  Coisas novas sempre surgirão.

Nenhum comentário :

Postar um comentário

RFC 822 e RFC 3339

Babi.lunetta quarta-feira, maio 21, 2014 Nenhum comentário

O RFC 822 define o formato da mensagem enviada depois do comando SMTP "DATA", de forma a que cada Agente Utilizador (implementado de acordo com RFC 822) possa interpretar correctamente as mensagens.
Alguns dos campos de cabeçalho frequentemente utilizados são os seguintes:
  • To: endereço(s) de e-mail de receptores primários.
  • Cc: endereço(s) de e-mail de receptores secundários (carbon-copies).
  • From: identificação do remetente.
  • Reply-To: endereço de e-mail para onde as respostas deverão ser enviadas.
  • Return-Path: endereço e percurso de volta para o remetente. Este campo é adicionado pelo último Agente de Transporte de Mensagens.
  • Subject: sumário da mensagem.
RFC 822 apenas define o formato de mensagens de texto simples.

 RFC 3339 - Este documento define um formato de data e hora para o uso em protocolos da Internet que é um perfil da norma ISO 8601 para a representação de datas e horários, usando o calendário gregoriano.
Data e hora são formatos que podem causar muita confusão e problemas de interoperabilidade na Internet.
Este documento aborda muitos dos problemas encontrados e faz recomendações para melhorar a consistência e interoperabilidade ao representar e usar a data e a hora em protocolos de Internet. 

Nenhum comentário :

Postar um comentário

Flog, Blog e Vlog

Babi.lunetta quarta-feira, maio 21, 2014 Nenhum comentário

 

 

Definição

Blogs: Os blogs são seu diário virtual, onde você compartilha seus interesses e tudo o que for do seu gosto. Existem dois tipos de blogs: o profissional e o pessoal. O blog profissional, possui um nicho definido, onde o foco é apenas se especializar em um assunto específico. Os blogs pessoais são mais variados, ou seja, os assuntos deles são mais amplos, o usuário escreve o que pensa, sente, e argumenta certos acontecimentos pela sua vida ou o que acontece pela internet. A mídia usada nos blogs também é variada, normalmente os blogs são mais texto e imagem, mas eles também podem usar vídeos e outros tipos de mídia para deixar claro o assunto estabelecido.

Vlogs: Os vlogs são derivados de blogs, possuem um foco somente em vídeo, o usuário faz seu vídeo de frente para uma câmera e fala de assuntos variados ou específico. Depois ele faz upload desse vídeo para um serviço de hospedagem somente de vídeo e ele é visto por vários usuários que estiverem navegando por lá. Os serviços de vídeo mais conhecidos são o YouTube e Vimeo.

Flogs: Os flogs são uma derivação de blogs, e assim como os vlogs, tem um foco específico apenas em fotos. O usuários tira uma foto de si mesmo, com seus amigos ou no ambiente em que está, e envia para um serviço de hospedagem apenas de fotos. Os serviços mais conhecidos para hospedagem de fotos são o Instagram, Flickr, Picasa e outros.
Outra coisa interessante que talvez você, (se for um blogueiro) não tenha notado, é que alguns blogs podem ter vlogs e flogs juntos. Mas nem todos os floggers ou vloggers pedem ter um blog necessariamente.

Nenhum comentário :

Postar um comentário

Assinar: Postagens ( Atom )