Manual de HTML - Introdução

"Manual do HTML", será mais um big tutorial, mas desta vez um pouco diferente dos outros dois já postados cá no blog. Este, vai ser um big tutorial, completamente teórico; com tudo o que vocês precisam de saber sobre HTML e CSS, e vai ser muito bom, para os iniciantes.

Novo Design

Como devem ter reparado, o blog esteve fechado nas últimas horas, para mudança de design. As cores são as mesmas do anterior (visto que, me apaixonei por elas *-*), já a estrutura é um pouco diferente e mais organizada.

Todos os afiliados, que já não tinham o Blog Html e Css nos seus afiliados / parceiros, foram retirados, portanto, há três vagas para afiliação.

Lá em cima, acrescentei um menu de imagens (por baixo do menu principal do blog), onde tem uma secção em que vai dar a uma página, com um pequeno texto sobre mim, outra onde brevemente dará acesso ao meu portofólio online de designs, e finalmente na última secção, todas as semanas serão "dedicadas" a um blog diferente, que eu admire (não vale a pena pedir, pois sou eu que escolho).

Todas as páginas do blog, foram revistas e reorganizadas. Eu gostei muito do resultado final, espero que gostem e que comentem o que acharam *-* !

19-11: Decidi acrescentar a este design, um rodapé totalmente desenhado e codificado por mim. A secção status, será atualizada várias vezes, com pequenas frases, que me apeteça escrever, ou pequenos estados de como me sinto, para vocês lerem.

Blogs / Sites... Que Eu Gosto!

Olá visitantes, antes demais, peço mesmo imensas desculpas, pela falta de atualização do blog, mas como já disse anteriormente, não tenho tido muito tempo por causa da escola.

Este post, vai ser um post um pouco fora do normal, onde vou falar e indicar blogs que visito diariamente e que gosto.

CAMILA'S DESIGNS — camilasdesigns.blogspot.pt
Este é um blog, a que eu tenho muito carinho, tanto a ele, como à sua administradora, Camila Santos. Apesar de ele agora estar fechado, para alteração de design, o mesmo é um blog com muitos tutoriais e materiais e todo muito bem organizado. Foi nele, que me inspirei para criar o Html e Css.

THINGS TO HELP YOU — things-to-help-you.com
Este é um tumblr, que eu considero muito bom mesmo, e agradeço à Anna e à Débora, por todo o trabalho e carinho que têm por nós (visitantes do tumblr). Tem bastantes tutoriais e materiais, e tudo muito organizado e bem explicado.

DAFONT — www.dafont.com
Este é um site, com milhares de fontes / tipos de letra, disponíveis para download. Tem todas as fontes que possam imaginar, desde as mais simplistas, às mais compostas.

I RICARDO DESIGNER — iricardodesigner.blogspot.com
Este é mais um blog, com imensos tutoriais e materiais, mas principalmente materiais disponíveis para download.

Espero que tenham gostado deste post, de indicações de blogs. Estou a pensar, em fazer mais posts deste tipo. Digam o que acham, pelos comentários.

Personalização do Tool Tip

Olá, meus visitantes :3 ! Tenho andado, um pouco ausente do blog, devido à escola.. Neste post, vou ensinar a personalizar o ToolTip do blog.

No painel, vai a design → editar html → aperta F3, procura por </head>, e acima dessa tag, cola o código abaixo.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/>

Agora procura, pela tag ]]<>/b:skin>, e acima dessa tag, cola o código abaixo.

div#qTip {
padding: 6px;
display: none;
background: #Cor_de_Fundo; border-radius: 5px;
font-family: Trebuchet MS;
color: #Cor_da_Fonte;
font-size: 12px;
word-spacing: 3px;
position: absolute;
z-index: 1000;}

E pronto, o ToolTip, aparecerá quando passares com o mouse num link (ou no leia mais), e nos afiliados, caso coloques na tag, title="nome". Espero que tenham gostado, e se tiverem dúvidas não hesitem em perguntar.

Concurso do Blog: Vencedor + Prémio

Finalmente, o Concurso do Blog terminou (com seis inscrições), e está na altura de revelar que foi o vencedor do mesmo.

Para descobrir o vencedor, eu numerei todos os participantes, de 1 a 6, pela ordem de inscrição no concurso, e depois usei o site Random.Org, para gerar um número de 1 a 6 aleatoriamente; e o número que calhou, foi o número 4, ou seja, o Mateus Silva (print).

Ora bem, o prémio, será um Tema PSD, totalmente codificado por mim, como já tinha sido dito. O prémio será, entregue ao Mateus, ainda esta semana.

Tema PSD #02 - Download

Olá meus visitantes *-*, finalmente voltei ao blog — confesso que já tinha saudades —, e neste post vou disponibilizar mais um Tema PSD, para download.

Como já devem ter reparado, o modelo das imagens dos posts, é muito parecido com o anterior, sinceramente não muda quase nada — sim eu consegui achar o PSD, que usava nas imagens —, obrigado TTHY.

•• Visualizar o Tema PSD
•• Download do Tema PSD
•• Download dos Tipos de Letra Usados

Ora bem, este Tema PSD, é bastante simples, espero que gostem, que usem e que comentem neste post, a dizer o que acharam.

Explicações + Avisos

Sim, eu sei que já não atualizo o blog, quase à um mês, mas tudo tem uma explicação; e eu também tenho algumas para vos dar. Como já vos tinha informado neste post, a minha escola começou, e eu tenho um horário mesmo muito horrível. No meu primeiro dia de aulas (dia 17/09), eu fui a meter a minha pen drive, num computador da escola, e graças a isso, tudo o que eu tinha lá foi perdido. Eu tinha lá, todos os meus designs, todo o meu trabalho na área do webdesigner nos últimos 4 anos.

Como devem calcular, eu perdi muita força para continuar a postar neste e nos outros meus blogs, alguns até fechei, e coloquei um aviso. Mas também, como devem calcular, eu não tenho coragem, para acabar com este blog, pois já me deu bastante trabalho e dores de cabeça.

Só para verem bem, eu até o PSD que usava em todas as imagens dos posts, aqui no blog, perdi. Mas pronto, agora só tenho de seguir em frente. Vou ver se começo a fazer o próximo design do blog, e em breve, muitas novidades aqui no blog. Peço desculpa, pela falta de atualização, mas os motivos, estão todos acima indicados, e espero que compreendam a minha posição.

Peço-vos, que tirem dúvidas, usando o Ask.Fm do blog, que façam pedidos de tutoriais e materiais e que comentem os posts do blog. Obrigado! *-*

Aviso - Leiam Por Favor

Olá pessoal :c,  hoje foi a minha apresentação da escola, e fiquei super surpreendido (pela negativa), quando vi o meu horário escolar. Eu estou, no segundo ano do Curso de Programação de Sistemas Informáticos (ou seja, 11º ano), e já sabia que o meu horário não ia ser muito fácil, mas nunca pensei que fosse assim tão mau. Como eu quero ter boas notas, terei de me aplicar desde o início; e por isso não conseguirei atualizar este blog muitas vez, mas eu vou fazer de tudo, para o atualizar pelo menos uma vez por semana. Eu estudo, em Coimbra, e depois das aulas, ainda tenho de vir para casa, e por isso, vou chegar a casa todos os dias por volta 19:30 (tirando a quarta-feira), e ainda tenho de estudar; por isso, estes primeiros dias, vão ser muito complicados. Eu até pensei, em fechar o blog por algum tempo, mas sei que tenho leitores que seguem e comentam o blog diariamente, e é por isso que não o vou fazer. Espero que compreendam a minha situação.

• Para verem um print do meu horário escolar, cliquem aqui.

Não tenho recebido quase comentários nenhuns aos posts do blog, espero que comentem, porque quando leio os comentários, sinto uma grande vontade de postar mais e mais. Obrigado a todos ♥!

Big Post #01 - Html e Css

Olá meus visitantes lindos *-*, aqui estou eu novamente, e hoje para postar um Big Post. Tenho recebido, muitos pedidos de materiais (por ask, e por formulário de contato), então decidi juntar todos os pedidos num post, e fazer assim um Big Post, com tudo o que me têm pedido.

Base Simples Template Viagem - Download

Hey meus doces, um visitante do blog, pediu-me através do formulário de contato, para disponibilizar uma Base Simples do Template Viagem, editado e codificado para download. Então, eu vou disponibilizar a que eu usava para fazer antes os meus designs, só que alterada e melhorada; e abaixo, vou explicar tudo o que precisam de saber sobre ela. A partir desta base, e com todos os tutoriais disponibilizados aqui no blog, podem fazer os vossos designs.

•• Ver a Base

•• Download da Base (Template Viagem)

Esta base, contém:

• Tipo de Letra Personalizado
• Fundo do Blog Personalizado
• Links do Blog Personalizados
• Títulos dos Posts Personalizados
• Títulos das Miniaplicações Personalizados
• Subscrever: Mesangens Atom Ocultado

Ora bem, para carregares a base para o teu blog, vai a Modelo → Efetuar Cópia de Segurança / Restaurar → Escolher Ficheiro e seleciona a Base HTML que eu disponibilizei acima.

Se tiveres muitos conhecimentos sobre Html e Css, podes alterá-la completamente, se não tiveres, lê o Big Tutorial: Como Fazer Um Template, já postado cá no blog. Só te peço, que se usares a base, dês os créditos a este blog, em algum lugar da base.

Peço-vos por favor, que participem no Concurso do Blog, saibam de tudo lendo este post.

Concurso do Blog Html e Css

3 de setembro: hoje faço 16 anos :$

Hey :3, antes de ir para a Figueira da Foz, durante 15 dias, eu já vos tinha dito que quando voltasse, iria fazer um concurso. E aqui estou eu, para vos explicar como tudo vai funcionar.

Primeiramente, quem quiser participar no concurso, tem de pôr gosto na página do facebook do blog, e ser seguidor do blog. E, para "ativar" a sua participação, tem que mandar um comentário neste post com a estrutura abaixo indicada.

Nome:

Link do Facebook:

E pronto, basta fazer esses três passos, para estar inscrito no concurso do blog Html e Css. O prémio será um Template PSD, já codificado, completamente exclusivo. Deixo-vos os links, abaixo.

•• Seguir o Blog

•• Página do Facebook

Aviso 1: Se não cumprirem todos os passos acima (meter gosto na página do facebook, seguir o blog, e comentar o post), não serão sujeitos ao prémio do concurso.
Aviso 2: Se o concurso, não tiver pelo menos, 6 inscrições, será cancelado.
Aviso 3: O concurso, acaba dia 16 de Outubro.

Explicações + Novo Design

Olá meus doces visitantes *-*, antes demais quero-vos pedir imensas desculpas, pela falta de atualização do blog, mas estive mesmo muito ocupado, a resolver uns assuntos pessoais e a fazer o novo design do blog. Isso mesmo, novo design do blog! E vocês dizem: "Mas Zé, ainda no outro dia mudas-te o design do blog". Sim é verdade, apesar de todos os comentários a dizer que o tema anterior estava lindo, eu não gostava muito dele; e por isso resolvi fazer um novo.

Eu posso-vos dizer, que adoro, este tema. Acho que está mesmo fofo, tal como eu gosto. E vocês? O que acharam deste novo visual?

Novo Design Online

Depois de algum tempo com o mesmo design online, resolvi mudar o design do blog por vários motivos (que vocês sabem quais são). Eu sei que disse, que ia manter as cores e apenas mudar a estrutura, mas não resisti a estas. Eu acho que não está muito mau, mas mesmo assim não o vou deixar online por muito tempo, até porque já estou a começar a fazer o próximo design. Espero que gostem, e fico a aguardar a vossa opinião.

Usar Fontes do Site DAFONT.COM no Blog

Olá *-*, se costumam seguir o meu blog pessoal, já devem saber que eu consegui ter internet, no apartamento, onde estou a passar férias. Ora bem, neste post, a pedido de um visitante do blog, vou ensinar como usar fontes do site Dafont.Com no blog. É bastante fácil e útil, para quem gosta de evoluir.

• Primeiro acede ao site DaFont.Com, clicando aqui. 
• Depois escolhe o tipo de letra que queres usar no blog.
• Depois de teres escolhido o tipo de letra, faz download dele, e extrai-o da pasta.
• Finalmente, faz o upload dele, para aqui (ficando em formato .ttf).

Para fazeres o upload dele, para o site acima indicado, tens que ter uma conta, no Tumblr.Com .

• Depois, copia o código abaixo, cola-o no HTML do teu blog (antes de ]]></b:skin>) e altera-o.

@font-face {font-family:nome do tipo de letra; src: url(link do upload do tipo de letra) format("truetype"); }

EXEMPLO

@font-face {font-family:Limousines; src: url(http://static.tumblr.com/h7lhpxe/kupmrkrig/champagne___limousines.ttf) format("truetype"); }

Bem, espero que tenham percebido tudo, se tiverem dúvidas, não hesitem em perguntar, usando o Ask.Fm do blog. Peço-vos, também que sigam o blog, clicando aqui, e que metam gosto na página do facebook do blog, clicando aqui.

Pessoal, já estou a preparar o novo design do blog, visto que este já está online à algum tempo. No novo design, as cores vão ser as mesmas, mas em tons um pouco mais claros; e como é óbvio a estrutura vai mudar.

Vou de Férias - Figueira da Foz

Hey pessoal, hoje não venho aqui postar nenhum tutorial, mas sim dar uma notícia um pouco triste. Eu vou para a Figueira da Foz, durante 15 dias, passar férias. E normalmente, lá não costumo ter internet — com muita pena minha —, e por isso, é com tristeza que vos digo que só voltarei a postar tutoriais no início de setembro. Eu juro, que vou tentar ligar-me à internet de algum vizinho, ou até mesmo pedir a palavra-passe a alguém; e caso isso aconteça eu farei um post a avisar. Mas mesmo que consiga, peço-vos que não esperem muita atualização no blog nos próximos 15 dias, visto que vou de férias, e tenho de aproveitar.
Peço-vos, que divulguem o blog, para eu ganhar mais uns seguidores *-*, porque quando eu voltar da Figueira, farei um concurso aqui no blog, em que o prémio será um template totalmente exclusivo. Visitem o meu blog pessoal, para ficarem a saber de tudo o que faço ( não que seja assim muito interessante :x ).

Tema PSD #01 - Download

Olá *-*, depois de ter postado as três partes do Big Tutorial sobre editar e codificar no blog um Tema PSD, achei por bem disponibilizar para vocês um Tema PSD que já fiz à algum tempo. O tema, é bem simples e organizado.

Eu vou só disponibilizar o Tema PSD, para serem vocês mesmos a fazerem a codificação do mesmo. Usem o Big Tutorial: Editar e Aplicar um Tema PSD no blog; alterem apenas os valores necessários. Podem ver o tema, clicando aqui.

•• Tema PSD (Edição)

•• Fontes Usadas no Tema PSD

Podem alterar as cores, e fazer todas as alterações no tema, só vos peço que não retirem os créditos do rodapé. Se tiverem dúvidas, não hesitem em tirá-las na aba "Pergunta" do menu principal do blog.

Big Tutorial: Editar e Aplicar Tema PSD - Parte 3

Hey visitantes *-*, nesta última parte deste Big Tutorial sobre editar e aplicar no blog um Tema PSD, vamos fazer as últimas alterações na codificação do Tema PSD.

Nesta última parte do big tutorial, vou disponibilizar o Menu PSD, ensinar a alterá-lo, ensinar a mapeá-lo e ensinar a posicioná-lo no blog, com CSS.

Eu sei que há outras formas de mapear o menu, mas eu vou ensinar, da forma que eu acho mais simples, e para não ser tão confuso, vou disponibilizar todos os códigos, e ensinar a colocá-los.

Big Tutorial: Editar e Aplicar Tema PSD - Parte 2

Hey visitantes *-*, aqui estou eu novamente com a segunda parte do Big Tutorial sobre editar e aplicar no blog um Tema PSD. Nesta parte, vou explicar toda a Codificação do Tema HTML, que eu disponibilizei na primeira parte.

Para isso, precisas de estar muito atento, para não apagares nenhum código que seja necessário ao teu tema. Para ficar tudo explicadinho, eu nesta parte (a parte da codificação e alteração dos códigos do tema), resolvi tirar prints a todo o HTML da personalização do blog e explicar os vários códigos. Claro que me deu trabalho, mas sem dúvida, vocês merecem.

Big Tutorial: Editar e Aplicar Tema PSD - Parte 1

Hey pessoal *-*, como sabem, eu estive algum tempo sem postar aqui no blog; pois estive a preparar um Big Tutorial de três partes, sobre editar e aplicar no blog um Tema PSD. Neste big tutorial, vou disponibilizar um Tema PSD, feito por mim e um Tema Base HTML, codificado por mim, com ajuda de outros blogs. Vou explicar tudo sobre o que têm de fazer, para o aplicar no tema que eu disponibilizo e como alterá-lo no Photoshop.

Download do Photoshop CS6 + Ativação

Olá pessoal *-*, hoje não venho postar nenhum tutorial, mas sim disponibilizar o link de download do Photoshop CS6, e como instalá-lo/ativá-lo.

Como vocês sabem, os produtos da Adobe, só estão disponíveis para download, apenas na versão de avaliação, que expira após 30 dias de uso. Neste tutorial, eu vou ensinar uma forma, muito fácil de ativar o Photoshop, ou seja, colocá-lo para "sempre" no vosso computador.

Primeiro, terás de fazer o download do Photoshop, clicando aqui. Depois de teres o Photoshop no teu computador, terás de descarregar o Adobe CS6 Activator. Depois de o teres descarregado, tens de extrair o arquivo (botão direito > extrair aqui), para isso, tens de ter o WinRAR instalado no teu computador, se não tiveres clica aqui.

E pronto, depois é só abrires o Adobe CS6 Activator, e clicares em cima do retângulo que te aparece; espera que no canto inferior esquerdo, apareça um botãozinho a dizer OK, e pronto, o teu Photoshop está ativado.