O que é Html?
(Hypertext markup language – linguagem de marcação de hipertexto) é a linguagem com que
são codificadas as paginas web.
O
funcionamento da web tem como base:
A linguagem HTML – que codifica a estrutura de base das páginas
Web
O protocolo http – que assegura a transferência dessas
páginas através da internet
A html não é uma linguagem de programação propriamente dita.
É uma linguagem de estruturação e formatação de documentos (markup language). Como
tal, a html não possui os recursos típicos das linguagens de programação, tais
como: variáveis, operadores, funções, estruturas, de controlo, etc.
A utilização de html simples apenas produz páginas web
estáticas e sem interactividade com o utilizador. Para introduzir estas características
nas páginas web torna-se necessário combinar html com outras linguagens de
scrioting, como: javascript; PHP; JSP; ASP; etc
A linguagem html utiliza tags, ou marcas ou etiquetas de marcação para definir a
estrutura e formação das páginas web
Regras básicas que é necessário compreender antes de se
começar com a criação de páginas
TAG – Todos os tags são enseridos entre o sinal de menor e
maior : <tag>
Tirando aqueles que representão 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 é o ultimo a fechar e vice-versa
<a> <b> <c> </a> </b> </c> = É errado
É indiferente utilizar maiúsculo ou minúsculo no Tags.
<tag> é igual a <TAG> e a <Tag>
Nota: no html atual, as tags devem ser escritas em maiúsculas
Estrututa básica de um documento HTML um documento HTML
começa com a tag de abertura <html> e termina com a tag de fecho </html>
Exemplo:
<html>
.
.
.
</html>
As duas principais que constituem um documento:
O cabeçalho (head) – que fica compreendido entre as tags
<head> e </head>
O corpo do ducomento (body) – que fica entre as tags
<body> e </body>
Exemplo:
<html>
<head>
</head>~
<body>
</body>
</html>
O principal element que é incluído no cabeçalho é o titulo
da página – que surge entre as tags <title> e </title>.(este titulo
aparece na barra da titulo do browser em que a página for aberta.)
No corpo do documento (ente as tags <body> e
</body> é inserida toda a informação e apresentar na página- texto, imagens
, etc.
Criação de páginas HTML
PARA CRIARMOS A NOSSA PRIMEIRA PÁGINA EM HTML, BASTA UM
SIMPLES EDITOR DE TEXTO como o notepad pu bloco de notas. Podemos começar por inserir
o seguinte:
<html>
<head>
<title>Aminha primeira página</title>
</head>
<body>
</body>
</html>
nota: guardar o ficheiro com extenção .htm (exemplo:índex.htm)
Comentários no HTML
são incluídos dentro de sinais especiais:
<!--e-->
a sua funcionalidade é simples, dar alguma informação útil ao leitor do código.
Títulos - seis níveis de títulos
nível máximo <h1>...</h1>
segundo nivel <h2>...</h2>
São possiveis seis niveis de titulos decrescente de tamanho <h1> até <h6>
a tag <p> ...</p> define por um paragrafo de texo
a tag <hr>
define uma linha horizontal e não tag de fecho.(actualmente, estas tags devem incluir a barra de fecho na própria tag:<hr/>.)
por exemplo: o ATRIBUTO WIDTH que permite definir a extensão da linha de página<hr width=50%>. que neste caso 50% indica que 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 do parágrafo. Neste caso, o valor do atributo é "center", ou seja, centralizado. Os outros valores possíveis para o atributo align são:"left" (a esquerda) "rigth" (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 atributos devem ser incluídos dentro do aspas.
tag <font>
os browsers apresentam o texto dos parágrafos com uma fonte tipográfica e um tamanho predefinidos por ; porém , podemos alterar essas definições com a tag<font>...</font> . esta tag v é definida através dos seguintes atributos:
face - define a fonte tipográfica
size - define um tamanho entre 1 e 7;
color - define a cor do texto.
<font face ="helvetica", "futura", "arial">
neste exemplo estamos a alterar a fonte normal para a furtura ou , no caso de esta não estar instalada, para helvetica ou para arial .No caso de nenhuma das fontes indicadas estar instalada, será usada a predefinida do browser.
<font size=4> <font size =+1>
em principio, terão o mesmo efeito, uma vez que, sendo 3 o tamanho predefinido, passar para 4 equivale a adicionar 1 (+1) ao anterior.
quanto ás cores , podemos utilizar palavras reconhecida pelo browser; como :red: grenn blueb. podemos também usar uma representação codificada ; por exemplo:
<font color ="ff0000"> equivale a red
<font color ="00ff00"> equivale a green
<font color ="0000ff"> equivale a blue
este método é reconhecido como rgb.
nele são atribuidos 2 digitos hexadecimais a cada uma das três cores básicas - assim "RRGGBB"- ou seja , para cada uma das três cores ( RGB), dois digitos que pode ir de 00 a ff.
desta forma podemos obter-se todas as combinação possíveis das cores.
Em html existem tags para aplicar os estilos tipográficos mais habituais, como sejam: bold ou negrito ; itálico; sublinhado;etc.
estes estilos podem aplicar-se a paragrafo inteiros ou ap0enas a partes de texto, palavras ou carateres. por exemplo:
<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 tags de fecho são muito importantes ,uma vez , enquanto não surgir a tag de fecho correspondente a uma tag aplicada, o efeito desta
prolonga-se por todo o texto que se seguir.
Elementos de apresentação
Fontes tipográficas, estilos, formatações, alinhamento, etc.
<font>
face....size...color
<b> . . . </b>
<i> . . . </i>
<u> . . . </u>
<style>
(etc)
tags de estruturação de um documento
<html>...</html> inicio e fim de um documento
<head>...</head> inicio e fim de um cabeçalho
<title>...</title> inicio da página de browser
<body>...</body> corpo do documento
Tags e titulos e paragrafos de texto
<h1>...</h1>titulo de maior grandeza
<h2>...</h2> titulo de segunda grandeza
...
<h6>...</h6> titulo de menor grandeza
<p>...</p> paragrafo do texto
<hr /> quebra de linha
algumas tags de fromatação de texto
<font>...</font> define a fonte tipografica
<b>... </b> define texto em bold ou negro
<i>... </i>define texto em italico
<u>... </u> define texto sublinhado
<sub>... </sub> texto subscrito
<sup>... </sup> texto superescrito
<strong>... </strong> texto em destaque
Atributos descrição
align- atributo usado com as tags <p> ou <hr> para definir alinhamento
width - atributo ...
tags que definem listas de elementos
<ol>...</ol> define uma linha numerada;
<ul>...</ul> define uma lista não numerada
<li>...</li> item ou lista de definições
<dl>...</dl> define uma lista não numerada
<dt>...</dt> indica um titulo a definir
<dd>...</dd> descreve o item a definir
Tags que definem tabelas
<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 conteúdo de uma tabela
tags que permite inserir imagens
<img src="nome da imagem">
tags que permite um link(ligação)
<a href="endereço"> define uma ligação para um link ou um outro documento
Exemplo de tags e atributos que permitem criar formulários:
<form> ... </form> define o inicio e o fim de um formulário
<input type="text"...> define uma caixa de texto para input;
<input type="password"...> define uma caixa de texto para input de uma password
<input type="radio"...> define um botão de opção
<input type="checkbox"...> define uma caixa de seleção
<input type="button"...>define um botão de comando
<input type="submit"...> define um botão de comando para envio de dados de um formulário
<input type="reset"...>define um botão de comando para restabelecer (apagar) os dados
tabelas em html
na tag <table> o atributo border permite definir a espresura da linha; por exemplo border=1
a tabela é construida linha a linha. cada nova linha é definida com uma tag <tr>. em cada(após) cada tag <tr> inserem-se as tags que definem células da tabela(<th> ou <td>).
o mais usual é utilizar se a tag <td> para definir cada célula a inserir na linha. A tag <th> costuma ser utilizada nas primeiras linhas da tabela.
apenas difere da tag <td> no seguinte : o conteudo de uma celula definida com <th> é destacada a negro.
- com as tags <th> e <td> podemos usar o atributo do width para definir a largura das células; por exemplo: <tdwidth =90> uma célula </td> (define uma célula com a largura de 90 pixeis)
o atributo colspan permite indicar o número de colunas que uma célula ocupa. por exemplo:
<th colspan=2> faz com que a célula ocupe duas colunas.
Links ou Ligações
<a href = "...">...</a>
qualquer tipo de ligação ( link) é feita sempre com base na tag <a>...</a> também chamada anchortag.
O principal atributo da tag <a> é o atributo href(de hypertext reference).É este atributo que define o local (endereço URL, local do novo documento, etc...) para onde se pretende efectuar uma ligação.
Ligação Externa (um URL externo)
<a href = "http://google.com">Google</a>
O atributo HREF é igualado ao endereco URL que temos em vista para a ligação externa. Entre as tags <a> e </a> colocamo0s o texto que queremos que apareça na página.
Ligação interna para outro documento no mesmo computador
<a href ="doc2.htm"> mais informações</a>
neste caso, o atributo HREF é igualado ao nome do ducomento HTML 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 é necessário ter isso em conta na indicação do nome.
Ligação para um endereço de e-mail
<a href ="mailto:nomealuno@gmail.com"> Enviar mail para nomealuno</a>
neste exemplo, o link criado permite accionar a aplicação de e-mail que estiver configurada no computador para enviar uma mensagem de correio electrónico para nomealuno@gmail.com.
Inserção de imagens
<img src ="globo.gif">
A inserção de imagens em documentos de htmlb é feita atravéez da tag <img> ( que não tem tag de fecho). A indicação do local, nome do ficheiro da imagem é feita no atributo src (de source= que em ingles significa a fonte).
No caso de a imagem que pertemdemos inserir na página se encontrar numa pasta difrente da corrente , teremos de indicar a sua localização. por exemplo:
<img src =" imagens/globo.gif">
Atributos relativos a uma mensagem
o atributo align permite definir a forma de alinhamento da imagem. Os valores possiveis são:
letf;right;middle;bottom e top.
O atributo border permite definir uma linha rectangular de contorno na imagem. deve ser indicado um valor numérico para a espressura da linha. Exemplo<img src="pirata.gif" border ="2">
O atributo height permite definir a altura da imagem.
O atributo width permite definir a largura da imagem.
Som numa página
<p align="center">
<bgsound src="som1.mid">
<embed src ="som1.mid" width ="140" height="25" autostart ="true" controls="smallconsole"
volume="60"loop="false">
</embed>
</p>
Frames
Para definir frames, utiliza-se o "tag" <frameset>.
como não se trata propriamente do corpo da página, este "tag" define uma área após a área <head>, mas não contido dentro do "tag" <body>. ao utilizar o parâmetro cols, divide página em colunas, neste caso definidas por "160,*". Isto significa que são criadas duas, uma com 160 pixeis de largura e outra que ocupa o resto do espaço disponivel no ecrã. As medidas das frames podem ser fornecidas em pixeis, em percentagem do espaço disponivel ou por um asterisco, que significa "o resto". Estas colunas são definidas das esquerdas para a direita. temos também BORDER e FRAMSPACING. Que definem a borda e o espaçamento entre frames.
o tag <frame>, que se refere á primeira coluna (de 160 pixeis). src define qual o ficheiro html a ser importante, indica qual o nome da frame, para que as links possam lá recair.
NORESIZE indica que a frame não pode ser redimensionada com o rato, e
FRAMEBORDER, o border da frame.
Utiliza-se < FRAME FRAMEBORDER> e <FRAMESET BORDER> por uma questão de conpatibilidade entre o internet explorer e o Netscape navigator. SRCOLLING pode ser definido com etc ...
<input type="text" name="nome">
Este é um exemplo de um <input> do tipo text, ou seja, uma caixa de texto. Nesta tag de input, temos dois atributos:
A expressão type="text" indica que o atributo type(tipo de elemento) que se pretende é "text", ou seja, uma caixa de texto;
a expressão name ="nome" indica que o atributo name ( nome do elemento) será " nome", ou seja, esta caixa de texto passa a ser a identificada pela palavra "nome".
Outros atributos que podemos usar com as caixas de texto:
value ="..."- o atributo value permite indentificar um valor inicial para uma caixa de texto e, por outro lado , captar o dado escrito pelo utilizador;
size =n - tamanho da caixa de texto, em que a indica o numero de carateres da sua largura;
Maxlength = n - número máximo (n) de carateres permitidos.
Comentários no HTML
são incluídos dentro de sinais especiais:
<!--e-->
a sua funcionalidade é simples, dar alguma informação útil ao leitor do código.
Títulos - seis níveis de títulos
nível máximo <h1>...</h1>
segundo nivel <h2>...</h2>
São possiveis seis niveis de titulos decrescente de tamanho <h1> até <h6>
a tag <p> ...</p> define por um paragrafo de texo
a tag <hr>
define uma linha horizontal e não tag de fecho.(actualmente, estas tags devem incluir a barra de fecho na própria tag:<hr/>.)
por exemplo: o ATRIBUTO WIDTH que permite definir a extensão da linha de página<hr width=50%>. que neste caso 50% indica que 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 do parágrafo. Neste caso, o valor do atributo é "center", ou seja, centralizado. Os outros valores possíveis para o atributo align são:"left" (a esquerda) "rigth" (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 atributos devem ser incluídos dentro do aspas.
tag <font>
os browsers apresentam o texto dos parágrafos com uma fonte tipográfica e um tamanho predefinidos por ; porém , podemos alterar essas definições com a tag<font>...</font> . esta tag v é definida através dos seguintes atributos:
face - define a fonte tipográfica
size - define um tamanho entre 1 e 7;
color - define a cor do texto.
<font face ="helvetica", "futura", "arial">
neste exemplo estamos a alterar a fonte normal para a furtura ou , no caso de esta não estar instalada, para helvetica ou para arial .No caso de nenhuma das fontes indicadas estar instalada, será usada a predefinida do browser.
<font size=4> <font size =+1>
em principio, terão o mesmo efeito, uma vez que, sendo 3 o tamanho predefinido, passar para 4 equivale a adicionar 1 (+1) ao anterior.
quanto ás cores , podemos utilizar palavras reconhecida pelo browser; como :red: grenn blueb. podemos também usar uma representação codificada ; por exemplo:
<font color ="ff0000"> equivale a red
<font color ="00ff00"> equivale a green
<font color ="0000ff"> equivale a blue
este método é reconhecido como rgb.
nele são atribuidos 2 digitos hexadecimais a cada uma das três cores básicas - assim "RRGGBB"- ou seja , para cada uma das três cores ( RGB), dois digitos que pode ir de 00 a ff.
desta forma podemos obter-se todas as combinação possíveis das cores.
Em html existem tags para aplicar os estilos tipográficos mais habituais, como sejam: bold ou negrito ; itálico; sublinhado;etc.
estes estilos podem aplicar-se a paragrafo inteiros ou ap0enas a partes de texto, palavras ou carateres. por exemplo:
<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 tags de fecho são muito importantes ,uma vez , enquanto não surgir a tag de fecho correspondente a uma tag aplicada, o efeito desta
prolonga-se por todo o texto que se seguir.
Elementos de apresentação
Fontes tipográficas, estilos, formatações, alinhamento, etc.
<font>
face....size...color
<b> . . . </b>
<i> . . . </i>
<u> . . . </u>
<style>
(etc)
tags de estruturação de um documento
<html>...</html> inicio e fim de um documento
<head>...</head> inicio e fim de um cabeçalho
<title>...</title> inicio da página de browser
<body>...</body> corpo do documento
Tags e titulos e paragrafos de texto
<h1>...</h1>titulo de maior grandeza
<h2>...</h2> titulo de segunda grandeza
...
<h6>...</h6> titulo de menor grandeza
<p>...</p> paragrafo do texto
<hr /> quebra de linha
algumas tags de fromatação de texto
<font>...</font> define a fonte tipografica
<b>... </b> define texto em bold ou negro
<i>... </i>define texto em italico
<u>... </u> define texto sublinhado
<sub>... </sub> texto subscrito
<sup>... </sup> texto superescrito
<strong>... </strong> texto em destaque
Atributos descrição
align- atributo usado com as tags <p> ou <hr> para definir alinhamento
width - atributo ...
tags que definem listas de elementos
<ol>...</ol> define uma linha numerada;
<ul>...</ul> define uma lista não numerada
<li>...</li> item ou lista de definições
<dl>...</dl> define uma lista não numerada
<dt>...</dt> indica um titulo a definir
<dd>...</dd> descreve o item a definir
Tags que definem tabelas
<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 conteúdo de uma tabela
tags que permite inserir imagens
<img src="nome da imagem">
tags que permite um link(ligação)
<a href="endereço"> define uma ligação para um link ou um outro documento
Exemplo de tags e atributos que permitem criar formulários:
<form> ... </form> define o inicio e o fim de um formulário
<input type="text"...> define uma caixa de texto para input;
<input type="password"...> define uma caixa de texto para input de uma password
<input type="radio"...> define um botão de opção
<input type="checkbox"...> define uma caixa de seleção
<input type="button"...>define um botão de comando
<input type="submit"...> define um botão de comando para envio de dados de um formulário
<input type="reset"...>define um botão de comando para restabelecer (apagar) os dados
tabelas em html
na tag <table> o atributo border permite definir a espresura da linha; por exemplo border=1
a tabela é construida linha a linha. cada nova linha é definida com uma tag <tr>. em cada(após) cada tag <tr> inserem-se as tags que definem células da tabela(<th> ou <td>).
o mais usual é utilizar se a tag <td> para definir cada célula a inserir na linha. A tag <th> costuma ser utilizada nas primeiras linhas da tabela.
apenas difere da tag <td> no seguinte : o conteudo de uma celula definida com <th> é destacada a negro.
- com as tags <th> e <td> podemos usar o atributo do width para definir a largura das células; por exemplo: <tdwidth =90> uma célula </td> (define uma célula com a largura de 90 pixeis)
o atributo colspan permite indicar o número de colunas que uma célula ocupa. por exemplo:
<th colspan=2> faz com que a célula ocupe duas colunas.
Links ou Ligações
<a href = "...">...</a>
qualquer tipo de ligação ( link) é feita sempre com base na tag <a>...</a> também chamada anchortag.
O principal atributo da tag <a> é o atributo href(de hypertext reference).É este atributo que define o local (endereço URL, local do novo documento, etc...) para onde se pretende efectuar uma ligação.
Ligação Externa (um URL externo)
<a href = "http://google.com">Google</a>
O atributo HREF é igualado ao endereco URL que temos em vista para a ligação externa. Entre as tags <a> e </a> colocamo0s o texto que queremos que apareça na página.
Ligação interna para outro documento no mesmo computador
<a href ="doc2.htm"> mais informações</a>
neste caso, o atributo HREF é igualado ao nome do ducomento HTML 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 é necessário ter isso em conta na indicação do nome.
Ligação para um endereço de e-mail
<a href ="mailto:nomealuno@gmail.com"> Enviar mail para nomealuno</a>
neste exemplo, o link criado permite accionar a aplicação de e-mail que estiver configurada no computador para enviar uma mensagem de correio electrónico para nomealuno@gmail.com.
Inserção de imagens
<img src ="globo.gif">
A inserção de imagens em documentos de htmlb é feita atravéez da tag <img> ( que não tem tag de fecho). A indicação do local, nome do ficheiro da imagem é feita no atributo src (de source= que em ingles significa a fonte).
No caso de a imagem que pertemdemos inserir na página se encontrar numa pasta difrente da corrente , teremos de indicar a sua localização. por exemplo:
<img src =" imagens/globo.gif">
Atributos relativos a uma mensagem
o atributo align permite definir a forma de alinhamento da imagem. Os valores possiveis são:
letf;right;middle;bottom e top.
O atributo border permite definir uma linha rectangular de contorno na imagem. deve ser indicado um valor numérico para a espressura da linha. Exemplo<img src="pirata.gif" border ="2">
O atributo height permite definir a altura da imagem.
O atributo width permite definir a largura da imagem.
Som numa página
<p align="center">
<bgsound src="som1.mid">
<embed src ="som1.mid" width ="140" height="25" autostart ="true" controls="smallconsole"
volume="60"loop="false">
</embed>
</p>
Frames
Para definir frames, utiliza-se o "tag" <frameset>.
como não se trata propriamente do corpo da página, este "tag" define uma área após a área <head>, mas não contido dentro do "tag" <body>. ao utilizar o parâmetro cols, divide página em colunas, neste caso definidas por "160,*". Isto significa que são criadas duas, uma com 160 pixeis de largura e outra que ocupa o resto do espaço disponivel no ecrã. As medidas das frames podem ser fornecidas em pixeis, em percentagem do espaço disponivel ou por um asterisco, que significa "o resto". Estas colunas são definidas das esquerdas para a direita. temos também BORDER e FRAMSPACING. Que definem a borda e o espaçamento entre frames.
o tag <frame>, que se refere á primeira coluna (de 160 pixeis). src define qual o ficheiro html a ser importante, indica qual o nome da frame, para que as links possam lá recair.
NORESIZE indica que a frame não pode ser redimensionada com o rato, e
FRAMEBORDER, o border da frame.
Utiliza-se < FRAME FRAMEBORDER> e <FRAMESET BORDER> por uma questão de conpatibilidade entre o internet explorer e o Netscape navigator. SRCOLLING pode ser definido com etc ...
<input type="text" name="nome">
Este é um exemplo de um <input> do tipo text, ou seja, uma caixa de texto. Nesta tag de input, temos dois atributos:
A expressão type="text" indica que o atributo type(tipo de elemento) que se pretende é "text", ou seja, uma caixa de texto;
a expressão name ="nome" indica que o atributo name ( nome do elemento) será " nome", ou seja, esta caixa de texto passa a ser a identificada pela palavra "nome".
Outros atributos que podemos usar com as caixas de texto:
value ="..."- o atributo value permite indentificar um valor inicial para uma caixa de texto e, por outro lado , captar o dado escrito pelo utilizador;
size =n - tamanho da caixa de texto, em que a indica o numero de carateres da sua largura;
Maxlength = n - número máximo (n) de carateres permitidos.
Sem comentários:
Enviar um comentário