No post anterior, vocês viram como personalizar a nova guia do Google Chrome. Agora vou mostrar como criar sua própria página inicial para qualquer navegador usando HTML, Css e JavaScript, e com esse tutorial será possível para você criar qualquer coisa em html, como por exemplo, um esboço de um layout/template, testar códigos e o que mais quiser, porque é tudo feito como se você estivesse codificando algum layout, e o melhor é que nem ter internet é necessário.
Primeiro, você precisará de um editor de html. Eu uso e recomendo o Notepad++.
Crie uma pasta na área de trabalho do seu pc e dentro dela coloque todas as imagens que pretende usar. Eu estou usando essas (os ícones foram encontrados no site Flaticon, só personalizei, com exceção dessa rosa, que uso como favicon):
A maneira como faço aqui é para deixar mais fofo, mas existem páginas mais minimalistas, mais parecidas com a página inicial com a qual a gente está mais acostumado, tipo essa (onde encontrei os códigos para estruturar a homepage e da data):
Abra o editor de html e cole isso:
<?xml version="1.0" encoding="utf-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-Br" lang="pt-Br"> <head> <title>Digite um título</title> <link rel="shortcut icon" href="favicon"> <META HTTP-EQUIV="Content-Type" CONTENT=""text/html; CHARSET=utf-8" /> <style type="text/css"> Aqui vão os códigos que personalizam a aparência de tudo (CSS) </style> Aqui vão os scripts (se houver) </head> <body> Aqui vai a parte visível dos códigos que receberam a personalização CSS </body> </html>
Esse código acima será nossa estrutura. Depois de colar no editor de html, salve como um arquivo html na mesma pasta das imagens.
Vamos começar colocando o background e a parte do 'geralzão', o 'corpo' ou body (na parte do CSS):
body {
background: url('nomedaimagem.jpg') no-repeat top center;/*plano de fundo*/
background-size: cover;/*tamanho do plano de fundo - vai ocupar a tela toda*/
color: #92dbd2;/*cor padrão para qualquer texto*/
text-align: justify;/*alinhamento justificado para textos*/
}
Viram a parte nomedaimagem.jpg? Toda vez que você criar um documento HTML e quiser inserir uma imagem sem hospedar na internet, coloque-a na mesma pasta em que o documento estiver, e no lugar em que iria a URL/link, digite o nome da imagem seguido pelo formato. Por exemplo, a imagem que eu uso tem o nome bon4 e é do tipo JPG, então ficaria assim:
background: url('bon4.jpg')... O mesmo vale para o favicon lá no início do primeiro código; aqui usei a rosa com o nome rose e a imagem é no formato gif, então: href="rose.gif"
Se você preferir, claro, pode usar uma imagem hospedada na internet e substituir onde for para usar imagens nos códigos com o link dela, mas se estiver sem internet, elas não vão aparecer; por isso recomendo colocar só os nomes para que com ou sem internet você visualize as imagens na edição.
Podemos adicionar data, como na screenshot. Antes de /style, cole:
#date {/*data*/
margin: 30px 10px 0px 1110px;/* esses valores posicionam com relação as distancias do topo, direita e esquerda, basta alterar como preferir*/
font-family:Marguerite;/*use o nome de qualquer fonte instalada em seu computador*/
letter-spacing:0px;
font-size:14px;/*tamanho da fonte*/
width: 70px;/*largura do espaco ocupado pela data*/
color:#efaec7;/*cor do texto*/
font-style:normal;
/*essa parte vai girar a data*/
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
#month {/*mes*/
font-family:Marguerite;
letter-spacing:0px;
font-size:17px;
color:#efaec7;
font-style:normal;
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
Aqui eu quis alinhar a data dentro do coraçãozinho rosa ^^ Edite conforme quer que apareça aí na sua homepage. Agora, depois de <body>, vamos colar o código que faz a data aparecer:
<div id="date">
<script language="Javascript">
var dayName = new Array ("Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado")
var monName = new Array ("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro")
var now = new Date
document.write(""+now.getDate() +". " + dayName[now.getDay()] + ", <span id=month>" + monName[now.getMonth()] + "")
</script>
</div>
Salve seu documento (Ctrl+S) para ver como fica. Clique no arquivo HTML que criou na pastinha com as imagens para abri-lo no navegador e ver como está ficando. Quando fizer alterações e quiser ver o resultado, basta atualizar a página no navegador.
Continuando...
Os navegadores geralmente vêm com uma caixa de pesquisa na homepage certo? Vamos adicionar uma como faríamos em um blog. Antes de /style, cole isso:
#search {
width: 300px; /* largura caixa de pesquisa */
height: 35px;/* altura caixa de pesquisa */
float: right;
text-align: center;
margin-top: 6px;
margin-right: 211px;
/* background caixa de pesquisa */
background: transparent;
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
#search-box {
margin-top: 70px;/*distancia do topo*/
border:0px;
background: transparent;/*plano de fundo - voce pode usar uma imagem ou cor se preferir)*/
text-align:center;
color:#90dbd4;
font-family: 'Marguerite';
font-size: 20px;
}
Mude os valores em margin-top/right para posicionar com relação ao topo/direita. Novamente eu usei o código para fazer 'girar' a caixa de pesquisa e deixá-la alinhada sobre o macaron verde da imagem de fundo que uso.
Antes de /body, cole o código que faz a pesquisa aparecer:
<form id='search' method='get' action="http://www.google.com/search" name='searchForm' style='display:inline;'> <input id='search-box' name='q' onblur='if (this.value == "") this.value = "Search...";' onfocus='if (this.value == "Search...") this.value = "";' size='28' type='text' value='Search...'/></form>
Na url do google.com/search, você pode usar a de outro site de buscas que prefira, tipo bing. Salve o documento e visualize para ir editando.
Vou usar esse tutorial para criar um menu que aparece ao passar o mouse no gif do ursinho. Você pode usar qualquer tutorial de menus para adicionar um que goste :3
Antes de /style, cole isso:
#me-nu { /* area geral */
margin: 0 20px 0 10px;
position: relative;
width: 210px;
z-index: 100;
}
#me-nu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#me-nu li { list-style-type: none; }
#me-nu a { /* links */
color: #d3fbfb;
font-size: 17px;
text-decoration: none;
font-family: 'Bubblegum';
text-shadow: 1px 2px 3px #42c3d6;
}
#me-nu a:hover {/*links ao passar o mouse*/
color: #fee;
text-shadow: 1px 2px 3px #fcc;
}
#me-nu .palavra {/* palavra menu */
padding: 5px 0;
text-align: center;
display: block;
position: absolute;
width: 210px;
top: -110px;
left: 10px;
}
#me-nu ul.palavra ul li {/* itens ocultos */
padding: 0 0 5px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
/* links ocultos */
#me-nu .oculto {
display: block;
padding: 0 10px;
position: relative;
top: 10px;
height: 0;
overflow: hidden;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#me-nu ul.palavra:hover .oculto {
height: 200px;
}
E antes de /body, adicione o que faz o menu aparecer:
<div id="me-nu">
<ul class="palavra">
<li><img src='url da imagem que oculta o menu'/><ul class="oculto">
<li><a href="#" target='_blank'>Link</a></li>
<li><a href="#" target='_blank'>Link</a></li>
<li><a href="#" target='_blank'>Link</a></li>
<li><a href="#" target='_blank'>Link</a></li>
</ul>
</li></ul>
</div>
Substitua a imagem onde está indicando acima (aqui usei o gif do ursinho [<img src='teddy2.gif'/>]), e cada "#" pelo endereço de um link, mudando o nome onde diz Link.
Lembra daquele efeito de explosão de brilhos ao clicar? Vamos adicioná-lo à nossa homepage! Antes de /head, cole isso:
<script type='text/javascript'>
// <![CDATA[
var sparks=80; // how many sparks per clicksplosion
var speed=33; // how fast - smaller is faster
var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
var colours=new Array('#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff');
//
/****************************
* Clicksplosion Effect *
* (c) 2012 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var intensity=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var timers=new Array();
var swide=800;
var shigh=600;
var sleft=sdown=0;
var count=0;
function addLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}
addLoadEvent(clicksplode);
function clicksplode() { if (document.getElementById) {
var i, j;
window.onscroll=set_scroll;
window.onresize=set_width;
document.onclick=eksplode;
set_width();
set_scroll();
for (i=0; i<bangs; i++) for (j=sparks*i; j<sparks+sparks*i; j++) {
stars[j]=createDiv('*', 13);
document.body.appendChild(stars[j]);
}
}}
function createDiv(char, size) {
var div, sty;
div=document.createElement('div');
sty=div.style;
sty.font=size+'px monospace';
sty.position='absolute';
sty.backgroundColor='transparent';
sty.visibility='hidden';
sty.zIndex='101';
div.appendChild(document.createTextNode(char));
return (div);
}
function bang(N) {
var i, Z, A=0;
for (i=sparks*N; i<sparks*(N+1); i++) {
if (decay[i]) {
Z=stars[i].style;
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity[N]);
if (Xpos[i]>=swide || Xpos[i]<0 || Ypos[i]>=shigh+sdown || Ypos[i]<0) decay[i]=1;
else {
Z.left=Xpos[i]+'px';
Z.top=Ypos[i]+'px';
}
if (decay[i]==15) Z.fontSize='7px';
else if (decay[i]==7) Z.fontSize='2px';
else if (decay[i]==1) Z.visibility='hidden';
decay[i]--;
}
else A++;
}
if (A!=sparks) timers[N]=setTimeout('bang('+N+')', speed);
}
function eksplode(e) {
var x, y, i, M, Z, N;
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
N=++count%bangs;
M=Math.floor(Math.random()*3*colours.length);
intensity[N]=5+Math.random()*4;
for (i=N*sparks; i<(N+1)*sparks; i++) {
Xpos[i]=x;
Ypos[i]=y-5;
dY[i]=(Math.random()-0.5)*intensity[N];
dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
decay[i]=16+Math.floor(Math.random()*16);
Z=stars[i].style;
if (M<colours.length) Z.color=colours[i%2?count%colours.length:M];
else if (M<2*colours.length) Z.color=colours[count%colours.length];
else Z.color=colours[i%colours.length];
Z.fontSize='13px';
Z.visibility='visible';
}
clearTimeout(timers[N]);
bang(N);
}
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)=='number' && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min-7;
shigh=sh_min-7;
}
function set_scroll() {
if (typeof(self.pageYOffset)=='number') {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
// ]]>
</script>
Salve e visualize cada clique que der na página. Para usar scripts, você pode inserí-los na codificação normalmente, por exemplo, <script src='url-do-script.js' type='text/javascript'></script>, ou pode pegar o arquivo javascript e usá-lo entre <script> e </script> caso queira ver resultados sem estar conectado à internet.
Por último, vamos criar um menu para as redes sociais. Vou usar esse tutorial para posicioná-lo. Cole antes de /body:
<div style="position:absolute;width:230px; margin-left: 530px; bottom: 0px; background: rgba(254, 134, 180, 0.68); padding: 5px 0px 0px 10px; border-radius: 10px 10px 0px 0px;"> <a href='#' target='_blank'><img src='facebook.png' width='20px'/></a> <a href='#' target='_blank'><img src='twitter.png' width='20px'/></a> <a href='#' target='_blank'><img src='google-plus.png' width='20px'/></a> </div>
Em que...
Width = largura total;
margin-left = distancia da esquerda;
bottom = deixa o menu na parte inferior da tela;
background = cor de fundo (para adicionar um pouquinho de transparência use cores RGBA);
border-radius = arredonda as bordas.
Substitua "#" pelos links de suas redes sociais. Salve o documento HTML.
Pronto! Só falta uma coisa, definir como página inicial. Nas configurações do seu navegador, procure pela que define a página inicial. (No Chrome essa opção fica em Configurações - Aparência // No Firefox, fica em Opções - Geral// No Microsoft Edge, clique nas "..." - Configurações - Configurações Avançadas - Exibir configurações avançadas - Ative mostrar botão de página inicial e preencha a caixinha de texto abaixo dessa opção com o link da home page).
Copie a URL/link que aparece na barra de endereços no seu navegador do seu documento html (algo como file:///C:/Users/seunome/Desktop/nome-da-pasta-onde-esta-o-arquivo-html/arquivo.html) e cole na opção de definir página inicial.
Crie quantas páginas quiser do jeito que mais gostar!!! :)
0 Comentários
Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.
Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.
Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.
Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart