SITES E BLOGS

Blogs e Sites personalizados. Tel- 71-8851-7512

BANNERS E LAYOUTS

Layouts e banners para propagandas virtuais. Tel- 71-8851-7512

SUPORTE

Conserto de computadores e consultorias em Redes LANs e WLANs. Tel- 71-8851-7512

COMPARTILHAMENTO DE INTERNET

Compartilhamento de internet, suporte para compartilhamento. Tel- 71-8851-7512

PROPAGANDA VIRTUTAL

Seu produto aqui no Blog , tenha um retorno mais rapido. Tel- 71-8851-7512

Mostrando postagens com marcador HTML. Mostrar todas as postagens
Mostrando postagens com marcador HTML. Mostrar todas as postagens

sábado, 25 de agosto de 2012

HTML e HTML 5 conhecendo

HTML

Você sabe o que é HTML?

Significa HyperText Markup Language (Linguagem de Marcação de HiperTexto).
É uma das linguagem mais utilizada na construção de páginas, e tornasse comum encontrarmos sites que utilizam somente o HTML.
Sua versão atual é o HTML5,  o HTML organiza as informação e permite a criação de documentos que poderão ser editados em qualquer editor de texto e qualquer alteração poderá ser feita de forma rápida e fácil.
HTML é composto de tags e atributos que servem para indicar o início e o fim das respectivas funções.
Tags - é um elemento de base, uma especie de marcação, geralmente apresenta duas partes:
Abertura de forma geral: <tag>
Fechamento do tipo: </tag>
Exemplo:
<strong>texto em negrito</strong>
Resultado
 texto em negrito
 Atributos - logo após a tag, seguem os atributos, que são configurações específicas de cada uma das tags, que modificam sua atuação e resultados na página.
Exemplo:
<p style="text-align: center;"> <strong>texto em negrito</strong></p>
Resultado:
 texto em negrito
neste caso o atributo é "text-align: center;" que alinha o texto ao centro do corpo do artigo.

História (resumida) do HTML

O HTML original foi criado por Tim Berners-Lee, utilizando uma estação NextCube com o ambiente de desenvolvimento NeXTSTEP , na época tratava-se de uma coleção de ferramentas, para solucionar a comunicação e aprimoramento das pesquisas entre ele e seu grupo de colegas.
Na década de 1990 foram definidas especificações formais, a primeira publicação foi em 1993, por Berners-Lee e Dan Connolly. Já o HTML 2.0 foi publicado em 1995 e desde 1996 foram mantidas as especificações HTML.
W3C publicou a especificação do HTML5 em janeiro de 2008, que é a mais recente atualização do HTML.

HTML 5O HTML 5 é a versão mais recente da linguagem de programação conhecida como HTML (Hyper Text Markup Language -  Linguagem de Marcação de Hipertexto). Essa linguagem usa um texto codificado para criar e organizar o conteúdo online.
É a quinta versão da linguagem HTML. Esta nova versão traz importantes mudanças quanto ao papel do HTML no mundo da Web, através de novas funcionalidades como semântica e acessibilidade. Com novos recursos, antes só possíveis por meio de outras tecnologias ou plugins. Com o suporte para as mais recentes multimídias, legível para webmaster e facilmente interpretada por computadores e outros dispositivos.
Certas funcionalidades form introduzidas em 2007, mas apenas em 2010 que esses novos recursos começaram a ser utilizados com mais frequência.

Benefícios do HTML 5

  • Talvez o principal recurso do HTML 5 é sua capacidade de gerenciar arquivos de vídeo, essa funcionalidade tornou possível a adição de vídeos, sem a utilização de elementos externos ou adicionais, por exemplo os plugins, influenciando notoriamente na performance  da página, assim também acontece com arquivos de áudio e elementos sonoros;
  • Torna a navegação muito mais rápida e simples, melhorando a performance de uma página, o HTML reduz o tamanho dos arquivos, melhorando a experiência do usuário, principalmente os que utilizam conexões de baixa velocidade;
 Canvas, que significa tela em Inglês, é uma ferramenta gráfica que facilita a criação de animações, desenhos, gráficos, utilizando JavaScript;
A função do HTML é indicar que tipo de informação a página está exibindo, os motores de busca baseiam-se nessas marcações para saber diferenciar, por exemplo, um título de um paragrafo.
Em termos de comparativo, na versão anterior, não era possível diferenciar um rodapé do cabeçalho. Essa diferença era percebida somente em termos de layout ou pela posição que os elementos encontravam-se dentro do HTML . Não havia padrão para nomenclatura de IDs e Classes, desta maneira não detectaria-se automaticamente estes elementos, pois as tags utilizadas para ambos poderiam ser iguais.
Com o HTML 5 os  buscadores tem seu trabalho facilitado, eles conseguem interpretar o código de maneira mais eficaz, armazenam informações com maior exatidão e gastam menos tempo para isso.
A internet mudou bastante deste a implementação do HTML 4.01 em 1999. Alguns dos elementos ficaram sem uso ou com pouca utilidade. Estes elementos foram eliminados ou reescritos para estarem em conformidade com as exigências desta nova fase da web. Para isso também foram criados novos elementos para melhorar a estrutura, conteúdos de mídia e formulários.
HTML 5, saiba mais!

 Veja os principais novos atributos:

O atributo autofocus pode ser especificado nos elementos input , textareaselect e button.
A tag a passa a suportar o atributo media como a tag link.
A tag form ganha um atributo chamado novalidate. Quando aplicado o formulário pode ser enviado sem validação de dados.
O elemento ol ganhou um atributo chamado reversed. Quando ele é aplicado os indicadores da lista são colocados na ordem inversa, isto é, da forma descendente.
O novo atributo placeholder pode ser colocado em inputs e textareas.
O elemento area agora suporta os atributos hreflang e rel como os elementos a e link.
O elemento base agora suporta o atributo target assim como o elemento a. O atributo target também não está mais descontinuado nos elementos a e area porque são úteis para aplicações web.

Vejamos abaixo elementos inclusos no HTML 5

Elementos de Marcação

<header> - representa um grupo de introdução ou elementos de navegação. O elementoheader pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos;
<section> - seção do conteúdo, ex: destaques, novidades, artigos recentes...etc;
<article> - apenas um item do conteúdo, como um texto, bloco de cometário, dentro da página ou da seção;
<footer> - o rodapé da página ou de uma seção, último elemento antes de fechar a tag do HTML;
<nav> - o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página, ligadas dentro do próprio website;
<aside> - conteúdo relacionado ao artigo, separados do conteúdo principal (como arquivos e posts relacionados em um blog, por exemplo);
<time> - define tempo ou data, ou os dois.

Elementos de Mídia

<audio> - conteúdo multimídia, sons, músicas, vinhetas, mp3...etc;
<vídeo> - conteúdo de vídeo, clips, stream de vídeo...etc;
<source> - recursos de mídias, definido dentro dos elementos de áudio e vídeo;1
<embed> - conteúdo embutido, por exemplo os vídeos do YouTube.

Modelos de Blockquotes (citação em bloco)


Em linguagem web, blockquote ( ou simplesmente quote) é um recurso em HTML, utilizado para destacar parte de um texto ou para citar, dar referência a algo ou alguém. Em português, usa-se a denominação citação ou bloco de texto.
O blockquote não é usado somente em páginas da internet, sendo muito comum em livros, revistas, jornais e em toda forma de tipografia .
Segundo definição da Wikipedia :

Um bloco de citação (também conhecido como uma citação longa ou extrato) é uma citação de um documento escrito, que é definido fora do texto principal como um ponto distinto (ou bloco) (…) Bloco de citações são geralmente distinguidos visualmente utilizando o recuo , um diferente tipo de letra ou tamanho menor.
Como vocês podem notar, eu acabei de usar o blockquote para citar o texto acima.
Para usar blockquote no editor de textos do Blogger, passe o mouse sobre a área que será destacada e clique no ícone Citação (figura 1). Para usar no Windows Live Writer, procure por citação em bloco (figura 2)
  
Para mudar o modelo de blockquote dos templates do Blogger ( e eu acho que isso serve também para Wordpress), precisamos usar alguns códigos em CSS.
Antes de mais nada, entre no editar HTML do Blogger e procure por algo assim:
blockquote {
width:90%;
font:$quoteFont;
line-height:1.6em;
color:#333;
}
Todo o trecho deverá ser substituído por outro modelo de sua preferência.
Modelos de blockquote
Fonte: Css Tricks - Better Blockquotes 
blockquote 
blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}
blockquote
blockquote {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(URL DA IMAGEM);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote {
display: block;
background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: bottom right;
}
blockquote
blockquote {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(URL DA IMAGEM);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
Aqui estão as duas imagens utilizadas nos modelos acima. Salve-as em seu computador e faça o upload no Picasa Web  ou no serviço de hospedagem que preferir. Depois é só copiar a url e colocar nos locais indicados (em vermelho)
openquote4closequote1
Fonte: Css NewBie- Six Ways to Style Blockquotes 
blockquote
blockquote {
background: #f5f5f5;
border-left: 0.8em solid #ccc;
border-right: 0.8em solid #ccc;
font: italic 120% Georgia, "Times New Roman", Times, serif;
padding: 0.75em;
}
blockquote
blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
blockquote
blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em; }
blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 220%;
font-weight: bold; }
blockquote p:first-line {
font-variant: small-caps; }
Fonte: Usuário Compulsivo 

.post blockquote {
margin: 1em 20px;
border: 1px solid #c0c0c0;
background: #f5f5f5;
padding: 7px;
}
E este é o atual modelo usado aqui no Dicas Blogger:
 
blockquote {
width:90%;
font:arial;
line-height:1.4em;
color:#333;
border-left:2px solid silver;
border-right:2px solid silver;
background:#EEE;
margin:10px;
padding:0 10px;
}
Fazendo uma busca no Google, vocês vão encontrar ainda mais modelos.

terça-feira, 21 de agosto de 2012

Acessórios Web: mais utilidade e praticidade

Editor HTML
Rápido e ideal para textos: on line, você digita e formata, depois é só pegar o código gerado e colar na sua página, no template do seu blog ou mesmo na área de mensagens do seu blog. Para quem quer praticidade e tem pouco tempo!
Tabela de Cores
Quer uma cor e não tem o código hexadecimal dela? Aqui temos três tabelas: uma rápida, com as cores mais comuns, e uma com muitas, muitas cores. A terceira contém também o valor RGB, que pode ser útil se você trabalha com programas gráficos e de desenho. Para HTML, você clica na cor e tem o código.
Criptografador
Proteja seu código. O criptografador o transforma em um conjunto de caracteres estranhos, sem alterar a funcionalidade. Desse modo se alguém exibir o código fonte da sua página, não vai entender praticamente nada e nem conseguir copiar com exatidão o que quer. Funciona com os navegadores mais novos, em especial o Internet Explorer.
Descriptografador   :::Exclusivo::: :::MepSites:::
Isso mesmo: 'descodifica' códigos 'criptografados' com o escape/unescape do JavaScript. Se você criptografou o seu código e perdeu o original, pode descriptografá-lo. E mais ainda, se você encontrou um código criptografado por esse método, pode copiá-lo e obter o código fonte original. Realmente inovador, esclusivo aqui, da Mep Sites.
Barras de rolagem coloridas
Acessório on line, você escolhe as cores das partes da barra de rolagem e ele gera o código. Ideal para personalizar o seu site, deixá-lo mais ainda de acordo com o layout.
Janelas Pop Ups
Cria um link que gera uma janela sem barras, menus, etc. Você escolhe o que a janela terá e o que não terá, e define a página que será carregada na janela. Há também a opção de criar uma janela que se abra automaticamente ao entrar na página.
Tabela de Caracteres Especiais
Uma tabela e algumas informações sobre os caracteres especiais, inclusive uma versão para impressão. Utilizando os códigos você garante a aparência da sua página em praticamente qualquer navegador, em qualquer plataforma operacional, em qualquer idioma.
FTP via Web
Carregue seus arquivos para o seu site pelo navegador, de uma forma mais rápida. Seu servidor FTP deve estar previamente configurado, e você estar devidamente cadastrado. (Compatível com Internet Explorer, podendo não funcionar em outros navegadores)
IMPORTANTE: Alguns acessórios se abrirão numa janela personalizada. Para utilizá-los corretamente, você não pode estar com as janelas pop-ups bloqueadas.

Códigos HTML Especiais

Códigos Especiais: muito mais do que simples códigos!

fonte-  http://www.mephost.com/br/codigos_especiais.htm  
 
Aqui você encontra códigos "especiais", que geram efeitos mais atraentes, ou mais produzidos. Estes códigos, em sua maioria, necessitam de mais compreensão por parte do webmaster, e são mais "difíceis" de se aplicar. Muitos deles têm de ser configurado, deve ser alterado um ou outro item, etc.
Ideal para usuários de nível médio ou avançado. Lembre-se: não basta copiar e colar. Você deve editar de acordo com o que se planeja.
Boa sorte!
  1. Calculadora de Expresões

    Especial: Menus e navegação
Mep Kit Proteção: Códigos de páginas com senha, encriptação de textos, proteção anti-cópia e muito mais... Atualizados!
Clique aqui para baixar (cerca de apenas 22,4 kb)
Diversos códigos enviados por usuários e internautas... Inclusive você pode enviar o seu! Além disso temos alguns códigos que foram obtidos na própria Internet... Aqui selecionados!
>> Legenda das cores e simbologia:
  • Códigos normais (em português)
  • Códigos ou arquivos em inglês
  • Códigos ou scripts não testados
  • *bom* códigos bons, efeitos que valem a pena ver
  • *didático* códigos com excelente explicação
  1. Texto com zoom animado *bom*

    ... novos códigos adicionados...
>> Legenda das cores e simbologia:
  • Códigos normais (em português)
  • Códigos ou arquivos em inglês
  • Códigos ou scripts não testados
  • *bom* códigos bons, efeitos que valem a pena ver
  • *didático* códigos com excelente explicação
  • *engraçado* efeitos visuais divertidos
Alguns Códigos Zipados para ser usados em Blog e sites
40 códigos ASP (Active Server Pages) - neste caso é necessário ter o PWS ou IIS ou um servidor na web...83,6 kb (ZIP)
95 ícones do Windows XP! Estão no formato .ico, você pode no mínimo dar um 'print screen' e salvar como bitmap, depois converter em gif... Clique aqui para baixar!376 kb (ZIP)
292 ícones em BMP (226 do Windows XP e 66 do WinMe) Melhore seu site ou seu programa, ou então seus trabalhos no computador!231 kb (ZIP)

Related Posts Plugin for WordPress, Blogger...