WebDesign AULA 2: Introduo a HTML

  • Published on
    26-Jan-2017

  • View
    618

  • Download
    2

Transcript

  • Profa. Camila Hamdan http://www.camilahamdan.net

    DESIGN GRFICO PARA WEB Introduo a HTML 5

    http://www.camilahamdan.net/

  • INTRODUO AO HTML

    INTRODUO AO HTML

  • O HTML (HyperText Markup Language/ Linguagem de Marcao de Hipertexto) surgiu com o intuito de resolver os problemas de Tim Berners-Lee. Ele queria disseminar pesquisas e se comunicar com seus colegas, por esse motivo, ele criou ferramentas para solucionar esses problemas. Estas ferramentas combinadas com a internet da poca ganhou um destaque mundial e por incrvel que parea esta a linguagem mais apropriada at o momento para ser usada em sites. Com o passar dos tempos, (W3C) Wide Web Consortium vem tentando melhorar esta linguagem, retirando as ambiguidades que existem nela.

  • OU SEJA:

    HTML uma linguagem de marcao (tags) para descrever documentos da web (pginas da internet).

    HTML significa Hyper Text Markup Language Uma linguagem de marcao um conjunto de tags de

    marcao Os documentos HTML so descritos por tags HTML

    Cada tag HTML descreve o contedo do documento diferente

  • HTML Editores

    Faa uma pgina em HTML usando o software Bloco de Notas ou TextEdit HTML podem ser editados utilizando editores HTML profissionais como: Microsoft WebMatrix Sublime Text No entanto, para aprender HTML recomendamos um editor de texto como o Bloco de Notas (PC) ou TextEdit (Mac). Acreditamos que usando um editor de texto simples seja uma boa maneira de aprender HTML.

  • Siga os 4 passos para criar sua primeira pgina web com o bloco de notas.

    PASSO 1: ABRA O BLOCO DE NOTAS

    Para abrir o bloco de notas no Windows 7 ou anterior: Clique em Iniciar (canto inferior esquerdo da sua tela). Clique em Todos os Programas . Clique Acessrios . Clique Bloco de Notas . Para abrir o bloco de notas no Windows 8 ou posterior: Abra a tela de incio (o smbolo janela no canto inferior esquerdo da sua tela). Escreva Notepad .

  • A declarao DOCTYPE define o tipo de documento em HTML

    O texto entre e descreve o documento HTML

    O texto entre e fornece informaes sobre o documento

    O texto entre e fornece um ttulo para o documento

    O texto entre e descreve o contedo da pgina visvel

    O texto entre e descreve o ttulo

    O texto entre e descreve o pargrafo

    Usando esta descrio, um navegador pode exibir um documento com um

    ttulo e um pargrafo.

    Explicao do cdigo...

    Ttulo da Pgina Descreve o Ttulo Descreve o pargrafo.

    PASSO 2: ESCREVA O SEGUINTE CDIGO

  • Salve o arquivo em seu computador. Selecione Arquivo> Salvar como no menu Bloco de Notas. Nomeie o arquivo "index.html" ou qualquer outro nome que termina com .html ou .htm UTF-8 a codificao preferida para arquivos HTML. ANSI codificao abrange EUA e apenas caracteres da Europa Ocidental.

    PASSO 3: SALVE A PGINA COM A EXTENSO (.html)

  • PASSO 4: VER A PGINA DE EXTENSO (.html) NO SEU NAVEGADOR

    Abra o arquivo HTML salvo no seu navegador favorito. O resultado ser muito semelhante a este:

  • Tags HTML normalmente vm em pares como e A primeira tag em um par a marca inicial, a segunda tag a tag final A marca final escrito como a marca inicial, mas com uma barra antes do nome do tag

  • HTML exemplos bsicos

    Documentos em HTML

    Todos os documentos HTML deve comear com uma declarao do tipo: . O documento HTML em si comea com e termina com . A parte visvel do documento HTML entre e .

  • HTML Ttulos

    Ttulos HTML so definidos com os para tags:

    define o ttulo mais importante. define o ttulo menos importante.

    Nota: Os navegadores automaticamente adicionar algum espao vazio (a margem) antes e depois de cada ttulo.

  • Use ttulos HTML apenas para ttulos. No use ttulos para tornar o texto grande ou em negrito . Os motores de busca usar suas posies para indexar a estrutura e o contedo de suas pginas web. Usurios buscam pginas por suas posies. importante a utilizao de posies para mostrar a estrutura do documento. posies h1 deve ter a principal posio, seguido por posies h2, h3, em seguida, o menos importante.

  • Regras horizontais HTML

    A tag cria uma linha horizontal em uma pgina HTML. O elemento hr pode ser usado para separar o contedo:

  • O HTML Elemento

    O HTML elemento no tem nada a ver com posies HTML. O HTML contm meta dados. Os Meta dados no so exibidos. O HTML colocado entre a tag e a tag :

  • HTML Pargrafos

    Pargrafos HTML so definidos com o tag:

  • Links em HTML

    Links em HTML so definidas com a tag:

    O endereo do link especificado no atributo href . Os atributos so usados para fornecer informaes adicionais sobre os elementos HTML.

  • Imagens de HTML

    Imagens HTML so definidos com o tag.

    O arquivo de origem ( src ), texto alternativo ( alt ), e tamanho ( largura e altura ) so fornecidos como atributos :

  • Elementos HTML

    HTML documentos so compostos por HTML elements .

    Elementos HTML so escritos com um incio tag, com um fim tag, com o contedo no meio:

    HTML elemento de tudo, desde a marca de incio para a marca de fim:

    Meu primeiro cabealho

    Meu primeiro pargrafo

    Tag de incio Tag de fim

  • Elementos HTML podem ser alinhados (elementos podem conter elementos). Todos os documentos HTML consistem em elementos HTML alinhadas. Este exemplo contm quatro elementos HTML:

    Elementos HTML

  • O elemento define o documento inteiro . Ele tem um comeo tag e um final tag . O elemento de contedo outro elemento HTML (o elemento ).

  • O elemento define o corpo do documento . Ele tem uma tag de incio e uma tag final . O elemento de contedo de dois outros elementos HTML ( e ).

  • O elemento define um ttulo do cabealho . Ele tem uma tag de incio e um final tag . O elemento de contedo : meu primeiro ponto.

    O elemento define um pargrafo . Ele tem uma tag de incio e um final tag . O elemento de contedo est: Meu primeiro pargrafo.

  • No se esquea da final Tag

    Alguns elementos HTML sero exibidos corretamente, mesmo se voc esquecer a tag de fim:

    O exemplo acima funciona em todos os navegadores, porm, erros inesperados podem ocorrer caso voc esquea a tag de fim.

  • Elementos HTML sem contedo so chamados de elementos vazios. um elemento vazio, sem uma tag de fechamento (o tag define uma quebra de linha). Os elementos vazios podem ser "fechados" na tag de abertura assim: .

    ELEMENTOS VAZIOS em HTML

    Dica: Use tags com letras minsculas

    Tags HTML no diferencia as letras maisculas de minsculas: significa o mesmo que . O padro HTML5 no requer letras minsculas, mas W3C recomenda minsculas em HTML4, e exige minsculas para os mais complexos tipos de documentos como o XHTML.

    Desta forma, optamos por conveno, utilizar tags com letras minsculas.

  • ATRIBUTOS em HTML

    Atributos visam fornecer informaes adicionais sobre os elementos em HTML.

    Atributos HTML

    Elementos HTML podem ter atributos Os atributos fornecem informaes adicionais sobre um elemento Os atributos so sempre especificados com a tag de incio Atributos vm em pares nome / valor como: name = "value"

  • O idioma do documento pode ser declarada na tag . A linguagem declarada como o atributo lang. Declarar uma lngua importante para os aplicativos de acessibilidade (leitores de tela) e motores de busca:

    ATRIBUTO LANG

    As primeiras duas letras especificam o idioma (en). Se houver um dialeto, use mais duas letras no caso (EUA). No Brasil : pt-BR

  • Pargrafos em HTML so definidos com a tag . Neste exemplo, o elemento tem um atributo de ttulo atributo. O valor do atributo About Camila Hamdan":

    ATRIBUTO TITLE

  • Links em HTML so definidos com a tag . O endereo do link especificado no href atributo:

    ATRIBUTO HREF

    Cdigo em HTML Resultado

  • Imagens HTML so definidos com a tag . O tipo de fonte ( src ), e o tamanho da imagem ( largura e altura ) so fornecidos como atributos :

    ATRIBUTOS DE TAMANHO

    Cdigo em HTML Resultado

    O tamanho da imagem especificado em pixels: width = 200" significa 200 pixels de tela ampla.

  • O atributo alt especifica um texto alternativo para ser usado, quando um elemento HTML no pode ser exibido. O valor do atributo pode ser lido por "leitores de tela". Desta forma, algum "escuta" a pgina da Web, ou seja, uma pessoa cega, pode "ouvir" o elemento.

    ATRIBUTOS ALT

    https://soundcloud.com/cyberneticgirl/camilahamdan_googlevoice_test

    https://soundcloud.com/cyberneticgirl/camilahamdan_googlevoice_test

  • Aspas simples ou duplas?

    Aspas duplas so os mais comuns em HTML, mas o estilo nico tambm pode ser usado. Em algumas situaes, quando o prprio valor do atributo contm aspas, necessrio o uso de aspas simples:

    Ou vice-versa:

  • Desta forma, compreendemos que:

    Todos os elementos HTML pode ter atributos O atributo ttulo fornece "dica de ferramenta" informao adicional O atributo href fornece informaes de endereo para links Os atributos de largura e altura fornecem informaes de tamanho para imagens O atributo alt fornece texto para leitores de tela promovendo a acessibilidade de pessoas com deficincia visual ou baixa viso. Optamos por conveno usar sempre minsculas nos nomes de atributos em HTML, como tambm, citar os atributos com aspas duplas.

  • A lista completa de todos os atributos para cada elemento HTML, est listado na pgina: HTML Tag Referncia .

    http://www.w3schools.com/tags/default.asphttp://www.w3schools.com/tags/default.asphttp://www.w3schools.com/tags/default.asphttp://www.w3schools.com/tags/default.asp

  • 1. Faa uma pequena pgina em HTML falando sobre voc! 2. Insira uma imagem sua na pgina; 3. Transforme uma palavra da pgina em um link que vai para seu

    Facebook; 4. Especifique um texto alternativo para ser lido por "leitores de tela".

    EXERCCIO