Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Boas Praticas

    Enviado por

    luizloja
    7 visualizações56 páginas

    Título original

    boasPraticas

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PPTX, 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 PPTX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    7 visualizações56 páginas

    Boas Praticas

    Enviado por

    luizloja

    Direitos autorais:

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

    Disciplina

    Autoria Web

    Prof.: Luiz Loja


    1/29/21

    Primeira Aula

    Introdução e HTML
    Agenda da nossa Apresentação

    1 2 *
    Forma de
    Avaliação
    Discussão
    HTML

    Cronograma
    1 FORMA DE AVALIAÇÃO

    Provas e trabalhos.
    •Provas e trabalhos
    • 1 provas.
    • 1 trabalho.

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

    Você tem Facebook?


    3 HTML

    O que é HTML?
    HTML
    » HyperText Markup Language
    » Linguagem de Marcação de Hipertexto
    » Criada por Tim Berners-Lee
    » Era um conjunto de ferramentas
    » Explosão da internet
    » Sintaxe flexível
    » Definição da linguagem na década de 90
    » Mantida pela World Wide Web Consortium (W3C )
    HTML
    » Produção de páginas na Web
    » Interpretadas pelos navegadores
    » Firefox
    » Internet Explouder
    » Netscape
    » Chrome
    » Mudanças
    » Sintaxe da linguagem ficou mais rigida
    » Criação do HTML5
    HTML
    » Documento HTML apresenta etiquetas
    » Elementos entre parentes angulares
    » Exemplo:
    » <etiqueta> Conteúdo </etiqueta>
    » Comandos de formatação da linguagem
    » Maioria contem seu correspondente de fechamento
    » Definem
    » Fomatação de uma porção do documento
    » Início e o fim do texto
    » Elementos vazíos não possuem fechamento

    Etiquetas
    HTML
    » Rótulos devem ser escritos em maiúsculo ou minúsculo?
    » Indiferente
    » <COMANDO>, <comando> ou <CoMaNdo>
    » Padrão escrever em minúsculo.
    » Onde devo colocar as tags?
    » Documento HTML
    » Sites possuem mais de um documento HTML
    » Navegação
    » Construindo nosso primeiro arquivo HTML
    » Faremos o tradicional "Hello World" auf Deutsch "Hallo Welt"

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

    Etiquetas ou Tags
    BR
    • Salto de linha
    • Não possui atributos
    • Exemplo:

    • Resultado
    Hr
    • Horizontal Rule
    • Linha na horizontal
    • Exemplo

    • Resultado
    Ul e LI
    • Unified List - Lista unificada
    • List item - Item de lista
    • Exemplo

    • Resultado
    Ol
    • Order List - Lista Ordenada
    • Exemplo

    • Resultado
    HTML

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

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

    Imagens
    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
    Texto pré formatado
    Tag <pre>
    • Apresenta um texto pré formatado
    • Utilizado para apresentar códigos
    Exemplo
    • Código

    • Resultado
    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
    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
    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
    Tag Span
    Span
    • Elemento do tipo em linha
    • Utilizado para agrupar textos
    • Utilizado para estilizar um texto
    Exemplo
    • Código

    • Resultado
    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/acentuacao-
    caracteres-especiais/
    Perguntas?
    Luiz Fernando Batista Loja
    Luizloja@gmail.com

    Você também pode gostar