Criação de Site Pessoal - Programação web - Clube do Hardware
Por Cora Coralina, 8 de janeiro de 2013 em Programação web
Cora Coralina 0
Tenho procurado informações pela internet mesmo para tentar aprender um pouco de HTML e CSS. Minha intenção é desenvolver um site pessoal de página única com menus: Home, Sobre, Galeria e Contato. Na <div> galeria obviamente irei necessitar de algo em flash talvez.
Gostaria mesmo de fazer um curso... Mas não tenho recursos para pagar um por enquanto...
O que vocês me recomendam? Sou iniciante... Estou com algo muito básico montado (tudo desenvolvido em bloco de notas com HTML e CSS) e vejo que necessito melhorar a interface...
Alias, qual a diferença entre HTML e HTML5? E qual a diferença entre CSS e CSS3?
Alguma ajuda? Alguma indicação de site que possa me ajudar? Ou alguém de boa vontade que possa me dar dicas?
Olá Cora Coralina,
Vamos por partes, como já dizia nosso famoso jack!
Você não precisa fazer um curso.. a internet dispõe muitas informações.. basta saber procurar!
A principal diferença do HTML e HTML 5 é a adição de novos recursos.. como por exemplo adição de novos elementos, novos atributos, total suporte ao CSS3, integração com vídeos e audios.. graficos em 2D e 3D, e etc..
Como a maioria( senão todos) ainda não suportam totalmente os recursos do html 5.. seu uso fica um pouco limitado.. mas isso não quer dizer que não possa usare até recomendo para certas ocasiões.
para saber mais sobre o HTML 5 veja este site: http://www.w3schools.com/html/html5_intro.asp
A distinção entre CSS e CSS 3 está nos novos atributos e a possibilidade de animações em keyframes.. Com css3 é possivel fazer coisas que antes só com action script( flash) daria para fazer.
Portanto, podemos abolir o flash pois é um plugin muito pesado..e trava constantemente. além disso, depende que, o usuário o tenha instalado..
Sobre onde estudar.. existem inúmeros sites bons de video aulas como por exemplo:
Sites de apostilas
http://www.w3schools.com(inglês)
Existe outra dúvida... Estou usando bloco de notas para fazer as marcações html e os estilos css. E no momento em que renderizo a página o Internet Explorer 9 a interface não segue os comandos definidos no bloco de notas. Ou seja, um dos principais problemas são as colunas desalinhadas. O que posso fazer para solucionar o problema?
Recomendo você utilizar uma IDE boa para desenvolver seus códigos. alguns exemplos:
Eclipse for php( helios)
Sobre o erro.. o IE é um pouco problemático... no caso é só criar um css específico para o ie e coloca-lo em um comentário condicional.
uma dica é colocar no css do ie somente aquilo que quer arrumar no ie.
Valeu pela dica dos programas. Antes de baixar o Komodo tive contato com o Dreamweaver. Gostaria de confirmar se o Komodo, assim como o Dreamweaver, possui visualizador de interface. Ao mesmo tempo em que se programa é possível visualizar as entidades de interface no Komodo?
Obrigada de novo =D.
Tanto como eclipse, notepad++ e komodo usam apenas o editor em código. De qualquer forma sugiro que abandone a ideia de fazer visualizar no programa.. geralmente eles dão resultados diferentes do que no navegador. A melhor maneira de visualizar é no navegador mesmo.
Dentro desses que citei, o eclipse dá de 10 a zero. sem contar que podes instalar extensões. Atualmente uso a versão mais recente do Eclipse(juno) com o plugin PDT que serve para o desenvolver em php.
A melhor coisa você já está fazendo que é praticar seus códigos! A diferença é usar uma IDE só para agilizar o que você já sabe.. bem diferente do dreamweaver que FAZ as coisas por você e incentiva os usuários a dependerem de seus recursos.
:/ Nem o IE9, nem o Mozilla Firefox estão renderizando minha página corretamente. Tentei inserir código CSS, mas mesmo assim nada... :/. Será que estou fazendo todo errado?!
Bom nesse caso, recomendo que poste aqui o código que está tentando fazer os navegadores interprertarem.
Ps: Não esqueça de usar a tag CODE. Podes encontrar no painel de responder em modo avançado o botão é com o simbolo de "# " entre o QUOTE e o SPOILER
coloquei entre as tags <head></head> o seguinte:
@import "../_Resource/Css/topo.css";
@import "../_Resource/Css/conteudo.css";
@import "../_Resource/Css/coluna_relacional.css";
@import "../_Resource/Css/coluna_menu.css";
@import "../_Resource/Css/rodape.css";
@import "../_Resource/Css/outros.css";
@import "../_Resource/Css/hacks_ie6.css";
@import "../_Resource/Css/hacks_ie7.css";
Mas não adiantou muita coisa :/.
Achei um outro link que usa outros tipos de Hacks:
http://www.cssnolanche.com.br/css-hacks-para-ie-firefox-opera-safari-konqueror/
Se puderem dar uma olhada .
Obrigada de novo =D
Editado 8 de janeiro de 2013 por dif
Usar a tag CODE. Ela faz parte das regras.
experimente trocar o import pelo caminho completo. exemplo:
<link rel=StyleSheet href="arquivo.css" type="text/css" media="all">
faça isso com todos seus arquivos css externos.
Outra coisa, não recomendo você picotar seu css como está fazendo.. isso leva mais tempo para ser lido.. pois ele teria que carrega cada arquivo.. junte todos os css em um só que ficará melhor.. para questão de organização adote o uso dos comentários dentro do css.
já para o IE está certo em utilizar comentários condicionais. Lembre-se de colocar apenas os atributos que quer que o IE renderize. deixe o resto para o CSS principal.
seria interessante você postar o código html pode haver erros de sintaxe.. fazendo que o navegador não renderize completamente
Agrupei todos os CSS em uma única referência externa. E para a renderização coloquei desta forma agora:
<link rel=StyleSheet href="css/layout.css" type="text/css" media="all">/_Resource/Css/layout.css";
<link rel=StyleSheet href="layout.css" type="text/css" media="all">/_Resource/Css/hacks_ie6.css";
<link rel=StyleSheet href="layout.css" type="text/css" media="all"> /_Resource/Css/hacks_ie7.css";
Mas não funcionou... Será que fiz alguma besteira?!
isso não existe. retire a parte de: /_Resource/Css/layout.css";
Acredito que você precisa estudar um poquinho mais sobre CSS externo, sintaxe html da chamada.. e etc.
Outra coisa que está errada:
<link rel=StyleSheet href="layout.css" type="text/css" media="all">
se você já está chamando um css externo... não há necessidade de colocar o <style>
se estas usando media="screen", não use media="all" juntos.. ou é um ou é outro..
tente deixar desta forma:
<link rel=StyleSheet href="css/layout.css" type="text/css" media="all">
<link rel=StyleSheet href="layout_ie6.css" type="text/css" media="all">
<link rel=StyleSheet href="layout_ie7.css" type="text/css" media="all">
note que eu nomei os css de acordo com o comentário condicional.. nesse caso, como se trata de navegadores diferentes.. podes usar mais de um css.
Lembre que no layout.css vai TODO seu css. e no layout_ie6.css contém apenas as linhas de atributos para arrumar o layout para o IE 6.. e por aí vai..
Recomendo postar seu código HTML para obter respostas mais eficientes.
Aí vai o HTML:
<title>Aba Exemplo • Portifolio</title>
<meta name="description" content="Meta Tags - assunto">
<meta name="keywords" content="palavras">
<meta name="reply to" content="emailexemplo@gmail.com">
<section id="menu centro">
<li><a href="#index.html">home</span></a></li>
<li><a href="#sobre.html">sobre</span></a></li>
<li><a href="#galeria.html">galeria</span></a></li>
<li><a href="#contato.html">contato</span><a/></li>
<div id="principalA">
<a name="home.html">Home</a>
<p>All human beings are born free and equal in dignity and rights.
spirit of brotherhood. ll human beings are born free
spirit of brotherhood.ll human beings are born free
<a name="sobre.html">Sobre</a>
spirit of brotherhood. nd should act towards one another in a
<a name="galeria.html">Galeria</a>
<a name="contato.html">Contato</a>
<h4>Copyright © Autor </h4>
Espero que não esteja tão ruim assim... rs...
Como seu código é enorme, adicionar a tag SPOILER é uma boa pedida!
Então. os erros estão nas chamadas do CSS como já comentei no meu post #12. ( importante) reforçando:
/_Resource/Css/layout.css"; da chamada dos CSS.
Fora isso ainda existe mais um erro e uns detalhes:
não podes por espaço ali. Junte as palavras ou elimine uma.
Outra coisa importante, é que não se usa dois ID, mas class pode ter mais de uma.
Está faltando o DOCTYPE do HTML5 para isso adicione esta linha logo acima de tudo:
e falta o charset que podes adicionar esta linha:
<meta charset="UTF-8"> pode ser adicionado dentro de <head>
A respeito do charset, ao invés de ISO-8859-1, utlize o padrão universal é UTF-8 e acostume-se a usar sempre... evita muitos problemas de caracteres.. ainda mais se usar um banco de dados!
Nossa! que legal! Muito obrigada mesmo!!!
Só o fato de acertar os códigos já fez os navegadores (IE9 e Firefox) lerem a interface do mesmo jeito!
- Por que será que o IE9 não lê o meu "favicon" na abinha la de cima? Só o Firefox está fazendo isso.. rs...
- De acordo com sua explicação (dif) tentei alterar as ID para CLASS, mas acontece que os menus perdem as propriedades visuais do CSS, mesmo estando referenciado a partir do layout.css. Ao alterar para CLASS se estabelece uma listagem de links com marcadores. Você recomenda que eu realmente altere ID para CLASS? E se eu fizer isso, como fica a interface dos menus? Ela deve ser perdida mesmo?
Cora, em momento algum sugeri para trocar de ID para class!.
Só alertei que com ID não é possivel ter duas palavras separadas. Já com class pode.
No seu caso, se quiser não precisa trocar para class, basta juntar as duas palavras: <section id="menuCentro"> e no CSS fazer o mesmo:
#menuCentro{ }
Agora se tiver interesse em trocar para class, no CSS deve-se por ponto(.) ao invés de tralha(#). exemplo: .menuCentro{ }
Explicação sobre classes:
Quando se usa class, permitimos que o elemento possa assumir vários atributos. exemplo:
<p class="paragrafo"> este é um parágrafo</p>
<p class="paragrafo diferente"> este é mais um parágrafo, mas é diferente</p>
Perceba no código html, que ambos paragrafos possuem a class paragrafo e o segundo possui além da classe paragrafo, possui a classe diferente.
O resultado da renderização do exemplo seria:
o paragrafo com apenas uma classe, mostraria a frase em azul com a letra arial.
Já o segundo paragrafo, inicialmente teria a letra arial e seria azul. Mas como possui uma segunda class, ela recebe também o tamanho de letra em 16pt, negrito e sua cor ficaria vermelho, por causa do atributo !important que serve para sobrescrever uma regra padrão.
Estou concentrada em uma parte da marcação HTML. Mas não sei o que há errado com o menu. No final do link contato sobra um retângulo sem função, que deixa a delimitação do último link diferente dos demais. O editor de texto não esta marcando erros nem para o HTML e nem para o CSS. Será ainda um problema de decodificação do navegador?
Desculpe a falta de entendimento em alguns momentos . Obrigada de novo!
Seria interessante postar um print do problema... e o css do menu.
Desculpe de novo.. Sou nova no fórum... e também estou tentando aprender um pouco da linguagem agora... algo que ainda tenho muita dificuldade... e que o fórum está me ajudando muito mesmo.
Eu fiz o print do menu... E tentei anexar a imagem aqui... Achei que seria igual ao que se faz em um e-mail comum... Mas o "Inserir uma Imagem" pede uma URL... Não sei como fazer isso .
Este tipo de anexo que estás tentando fazer, é para quando você hospedar suas imagens em site de terceiros como imageshack, picassa, photobucket.. então é necessário da url hospedada neles!
Recomendo anexar aqui pelo nosso fórum que é mais fácil e melhor!
Para anexar uma imagem, use painel no modo Avancado que fica do lado do "Enviar Resposta Rápida".
Procure um ícone de "clips", depois quando abrir a janelinha, procure a imagem e clique em enviar, depois que terminar enviar podes fechar a janela e submeter sua resposta.
O retângulo que "sobra" no menu está em cor marrom na imagem anexa.
Encaminho também a parte do css que marca o estilo do menu. Caso seja necessário, posso encaminhar o código css inteiro.
background:orange right top no-repeat;
background: #8B5A00;
#menu li a.active{background-color: #8B6914; color: #fff;}
Analisando seus códigos e fazer um teste, aqui funcionou bem.
Seu css está correto.
Provavelmente seu erro está na estrutura do menu no html.
Perceba que esqueceu de colocar a abertura da tag span em todas as Li's e a barra de fechamento da tag a em contato está invertida.
Veja, em destaque em vermelho onde foi que você errou.
<li><a href="#index.html">[COLOR="Red"]<span>[/COLOR]home</span></a></li>
<li><a href="#sobre.html">[COLOR="red"]<span>[/COLOR]sobre</span></a></li>
<li><a href="#galeria.html">[COLOR="red"]<span>[/COLOR]galeria</span></a></li>
<li><a href="#contato.html">[COLOR="red"]<span>[/COLOR]contato</span>[COLOR="red"]</a>[/COLOR]</li>
Ps: Na primeira vez que vi o código html me passou desapercebido.. notei quando coloquei na minha IDE que logo acusou o erro! rsrs
Editado 10 de janeiro de 2013 por dif
Tenho outra dúvida sobre o mesmo site. Encontrei um jQuery em um tutorial, que proporciona a rolagem suave do site de página única. Mas verifiquei que mesmo tendo-o inserido no código o efeito não aparece. Neste caso a programação já estava pronta. Será que existe algum problema com o código?