o que é html ? é a linguagem com que são codificadas as páginas da Web.
o funcionamento da web tem como base:
a linguagem HTML - que codifica a estrutura da base das páginas Web;
o protocolo HTTP - que assegura a transferencia dessas páginas atraves da internet
A HTML não é uma linguagem de programação propriamente dita. É uma linguagem de estruturação e formatação de documentos. Como tal, a HTML não possui os recursos típicos das linguagens de programação, tais como: variaveis, operadores, funções, estruturas de controlo, etc.
A utilização de HTML simples apenas produz páginas Web estáricas e sem interactividade com o utilizador. Para introduzir estas caracteristicas nas páginas Web torna-se necessário combinar HTML com outras linguagens, nomeadamente as linguagen de scripting, como: jacascript; PHP; JSP; ASP; etc.
A linguagem HTML utiliza Tags, marcas ou etiquetas de marcação para definir a estrutura e formatação das páginas web.
Regras básicas que é necessario compreender antes de se começar com a criação de páginas
Todos os "tags" são inseridos entre o sinal de menor e maior:
<tag>
Tirando aqueles que representam a posição de um objecto (a inserção de uma imagem, por exemplo), todos os "tags" de formatação devem ser abertos e fechados (utilizando o caracter "/"):
<tag></tag>
Todos os "tags" obedecem a uma hierarquia, como no seguinte exemplo:
<a><b><c></c></b></a>
O primeiro a abrir a abrir é o ultimo a fechar, e vice-versa
<a><b><c></a></b></c> - errado
É indiferente utilizar maiusculas ou minusculas nos "tags".
<tag> é igual a <TAG> e a <Tag>
Estrututa básica de um documento HTML
Um decumento HTML começa com a tag de abertura <html> e termina a tag de fecho </html>
Exemplo:
<html>
.
.
.
</html>
As duas partes principais que constituem um decumento:
o cabeçalho (head) - que fica compreendido entre as tags <head> e </head>;
o corpo do deumento (body) - que fica entre as tags <body> e </body>
Exemplo:
<html>
<head>
</head>
<body>
</body>
</html>
o principal elemento que é incluido no cabeçalho é o titulo da página - que surge entre as tags <title> e </title>. (este titulo aparece na barra de titulo do browser em que a página for aberta)
no corpo do decumento (entre as tags <body> e </body> é inserida toda a informação a apresentar na página - texto, imagens, etc.
criação de páginas HTML
exemplo:
<html>
<head>
<title> A minha primeira página </title>
</head>
<body>
</body>
</html>
Vamos agora fazer as seguintes alterações:
<html>
<head>
<title> A minha primeira página </title>
</head>
<body>
olá mundo
</body>
</html>
comentário no HTML
<!--e-->
a sua finalidade util ao leitor do codigo
Títulos - seis níveis de títulos
nivel máximo <h1> .. </h1>
segundo nível <h2> .. </h2>
são possiveis seis niveis de título de tamanho decrescente de <h1> até <h6>
A tag <p> .. </p> define um paragrafo de texto.
A tag <hr> define uma linha horizontal e nao tem tag de fecho.
por exemplo: o atributo WIDTH que permite definir a extenção da linha de página <hr with=50%>, que neste caso 50% indica a linha terá apenas 50% de largura de página
A tag <p align="center">, temos o atributo align que define o tipo de alinhamento de parágrafo. Neste caso, o valor do atributo é "center", ou seja, centrado. Os outros valores possíveis para o atributo o align são: "left" esquerda, "right" direita, "justify" justificado.
Cada atributo é seguido do sinal de igual e de um valor. Este valor pode ser um valor numérico ou de outro tipo. Actualmente, os valores dos stributos devem ser incluidos dentro de aspas.
<html>
<head>
<title> página exemplo </title>
<!--isto é um comentario, nao aparece-->
</head>
<body>
<h1> titulo de 1º nivel </h1>
<h2> titulo de 2º nivel </2>
<p> parágrafo normal </p>
<p>
<!--Em cima um parágrafo em branco-->
<hr /><!--Isto é uma linha horizontal-->
<hr width="50%">
<hr />
<!--linha com 50% de largura de página-->
<p align="center"> parágrafo centrado e com uma <br> quebra (br) ou mudança de linha a meio.
</body>
</html>
Para contornar o braks, utiliza-se uma referência especial - que convém esclarecer que não é um tag.
<body>
Ola mundo! Chamo-me Ricardo
Tag <font>
os browsers apresentam o texto dos parágrafos com uma fonte tipográfica e um tamanha predefinido; porém, podemos alterar essas definições com a tag <font> .. </font>. Esta tag é definida através dos seguintes atributos:
face - define a fonte
size - define um tamanho
color - define a cor do texto
<font face ="helvetica", "futura", "arial">
Neste exemplo, estamos a alterar a fonte normal para a futura ou, no caso de esta não estar instalada, para a helvétiva ou para arial. no caso de nenhuma das fontes indicadas estar instalada, sera usada a predefinida do browser.
<font size =4> <font size=+1>
em prencipio, terão o mesmo efeito, uma que, sendo 3 o tamanho predefinido, passar para 4 equivale a adicionar 1 (+1) ao anterior.
cores:
<font color="ff0000"> - red
<font color="00ff00"> - green
<font color="0000ff"> - blue
estilos tipográficos
<b> Este texto vai aparecer em bold </b>
<p> Frase com um termo em <i> itálico </i>
<p> Frase com um termo <u> sublinhado </u>
Nota: neste caso, as tgs de fecho são importantes, uma vez que nao surgir uma tag de fecho correspondente a uma tag aplicada, o efeito desta prolonga-se por todo o texto que se seguir.
<html>
<head>
<title> formatação de texto </title>
</head>
<body>
<h1 align="center"> titulo centrado</h1>
<h6 align="right"> titulo a direita </h6>
<p> paragrafo com as predefinições </p>
<font face="arial" size=+1 color=#ff0000>
<p> parágrafo com outra definições </p>
</font>
<p><b>parágrafo em bold (negro) </b></p>
<p><i> parágrafo em italico</i></p>
<p><u>parágrafo com sublinhado</u></p>
</body>
</html>
<ol> .. </ol> define uma lista numerada
<ul> .. </ul> define uma lista nao mumerada
<li> .. </li> item ou linha dentro de uma lista
<dl> .. </dl> define uma lista de definições
<dt> .. </dt> indica um titulo a definir
<dd> .. </dd> descreve o item a definir
<table> .. </table> define o inicio e o fim de uma tabela
<th> .. </th> define o cabeçalho de uma tabela
<tr> .. </tr> define o inicio e o fim de uma fila ou linha dentro de uma tabela
<td> .. </td> define o conteudo de cada célula
inserir imagens
<img scr="imagem.jpeg">
link ou ligação
<a href="endereço"> .. </a>
Criar formularios
<form> .. </form> define o incio e o fim de um formulario
<input type="text" .. > define uma caixa de texto para input
<input type="password" ..> define uma caixa de texto para input uma password
<input type="radio" .. > define um botao de opcção
<input type="checkbox" ..> define uma caixa de selecção
<input type" button" ..> define um botao de comando
<input type"submit" ..> define um botao para envio de daodos de um formulario
<input type"reset" ..> define um botao para apagar todos os dados preenchidos no formulario.
listas em HTML
<html>
<head>
<title> LISTAS </title>
</head>
<body>
<h2> Lista ordenada </h2>
<ol>
<li> Primeiro item </li>
<li> Segundo item </li>
<li> Terceiro item </li>
</ol>
<h2> Lista nao ordenada </h2>
<ul>
<li> Um item </li>
<li> outro item </li>
<li> e mais outro </li>
</ul>
</body>
</html>
Comandos sql
<dl>
<dt> insert </dt>
<dd> comando para inserir dados </dd>
<dt> Delete </dt>
<dd> Comando para apgar dados </dd>
<dt> Update </dt>
<dd> Comando para actualizar dados </dd>
</dl>
TABELAS EM HTML
na tag <table> o atributo border permite definir a espessura da linha; por exemplo, border=1
a tabela é construida linha a linha, cada nova linha é definida com uma tag <tr>. em cada linha inserem.se as tags que definem celulas da tabela <th> ou <td>
o mais usual é utilizar-se a tag <td> para definir cada celula e inserir na linha. a tag <th> costuma ser utilizada nas primeiras linhas da tabela, apenas difere da ta <td> no seguinte o conteudo de uma celula defina com <th> e destacado a negro.
links ou ligações
<a href=".."> .. </a>
qualquer tipo de ligação (link) é feita sempre com base na tag <a> .. </a> também chamada anchor tag.
O principal da tag <a> é o atributo href. é este atributo que define o local para onde se pretende efetuar a ligação
Ligação interna
<a href="doc2.html"> Mais informações </a>
Neste caso, o atributo href é igualado ao nome do documento hml para onde queremos remeter o leitor quando ele clicar sobre o texto que é apresentado na página. Esse documento pode ser outra página html ou outro tipo de documento, é claro que se o documento se encontrar numa outra pasta ou directoria é necessario ter isso em conta na indicção do nome.
Atributo relativo a uma imagem
o atributo align permite definir a forma de alinhamento de imagem. Os valores possiveis são: left; right; middle; bottom e top.
o atributo border permite definir uma linha retangular de contorno da imagem. Deve ser indicado um valor numémerico para a espessura de uma linha. Exemplo <img src="pirata.gif border="2">
Para definir frames, utiliza-se o "tag" <frameset>.
Como não se trata propriamente de corpo da página, este "tag" define uma área apos a área <head>, mas não contido dentro do "tag" <body>. Ao utilizar o parâmetro Cols, divide a página em colunas, neste caso definidas por "160,*". Isto significa que são criadas duas, uma com 160px de largura e outra que ocupa o resto do espaço disponivel no ecra. As medidas das frames podem ser fornecidas em pixéi, em percentagem do espaço disponivel ou por um asterisco, quesigifica "o resto". Estas colunas são definidas da esquerda para a direita. Temos também border e framespacing, que definem a bordar e o espaçamenti entre frames.
o tag <frame>, que se refere á primeira coluna de 160px. SRC define qual o ficheiro html a ser exibido nessa frame, name, muito importante, indica qual o nome da frame, para que as links possam lá recair.
norsaize inidica que a frame não pode ser redimensionada com o rato, e frameborder, o borda da frame.
Utiliza-se <frame frameborder> e <frameset border> por uma questão de compatibilidade entre o internet explorer e o netscape navigator. scorlling pode ser definido com "yes" ou "no" para obrigar a barra de scrool a estar sempre visivel ou escondida.
<input type="text" name="nome">
este é o exemplo de um <input> do tipo txt, ou seja, uma caixa de texto.
<input type="radio" name="sexo" value="M">
no exemplo anterior temos 3 atributos mais usuais type;name;value. Repara-se que a expressao value="m" é uma atribuição interna do codigo.
um outro atributo que podemos usar com botoes:
checked |="true|false"|-o atributo checked permite colocar um botao em estado de assinalado ou nao assinalado. neste caso, a parte inclui o sinal de igual e o valor e opcional. se esse valornao for indicado, é assumido true,para retirar a marca de assinalado escreve-se checked="false".
este atributo tambem so pode ser usado com os elementos do tipo checkbox- caixa de selecção.
<textarea cols=40 rows=5>
o atributo cols=40 define que a caixa de texto tera a largura de 40 colunas de caracteres.
o atributo rows=5 define que a caixa de texto tera a altura de 5 linhas ou filas de caracteres.
Sem comentários:
Enviar um comentário