Tag: html

Exemplo: Vários botões para copiar textarea em uma única página (HTML e JavaScript)

Teste #1

Teste #2:

Exemplo de Código






  



  
    

Teste #1

Teste #2:

Fonte


Meu primeiro Tutorial sobre HTML

Revirando umas coisas antigas, acabei achando uma coisa bastante interessante: meu primeiro tutorial, sobre HTML.

Fiz ele em 2002, então não esperem muita coisa! Só queira compartilhar por ter achado interessante encontrar isso agora, praticamente 10 anos depois. E ainda está online* no host original: http://tiago.passos.free.fr/tiagopassos/documentohtml.html.

Não é a coisa mais bem escrita do mundo, mas acho que pode ajudar a quem está começando. 🙂

* Pelo menos estava até o dia que escrevi esse artigo.


Gerar galeria de fotos em HTML pelo llgal no Ubuntu Linux

Se você precisa gerar uma galeria de fotos em HTML de forma rápida e prática no Linux, para usar em algum site ou qualquer outro projeto, seus problemas acabaram!

O llgal permite que você faça isso com muita praticidade. Para instalar o llgal, abra o Terminal (Menu Principal / Acessórios / Terminal) e digite o seguinte:

sudo apt-get update
sudo apt-get install llgal

Depois é só acessar a pasta onde estão as imagens pelo terminal, como no exemplo abaixo, onde vou mostrar como acessar a pasta /home/tiago:

cd /home/tiago

Dentro da pasta, digite llgal e o programa gerará todos os arquivos HTML e miniaturas. Caso queira diminuir a imagem original (se for muito grande), é só digitar:

llgal --sy 800

800 é o tamanho em pixels que deseja. Só isso. Fácil né?


O editor de HTML do WordPress sumiu!

Como alguns de vocês devem saber, eu uso o WordPress para publicar meu blog.

Acontece que nas últimas semanas eu mudei de host e migrei o blog. Parecia estar tudo certo, mas depois de um tempo eu percebi um problema: o editor de HTML não aparecia de maneira nenhuma! Simplesmente sumiu!

Saí pesquisando na internet e não tive muito progresso. Tentei tudo que disseram nesses dois artigos:

E nada!

Até que, como última tentativa, resolvi instalar o CKEditor, que é um editor de HTML que substutui o padrão. Instalei o Plugin CKEditor for WordPress, e agora pelo menos eu tenho um editor, mas ainda prefiro o original.

Se você passou ou está passando por um problema parecido, essa pode ser uma solução paleativa, que pode pelo menos te ajudar a manter o blog até resolver o problema, mas na minha opinião, não substitui o editor original (TinyMCE).

Se você tem alguma outra ideia que possa me ajudar a resolver isso, eu iria gostar muito da ajuda. É só poster sua ideia nos comentários.

Obrigado!


Alterar codificação de caracteres (charset) no Eclipse

Quando trabalhamos com um projeto no Eclipse no Linux, a codificação padrão é UTF-8. Essa codificação é universal, ou seja, contém acentos e caracteres especiais, mas no Windows a codificação padrão é ISO Latin1 (8859-1). Isso causa problemas com os acentos no Windows.

Para resolver esse problema, é só mudar a codificação no Eclipse de UTF-8 para ISO Latin1.

Acesse o menu Window / Preferences / Web. Nas Opções CSS Files, JavaScript e JSP Files, altere Encoding para ISO Latin-1

Pronto 🙂


O Poder do CSS com o Zen Garden

É. Finalmente consegui. Editei 120 arquivos HTML com a fonte que pediram pra mudar. “TRRRRRIIIIIMMMMM”. Tocou o telefone. Era o cliente:
– “Tiago, a fonte vai ser a antiga mesmo, viu?”
AAARRRRGGHHH!

You Are The CSS To My HTMLÉ pessoal… isso é uma pequena estorinha do que pode acontecer com você se você trabalha com HTML e não conhece ou não usa CSS. Essa é uma das funções dele. Você pode centralizar todas as opções de estilo (cor, fonte, formatação etc.) em um arquivo só, e simplificar a alteração de alguma característica do sue layout. E mais: é possível alterar um layout completamente bastando mudar o CSS.

Para demonstrar o grande poder dessa tecnologia – que muita gente não conhece – existe um projeto chamado Zen Garden. Exitem vários layouts completamente diferentes disponíveis para demonstração, e única coisa que muda neles é o CSS. O HTML é exatamente o mesmo.

Dê uma olhada, que é bem interessante. De repente você evita ter que mudar dezenas de arquivos HTML por não conhecer ou não usar CSS.


W3C lança novo logo do HTML5

O W3C (World Wide Web Consortium), órgão regulamentador dos padrões da internet, liberou hoje o novo logo do HTML5. Com isso, a organização pretende promover a nova tecnologia Web. A intenção é que a nova marca aumente o interesse por esse novo e mais atual formato da web.

A idéia é promover uma série de outras tecnologias, junto com o HTML5, como por exemplo: CSS (Cascading Style Sheets – formatação e efeitos gráficos), SVG (Scalable Vector Graphics – gráficos em 2D) e WOFF (Web Open Font Format – tipografia).

Fonte: CNET News


Criando formulários HTML rapidamente com o pForm

O “pForm – Free HTML Form Builder“, é uma ferramenta online que auxilia a criar formulários em HTML de forma bastante fácil. A ferramenta disponibiliza diversos templates para facilitar a criação.

Depois de escolhido o template, você monta o form de maneira bem prática. Escolhe cada tipo de campo e personaliza tudo, e depois exporta como HTML.

Mas atenção. O utilitário serve apenas para criar os formulários, e não os scripts para envio (de e-mail por exemplo). Se você não tiver o script ele não irá funcionar. É interessante algum conhecimento em HTML para que você possa manipular o formulário posteriormente, caso queira.

Acesse o site em:  www.phpform.org


Javascript para o usuário aumentar ou diminuir fonte do site

Script que adiciona um link para que o usuário aumente o tamanho da fonte do texto, e outro link para que o usuário diminua o tamanho da fonte do texto.
Fonte: http://www.yogodoshi.com/blog/utilitarios/script-para-o-usuario-poder-aumentar-e-diminuir-a-fonte-do-site

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript">
// Início do código de Aumentar/ Diminuir a letra

// Para usar coloque o comando:
// "javascript:mudaTamanho('tag_ou_id_alvo', -1);" para diminuir
// e o comando "javascript:mudaTamanho('tag_ou_id_alvo', +1);" para aumentar

var tagAlvo = new Array('p'); //pega todas as tags p//

// Especificando os possíveis tamanhos de fontes, poderia ser: x-small, small...
var tamanhos = new Array( '9px','10px','11px','12px','13px','14px','15px' );
var tamanhoInicial = 2;

function mudaTamanho( idAlvo,acao ){
if (!document.getElementById) return
var selecionados = null,tamanho = tamanhoInicial,i,j,tagsAlvo;
tamanho += acao;
if ( tamanho < 0 ) tamanho = 0;
if ( tamanho > 6 ) tamanho = 6;
tamanhoInicial = tamanho;
if ( !( selecionados = document.getElementById( idAlvo ) ) ) selecionados = document.getElementsByTagName( idAlvo )[ 0 ];

selecionados.style.fontSize = tamanhos[ tamanho ];

for ( i = 0; i < tagAlvo.length; i++ ){
tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] );
for ( j = 0; j < tagsAlvo.length; j++ ) tagsAlvo[ j ].style.fontSize = tamanhos[ tamanho ];
}
}
// Fim do código de Aumentar/ Diminuir a letra

</script>
</head>

<body>
<a href="javascript:mudaTamanho('texto', -1);">Diminuir</a>
<a href="javascript:mudaTamanho('texto', 1);">Aumentar</a>

<div style="font-size: 11px;" id="texto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur  scelerisque purus ut pede. Ut pulvinar diam vitae tellus. Nunc  ultricies. Nam rhoncus justo vel dui. Morbi suscipit enim. Praesent dui  dui, tincidunt eget, feugiat vel, tincidunt vel, elit. Curabitur tempus  consequat nunc. Aliquam erat volutpat. Vivamus a massa non libero  posuere blandit. Nulla ut velit quis leo luctus tincidunt. Vestibulum  eget leo in augue ornare fringilla. Suspendisse suscipit dui. </p>
<p>Nullam ultrices justo eget mi. Curabitur porta augue eget magna. Nam  imperdiet, ipsum eu aliquet interdum, justo ipsum pulvinar quam, quis  convallis mi sapien eu ante. Etiam ac sem. Ut bibendum. Nulla facilisi.  Vestibulum odio. Sed accumsan. Donec a dui. Cras lorem augue, egestas  vel, accumsan vel, elementum sit amet, nisl. Cras id dui. Sed nulla  ipsum, pulvinar et, suscipit a, vehicula eu, arcu. Fusce auctor nibh  eget risus. Vestibulum ante ipsum primis in faucibus orci luctus et  ultrices posuere cubilia Curae; Vestibulum vitae ante in odio dapibus  lobortis. </p>
</div>

</body>
</html>

  • Publicidade

  • Redes Sociais

    Facebook  Twitter
  • Estatísticas

    Page Views (desde março de 2010):

    Estatísticas detalhadas
  • Novidades por e-mail!

    Digite seu e-mail:


    Fique tranquilo. Seu e-mail não será usado para outros fins, e você poderá se descadastrar quando quizer.

    Eu!

    Tiago Passos
    Todo o conteúdo desse site esta licenciado sob a licença Creative Commons 3.0 (CC BY 3.0). Você pode copiar e modificar o conteúdo desde que cite o autor.
    iDream theme by Templates Next | Powered by WordPress