Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Primeira Principais Tags

    Enviado por

    luizloja
    4 visualizações28 páginas

    Título original

    primeiraPrincipaisTags

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    RTF, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato RTF, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    4 visualizações28 páginas

    Primeira Principais Tags

    Enviado por

    luizloja

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato RTF, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 28

    Primeira Aula

    Introdução e HTML
    quinta-feira, 24 de abril de 2014

    Forma de avaliação

    Forma de Avaliação
    Você navega na internet?
    Você tem Facebook?

    HTML
    O que é HTML?
    Passos para criar um HTML
    • Criemos um documento .html

    • A primeira tag é a tag HTML


    • <html></html>

    • Segunda tag - Cabeçalho


    • <head></head>
    • Fornece informações sobre o
    documento

    • Terceira tag - Corpo


    • <body></body>
    • Aqui vai o conteudo da página
    Passos para criar um HTML
    <html>
    <head></head>
    <body>

    </body>
    </html>

    Estruturação
    • Indentação do código
    • Não faz diferença para o
    navegador
    • Faz muita diferença para os
    desenvolvedores
    Passos para cirar um HTML
    • Acrescentar a tag title
    • <title>Minha primeira página
    web</title>

    • Acrescentar nossa mensagem


    • <p>Hallo Welt</p>

    • Abrir nossa página em qualquer


    navegador
    Etiquetas ou Tags
    HTML

    BR
    • Salto de linha

    • Não possui atributos

    • Exemplo:

    • Resultado
    Exercício
    • Escreva "Rá rá rá rá rá" salte uma linha"

    • Escreva " Lepo, lepo"

    Hr
    • Horizontal Rule

    • Linha na horizontal

    • Exemplo

    • Resultado

    Exercício
    Ul e LI
    • Unified List - Lista unificada

    • List item - Item de lista

    • Exemplo

    • Resultado

    Ol
    • Order List - Lista Ordenada

    • Exemplo
    • Resultado

    Atributos
    HTML

    Tags podem ter atributos


    • Adição de caracteríscas as tags

    • Tags mais específicas

    • Declaração
    • Dentro da tag
    • Seguido do sinal de igual
    • Aspas duplas
    Atributos
    • Variam de acordo com a tag

    • Atributo Style adiciona um estilo


    a tag
    • Exemplo
    Atributos
    • Nomes dos atributos são em
    inglês
    • Aplicados para maioria das tags
    • Cores
    • #ff0000 deixa a página vermelha
    • Sistema hexadecimal de cores
    • Cada cor representada por um
    número hex
    • Formado por um sinal # seguido de
    seis dígitos e/ou letras
    Atributos
    • Exemplo de cores
    • Branco: #ffffff
    • Preto: #000000 (zeros)
    • Vermelho: #ff0000
    • Azul: #0000ff
    • Verde: #00ff00
    • Amarelo: #ffff00

    Links
    HTML

    A
    • Ancora

    • Uma ligação Página e outras tags

    • Exemplo

    • Resultado
    Ancora <A>
    • Atributos
    • Href especificar a URL (Uniform
    Resource Locator)
    • "http://" deve ser incluido na url

    • Link entre as próprias páginas


    • Não precisa escrever o endereço
    completo
    • Respeitar a hierarquia de diretórios
    Ancora <A>
    • Links dentro da mesma página
    • Usar o atributo id e # no link

    • Exemplo
    Ancora <A>
    • Link para enviar email

    • Exemplo

    • Resultado

    • Atributo
    • title
    Imagens
    HTML

    Img
    • Adiciona uma imagem ao html

    • Exemplo

    • Resultado
    Imagem
    • Atributo
    • src é a abreviatura source
    • fonte da imagem, ou seja, onde está
    localizada
    • Tipos de imagens suportadas
    • GIF (Graphics Interchange Format)
    • JPG / JPEG (Joint Photographic
    Experts Group)
    • PNG (Portable Network Graphics)

    Imagem
    • Exemplos

    Parágrafo
    Tag <p>
    • Define um parágrafo na página
    • O navegador automaticamente
    adiciona um espaço antes e depois
    de cada tag <p>

    Exemplo
    • Código

    • Resultado
    Exercício
    • Crie um parágrafo com o nome
    do seu amigo preferido D: .
    • <html>
    • <head></head>
    • <body>
    • <p> Renato </p>

    • </body>
    • </html>

    Texto pré formatado


    Tag <pre>
    • Apresenta um texto pré
    formatado
    • Utilizado para apresentar
    códigos

    Exemplo
    • Código

    • Resultado
    Exercício
    • Crie um texto com dois
    paragráfos utilizando a tag <pre>

    Não tenho carro


    Não tenho teto
    Mas se ficar comigo, é porque ...
    Comentários
    Separadores de Código
    • Comentários
    • <!-- -->

    • Qualquer coisa que esteja dentro


    do marcador de comentários não é
    interpretada pelo browser.
    • Utilizado para documentar o
    html
    Exercício
    • Crie um comentário qualquer no
    código html

    Tabela
    Tabelas
    • Geralmente utilizada para
    organizar dados
    Tabelas
    • Definidas pela tag <table>

    • A tabela é dividida em linhas


    pela tag <tr>
    • Dentro das tags <tr> a tabela é
    dividida em células pela tag <td> ou
    por tags <th>
    • A <td> é o elemento que
    comporta os dados
    • A <td> pode conter qualquer
    tipo de tags ou textos

    Exemplo de Tabelas
    Exercício
    • Crie o código da tabela abaixo.

    Elementos de Bloco
    Nível de Bloco ou
    Elementos de Linha
    • Nível de bloco
    • São elementos que após sua
    utilização ocorre um salto de linha
    • Exemplos: <h1>, <p>, <ul>, <table>

    • Elementos de linha
    • São elementos que após terminarem
    não saltam linha
    • Exemplos <b>, <td>, <a>, <img>

    Tag Div
    Div
    • A tag div um elemento de bloco

    • Utilizado para agrupar um


    conjunto de tags
    • A <div> apresenta salto de linha
    antes de depois de ser utilizada

    Exemplo
    • Código

    • Resultado
    Exercício
    • Crie três divs e coloque os
    nomes dos seus melhores
    amigos :D

    Tag Span
    Span
    • Elemento do tipo em linha

    • Utilizado para agrupar textos

    • Utilizado para estilizar um texto

    Exemplo
    • Código
    • Resultado
    Exercício
    • Crie um span e escreva

    A prova será muito fácil

    Frames Internos
    Iframe
    • Permite colocar um outro
    documento dentro do html

    Exemplo
    • Código

    • Resultado
    Exercício
    • Crie um Iframe apontando para a
    página do google.

    Caracteres especiais
    Caracteres Especiais
    • Iniciam com o caractere &
    seguido do código do caractere
    especial
    • Exemplo
    • Espaço = &nbsp;
    • & = &amp;
    • º = &ordm;
    • © = &copy;

    • Pagina:
    http://erikasarti.net/html/acentuac
    ao-caracteres-especiais/
    Exercício
    • Utilize os caracteres de espaço
    para formatar o texto abaixo.

    Eu vou estudar

    Luiz Fernando Batista Loja


    Luizloja@gmail.com

    Você também pode gostar