o que é html
DESCRIPTION
tudo sobre oque é HTML...TRANSCRIPT
O que HTML?(Hypertext Markup Language- Linguagem de Marcação de Hipertexto)
éA linguagem que são modificadas as paginas da web.
O funcionamento da web tem com base:A linguagem HTML- que codifica a estrutura de base das paginas
da web;O protocolo HTTP - que assegura a transferência dessa pagina
através da internet.A HTML não é uma linguagem de programação propriamente dita. É uma linguagem de estrutura e formatação de documentos (Markup
Language) . como tal a HTML não possui os recursos típicos das linguagens de programações, tais co: variáveis operadores, funções,
estruturas de controlo. Etc. A utilização de HTML simples apenas produz paginas web estáticas e
sem interactividades como o utilizador. Para introduzir essas características nas paginas web torna-se necessário combinar HTML
com outras linguagens de scripting, como; PHP;JSP;ASP etc,A linguagem HTML utiliza tags, marcas ou etiquetas de marcação
para definir a estrutura e a formatação das paginas web.
Regras básicas que é necessário compreender antes de se começar com a criação
de paginas Todos os ‘tags’ são inseridos entre sinais de menos ou maior: <tag> Tirando aqueles que represnetã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 (ultilizando o carater’/’):
<tag> </tag> Todos os ‘tags’ obedecem a uma hiererquia, 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úsculas ou minúsculas nos tags <tag> é igual a <TAG> E A <Tag> Nota: No HTML actual, as teclas devem ser escritas em minúsculas. Estrutura basicasde um HTML Um documento HTML começa com o tag de abertura <html> e termina com o tag
de fecho </html>
Exemplo: <HTML> . . . </HTML> As duas partes principais que constiue um documento: O cabeçalho (head)-que fica compreendido entre as tags
<head></head>; O corpo do documento (body)-que fica entre as tags <body></body> Exemplo <HTML> <HEAD> . . </HEAD> <BODY> . . </BODY> </HTML>
O principal elemento que é incluído no cabeçalho É o titulo da pagina – que surge entre as tags <title> e </title>.(este titulo aparece na barra de titulo do browser em que a pagina for aberta.)
No corpo do documento(entre tags <body> e </body> é insirida toda a informação apresentar na pagina – texto, imagem, etc.
Criando de paginas HTML Para criarmos a nossa primeira pagina em HTML basta um
simples editor de texto, como o Notped ou Bloco de Notas podemos momeçar por inserir o seguinte:<HTML>
<HEAD> <HEAD> <TITLE>A minha primeira pagina</TITLE> </HEAD> <BODY> </BODY> </HTML> NOTA: Guardar o ficheiro com a extensão .html
(exemplos:index.html
Convem então esclarecer algo: em HTL os espaçamentos e mudanças ..
<HTML> <HEAD> <HEAD> <TITLE>A minha primeira pagina</TITLE> </HEAD> <BODY> OI sou o Leonardo <br> Miguel <br> sou gordinho :p </BODY> </HTML>
Exemplos de tags que define a estrutura do documento
Exemplo de tags que assinalam conteúdos (texto;imagen;etc.)
<html><head>..,</head> <Body>…</body></html>
<h1>Titulo</h1>……<p>Titulo</p>……<img src=”imagens”>(etc.)
Visão geral sobre os principais tipos de tags HTMLEstrututas e contoudo do documentos HTML
Fontes tipográficas ; estilos; formatação, alinhamento;etc.
<font>Face size color<b>---</b><i>---</i><u>---</u><style>(Etc.)
<html>---</html>inicio e fim do documento<head>---</head>inicio e fim do cabeçalho <title>---</title>titulo da pagina do browser<body>---</body> corpo do documento
Elementos de apresentaçãoTags de estruturação de um documento
<h1>---</h1>titulo de maior grandeza;<h2>---</h2> titulo de segunda grandeza;…<h6>---</h6><p>---</p>paragrafo de texto;<br/> quebra de linha.
<font>---</font> definição da fonte tipografica<b>---</b>definição de texto em bold ou negro<i>---</i>definição de testo italico<u>---</u>definição de texto sublinhado<sub>---</sub>texto de superescrito<sup>---</sup>texto de destaque<strong>---</strong>texto de destaque.
Tags de títulos e parágrafos de textoAlguns tags de formatação de texto
Align – atributo usados com as tags <p> ou <hr> para definir alinhamentosWidth- atributo usado com a tag <hr> para definir largura da linha horizontal;Face- atributo usado com a tag<font>para definir a fonte tipográficaSize- para definir o tamanho da fonte Color- para definir a cor da fonte.
<ol>---</ol> define uma lista numerada;Define uma lista não numerada ;<ul>---</ul> item ou linha dentro de uma lista;<li>---</li> define uma lista de definições <dl>---</dl>indica um titulo a definição<dt>---</dt> indica um titulo a definir.<dd>---</dd>descreve o item definir
Atributos descriçãoTags que define listas de elementos
<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 <tb>---</tb>define o conteúdo de cada célula.
<img src=”ficheiro imagem”>.
<a href=”endereço”>..</a>- define uma ligação para endereço web ou um outro documento.
Tags que definem tabelas Tag que permite inserir imagens Tag que define um link (ligação)
<form>---</form> define o inicio e o fim de um formulario< input type =”texto”....>define uma caixa de texto para input;< input type =”password”…>define uma caixa de texto para input de um password< input type =”radio”>define um botão de opção < input type =”checkbox”…>define uma caixa de selecção < input type =”button”…>define um botão de comando< input type =”submit”…>define um botão de comando para envio de dados para um formulário.< input type =”reset”…> define um botão de comando para restabelecer (apagar) os dados.
Exemplo de tags e atributos que permite criar formulários:
Tabelas em HTML Na tag <table> o atributo border permite definir as espessura
da linha ;por exemplo, border=1 A tabela é construída linha a linha . cada nova linha é definida
com um tag <tr>. Em cada linha (apos casa tag<tr>) inserem-se as tags que define células de tabela (<th> ou <td>).
O mais usado e ultiliza-se tag<td> para definir cada selula a definir na linha . A tag <th> costuma ser ultilizadas nas primeiras linhas da tabela : apenas defere da tag <tag<td> no seguinte ; o conteúdo de uma célula definida como <th> é destacada a negro.
´com as tags <th>e <td> podemos usar o atributo width para definir a largura das células; por exemplo;
<td width = 90> uma célula </td> (define uma célula com a largura de 90 pixéis )
O atributo colspan permite indicar o numero de colunas que uma
célula ocupa. Por exemplo:<th colspan=2>ou :<td colspan=2> faz com a célula ocupa duas colunas.
<html> <head> <title> Tabelas </title> </head> <body> <h2 align="center"> Tabela </h2> <table align="center"border=2 cellpadding=3> <tr> <th colspan=2> Catálogo de Preços <tr> <th> Artigos <th> Preços <tr> <td> Alicate <td align="right">10 <tr> <td> Marcelo <td align="right">15 </table> </body> </html>
LINKS OU LIGAÇOES <a href=”…”>…</a> Qualquer tipo de ligação (link) É feita sempre com base na tag <a>…</a> também chamada Anchor tag. O principal atributo da tag <a> é o atributo hrtf
(de Hypertext referencie). É este atributo que define o local (endereço URL, local de novo documento, etc.) para onde se pretende efectuar a ligação.
Ligaçao externa (um URL externo) <a href=http://www.google.com>Google</a> O atributo HREF é igualdado ao endereço URL que temos em vista
para a ligação externa. Entre as tags <a> </a> colocamos o texto que queremos que apareça na pagina..
Ligação interna para outro documento no meso computador. <a href=”doc2.htm”> mais informação</a> Nesta caso, atributo HRER é igualdado ao nome do documento HTML
para onde queremos remeter o leitor quando ele crica sobre o texto é apresentado na pagina. Esse documento pode ser outra pagina HTMl ou outro tipo de documento se encontrar numa outra pasta ou diretoria é necessário ter isso em conta na indicação do nome.
Ligação pa um endereço de e-mail <a [email protected]> Enviar mail para nome aluno
</a> Neste exemplo, o link o criado permite accionar a aplicação de e-
mail que estiver configurada no computador para enviar uma mensagens de correio electrónico para [email protected].
Links para coisas <html> <head> <title> Links </title> </head> <body> <h2> Exemplificação de links</h2> <p> segue-se um link para o Goolgle </p> <a href="http://www.google.com"> google </a> <p> o link seguinte é para uma pagina local </p> <a href="o que HTML.docx"> mais informaçoes
</a> </body> </html>
Inserção de imagens <img src=”globo.gif”> A inseção de imagens em documentos html é feita
através de tag<img> (que não tem tag de feicho). A indicação do local e nome do ficheiro da imagem é feita no atributo src (de source__ que em inglês significa fonte).
No caso da imagem que pretendemos inserir na pagina se emcontra numa pasta diferente da corrente, teremos de indicar a sua localização . por exemplo:
<img src=”imagens/global.gif”>
Atributos relativos a uma imagem O atributo align permite definir a forma de alinhamento da
imagem. Os valores possíveis são : Left; rigt; middle; bottom e top. O atributo border permite definer uma linha retamgular de
contorno na imagem. Deve ser indicado um valor numérico para espessura da linha .exemplo :<img src=”pirata.gif” border=”2”>
O atributo height permite definir a altura da imagem. O atributo windht permite definir a largura da imagem. Frames Para definir frames, utiliza-se o o tag <FRAMESET>
Como não se trata propriamente do corpo da pagina , este ‘tag’ define uma área apos a área <HEAD>, mas não contido dentro do tag <BODY>. Ao utilizar parâmetros COLS, divide a pagina em colunas neste caso definidas por “160,*”. Isto significa que são criadas duas, uma com 160 pixéis de largura e outra que ocupa o resto do espeço disponível no ecrã. As mediadas das frames podem ser fornecidas em pixéis, em percentagem do espaço disponível ou por um asteristico , que significa ’o resto’. Estas colunas são definidas de esquerda para a direita. Temos também BORDER e FRAMESPACING, que define a borda e o espaçamento entre frames.
O ‘tag0’ >FRAME>. Que se reefre a primeira coluna (de 160 pixeis). SRC define qual o ficheiro html a ser exibido nessa frame, NAME, para que os links possam la recais.
NORESIZE indica que a frame não pode ser redimensionado com o rato, e FRAMEBORDER, o bordo da frame.
Ultiliza-se FRAME FRAMEBORDER> e FRAMESET BORDER> por uma questão de compatibilidade entre o internet Explorer e o Netscape Navegador. SCROLLING pode ser definido com “YES” OU “NO” para obrigar a barra de scroll a estar sempre visível ou escondida.
<html> <head> <title> Exemplo de formulário
</title> </head> <body> <form> nome: <input type="text"
name="nome"> <br> Sexo: <input type="radio" name="sexo"
value="M"> Masculino <input type="radio" name="sexo"
value="F"> Feminino <P> Disciplinas de informática de que
gosta: <br> <input type="checkbox"
name="d1" value="p"> Programação <input type="checkbox"
name="d2" value="a">
Aplicações<input type="checkbox" name="d3" value="t">tecnologias <p>Seleccione uma linguagem da seguinte lista:<select name="lista"><option> Pascal </option><option> VBasic </option><option> C++ </option><option> Java </option></select> <br> <br><input type="submit" value="Confirmar"><input type="reset" value="Limpar"></form></body></html>
<input type =”text” name =”name”> Este é um exemplo de um zinput> do tipo text. Ou seja uma caixa de
texto . neste tag de input, temos dos atributos: A expressão type = “texto” indica que o atributo type (tipo « de
elemento) que se pretende é “text” ou seja uma caixa de texto; A expressão name _”name” indica que o atributo name(nome do
elemento) será “name”; ou seja , este esta caixa de testo passa a ser identificada pela palavra “name”.
Outros atributos que podemos usar com as caxas de texto; Value=”…”- o atributo value permite indicar um valor indicado para
uma caixa de texto por outro lado captar o dado escrito pelo utilizador;
Seze= n – tamanho da caixa de texto, em que n indica o número de caracteres de sua largura;
Maxlength= n – numero máximo (n) de caracteres permitidos. Outros elementos de imput – “radio <input type=”radio” name =”sexo” name =”sexo” value=”M” No exemplo anterios temos 3 atributos mais usados type;name value.
Reparea-se que a expreção value=”M” é um atributo que podemos usar como os botões
; Checked[=”true|false”] – o atributo checked permite
colocar um botao em estado de assinalado ;neste caso , a parte que inclue o sinal de igual é o valore (true ou false) é opcional ; se esse valor não for indicado, é assumido true; para retirar a marca de assinalado , escreve-se checked=”false”.
Esse atributo também pode ser usado com os elementos do tipo checkbox—caixa de selecção.
Checkbox <input tupe=”checkbox” name=”d1” value=”P”> A Caixa Chexkbox Fica Indentificado Como O Nome
“D1” e o seu value é codificado com “P”. a disciplina que se refere é indicada entre texto normal fora da tag; programação.
<html> <head> <title> Exemplo de Formulário
</title> </head> <body> <form> <fieldset> <legend align="left"> Dados do
utilizador </legend> User Name: <input type="text"
name="nome"> <br> password: <input type="password"
name="pass"> <br> </fieldset> <p> <textarea cols=40 rows=5> Área
de texto... </textarea>
<fieldset><legend align="left"> Botões de comando
</legend><input type="submit" value="confirmar"><input type="reset"
value="limpar"></fieldset>
</form></body></html>
<textarea cols=40 rowa=5> O atributo cols=40 define que a caixa de texto
terá a largura de 30 colunas de caracteres O atriburo rowa =5 define que a caixa de
texto terá de 5 linhas ou filas de caractreres.
<html> <head> <title> Exemplo de Formulário </title> </head> <body> <h2> Identificação </h2> <form> <table border=0> <tr> <td> Primeiro nome: </td> <td> <input type="text" name="nome1"> <tr> <td> Segundo Nome: </td> <td> <input type="text" name="nome2"> <tr> <td> Nome composto: </td> <td> <input type="text" name="nomec" readonly> </table> <p> <input type="button" name="btnnomes" value="Clique para juntar os nomes" onclick="nomec.value =nome1.value + ' ' + nome2.value"> </form> </body> </html> <table border = 0> Com o atributo border igual a zero, a tabela não apresentaras linhas de controles.