Para colocar no "head"<title>Título</title>
<meta name="keywords" content="palavra, palavra "/>
<meta name="description" content="Descrição"/>
meta tags, título, keywords e descrição
Palavras chave: head, html, meta tags 1 comentários
as quatro pseudo-classes de links
Palavras chave: css, link 0 comentáriosSão quatro as pseudo classes dos links:
1. a:link........define o estilo do link no estado inicial;
2. a:visited...define o estilo do link visitado;
3. a:hover.....define o estilo do link quando passa-se o mouse sobre ele;
4. a:active....define o estilo do link ativo (o que foi "clicado").a:link {}
a:visited {}
a:hover {}
a:active {}
Redireccionar [script, html]
Palavras chave: html, redireccionar, script 0 comentáriosO "20" é o nº de segundos<head>
<meta http-equiv="refresh" content=" 20 ; URL=http://pagina.com/">
</head>
ou<head>
<script>
var segundos=1000;
setTimeout("window.open('http://pagina.com/','_top','');",segundos * 20 );
</script>
</head>
e a página dentro da página<html>
<head>
<title>PLAFORMA | Consultadoria e Formação</title>
<meta name="keywords" content="plaforma, formação, consultadoria, empresa"/>
<meta name="description" content="A Plaforma é uma empresa de Consultadoria e Formação, Lda. que assenta essencialmente no profissionalismo e na qualidade."/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset rows='100%, *' frameborder=no framespacing=0 border=0>
<frame src="http://plaforma.blogspot.com/" name=mainwindow frameborder=no framespacing=0 marginheight=0 marginwidth=0></frame>
</frameset>
<noframes>
<h2>Your browser does not support frames. We recommend upgrading your browser.</h2><br><br>
<center>Click <a href="http://plaforma.blogspot.com/">here</a> to enter the site.</center>
</noframes>
</html>
ligação a javascript externo (script, html)
Palavras chave: externo, html, javascript, link, script 0 comentários<head>
<script type="text/javascript" src="nomedojs.js"></script>
</head>
iframe básico (html)
Palavras chave: html, iframe, link 0 comentáriosIframe:<iframe leftmargin=5 topmargin=5 marginWidth=0 marginHeight=0 src="pagina_que_vai_abrir.htm" frameBorder=1 width=100% height=100% scrolling=yes name="nome_da_frame"></iframe>
Link para Iframe:<a href="http://www.pauloadriano.com" target="nome_da_frame">link para abrir na iframe</a>
Optional Attributes
DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
| Attribute | Value | Description | DTD |
|---|---|---|---|
| align | left right top middle bottom | Deprecated. Use styles instead. Specifies the alignment of an iframe according to surrounding elements | TF |
| frameborder | 1 0 | Specifies whether or not to display a border around an iframe | TF |
| height | pixels % | Specifies the height of an iframe | TF |
| longdesc | URL | Specifies a page that contains a long description of the content of an iframe | TF |
| marginheight | pixels | Specifies the top and bottom margins of an iframe | TF |
| marginwidth | pixels | Specifies the left and right margins of an iframe | TF |
| name | name | Specifies the name of an iframe | TF |
| scrolling | yes no auto | Specifies whether or not to display scrollbars in an iframe | TF |
| src | URL | Specifies the URL of the document to show in an iframe | TF |
| width | pixels % | Specifies the width of an iframe | TF |
marcadores ou hiperligações âncoras numa página (html)
Palavras chave: anchor, âncora, html, link, marcador 2 comentáriosCriar zona ancorada:<a name="ancora"></a>ancora
Ligação para a âncora:<a href="#ancora">ir_para_ancora</a>
hiperligação para voltar à página anterior (html)
Palavras chave: anterior, background, html, link, voltar 2 comentários<a href="#" onClick="history.go(-1)">Back</a>
ou<input type=button value="Back" onClick="history.go(-1)">
hiperligação para voltar ao topo da página (html)
Palavras chave: html, link, topo 0 comentários<a href="#top"></a>
abrir todas as hiperligações para uma frame específica (html)
Palavras chave: frame, html, link, target 0 comentários<head>
<base target="_blank">
</head>
Loading Image (css)
Palavras chave: css, images, loading 0 comentáriosPodemos simular um pré-carregamento de uma imagem utilizando a propriedade CSS background setando um outra imagem, na qual informará o carregamento da imagem. (exemplo)img {
background: #ffffff url(loading.gif) no-repeat center center;
}
background aleatório (script)
Palavras chave: background, script 1 comentários<script>
var now=new Date();
var status=(now.getSeconds())%6;
<!—quantidade de imagens no directório; no caso, devem ser imagens nomeadas como fundo1.gif, fundo2.gif etc -->
document.write('<body background="fundo'+status+'.gif" BGCOLOR="#ffffff" TEXT="#000000">');
</script>
ligação a css externa (css/html)
Palavras chave: css, html 1 comentários<link rel="stylesheet" type="text/css" href="nomedoficheiro.css">
link que abre imagem numa camada à parte (html)
Palavras chave: div, html, link, mouseover 0 comentários<div id=camada></div>
<a href="javascript:document.all.camada.innerHTML='<img src=img.jpg>'">
Clique aqui pra ver a imagem na camada
</a>
div muda de cor com mouseover (html)
Palavras chave: div, html, mouseover 0 comentáriosonmouseover="javascript:this.style.background='#000000';"
link que abre e fecha div (script/css/html)
Palavras chave: css, div, html, link, script 0 comentários<HTML>
<HEAD>
<script>
function camada( sId ) {
var sDiv = document.getElementById( sId );
if( sDiv.style.visibility == "hidden" ) {
sDiv.style.visibility = "visible";
} else {
sDiv.style.visibility = "hidden";
}
}
</script>
</HEAD>
<BODY>
<A HREF="#" ONCLICK="camada('menu');">
Abre e fecha a camada
</A>
<!-- Camada 'menu' -->
<DIV ID="menu"
STYLE="POSITION: absolute; TOP: 35px; LEFT: 5px;
WIDTH: 400px; HEIGHT: 300px; ZINDEX: 2;
BACKGROUND: #FFFFFF; BORDER: 3px dotted #000000;
VISIBILITY: hidden;">
Testando a visibilidade da camada
</DIV>
</BODY>
</HTML>
div com barra de deslocamento (html)
Palavras chave: div, html, scrollbar 0 comentários<div style="position:absolute; left:0px; top:0px;
width:100px; height:100px; z-index:1; overflow: auto;">
div centrada horizontalmente e verticalmente na página (html/css)
Palavras chave: centrar, css, div, html 0 comentários<html>
<head>
<style type="text/css">
.style1 {
position:absolute;
width:200px;
height:300px;
border:1px solid #cccccc;
top:50%;
left:50%;
margin-top:-150px; /* metade da altura da div */
margin-left:-100px; /* metade da largura da div */
}
</style>
</head>
<body>
<div class="style1">
<p>esta é a div centrada</p>
<p> </p>
<p> </p>
</div>
</body>
</html>
css reset (css)
Palavras chave: css, reset 0 comentáriosAlguns elementos do HTML já tem um valor de margin, padding, borda e outros tipos de formatação definidos como padrão. O que acontece é que esses valores pré-definidos são necessários para que quando o site seja visto sem CSS algum, o usuário conseguirá ter um mínimo de legibilidade na visita.
Quando se implementa o CSS, esses valores atrapalham um bocado. Por isso, usamos essa técnica para anular todos esses valores pré-definidos e inserir os valores que realmente usaremos para reproduzir o layout.
O asterisco é um seletor de CSS. Muito útil por sinal. A função dele é simples: selecionar todos os elementos. Neste caso, o asterisco irá “seleccionar” todos os elementos que estão dentro do objecto #texto que está dentro da div #geral. Não importa quais elementos eles sejam, o * captura todos. Infelizmente, não funciona no IE6.div#geral #texto * {
color:red;
}
Desta maneira, "reseta-se" o css de uma forma simples* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}
div, código base (html)
Palavras chave: div, html 0 comentáriosCódigo básico para uma camada:<div id="layer1"
style="position:absolute;
visibility:inherit;
width:200px;
height:115px;
z-index:1"></div>
imagens, bloquear cópia (html) (script)
Palavras chave: bloquear, html, images, script 3 comentáriosCom este código, impedimos que o botão direito do rato seja utilizado para copiar imagens:<body oncontextmenu="return false">
Com este código, aparece uma caixa com a mensagem "Todos os direitos reservados" (ie):<script language="JavaScript">
function Click() {
if (event.button == 2||event.button == 3) {
alert ('Todos os direitos reservados');
}
}
document.onmousedown=Click;
</script>
Este código utiliza os dois sistemas anteriores (aconselhável):<script language="JavaScript">
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false'; alert ('Todos os direitos reservados');
}
}
function keypresed() {
alert(' Teclado Desabilitado ');
}
document.onkeydown=keypresed;
document.onmousedown=click
document.oncontextmenu = new Function("return false;")
</script>
áudio (html)
Palavras chave: audio, html 0 comentáriosPara inserir um ficheiro áudio numa página, existem várias hipóteses.
Com este código, é visualizado o controlo do ficheiro, associado ao plugin instalado:<embed src="http://endereco.pt/ficheirodesom.mp3" width="70"
height="25" type="audio/mpeg" autostart="false">
Com estes dois códigos não há visualização:<embed src="URL DA MUSICA AQUI" autostart="true" width="0"
height="0" loop="-1"></embed><bgsound src="URL DA MUSICA AQUI" autostart="true" loop="-1">
caixa de texto, textarea (html)
Palavras chave: caixa de texto, html, textarea 3 comentáriosPode ser útil. Este é o código<textarea rows="5" cols="50" style="background-color: #ffffff" wrap="soft">
ESCREVA AQUI O SEU TEXTO
</textarea>
Fica com este aspecto:
Div fixed em todos os browsers
Palavras chave: css, div, fixed 1 comentáriosFixar uma uma "layer" na janela é fácil para um "browser standard". Mas, para não variar, o Internet Explorer obrigar a fazer uma pesquisa para os código position: fixed funcione relativamente bem. Imaginemos que a tal "layer" tem o nome de "fixme".
Este exemplo fica no canto superior esquerdo.#fixme {
position:fixed;
_position: absolute;
left: 0px; top: 0px;
}
div > div#fixme {
position: fixed;
}
div#fixme {
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
Este exemplo fica no canto inferior direito:#fixmetoo {
position:fixed;
_position: absolute;
right: 0px;
bottom: 0px;
}
div > div#fixmetoo {
position: fixed;
}
div#fixmetoo {
right: auto;
bottom: auto;
left: expression( ( 0 - fixmetoo.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 - fixmetoo.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
E-mail com assunto e mensagem (html)
Palavras chave: e-mail, html 1 comentáriosClicando na ligação, abre-se automaticamente o cliente de correio electrónico com assunto e mensagem pré-escritas.<a href="mailto:EMAIL@EMAIL.PT?subject=ESCREVER_ASSUNTO&body=ESCREVER_MENSAGEM_DE_TEXTO">TEXTO_VISIVEL</a>
Scrollbar: retirar (html)
Palavras chave: html, scrollbar 0 comentáriosPara retirar a "scrollbar" da página, basta digitar o código SCROLL="NO" na tag body<BODY bgcolor="#ffffff" topmargin="0" leftmargin="0" SCROLL="NO">
Fullscreen (script)
Palavras chave: fullscreen, script 0 comentáriosEste "script" permite que a a página onde ele se encontra, se abra numa janela sem barras de ferramentas. Apesar de não ser aconselhável, é capaz de interessar.<head>
<script language="javascript">
window.open("nome_da_página.html","","fullscreen,channelmode,scrollbars");
</script>
</head>
Parágrafos: distância (css)
Palavras chave: css, parágrafo 0 comentáriosQuem dita as regras para este espaçamento é a propriedade margin. Juntámos também o espaçamamento de linha (line-height).p {
line-height:200%;
margin: 40px 0 40px 0;
}
Background (css)
Palavras chave: background, css 0 comentáriosOpções de formatação de fundo de página, para css: * background-color:
1. código hexadecimal: #FFFFFF
2. código rgb: rgb(255,235,0)
3. nome da cor: red, blue, green...etc
4. transparente: transparent
* background-image:
1. URL: url(caminho/imagem.gif)
* background-repeat:
1. não repete: no-repeat
2. repete vertical e horizontal: repeat
3. repete vertical: repeat-y
4. repete horizontal: repeat-x
* background-attachment:
1. imagem fixa na tela: fixed
2. imagem "rola" com a tela: scroll
* background-position:
1. x-pos y-pos
2. x-% y-%
3. top left
4. top center
5. top right
6. center left
7. center center
8. center right
9. bottom left
10. bottom center
11. bottom right
Listas (css)
Palavras chave: css, listas 0 comentáriosSão estas as opções para formatação de listas em css:ul {
list-style-image:
1. none
2. url(caminho/marcador.gif)
list-style-position:
1. outside: marcador fora do alinhamento do texto
2. inside: marcador alinhado com texto
list-style-type:
1. none: sem marcador
2. disc: círculo (bolinha cheia)
3. circle: circunferência (bolinha vazia)
4. square: quadrado cheio
5. decimal: números 1, 2, 3, 4, ...
6. decimal-leading-zero
7. lower-roman: romano minúsculo i, ii, iii, iv, ...
8. upper-roman: romano maiúsculo I, II, III, IV, ...
9. lower-alpha: letra minúscula a, b, c, d, ...
10. upper-alpha: letra maiúscula A, B, C, D, ...
11. lower-greek
12. lower-latin
13. upper-latin
14. hebrew
15. armenian
16. georgian
17. cjk-ideographic
18. hiragana
19. katakana
20. hiragana-iroha
21. katakana-iroha
padding: 0px 0px 0px 0px */ distâncias /*
}
Assinar:
Comentários (Atom)