Archive for the 'HTML' Category
A linguagem metatag permite especificar o idioma sua página da web está escrito Pol.
Língua metatag
A linguagem metatag aparência
<META HTTP-EQUIV=”content-language” CONTENT=”XX”>
XX é substituído com a língua, que deve ser compatível com RFC1766. Aqui está uma lista das línguas comuns neste formato correto:
PT – Inglês
ES – Espanhol
FR – francês
JA – Japonês
ZH – Chinês
Insira em sua página conforme abaixo:
<head>
<meta http-equiv=refresh content=”3; URL=http://www.site.com.br“>
<title>carregando…</title>
</head>
O verde mostra para onde você vai direcionar, o vermelho é o tempo, agora só colar dentro da Head do seu site.
Além do aspecto global do texto, podemos também escolher o tipo de letra que utilizamos. Antes de mais, temos os ‘tags’ <B>, <I> e <U>, respectivamente para letra Negrito, em itálico e sublinhada:
<BODY>
Normal<BR>
<B>Carregado</B><BR>
<I>Italico</I><BR>
<U>Sublinhado</U><BR>
<B><I>Carregado e Italico</I></B>
</BODY>
Além disto, também podemos escolher a fonte, o seu tamanho e cor com <FONT>:
<BODY>
<P>Letra normal</P>
<P><FONT FACE=”Arial”>Letra com a fonte Arial</FONT></P>
<FONT FACE=”Arial”>
<P><FONT SIZE=”5″>Tamanho 5</FONT></P>
<P><FONT SIZE=”2″>Tamanho 2</FONT></P>
<FONT SIZE=”5″>
<P><FONT COLOR=”#0000FF”>Azul T.5</FONT></P>
<P><FONT COLOR=”#FF0000″>Vermelho T.5</FONT></P>
</FONT>
</FONT>
<P><FONT FACE=”Times New Roman” SIZE=”7″ COLOR=”#006633″>
Podemos combinar varios parametros</FONT></P>
</BODY>
Este já está um pouco mais complicado. Existem várias maneiras de fazer isto, mas esta demonstra como se devem hierarquizar os ‘tags’ correctamente.
O parâmetro COLOR, que já vimos aplicado no ‘tag’ <BODY>, contém a cor do texto no seu código hexadecimal (ver Apêndice E). O parâmetro SIZE contém o tamanho do tipo de letra, que é um algarismo entre 1 (mais pequeno) e 7 (maior). Finalmente, FACE contém o nome do tipo de letra a utilizar.
Básico
|
<html></html> |
Inicia/termina um documento em HTML. |
|
<head></head> |
Define a àrea de cabeçalho, com elementos não visualisáveis na página. |
|
<body></body> |
Define a área visível do documento. |
Cabeçalho
|
<title></title> |
Coloca o nome da página na barra de título da janela. |
Atributos do corpo
|
<body bgcolor=?> |
Cor de fundo. |
|
<body text=?> |
Cor de texto. |
|
<body link=?> |
Cor das links. |
|
<body vlink=?> |
Cor das links previamente visitadas. |
|
<body alink=?> |
Cor da link activa. |
Texto
|
<b></b> |
Texto carregado. |
|
<i></i> |
Texto em itálico. |
|
<tt></tt> |
Texto estilo máquina de escrever, monoespaçamento. |
|
<font size=?></font> |
Tamanho das letras. |
|
<font color=?></font> |
Cor das letras. |
|
<font face=?></font> |
Define a fonte utilizada. |
Link’s
|
<a href=”URL”></a> |
Cria uma hiperligação. |
|
<a href=”mailto:EMAIL”></a> |
Cria uma link para o envio de correio. |
|
<a name=”NOME”></a> |
Cria um ‘alvo’ dentro de uma página. |
|
<a href=”#NAME”></a> |
Faz a ligação a um ‘alvo’ presente dentro da mesma página. |
Formatação
|
<p></p> |
Define a área de um parágrafo. |
|
<p align=?> |
Alinhamento de um parágrafo. |
|
<br> |
Insere uma quebra de linha. |
|
<div align=?> |
‘Tag’ genérico utilizado para formatar blocos de texto. |
Tabelas
|
<table></table> |
Cria uma tabela. |
|
<tr></tr> |
Linha de uma tabela |
|
<td></td> |
Célula individual numa linha. |
Há dois tipos de formatação em HTML: lógico e físico. Os efeitos de apresentação na tela são os mesmos: o motivo da distinção entre eles se deve à idéia básica de independência entre especificação e apresentação.
Quando formatamos um trecho de texto como cabeçalho de nível 1, não explicitamos se esse tipo de cabeçalho deve ser em alguma fonte determinada, em um tamanho determinado, justificado à esquerda ou à direita, ou centralizado. Esses detalhes de apresentação são deixados para o browser – o dispositivo de apresentação do documento – que pode ser configurado de acordo com o leitor (usuário final).
Desse modo, além de facilitar enormemente o trabalho de quem escreve os documentos, a linguagem garante a uniformidade de apresentação de cabeçalhos, parágrafos, listas, etc.
A formatação lógica segue o significado lógico do texto marcado: um endereço de e-mail, uma citação etc. Sua apresentação final varia conforme o browser, podendo oferecer resultados mais ricos.
A formatação física especifica explicitamente o estilo que se quer para o texto: itálico, grifado etc. Sua apresentação final não sofre grandes variações.
Estilos Lógicos
<CITE>- Para títulos de livros, filmes, e citações curtas. Exemplo:
- Assisti Guerra nas Estrelas umas oito vezes!
<CODE>- Para indicar trechos de código de programas. Exemplo:
for (x=0); cl &&(!feof(stdin)); x++));
<DFN>- Indica definição de uma palavra, em geral apresenta o texto em itálico. Exemplo:
- CERN: Centre d’Éstudes et Recherches Nucleaires
<EM>- Ênfase, também normalmente apresentado em itálico. Exemplo:
- É preciso pesquisar muito para encontrar o termo exato.
<KBD>- Indica uma entrada via teclado. Exemplo:
- Para ler mensagens recebidas, digite pine -i
<SAMP>- Indica uma seqüência de caracteres, por exemplo uma mensagem de erro ou um resultado. Exemplo:
- O resultado do primeiro applet é: Hello, World!
<STRONG>- Forte ênfase, mostrado normalmente em negrito. Exemplo:
- Antes de enviar um e-mail, confira o campo “Subject:”!
<VAR>- Indica variáveis, ou valores que o usuário deverá escrever; geralmente mostrado em itálico. Exemplo:
- No campo
Login, escreva guest.
Estilos Físicos
<B>- Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado)
<I>- Itálico (em alguns casos, caracteres inclinados)
<TT>- Tipo teletype - fonte de espaçamento fixo.
<U>- Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação de links.
<STRIKE>ou<S>- Frase
riscada.
<BIG>- Fonte um pouco maior.
<SMALL>- Fonte um pouco menor.
<SUB>- Frase em estilo índice, como em H2O.
<SUP>- Frase em estilo expoente, como em Km2.
A formatação de tabelas foi adotada bem antes de sua inclusão na definição de HTML. A manipulação de tabelas, mesmo em editores, é trabalhosa; a maior diferença entre tabelas em HTML e em editores como o MS Word, entretanto, é o fato das tabelas em HTML serem definidas apenas em termos de linhas e não de colunas. Mas isso será percebido no decorrer destas páginas.
As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos estas páginas do tutorial organizadas em colunas, sendo uma delas reservada aos links de navegação dentro de cada seção.
Tabelas implementam um conceito importante de layout: as “grades”, segundo as quais organizamos textos e ilustrações de maneira harmoniosa.
Como já foi possível perceber, as tabelas contêm textos, listas, parágrafos, imagens, formulários e várias outras formatações – inclusive outras tabelas. Novas versões de HTML e de browsers populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis.
As palavras-chave metatag permite escrever palavras-chave relacionadas ao seu site na Web, que utilizam motores de busca para colocar seu site nos resultados de pesquisa.
Descrição metatag
A palavra-chave parece metatag
<META NAME=”keywords” VALUE=”XXX, XXX, XXX”>
Substituída o XXX por uma palavra-chave que se relaciona com o seu web site. Se você quer mais palavras-chave, separe-as com uma vírgula. Não há limite de quantas palavras-chave você pode ter, no entanto, tenha sempre as palavras-chave em relação a o seu Web site.
Exemplo:
….<HEAD>
<META NAME=”keywords” VALUE=”help, HTML, internet, web, guide, support”>
</HEAD>….
Fotos são uma ótima maneira de fazer o seu site se destacar e muito atraente. Nesta seção você será aprender a informação que precisa de saber sobre como adicionar imagens para o seu web site.
Esta é a tag que irá adicionar uma imagem à sua página da web <IMG src=”url”> o texto na “url” precisa ser substituído com o endereço da sua imagem.
….<BODY>
<IMG src=”http://www.activejump.com/images/ex.gif”>
</BODY>….
Primeira Tag: <HTML>
O <HTML> vai no início e no final do documento. No início é o ponto de partida HTML Tag <HTML>, e no fim é o fechamento HTML tag </ HTML>. Estas tags diz ao navegador que são uma página, que se trata de um documento HTML. Tudo no seu documento HTML vai entre estas duas tags. Até agora, o seu documento HTML deve ser semelhante a este.
Index.html – Notepad
<HTML>
</ HTML>
2) O <HEAD> tag vai logo após a tag HTML.
<HTML>
<HEAD> </HEAD>
</HTML>
3) O <HEAD vai entre <TITLE> como está abaixo;
<HTML>
<HEAD> <TITLE>Minha Página</TITLE> </HEAD>
</HTML>
4) A partida marca <BODY> vai logo após o encerramento <HEAD> tag.Todas as informações exibidas na sua página será colocado entre as tags <BODY>.
<HTML>
<HEAD> <TITLE>My Homepage</TITLE> </HEAD>
<BODY>
</BODY>
</HTML>
Favicon
Um Favicon é uma pequena foto 16px por 16px, que você pode ser encontrar na barra de endereço do seu navegador ou no nas páginas em seus favoritos.
1. Criar uma imagem em algum programa gráfico o tamanho é 64×64. Em seguida, reduzir o tamanho para 16×16 e salvá-lo como favicon.gif
2. Agora tomar o arquivo e modificá-lo para favicon.ico.
3. Abrir as páginas que você deseja adicionar o favicon e para colocar esse código, entre as tags e: <link rel=”shortcut icon” href=”favicon.ico”>
Nota: Se você colocar o favicon imagem em uma pasta diferente, mudar o código para: <link rel=”shortcut icon” href=”folder/favicon.ico”>
1. Finalmente carregar as páginas e a imagem favicon.