Autoria Web HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Tamanho: px

Começar a partir da página:

Download "Autoria Web HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza"

Maria dos Santos Soares Cabral
8 Há anos
Visualizações:

1 HTML Introdução a HTML e as principais tags da linguagem

2 Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em:

3 Objetivos Apresentar a HTML Apresentar as principais Tagsdo HTML

4 Evolução

5 Evolução

6 Evolução

7 Evolução

8 Evolução

9 Evolução

10 Evolução

11 Evolução

12 Evolução

13 Evolução

14 Evolução

15 Evolução

16 Evolução

17 Evolução

18 Evolução

19 Evolução

20 Evolução

21 Evolução Atualmente

22 HTML HTML significa linguagem de marcação de hipertextos. Utilizada para construção de páginas para Internet. Na forma de documentos interpretados por aplicativos denominados navegadores(browser). Um hipertexto é um documento que combina textos, imagens, sons, vídeos, animações, interações e ligações com outros documentos.

23 HTML HyperTextMarkup Language: não é uma linguagem de programação; - Linguagem de Marcação Documento HTML: formato texto, portanto pode ser feito em qualquer editor simples de texto; extensão.htmou.html; visualizado no navegador (eg. firefox, ie, chrome);

24 HTML Um documento HTML é formado através de etiquetas (TAGs), as quais são constituídas na forma<...> A maioria das etiquetas tem uma correspondente de abertura <...> e outra de fechamento </...> Ex: <HTML> </HTML> Podem ser escritas em maiúsculas ou minúsculas.

25 TagsHTML TagsHTML são palavras-chave entre colchetes angulares como <html> TagsHTML normalmente vêm em pares, como <strong> e </ strong> A primeira tagem um par é a tagde início, a segunda tagé a tagfinal Marca inicial e final são também chamados de abertura tags e fechamento de tags Documentos HTML = Páginas Web

26 Sintaxe HTML Tag: <tag>... </tag> Tagcom atributos: <tagatributo1=... atributo2=... >... </tag> Tagsem marcador final: <tag/> Tagcom atributos e sem marcador final: <tagatributo1=... atributo2=... />

27 Exemplo HTML Abrir o Bloco de Notas e digitar o seguinte texto: <html> <head> </head> <body> <h1>página de Teste</h1> <p> Olá! Este é um exemplo de código HTML.</p> </body> </html> Criar uma pasta com seu nome e Salvar o arquivo com o nome exemplo1.html

28 Exemplo HTML O texto entre <html> e </html> descreve a página web O texto entre <body> e </ body> é o conteúdo da página visível O texto entre <h1> e </ h1> é exibida como um título O texto entre <p> e </ p> é exibido como um parágrafo

29 HTML

30 HTML No cabeçalho vão informações como: <title> para definição do título da página. <style> definição de formatação do conteúdo. <script> programação de conteúdo dinâmico. <link> para ligação de arquivos externos. <meta> define meta informações da página.

31 HTML Comentários  para inserção de comentários. <! Primeira página em HTML --> <html> <head> <title>página teste...</title> </head> <body> Primeira página em HTML. <hr color="red"> </body> </html>

32 HTML Títulos <H1>... </H1>, <H2>... </H2> e <H3>... </H3> <html> <head> <title>página teste...</title> </head> <body> <h1>título em formato H1</h1> <h2>título em formato H2</h2> <h3>título em formato H3</h3> </body> </html>

33 HTML Parágrafos <p>...</p> Define um parágrafo com quebra de linha e inserção de uma linha de separação entre os parágrafos. <html> <head> <title>página teste...</title> </head> <body> <p>este é um parágrafo.</p> <p>este é um segundo parágrafo.</p> </body> </html>

34 HTML Formatação do texto Autoria Web <em>... </em>ênfase com a mesma formatação do Itálico <strong> </strong> Ênfase com a mesma formatação do Negrito <sup>... </sup> sobrescrito. <sub>... <sub> subscrito. <blockquote>... </blockquote> identado. <address>... </address> endereço. <del>...</del> Risca o Texto

35 HTML Tag<br> -Quebra de Linhas Caso você queira simplesmente mudar de linha, ao invés de mudar de parágrafo, coloque a tag<br>

36 HTML Tag<hr> -Linha Uma tagque desenha uma linha na tela. Pode ser utilizada para separar conteúdo.

37 HTML Listas Ordenadas Uma lista ordenada inicia com <ol> e finaliza com </ol> Cada item da lista inicia por <li> e finaliza com </li> <ol> <li>café</li> <li>leite</li> </ol>

38 HTML Listas Ordenadas Uma lista ordenada consiste em criar uma lista com numeração. A tag para criar uma lista ordenada é a tag ol (ordened list). Cada item da lista deve ter o comando li (list item): <ol> <li> Primeiro item da lista </li> <li> Segundo item da lista </li> </ol>

39 HTML Listas Ordenadas O comando ol tem os seguintes parâmetros: Start escolher em que posição sua lista ira iniciar Type escolher o tipo de numerador pra lista entre: 1 / i / I / a / A <ol start= 3 type= a > <li> Primeiro item da lista </li> <li> Segundo item da lista </li> </ol>

40 HTML Listas Desordenadas Uma lista desordenada consiste em criar uma lista com marcadores. A tagpara criar uma lista ordenada é a tagul (unordened list). Cada item da lista deve ter o comando li (listitem): <ul> <li> Primeiro item da lista </li> <li> Segundo item da lista </li> </ul>

41 HTML Listas Desordenadas O comando ul tem os seguintes parâmetros: Type escolher o tipo de marcador pra lista entre: square / circle / disc <ul type= square > <li> Primeiro item da lista </li> <li> Segundo item da lista </li> </ul>

42 Endereços na Internet Um objeto na internet possui uma URL Também conhecido como endereço eletrônico Exemplos: Portal do IFBA: Facebook: Site de busca do Google: Autoria Web

43 Endereço Absoluto O endereço absoluto inclui o protocolo, o domínio e o caminho no servidor para a página ou localização do recurso É independente da página atual.

44 Endereço Relativo É o endereço para a localização do objeto a partir da página atual Usará o domínio e o caminho da página que está visualizando para montar a URL dos objetos

45 Endereço Relativo É o endereço para a localização do objeto a partir da página atual Usará o domínio e o caminho da página que está visualizando para montar a URL dos objetos

46 HTML Hyperlinks <a>... </a> Permite a criação de elos entre páginas ou seções de um hiperdocumento.

47 HTML Autoria Web Criação de elos entre documentos <! Primeira página em HTML --> <html> <head> <title>página teste...</title> </head> <body> <a href="segundo.html>leva a próxima página.</a> </body> </html>

48 HTML Imagens <img src= arquivo alt= texto alternativo /> Permite a inserção de imagens em um documento HTML. src define o caminho e nome do arquivo a ser inserido. alt define um texto alternativo caso a imagem não seja carregada. Ex: <img src="barco.gif" alt= Um barco" />

49 HTML ALT O parâmetro alt é utilizado para quando a imagem não for carregada exibir um texto(no mesmo local da imagem) ALTernativo, este texto também é exibido quando o cursor estiver sobre a imagem. <img src= bat.jpg alt= Cartaz do Batman >

50 HTML Imagens WIDTHeHEIGHT Atributos de dimensão largura e altura da imagem, em pixels. Grande parte dos Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas. Formato: <imgsrc="endereço_imagem alt="descrição_imagem width="largura" height="altura >

51 HTML Imagens Com o comando img podemos inserir uam imagem na página. <img src= caminho\da\imagem > Existem parâmetros para: Alterar altura e largura: height / width, os valores devem ser em pixel(não utiliza nenhum simbolo) ou porcentagem (%) <img src= foto.jpg width= 10% > <img src= foto.jpg width= 100 > No primeiro exemplo a imagem será exibida com á largura de 10% de seu tamanho original, já no segundo a imagem será exibida com á largura de 100 pixels.

52 HTML Criando Tabelas Uma tabela é formada por linhas e colunas Linha Coluna

53 HTML Criando Tabelas Para criar a tabela anterior segue código: <table> <tr> <td>... </td> <td>... </td> <td>... </td> </tr> <tr> <td>... </td> <td>... </td> <td>... </td> </tr> </table>

54 HTML <table> ABRE UMA TABELA <tr> ABRE UMA LINHA <td> Segunda </td> UMA COLUNA <td> Terça </td> UMA COLUNA <td> Quarta </td> UMA COLUNA <td>quinta</td> UMA COLUNA </tr> FECHA UMA LINHA </table> FECHA A TABELA

Documentos relacionados

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign Introdução a e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a Apresentar as