Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Aula 1 - Introdução Ao HTML

    Enviado por

    Rafael Escalfoni
    3 visualizações33 páginas

    Título original

    Aula 1 - Introdução ao HTML

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

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

    Aula 1 - Introdução Ao HTML

    Enviado por

    Rafael Escalfoni

    Direitos autorais:

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

    Fundamentos da Web

    Prof. Diogo Mendonça


    Fundamentos da Web
    ● Aula 0
    – Planejamento do Curso
    – Avaliação
    – Referências Bibliográficas
    Fundamentos da Web
    ● Aula 1
    – Funcionamento da Internet
    – Linguagem de marcação HTML
    Fundamentos da Web
    ● Rede de computadores (um pouco mais complexo que
    isto)
    – Endereços de rede
    – Protocolos de comunicação

    ● Diversas Aplicações
    – E-mail
    – Transferência de arquivos
    – Acesso a páginas de hipertexto (referências para outras
    páginas)
    Fundamentos da Web
    ● Protocolo de acesso a páginas (HTTP)
    Fundamentos da Web
    ● Formato das páginas é padronizada
    – HTML, XHTML, HTML5

    ● Programa que interpreta e exibe estas páginas


    – Browser ou Navegador de Internet
    ● Chrome
    ● Mozilla Firefox
    ● Internet Explorer
    ● Safari
    ● Opera
    ● Etc...
    Fundamentos da Web
    ● Páginas Web podem ter conteúdo em outros formatos
    como:
    – CSS (Folha de Estilo em Cascata)
    – Javascript (Linguagem de programação interpretada pelo
    navegador de internet)
    – Plugins de outras tecnologias (precisam de instalação)
    ● Flash
    ● Silverlight
    ● Applets Java
    ● Estes conteúdos são executados dentro do browser na
    máquina cliente
    Fundamentos da Web
    ● No lado servidor temos algumas tecnologias
    que são utilizadas para processar o conteúdo
    antes de retornar uma página web
    – PHP (Linguagem de programação lado servidor
    para processamento de páginas web)
    – Bancos de dados (tópico de outra disciplina)
    ● MySQL, Postgres, Oracle, SQL Server, entre outros.
    Fundamentos da Web
    ● Programa
    – HTML
    – CSS
    – Javascript
    – PHP (pouco)

    ● Objetivo
    – Entender como funciona uma página web e conseguir
    montar uma razoavelmente complexa.
    Fundamentos da Web
    ● HTML
    – Versões
    ● HTML 4.01
    ● XHTML
    ● HTML5 (a que vamos estudar)
    – Orgão regulador W3C (http://www.w3.org/)
    HTML5
    ● Linguagem de marcação
    ● Tags: <tag-qualquer> conteúdo </tag-qualquer>
    ● Tags iniciais para criar uma página:
    <html>
    <head>
    <body>
    HTML5
    ● Marcação da versão do HTML, primeira tag do
    seu arquivo
    – HTML5
    <!DOCTYPE html>

    – Outras versões possuem outro formato de


    marcação DOCTYPE:
    ● http://www.w3schools.com/tags/tag_DOCTYPE.asp
    HTML5
    ● Exemplo 1:
    – Primeira página web
    HTML5
    ● O W3C fornece um serviço para validação do formato da sua página em
    relação a versão do HTML declarada
    – http://validator.w3.org/

    ● Seu HTML pode ser inválido e funcionar


    ● Browsers implementam uma série de medidas de contorno para interpretar
    páginas fora do formato padrão
    ● Além do padrão W3C cada browser implementa diretivas a mais para
    interpretação do HTML, CSS e Javascript
    ● Não há garantias que a mesma página seja interpretada da mesma forma em
    todos nos navegadores:
    – Solução é Testar
    – Veremos mais ao longo do curso
    HTML5
    ● Para os autodidatas
    – Uma excelente forma de aprender as tecnologias da web
    é o W3C Schools
    http://www.w3schools.com/

    – Ver a parte de tutoriais


    – Se tiver dificuldade com o inglês marcar a opção de
    tradução para português do google (globo no canto
    superior direito da tela)
    – Vamos fazer algumas atividades de lá aqui no curso
    HTML5
    ● Atributos
    – Marcações feitas dentro das tags
    – Formato com aspas dupla para marcação do valor
    (recomendado)
    <tag atributo1=”valor1” atributo2=”valor2” … ></tag>

    – Também são aceitos em determinadas situações com


    aspas simples e sem aspas
    <tag atributo1='valor1' atributo2='valor2' … ></tag>
    <tag atributo1=valor1 atributo2=valor2 … ></tag>
    HTML5
    ● <html>
    – Marca a sua página web toda (obrigatório)
    – É boa prática marcar com o atributo lang qual a
    linguagem da página web
    – Portugues
    <html lang=”pt”>

    – Outros códigos de linguas


    http://www.w3schools.com/tags/ref_language_codes.asp
    HTML5
    ● <head>
    – Marca o cabeçalho da página
    – Pode ser omitido no html5, nas outras versões não.
    – Inclui uma série de outras tags que indicam os meta-dados da página
    ●
    <title> - Título da página (obrigatório, pode ser incluído fora do head)
    ● <style> - Folha de estilo (CSS)
    ● <base> - Endereço base para todas as urls com caminho relativo
    ● <link> - Carrega um documento externo na página
    ● <meta> - Metadados
    ● <script> - Javascript
    ● <noscript> - Conteúdo alternativo se Javascript não for suportado pelo Browser
    HTML5
    ● <meta>
    – Metadados sobre a página, são úteis para
    mecanismos de pesquisa como Google, Yahoo, Bing!,
    etc...
    – Principais
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords"
    content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="Hege Refsnes">
    HTML5
    ● <body>
    – Corpo da página web, dentro desta tag entrará o
    conteúdo a ser exibido na página
    – Conterá outras tags para formatação do conteúdo
    HTML5
    ● <h1> a <h6>
    – Títulos, sendo h1 o mais importante e h6 o menos importante
    – Cada título tem sua própria formatação padrão definida pelo browser

    – Exercício:
    ● Criar seis títutos na nossa página com as tags de h1 a h6 para visualizar o
    tamanho de cada

    – Os mecanismos de pesquisa também levam em cosideração a


    marcação de títulos para a importância das palavras chaves na
    página.
    HTML5
    ● <p> Parágrafo – Texto com uma magem mínima entre os
    elementos

    ● <br> Quebra de linha – No html se você der enter entre as


    linhas não acontece nada. Esta tag não precisa abrir e
    fechar.

    ● <pre> Conteúdo pré-formatado – O conteúdo dentro desta


    tag é considerado já formatado, então quebra de linha é
    considerado.
    HTML5
    ● Exercício:
    – Criar uma página com um cabeçalho e dois
    parágrafos de texto.
    – Inserir o poema abaixo formatado no texto
    ● (1) utlizando a tag <br>
    ● (2) utilizando <pre>:
    Minha terra tem palmeiras,
    Onde canta o Sabiá;
    As aves que aqui gorjeiam,
    Não gorjeiam como lá.
    HTML5
    ● Formatação mínima com CSS
    – Uma das formas é utilizar o atributo style das tags html
    style="property:value"

    – O texto escrito dentro desta tag segue o formato de escrita


    do CSS
    ● A propriedade é separada de seu valor por dois pontos
    ● Cadas propriedade é separada da próxima com ponto e virgula

    – Podemos aplicar estilo a praticamente todas as tags do html


    HTML5
    ● Exemplo 1 – Cor de fundo de uma página
    <body style="background-color:lightgrey">

    ● Exemplo 2 – Cor do texto


    <h1 style="color:blue">This is a heading</h1>

    ● Mais cores
    http://www.w3schools.com/html/html_colornames.asp
    –
    HTML5
    ● Exemplo 3 – Fonte do texto
    <h1 style="font-family:verdana">This is a
    heading</h1>
    <p style="font-family:courier">This is a
    paragraph.</p>
    HTML5
    ● Exemplo 4 – Tamanho do texto
    <h1 style="font-size:300%">This is a
    heading</h1>
    <p style="font-size:160%">This is a
    paragraph.</p>
    HTML5
    ● Exemplo 5 – Alinhamento do texto
    <h1 style="text-align:center">Centered
    Heading</h1>
    HTML5
    ● Exercício
    – Criar uma página web com o poema Canção do
    Exílio de Gonçalves Dias
    – Ver o conteúdo aqui:
    http://pt.wikipedia.org/wiki/Can%C3%A7%C3%A3o_do_E
    x%C3%ADlio
    – Deve ter:
    ● Título, nome da canção, autor, o poema em si, a
    formatação do poema deve estar correta, a fonte deve ser
    verdana, 14px, a cor do texto deve ser verde e a cor de
    fundo da página deve ser amarelo claro.
    HTML5
    ● Exercício:
    – Na página que foi criada com a canção do exílio
    incluir as meta-tags charset, description, keywords
    e author

    – Submeter a página a validação do w3c e corrigir os


    erros
    ● http://validator.w3.org/
    HTML5
    ● Mais formatação de texto
    – <b> Negrito
    – <strong> Negrito + semântica de forte
    – <i> Itálico
    – <em> Itálico + semântica de importante
    – <small> Texto pequeno
    – <mark> Texto marcado (caneta marca texto)
    – <del> Texto deletado (riscado)
    – <ins> Texto inserido (sublinhado)
    – <sub> Texto subscrito
    – <sup> Texto sobrescrito
    HTML5
    ● Exercício:
    – Na página criada anteriormente (Canção do Exílio)
    formatar as palavras da seguinte maneira:
    – Marcar os versos
    ● Nossos bosques têm mais vida,
    ● Nossa vida mais amores.
    – Colocar o poema todo em itálico
    – Marcar as palavras sabiá, cá e lá com negrito.
    Resumo
    ● Aprendemos
    – Quais são as principais tecnologias da web
    – Para o que cada uma serve
    – Tags iniciais de HTML5
    – Marcação básica para texto
    – Formatação básica com CSS
    – Formatação básica de texto com html

    Você também pode gostar