Curso de programação web/HTML: diferenças entre revisões
| [edição não verificada] | [edição não verificada] |
Conteúdo apagado Conteúdo adicionado
Sem resumo de edição |
|||
| Linha 13: | Linha 13: | ||
O Internet Explorer serve, mais recomendo o uso do Firefox, que é mais compativel com as regras W3C. |
O Internet Explorer serve, mais recomendo o uso do Firefox, que é mais compativel com as regras W3C. |
||
===O que é uma tag?=== |
|||
Um documento HTML não é nada mais do que um arquivo de texto plano, quero dizer, somente letras e nada mais, escritas num arquivo. Então você me pergunta: como se faz para aumentar o tamanho da letra, colocar em negrito, itálico, mudar a cor, e todo tipo de coisa que vejo Internet? A respota é, que para isso usa se sequëncias de caracteres para indicar ao navegador que alguma parte do seu texto, não deve ser mostrada como o resto, que aquele pedaço, deve ser vermelho e em itálico, para aumentar a visibilidade e chamar atenção, o nome desta sequëncia de catacteres é chamada de tag(em Inglês significa marcação, dando sentido ao Markup(marcação) da sigla HTML), que sempre começão com o caracter '''<'''(menor que) e terminam com o '''>'''(maior que). Devido a isso, quando for nessesario inserir um destes caracteres numa página html, deve-se usar a notação &lt;('''l'''ower '''t'''han - maior que) e &gt;('''g'''reter '''t'''han - maior que), respectivamente, já que o que vier depois do < será entendido como uma tag, resultando em vários problemas ná apresentação do seu documento. A tag é um comando que diz como um texto será entendido, ou formatado pelo navegador. Existem dois tipos de tags, as como a tag <n> que marca um bloco de texto, em que é obrigatório haver uma marca dizendo onde termina a formatação, no caso, o negrito, sendo no caso desta tag </n>(repare na barra, que ocorre no fechamento de todas as tags que marcam um bloco); e as tags que terminam nela mesma, como a tag <br />, que indica um salto de linha, e não há nada mais a ser dito(repare no espaço e na barra no final, diferente do outro tipo de tag). |
|||
<br /> |
|||
Segundo a W3C todas as tags devem ser escritas em minusculo<!-- explicar e referênciar --><br /> |
|||
<br /> |
|||
==Estrutura básica de um documento HTML== |
|||
[[Image:html_sample.svg]] |
|||
<br /> |
|||
<br /> |
|||
Veja acima, que todas as tags abertas, foram fechadas, o documento começa com a tag <html> e termina com o fechamento desta tag </html>. O fechamento de uma tag é representada pela /. |
|||
'''<html>''' - marca do início do documento HTML<br /> |
|||
'''<head>''' - início do cabeçalho<br /> |
|||
'''<title>''' - títlulo<br /> |
|||
'''<body>''' - corpo do documento<br /> |
|||
'''<p>''' - paragráfo<br /> |
|||
'''<br />''' - salto de linha<br /> |
|||
'''<a>''' - link<br /> |
|||
'''<i>''' - itálico<br /> |
|||
'''<font>''' - fonte<br /> |
|||
'''<h1>''' - cabeçalho do texto de maior nível<br /> |
|||
<br /> |
|||
==Atributos das Tags== |
|||
Quando uma tag possui um atributo, ele é inserido antes do > na abertura da tag, ou antes do espaço . <tag atributo="valor">texto</tag> ou <tag attributo="valor" /> |
|||
===font=== |
|||
====color==== |
|||
O atributo color pode receber dois tipos de valores para representar cor: |
|||
*Em RGB #abcdef: |
|||
Neste a cor é representada por um valor em hexadecimal que indica a cor no sistema RGB, ficando #<font color="#F00">ab</font><font color="#0F0">cd</font><font color="#00F">fe</font> |
|||
*Em cor nomeada: |
|||
Neste caso o valor e um nome de cor pré-definida |
|||
{| border="0" cellpadding="0" cellspacing="0" |
|||
! style="background: black; color: white; width: 50px; padding:5px" | Black<br />#000000 |
|||
! style="background: green; width: 50px; padding:5px" | Green<br />#008000 |
|||
! style="background: silver; width: 50px; padding:5px" | Silver<br />#C0C0C0 |
|||
! style="background: lime; width: 50px; padding:5px" | Lime<br />#00FF00 |
|||
|- |
|||
! style="background: gray; width: 50px; padding:5px" | Gray<br />#808080 |
|||
! style="background: olive; width: 50px; padding:5px" | Olive<br />#808000 |
|||
! style="background: white; width: 50px; padding:5px" | White<br />#FFFFFF |
|||
! style="background: yellow; width: 50px; padding:5px" | Yellow<br />#FFFF00 |
|||
|- |
|||
! style="background: navy; width: 50px; padding:5px" | Navy<br />#000080 |
|||
! style="background: marron; width: 50px; padding:5px" | Maroon<br />#800000 |
|||
! style="background: red; width: 50px; padding:5px" | Red<br />#FF0000 |
|||
! style="background: blue; width: 50px; padding:5px" | Blue<br />#0000FF> |
|||
|- |
|||
! style="background: purple; width: 50px; padding:5px" | Purple<br />#800080 |
|||
! style="background: teal; width: 50px; padding:5px" | Teal<br />#008080 |
|||
! style="background: fuchsia; width: 50px; padding:5px" | Fuchsia<br />#FF00FF |
|||
! style="background: aqua; width: 50px; padding:5px" | Aqua<br />#00FFFF |
|||
|} |
|||
====size==== |
|||
*relativo: quando se utiliza os sinais de maior e menor para indicar que aquele texto deve ser maior x ou menor x que a fonte do local. (confuso!) |
|||
*nomeado: big small x-big |
|||
==Tópicos== |
==Tópicos== |
||
Revisão das 17h45min de 29 de maio de 2006
HTML - HiperText Markup Language - Linguagem de Marcação de Hipertexto
Agumas definições e observações iniciais
Material nescessário
- Um editor de textos:
Pode ser o notepad do windows, mais eu recomendo algum que suporte a sintaxe HTML, como o jedit, vim, Emacs, ou qualquer um de sua preferência.
- Um navegador
O Internet Explorer serve, mais recomendo o uso do Firefox, que é mais compativel com as regras W3C.
Tópicos