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 principais Tags do
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.
Hyper Text Markup Language: não é uma linguagem de programação; - Linguagem de Marcação Documento : formato texto, portanto pode ser feito em qualquer editor simples de texto; extensão.htm ou.html; visualizado no navegador (eg. firefox, ie, chrome);
Um documento é 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: <> </> Podem ser escritas em maiúsculas ou minúsculas.
WEBDESIGN
Tags Tags são palavras-chave entre colchetes angulares como <html> Tags 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 = Páginas Web
Sintaxe 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=... />
Exemplo 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.</p> </body> </html> Criar uma pasta com seu nome e Salvar o arquivo com o nome exemplo1.html
Exemplo 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
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.
DOCTYPE <!DOCTYPE html> Informa a versão do que está sendo utilizada. É a primeira informação que vai em um documento.
META TAG <meta charset= UTF-8 /> As meta-tags trazem informações extras sobre o documento, como o exemplo acima que informa o tipo de codificação de caracteres que será utilizado.
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>
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>
Comentários <!-- --> para inserção de comentários. <! Primeira página em --> <html> <head> <title>página teste...</title> </head> <body> Primeira página em. <hr color="red"> </body> </html>
Formatação do texto <em>... </em> texto em itálico. <strong>... </strong> texto em negrito. <sup>... </sup> sobrescrito. <sub>... <sub> subscrito.
Tag <BR /> - Linhas Como você pode ver, o navegador mesmo faz um parágrafo novo cada vez que você coloca esta tag. Caso você queira simplesmente mudar de linha, ao invés de mudar de parágrafo, coloque a tag <BR />
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>
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>
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>
Listas Não Ordenadas 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>
Listas Não ordenadas 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>