Boas práticas de HTML

Não, não, não..

Existem diferenças nas tags, strong e em para <b> etc.. pois strong e em indicam ênfase semântico
Iguais a nível visual, mas a WEB é mais que isso.
Quanto a quem referiu a tag <small> e <big> isso é um disparate pegado. Não devem ser usadas nunca, não trazem nenhum ênfase de qualquer tipo. para big usem headings e small -> css. (tem semântica no html5)

Boas práticas é seguir as regras do tipo de documento que se propõem a seguir no vosso site, não é só falar sobre html5 e scripts para deixar o IE<7 feliz.. cada bitaite!
A quantidade de sites em html5 que continuam com más praticas é igual a qualquer outro doctype, a maioria dos mesmos nem sequer validam..
 
hostmake disse:
Quanto a quem referiu a tag <small> e <big> isso é um disparate pegado. Não devem ser usadas nunca, não trazem nenhum ênfase de qualquer tipo. para big usem headings e small -> css. (tem semântica no html5)
Clicar para expandir...

Aceito para o caso do big, mas para o caso do small achas preferível criar uma class e associar a um span? Se o <small> existe, porque não usá-lo? Reduz-se o código e torna-se mais legível.
O <header>, o <footer>, o <nav> também não trazem ênfase nenhum e são recomendados.

Ps: Com os plugins que já hoje em dia, o html5 no Internet Explorer já não é problema.
 
Última edição:
esaramago123 disse:
Aceito para o caso do big, mas para o caso do small achas preferível criar uma class e associar a um span? Se o <small> existe, porque não usá-lo? Reduz-se o código e torna-se mais legível.
O <header>, o <footer>, o <nav> também não trazem ênfase nenhum e são recomendados.
Clicar para expandir...

o <small> tem um significado muito especifico e semântico, tal como os <header> <footer> e <nav> <- como raio é possivel achar que não têm valor semântico? oO

Comecem a usar um reset.css onde todos os elementos têm o mesmo aspecto, e trabalhem a semantica apartir daí... ao menos todos os textos são iguais e deixam de ver diferenças de aspecto... pelo que passam a perceber o que tem de ser css e o que tem de ser html…

Ou leiam as especificações http://dev.w3.org/html5/markup/ que também não faz mal a ninguem… e tiram as próprias conclusões
 
ImAnAlcoholic disse:
Comecem a usar um reset.css onde todos os elementos têm o mesmo aspecto, e trabalhem a semantica apartir daí... ao menos todos os textos são iguais e deixam de ver diferenças de aspecto... pelo que passam a perceber o que tem de ser css e o que tem de ser html…

Ou leiam as especificações http://dev.w3.org/html5/markup/ que também não faz mal a ninguem… e tiram as próprias conclusões
Clicar para expandir...

Sim, eu uso um reset e formato as minhas tags consoante o projeto que tenho em mãos.
Tirando o <big>, que já não faz parte do html5, o w3c não fala mal destas tags.
 
Ok, mais uma duvida do género, estou a fazer um website básico para um projecto escolar (sobre "Os Maias") e basicamente a estrutura vai ser algo como isto que acabei de desenhar com o maravilhoso paint:
http://postimage.org/image/4s1tk7r7n/
 E estava agora mesmo a começar a fazer isto quando me deparei com um "problema", basicamente fiz uma lista dentro de um div chamado menu com as varias partes do site (as linhas pretas na coluna da esquerda), e, o que tenho visto feito por ai é as <li> terem links lá dentro, para as diversas páginas, o que acontece é que se eu fizer isso vou ter de repetir uma carrada de código em cada página (o menu, o header e o footer) sendo que a unica parte que vai mudar é a que diz "conteúdo", há alguma forma de evitar/optimizar isto?
Sei que é possivel com frames mas já me disseram que não é uma boa prática, que alternativas existem?
 
Uma solução típica é usar PHP para incluir esses ficheiros que se repetem, mas não gosto da ideia de ter de instalar o php só para resolver esse problema. Também há os server side includes (já usei em apache, suponho que haja equivalente em outros servidores), mas da última vez que tive de fazer um site estático criei simplesmente um script que concatenava o header, conteúdo e footer para cada página, e corria-o depois de fazer qualquer alteração (isso pode ser automatizado).
 
nfk disse:
Uma solução típica é usar PHP para incluir esses ficheiros que se repetem, mas não gosto da ideia de ter de instalar o php só para resolver esse problema. Também há os server side includes (já usei em apache, suponho que haja equivalente em outros servidores), mas da última vez que tive de fazer um site estático criei simplesmente um script que concatenava o header, conteúdo e footer para cada página, e corria-o depois de fazer qualquer alteração (isso pode ser automatizado).
Clicar para expandir...
Obrigado, para uma coisa deste tamanho acho que não se justifica implementar isso, mas fica a nota ;)
Bem, comecei a por mãos à obra e começaram os problemas, criei uma conta num host para começar a experimentar: http://osmaias.host22.com/escola.html
 O que acontece é que eu tenho uma div com um Índice, mas só eu e outra pessoa é que conseguem ver essa div, não sei porquê já pedi a inúmeras pessoas para testarem com browsers diferentes e dizem que só vêem as àrvores, e eu no android a mesma coisa.
Gostava de ter mais feedback, conseguem ver o índice? Se sim, tem cantos arredondados? O que acham que pode ser a causa disto?
Aqui fica o codigo da pagina para ajudar ao diagonóstico:
Código: 
<!DOCTYPE html>
<html>
<head>
  <title>
    Os Maias - Análise literária e de conteúdos 
  </title>
  <link rel="stylesheet" type="text/css" href="comum.css" />
</head>
<body>
  <header>
  <img src="/imagens/header.jpeg" width="1" height="1">
  </header>  
  <div id="menu" name="menu" title="Menu">
  <h1>Indice</h1>
  <ul>  
        <li> <a href="/paginas/arvgeo">Arvore geneológica</a> </li>
	<li> <a href="/paginas/ContHistorico">Contexto Histórico</a> </li>
	<li> <a href="/paginas/Estrangeirismos.html">Estrangeirismos</a> </li>
	<li> <a href="/paginas/espaços.html">Espaços</a> </li>
	<li> <a href="/paginas/RlvsNt.html">Realismo Vs Naturalismo</a> </li>
  </ul>
</div>
<div id="conteudo" name="conteudo" title="conteudo">
<script type="text/javascript" src="game.js"></script>
</div>


</body>
</html>
e o css que se refere ao div:
Código: 
[LIST=1]
[*][COLOR=#ffffff][SIZE=4]#menu {[/SIZE][/COLOR]
[*][COLOR=#ffffff][SIZE=4]opacity:0.6;[/SIZE][/COLOR]
[*][COLOR=#ffffff][SIZE=4]-moz-border-radius: 10px;[/SIZE][/COLOR]
[*][COLOR=#ffffff][SIZE=4]-webkit-border-radius: 10px;[/SIZE][/COLOR]
[*][COLOR=#ffffff][SIZE=4]position:fixed;[/SIZE][/COLOR]
[*][COLOR=#ffffff][SIZE=4]top:170px;[/SIZE][/COLOR]
[*][COLOR=#ffffff][SIZE=4]right:1350px;[/SIZE][/COLOR]
[*][FONT=Courier New][COLOR=#ffffff][SIZE=4]}[/SIZE][/COLOR][/FONT]
[/LIST]
Não liguem a outras coisas que não funcionem sem ser o indice, o resto ainda não está feito/online
 
#menu - > right:1350px;

Retira isso e todos conseguem ver o teu menu! Se um ecrã tiver menos de 1350px de largura, é óbvio que não vê a tua div #menu.

Eu fazia-te as alterações, mas prefiro que sejas tu pois assim também aprendes.

Cumps
 
Última edição:
Obrigado legion, era mesmo isso estava a funcionar no meu ecran porque têm a resolução necessária mas noutros não.
Outra coisa:
esaramago123 disse:
DIV, sem qualquer dúvida. É melhor em todos os termos.

Aliás, com o HTML5 nem deves usar só DIV. Tens, por exemplo, a tag <header> para o cabeçalho, a <footer> para o rodapé, etc. Assim.
Estas tags não funcionam nas versões mais antigas do Internet Explorer, mas se usares o html5shiv passam a funcionar.
Clicar para expandir...
Se eu usar a tag <header> em vez da div <div id="header"> como atribuo características a esta no css?

ps: Outra pequena coisa, se tenho uma div com opacity:0.6, como é que faço para ter um valor diferente para a opacity da border? Neste casa quero que a border não tenha nenhuma transparência
 
Última edição:
o header é um elemento tão normal como a div.

por isso no CSS so tens de por

Código: 
header {
  propriedade: valor;
}

A opacity afecta a div como um todo, ou seja o valor normal da border sem transparência, passa a ser o 0.6 de opacidade que deste a div. (repara : http://jsbin.com/ironoc/2/) nesse caso a border está com um valor de #f00 ou seja, nem sequer tem transparência, no entanto herda a opacidade que deste ao elemento.

Duvido bastante que queiras dar opacidade à div, secalhar queres só dar opacidade à cor de fundo?
 
Got it em relação ao header, só que estava a por um # não sei porquê antes e não estava a dar, muito obrigado.
ImAnAlcoholic disse:
Duvido bastante que queiras dar opacidade à div, secalhar queres só dar opacidade à cor de fundo?
Clicar para expandir...
Sim era mesmo em relação ao fundo, não sei como fazer isso, nem sabia que era possível, mas vou procurar na net, obrigado.
btw, ImAnAlcoholic se puderes passar pelo meu outro tópico agradecia... é que estou mesmo a nora, nem sei o que procurar/estudar
 
As opacidades continuam trocar-me as voltas:
http://osmaias.host22.com/
Queria que a palavra "Índice" e o fundo não tivessem opacity, tal como a border, mas não o estou conseguir fazer, este é o css do nav:
Código: 
[LIST=1]
[*][SIZE=2][FONT=arial][COLOR=#CC00CC]#nav[/COLOR] [COLOR=#66CC66]{[/COLOR][/FONT][/SIZE]
[*][SIZE=2][FONT=arial]opacity[COLOR=#3333FF]:[COLOR=#993333]0[/COLOR][/COLOR][COLOR=#6666FF].[COLOR=#993333]6[/COLOR][/COLOR];[/FONT][/SIZE]
[*][SIZE=2][FONT=arial]-moz-border-radius: [COLOR=#993333]10px[/COLOR];[/FONT][/SIZE]
[*][SIZE=2][FONT=arial]border-radius: [COLOR=#993333]10px[/COLOR];[/FONT][/SIZE]
[*][SIZE=2][FONT=arial]position[COLOR=#3333FF]:fixed[/COLOR];[/FONT][/SIZE]
[*][SIZE=2][FONT=arial]top[COLOR=#3333FF]:[COLOR=#993333]20[/COLOR][/COLOR]%;[/FONT][/SIZE]
[*][SIZE=2][FONT=arial]right[COLOR=#3333FF]:[COLOR=#993333]71[/COLOR][/COLOR]%;[/FONT][/SIZE]
[*][SIZE=2][FONT=arial]background-color[COLOR=#3333FF]:grey[/COLOR];[/FONT][/SIZE]
[*][SIZE=2][FONT=arial]border-style[COLOR=#3333FF]:outset[/COLOR];[/FONT][/SIZE]
[*][FONT=Courier New][SIZE=2][FONT=arial]border-width[COLOR=#3333FF]:[COLOR=#993333]5px[/COLOR][/COLOR];[/FONT][/SIZE][/FONT]
[*][SIZE=2][FONT=arial][B]border-color[/B]: [B]black[/B];[/FONT][/SIZE]
[*][SIZE=2][FONT=arial][B]text-align[/B]: [COLOR=#993333]center[/COLOR];
[/FONT][/SIZE]
[/LIST]

E tentei acrescentar isto:
Código: 
#nav header {
opacity: 1;
}

 O que devia sobrepor-se à opacity do nav porque é mais especifica, mas tal não acontece, o que estou a fazer mal?



 
Última edição:
ImAnAlcoholic disse:
o <div id="nav"> pode ser <nav></nav> (http://html5doctor.com/nav-element/)

again… tira o opacity pois estás a dizer que TUDO naquela div passa a ter opacidade de 0.6 incluindo os filhos… pior, a opacidade de 1 dos filhos, é na realidade o 0.6 do pai…

o que tu queres é: background-color: rgba(128, 128, 128, 0.5);

Já agora a tag de <center> é obsoleta: http://www.w3.org/TR/2012/WD-html5-diff-20120329/#obsolete-elements <- tens ai uma lista de elementos que já não se usam
Clicar para expandir...
Muito obrigado, já consegui!
Outra pequena coisa, http://osmaias.host22.com/
Está ali um espaço entre o header do Indice e a border que não deveria existir, alguém me sabe explicar porquê?
 
Última edição:
Muito obrigado, já consegui.
Próxima: Tenho esta tabela: http://osmaias.host22.com/tabela.html
 Só que não tenho nenhuma experiencia com tabelas, e não sei como fazer coincidir os espaços da tabela com os espaços da imagem (o objectivo é conseguir criar espaços para poder aplicar este código: http://jsbin.com/ojewez/edit#javascript,html e fazer uma àrvore genealógica interactiva) há algum guia extensivo de tabelas pela net?
Para começar, como removo o padding em cima do primeira "cell" para a fazer coincidir com o primeiro espaço?
 
Última edição:
Ninguem?
Desculpem o double post, mas não me estou a conseguir safar com o que encontro na net e isto é para terça-feira
 
Inicie sessão ou registe-se para poder participar.
Back
Topo