O que é html

701 visualizações

Publicada em

tudo sobre oque é HTML...

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
701
No SlideShare
0
A partir de incorporações
0
Número de incorporações
9
Ações
Compartilhamentos
0
Downloads
9
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

O que é html

  1. 1. 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 essascaracterí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.
  2. 2.  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>
  3. 3.  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>
  4. 4.  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.
  5. 5.  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
  6. 6.  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>
  7. 7. Visão geral sobre os principais tipos de tags HTMLEstrututas e contoudo do documentos HTML  Exemplos de tags que Exemplo de tags que assinalam define a estrutura do conteúdos (texto;imagen;etc.) documento <html> <h1>Titulo</h1> <head> … .., … </head> <p>Titulo</p> … <Body> … … <img src=‖imagens‖> </body> (etc.) </html>
  8. 8. Elementos de apresentaçãoTags de estruturação de um documento 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
  9. 9. Tags de títulos e parágrafos de textoAlguns tags de formatação de texto <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. <h1>---</h1>titulo de maior grandeza; <h2>---</h2> titulo de segunda grandeza; … <h6>---</h6> <p>---</p>paragrafo de texto; <br/> quebra de linha.
  10. 10. Atributos descriçãoTags que define listas de elementos <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 Align – atributo usados com as tags <p> ou <hr> para definir alinhamentos Width- atributo usado com a tag <hr> para definir largura da linha horizontal; Face- atributo usado com a tag<font>para definir a fonte tipográfica Size- para definir o tamanho da fonte Color- para definir a cor da fonte.
  11. 11. Tags que definem tabelasTag que permite inserir imagensTag que define um link (ligação) <a href=”endereço”>..</a>- define uma ligação para endereço web ou um  outro documento. <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”>.
  12. 12. Exemplo de tags e atributos que permite criar formulários: <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.
  13. 13.  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.
  14. 14.  <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>
  15. 15.  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.
  16. 16.  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 hraf=edu_gtnho@hotmail.com> 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 edu_gtnho@hotmail.com.
  17. 17.  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>
  18. 18.  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‖>
  19. 19.  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>
  20. 20.  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.
  21. 21.  Aplicações <input type="checkbox" name="d3" <html> <head> value="t"> <title> Exemplo de formulário </title> tecnologias <p>  </head> Seleccione uma linguagem da <body> seguinte lista: <form> <select name="lista"> nome: <option> Pascal </option> <input type="text" name="nome"> <br> Sexo: <option> VBasic </option> <input type="radio" name="sexo" <option> C++ </option> value="M"> Masculino <option> Java </option> <input type="radio" name="sexo" </select> <br> <br> value="F"> Feminino <P> <input type="submit" Disciplinas de informática de que gosta: value="Confirmar"> <br> <input type="checkbox" name="d1" <input type="reset" value="p"> value="Limpar"> Programação <input type="checkbox" name="d2" </form> value="a"> </body> </html>
  22. 22.  <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
  23. 23. ; 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.
  24. 24.  <html> <head> <title> Exemplo de Formulário </title> </head> <body> <form> <fieldset>  <fieldset> <legend align="left"> Botões de comando <legend align="left"> Dados do utilizador </legend> </legend> <input type="submit" User Name: value="confirmar"> <input type="text" name="nome"> <input type="reset" <br> password: value="limpar"> <input type="password" </fieldset> name="pass"> </form> <br> </body> </fieldset> <p> </html> <textarea cols=40 rows=5> Área de texto... </textarea>
  25. 25.  <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.
  26. 26.  <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.

×