Webdesign 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 "Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza"

Lucas Gabriel Bentes Coimbra
7 Há anos
Visualizações:

1 Webdesign 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 Tags do HTML

4 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.

5 HTML Hyper Text Markup 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.htm ou.html; visualizado no navegador (eg. firefox, ie, chrome);

6 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.

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

8 Sintaxe HTML Tag: <tag>... </tag> Tag com atributos: <tag atributo1=... atributo2=... >... </tag> Tag sem marcador final: <tag /> Tag com atributos e sem marcador final: <tag atributo1=... atributo2=... />

9 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

10 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

11 HTML

12 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.

13 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>

14 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>

15 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>

16 HTML Parágrafos

17 HTML Formatação do texto <i>... </i> texto em itálico. <em>... </em> Ênfase com a mesma formatação do Itálico <b>... </b> texto em negrito. <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

18 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 />

19 HTML Tag <hr /> - Linha Uma tag que desenha uma linha na tela. Pode ser utilizada para separar conteúdo.

20 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>

21 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>

22 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>

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

24 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>

25 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:

26 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.

27 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

28 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

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

30 HTML 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>

31 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" />

32 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 >

33 HTML Imagens WIDTH e HEIGHT 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: <img src="endereço_imagem alt="descrição_imagem width="largura" height="altura >

34 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.

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

36 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>

37 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 HTML Introdução a HTML 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 HTML