Padrões de projetos de sítios internet I

HTML

Oque é HTML ?

Tradução ao pé da letra leva agente a uma expressão inglesa "HyperText Markup Language" que nada mais é do que uma linguagem de marcação de hipertexto.Os principais leitores dessa linguagem de marcação são os navegadores web.

 Exemplos de navegadores WEB:


Google Chorme.
Opera.
Iexplorer.
MozillaFirefox®.
Safari.
Esses são os exemplos mais usados, mais ainda tempos outros muitos.


Ficou em duvida qual navegador usar ?

Eu recomendo aos usuários básicos e leigos o google chorme mas se você preferir acesse esse link com varias dicas sobre navegadores e escolha você mesmo o melhor para seu uso. CLICK AQUI

De onde veio o HTML ?


Poucos sabem de onde surgiu o HTML, ele veio de uma junção de duas outras tecnologias. Elas são: HyTime e SGML no qual vou falar um pouco sobre cada uma delas.

Oque é HyTime ?

O HyTime é um padrão para representação estruturada de hipermídia e conteúdo baseado em tempo. Visto que o documento é visto como uma variedades de eventos correntes dependendo do tempo, tais como: áudio, vídeo, etc ligados por hiperligações. Sendo assim, um padrão independente dos padrões de processamentos de texto no modo geral.

Oque é SGML ?

O SGML por sua vez é um padrão de formatação de textos. Foi criado sem qualquer ligação com hipertexto e mesmo assim tornou-se conveniente para transformar documentos em hiper-objetos e para descrever suas ligações.


Agora que já sabemos quem é e de onde veio o HTML vamos ver algumas de suas muitas funções.

      _______________________________________________________________


Elemento root: html.

Oque é elemento root: html ?

O elemento HTML, "<html>", ou "HTML root element" nada mais é do que a raiz de um documento HTML ou XHTML.Sendo assim, todos os outros elementos devem ser inferior a esse elemento, ou melhor explicado, descendente dele.

Exemplo na imagem a seguir:

Exemplo escrito de código HTML:

<html>
   <head> Conteúdo </head>
   <body>Corpo da pagina</body>
</html>


Vendo os exemplos podemos dizer também que todo elemento aberto deve ser fechado em ordem para que sua hierarquia não se quebre.
      _______________________________________________________________

Metadados: head, title, link, meta, style.


Oque é metadados ?


O metadados nada mais é do que dados de outro dado (recurso).Esses dados não são sempre exibidos na pagina,são usados muitas vezes para pode especificar a descrição da página. 

Oque é head ?

O "head" que vem do inglês e significa cabeça, nada mais é do que oque sera exposto no cabeçalho.
<head>  é usada sempre descendentemente de HTML como já foi falado anteriormente.
uma tag muito usada em sua descendencia é a <title> e é dela que vamos falar agora.

Oque é title ?

O title também vindo do inglês é nada mais nada menos que Titulo, Essa informação sim sera passada ao usuário. Nela provavelmente vai conter uma previa bem simples do conteúdo da pagina.
A tag <title> sempre sera descendente de <head>. 

Exemplo:

<html>
   <head> 
         <title> TITULO DA PAGINA</title>
   </head>
   
</html>

Oque é link ?

O link vem da palavra inglesa "Linkar” é uma palavra inglesa que quer dizer, literalmente, elo. Criar um link num texto significa estabelecer um elo, uma ligação com outra página, outro texto, que o leitor pode abrir clicando numa palavra, grupo de palavras ou em uma imagem.


Com um link podemos criar elo entre coisas do mesmo site, coisas de sites diferentes e ate mesmos relacioná-los a algo como filmes ou coisa assim.
A tag usada para isso é <a href="http://www.w3schools.com"> W3Schools</a> A palavra que apareceria ao leitor seria "W3Schools" e ao clicar nela você seria direcionado a pagina http://www.w3schools.com Como o link exposto na palavra nesta pagina.

Oque é meta ?

La vamos nos de novo, meta no português quer dizer oque você almeja alcançar.Partindo desse principio meta nos termos de HTML tem a ver com oque eu desejo que os mecanismos entendam sobre a minha pagina para que eu possa alcançar meu publico alvo. ou até mesmo para que o mecanismo possa entender o meu HTML em questão como por exemplo: <meta charset= "utf-8"> sendo assim palavras acentuadas receberiam o acentuo de maneira correta sem deixar problemas para o usuário entender a pagina.Porem para o usuario não apareceria nada escrito na tela sobre essa <META>.

exemplo:

<html>
    <head>
    <title>Título da página</title>
    <head>
</html>

Provavelmente o titulo ficaria T?tulo da p?gina ou algo assim.

 <html>
   <head>
     <meta charset= "utf-8">
     <title>Título da página</title>
   <head>
</html>

Ai sim em qualquer servidor WEB e até mesmo em nossos navegadores sairia corretamente escrito e acentuado:
Título da página.
Segue: imagem sem <meta> e imagem com uso do <meta charset= "utf-8">


Oque é style ?


Bom no mundo moderno style é uma palavra que já foi usada em meio aos jovens, muitos associam a "legal, diferente, algo que de destaque e etc".Embora sua real tradução seja ESTILO.

 No mundo HTML em qual estamos falando não é diferente disso, quando aplicamos a TAG <style> Conteúdo </style> a palavra interna a Tag recebe uma formatação diferenciada, com um estilo diferente aos demais ou deveríamos dizer: "fica style".
EXEMPLO:

<html>
     <head>
          <meta charset= "utf-8">
          <title>Título da página</title>
     </head>
     <body>
          <p>Corpo da página.<p>
          <p style="font-family:arial;color:red;font-size:20px;">corpo da página</p>
          <h1>Texto corpo da página</h1>
         <h1 style="font-family:arial;color:red;font-size:20px;">Texto corpo da página</h1>
     </body>
</html>

Note a diferença quando usado o style:
Nesse caso eu fiz alguns ajustes dentre eles o mais visível que é a cor vermelha.



      _______________________________________________________________

Sessões: body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address.


Oque é sessões ?

Aqui vamos falar sobre sessões então primeiro vamos falar oque significa sessões.Sessões é o plural de sessão que tem como sinônimos: reunião,agregação, agrupamento, ajuntamento, aliança e etc.

Oque é body ?


Oque vai ter de aluno fazendo piada com essa pergunta hein. Vamos la, body vindo do inglês é corpo, que torna justo o seu nome é tudo que faz parte do "body" esta no corpo da página que sera exibida.Tag usadaé <body>corpo da pagina</body>

Oque é article ?


Article tem varias traduções quando usamos a tradução ao pé da letra a melhor é articular:
Esse elemento institui um artigo, ou seja, ele possibilita você a partilhar informações na sua página de maneira independente articulando seu site de maneira util. Tag usada é <article>conteúdo</article>

Oque é section ?

Nesse casso podemos usar a tradução ao pé da letra, section é no portugues seção:
ou seja usando section conseguimos separar assuntos diversos e diferentes.A Tag usada é <section>Separa assuntos diferentes</section>.

Oque é  nav ?


Nav nos lembra navegação e o melhor jeito para navegação é a criação de barra de links.
sendo assim nav é responsável por essa criação que podem ficar na barra lateral ou ate mesmo na barra horizontal, perto do cabeçalho.Para usarmos essa tag<nav>Conteúdo da barra de links</nav>


Oque é aside ?



O elemento HTML <aside> representa uma seção de uma página que consiste de conteúdo que é tangencialmente relacionado ao conteúdo do seu entorno, o que poderia ser considerado separado do conteúdo. Normalmente é muito usado em barras laterais.


Pratica de uso:
Não use o elemento <aside> para texto entre parenteses, este tipo de texto é considerado parte do fluxo principal.


Oque é h1, h2, h3, h4, h5, h6 ?


Como é possível ver nessa imagem a baixo h1 a h6  nada mais é do que uma numeração de títulos. onde h1 tem maior tamanho que as outras e vão diminuindo proporcionalmente.


Oque é hgroup ?



Como cabeçalho principal do documento incluindo um bloco hgroup com um título e subtítulo (descrição) de um blog

Os metais

O blog de que não tem medo de tocar forte !


1 <header>
2 <hgroup>
3 <h1>Os metais</h1>
4 <h2>O blog de que não tem medo de tocar forte !</h2>
5 </hgroup>
6 </header>

Normalmente usado para agrupar conteúdos de uma mesma especie.

Oque é header?



O elemento header é um bloco de conteúdo que pode conter um ou mais elementos 
Normalmente trabalha como um agregador do conteúdo do cabeçalho de um documento ou de uma seção seu uso é <header> conteúdo</header>.


Oque é footer?

O elemento Footer nada mais passa do que o rodapé de uma pagina web. podendo conter conteúdos simples. Normalmente um rodapé contém informações sobre o autor da seção de dados, direitos autorais ou links. Seu uso é dado por <footer>Rodapé</footer>

Oque é address ?


Trazendo para o português, Endereço sendo assim se trata de um comando que inseri um endereço virtual redirecionando o usuário, muitas vezes pode ser um e-mail ou ate mesmo um link.

A tag address NÃO foi feita para urls nem e-mails de forma genérica, e sim somente para informações desse tipo do autor da página (contato).
Embora o elemento de endereço exiba o texto com o mesmo estilo padrão que os elementos <i> ou <em>, ele é mais apropriado de ser usado quando se lida com informação de contato, já que ele fornece informação semântica adicional.
      _______________________________________________________________

Oque é Comentário?

Apos pesquisar bastante acabei caindo no w3school de novo.
o comentário é atribuído por <!--Comentário--> e não aparece no corpo da pagina.


Exemplo:
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->


A unica mensagem exibida seria This is a paragraph. 
Os demais comentários serviriam para mecanismos de buscas e afins e não ficariam visíveis aos usuários.

      _______________________________________________________________

Oque é elementos de agrupamentos ?

 p

Paragrafo determina o enquadramento de um texto em um paragrafo.

 hr

Inseri ao texto um quebra de pagina separando conteudos com uma linha que muda conforme a resolução de tela para nao mudar o padrão da tela

blockwuote



É uma "citação em bloco". Foi criada principalmente para identificar algo que não é de sua autoria, uma frase famosa, uma entrevista, trecho de outro blog/site.


Agora irei apresentar um exemplo de blockwuote bem fácil para memorizar.


<blockquote>“Coisa boa ou má não existe: o pensamento humano é o que faz as coisas terem tal ou qual aparência.” Shakespeare</blockquote>.

ol 

Lista ordenada é uma apresentação de uma lista com ordem. muitas veses fica representada assim :
  1. primeiro item
  2. segundo item


ul



Listas não ordenadas são determinadas pela Tag <ul> e normalmente ficam representadas assim:



  • primeiro item
  • segundo item

li

Li determina a linha dentro de <ul> ou <ol> portando separando a lista.

Oque faz dl dt dd ?



Na sua estrutura são usadas 3 tags: dl (definition list), dt (definition term) e dd (definition description), da seguinte forma:


dl 

dt /dt

dd /dd

/dl

 A tag dl é o container. Dentro da tag dt, você deve colocar o termo a ser definido. Já dentro da tag dd você deve colocar a descrição do termo.

div





É uma tag usada em html muito parecida com a tag <body> e que dentro de si pode se usar outros atributos;
  • id
  • width
  • height
  • title
  • style


      _______________________________________________________________

Oque é elementos de agrupamentos ?


Oque faz <a>?



De (A)tributos nada mais é do que um elemento que atribui valores a exemplo do <a href="http://uol.com.br">Conheça Mundo Uol!</a>
Nessa atribuição o link fica escondido e aparece somente o "CONHEÇA MUNDO UOL!".


Oque faz <abbr>?

A abreviação é usada com o seguinte padrão: <p><abbr title="Universidade Estadual de Campinas">Unicamp</abbr></p> Para o usuário fica somente a abreviação mais para mecanismos de buscas e afins o conteúdo é devidamente interpretado.

Oque faz <span>?

O elemento HTML <span> é um genérico em linha para conteúdo fraseado , que não representa nada por natureza. Ele pode ser usado para agrupar elementos para fins de estilo (usando os atributos class ou id ), ou para compartilhar valores de atributos como lang. Ele deve ser usado somente quando nenhum outro elemento semântico for apropriado. <span> é muito parecido com o elemento <div> , entre tando <div> é um elemento de nível de bloco enquanto <span> é um elemento em linha.

Oque faz <strong>?

Para dar enfase em um texto antigamente usávamos muito o <b> que hoje foi substituído por <strong> que faz o mesmo  porem no sentido semântico.

Oque faz <em>?

Para dar destaque a uma informação é muito usado <em> que modifica o texto tornando diferenciado dos outros.

Oque faz <br>? 

O conteúdo <br> é usado para quebra de linha sendo assim permite que você escreva um texto em uma unica linha e somente com o <br> ele se posiciona de maneira correta na pagina.



      _______________________________________________________________


Conteúdo embutido:


Segue exemplo Tag <img> insere uma imagem na pagina em Html.

esta seria escrita assim:<img src= “caminhoenomedoarquivo”>

E só apareceria a imagem no qual descrita no caminho.

      _______________________________________________________________


Nenhum comentário:

Postar um comentário

Assinar: Postagens (Atom)