Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Html5 Aula 01

    Загружено:

    Edson De Jesus Carbonaro
    12 просмотров9 страниц
    Aula 1 de HTML da Microplus Escola de Informática

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    DOCX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Aula 1 de HTML da Microplus Escola de Informática

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    12 просмотров9 страниц

    Html5 Aula 01

    Загружено:

    Edson De Jesus Carbonaro
    Aula 1 de HTML da Microplus Escola de Informática

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 9

    INTRODUÇÃO

    SOBRE O CURSO - O COMPLEXO MUNDO DO FRONT-END

    HTML 5
    "Ação é a chave fundamental para todo sucesso"

    Vivemos hoje numa era em que a Internet ocupa um espaço cada vez mais
    importante em nossas vidas pessoais e profissionais. O surgimento constante de
    aplicações web, para as mais diversas finalidades, é um sinal claro de que esse
    mercado está em franca expansão e traz muitas oportunidades.

    Esse curso pretende abordar o desenvolvimento de front-end (interfaces) para


    Aplicações Web e Sites que acessamos por meio do navegador de nossos
    computadores, utilizando padrões atuais de desenvolvimento e conhecendo a
    fundo suas características técnicas. Discutiremos as implementações dessas
    tecnologias nos diferentes navegadores, a adoção de frameworks que facilitam e
    aceleram nosso trabalho, além de dicas técnicas que destacam um profissional no
    mercado. HTML, CSS e JavaScript serão vistos em profundidade.

    Além do acesso por meio do navegador de nossos computadores, hoje o acesso à


    Internet a partir de dispositivos móveis representa um grande avanço da
    plataforma, mas também implica em um pouco mais de atenção ao trabalho que
    um programador front-end tem que realizar. No decorrer do curso, vamos conhecer
    algumas dessas necessidades e como utilizar os recursos disponíveis para atender
    também a essa nova necessidade.

    O CURSO E OS EXERCÍCIOS
    Esse é um curso prático que começa nos fundamentos de HTML e CSS, incluindo
    tópicos relacionados às novidades das versões HTML5 e CSS3. Depois, é abordada
    a linguagem de programação JavaScript, para enriquecer nossas páginas com
    interações e efeitos, tanto com JavaScript puro quanto com a biblioteca jQuery, hoje
    padrão de mercado.

    Os exercícios propostos são fundamentais para o acompanhamento do curso,


    desde os mais iniciais, já que são incrementados no decorrer das aulas. Igualmente
    importante é a participação ativa nas discussões e debates em sala de aula.

    Bem-vindo ao Curso Desenvolvimento Web da Escola Microplus.


    PÁGINA 1
    CONCEITOS
    Quando acessamos uma página web, estamos interessados na informação contida
    nessa página. Essa informação pode estar na forma de texto, imagem ou vídeo. O
    conteúdo de uma página web é definido com a linguagem HTML (HyperText
    Markup Language). HTML é uma linguagem de marcação originalmente proposta

    HTML 5
    por Tim Berners-Lee no final da década de 1980. O objetivo do Tim Barners-Lee era
    criar um mecanismo simples que pudesse ser utilizado por qualquer pessoa que
    quisesse disseminar documentos científicos.

    Desde sua proposta até os dias de hoje, a linguagem HTML sofreu diversas
    alterações. A cada versão, novos recursos são adicionados e problemas corrigidos.
    A versão mais atual da especificação da linguagem HTML é a 5.

    A especificação está disponível no endereço http://www.w3.org/TR/html5.

    As especificações da linguagem HTML são publicadas pelo World Wide Web


    Consortium mais conhecido por sua sigla W3C.

    ESTRUTURA BÁSICA
    <html>
    Basicamente, um documento HTML é composto por elementos hierarquicamente
    organizados. Para inserir um elemento em um documento HTML, devemos utilizar
    as tags correspondentes a esse elemento. As tags são definidas com parênteses
    angulares (< e >). Os elementos podem possuir atributos e conteúdo. Os atributos
    são formados por nome e valor. Normalmente, os valores dos atributos são
    definidos dentro de aspas dupla e o conteúdo dos elementos é um texto ou outros
    elementos.

    1. Inicie um novo documento html utilizando o editor Notepad++ e crie a seguinte


    estrutura básica de um documento html.

    PÁGINA 2
    <!DOCTYPE>

    Para o navegador exibir corretamente uma página web, devemos informar


    explicitamente o tipo do documento. O tipo do documento é informado com a
    declaração <!DOCTYPE html>. Esta declaração informa ao navegador que o que
    vamos escrever é um documento do tipo HTML 5.

    HTML 5
    <html lang=”pt-br”>

    Outra informação importante que devemos informar ao navegador é o idioma com


    que documento será escrito. Isto é feito dentro da tag de abertura do documento
    html, utilizando o parâmetro lang informando “pt-br”.
    Isto vai ajudar muito os
    mecanismos de busca, como o Google, a identificar a linguagem do seu site.
    2. Salve seu documento html como Aula3.html.

    Os elementos HTML, com exceção do DOCTYPE, devem ser inseridos no conteúdo


    do elemento html. Esse elemento é aberto com a tag <html>, fechado com a tag
    </html> e deve conter exatamente um elemento head seguido de exatamente um
    elemento body.

    Diversos autores recomendam a utilização do atributo lang. Esse atributo indica a


    língua utilizada no documento HTML ou na maior parte dele. Algumas ferramentas
    de leitura ou de tradução de texto podem utilizar esse atributo para descobrir
    facilmente em qual língua os textos contidos no documento HTML ou na maior
    parte dele foram escritos.

    <head>
    A principal função do elemento head é agrupar informações sobre o documento
    HTML (metainformação).

    O elemento head é aberto e fechado pelas tags <head> e </head> respectivamente.

    <meta charset=”UTF-8”/>

    A tag meta pode ser utilizada para definir várias configurações do seu site,
    entre elas o conjunto de caracteres que será utilizado através do parâmetroPÁGINA 3
    charset (conjunto de caracteres). Definimos o conjunto de caracteres
    latino, que é o que utilizamos assim: <met charset=”UTF-8”/>. Essa tag
    meta não tem o fechamento </meta>. Este é o caso de uma tag que não
    tem fechamento, então utilizamos apenas uma barra no final.
    <title></title>

    HTML 5
    Obrigatoriamente, salvo algumas poucas exceções, o corpo do head deve conter
    exatamente uma ocorrência da tag <title>. Essa tag define o título do documento
    HTML.

    3. Insira o título Aula 3 – Conceitos HTML 5 no documento.

    4. Salve e veja no navegador o título que você acabou de definir.

    <body>
    O conteúdo de uma página web deve ser definido no corpo do elemento body. Por
    exemplo, podemos inserir no corpo do body cabeçalhos, textos, listas, tabelas,
    entre outros componentes.

    Esse elemento é aberto pela tag <body> e fechado pela tag </body>.

    PÁGINA 4
    Comentários
    Podemos adicionar comentários em um documento HTML dentro das tags <!-- e --
    >. Os comentários são ignorados pelos navegadores.

    HTML 5
    Títulos
    Assim como em um livro, uma página web pode conter uma hierarquia de títulos
    para estabelecer uma divisão do seu conteúdo. Para inserir títulos em uma página
    web, devemos utilizar os elementos h1, h2, h3, h4, h5 e h6. Os sufixos numéricos de 1
    a 6 indicam o nível do título dentro da hierarquia de títulos do documento. Veja o
    exemplo:

    5. Escreva o corpo de seu documento html, salve e atulize o navegor. Observe o


    resultado.

    PÁGINA 5
    Geralmente, os navegadores utilizam tamanhos diferentes de fonte para cada título.
    Não existe um padrão de tamanho e de fonte entre os navegadores. Em outras
    palavras, os títulos de uma página web podem ser exibidos de maneiras diferentes
    em navegadores distintos. Para padronizar a exibição dos títulos, podemos aplicar
    as regras CSS.

    HTML 5
    Devemos utilizar os títulos com cautela, pois eles são usados como critério de
    ranqueamento por buscadores como Google, Yahoo e Bing. O uso correto dos
    elementos de título é fortemente recomendado pelos especialistas em SEO (Search
    Engine Optimization). Para utilizá-los corretamente, devemos respeitar
    basicamente as seguintes regras.

     Manter a ordem lógica dos títulos. Um elemento h2 deve ser precedido de


    um elemento h1. Um elemento h3 deve ser precedido de um elemento h2. E
    assim sucessivamente.

     O título de uma seção deve descrever bem o conteúdo dela.

    ATIVIDADE
    Nesta atividade vamos criar um site sobre as tecnologias que o Google aposta para este ano.
    O material para esta atividade esta em //mpserver/cursos/html5/aula3 e o site completo
    você confere em www.microplus.com.br/curso/html5/aula3.html.

    1. Crie a seguinte estrutura em sua pasta documentos para esta atividade:

    2. Copie as imagens de //mpserver/cursos/html5/aula3/imagens para a pasta imagem


    que você criou.
    3. Copie os textos de //mpserver/cursos/html5/aula3/textos para a pasta texto que
    você criou.
    4. Inicie um novo documento html com o titulo “10 Apostas do Google”.

    PÁGINA 6
    HTML 5
    5. Insira o texto no corpo deste documento, colando e copiando.

    Salve o documento como index.html pois no final iremos publicar e este


    documento será a pagina principal. Navegue pelo documento e veja o resultado.

    6. Como esperado o documento não tem uma apresentação agradável. Vamos então
    inserir as tags de <h1>, <h2> e <p>. Veja o exemplo no titulo principal, no primeiro
    parágrafo e no subtítulo.
    PÁGINA 7
    HTML 5
    7. Na indicação (IMAGEM) insira a imagem correspondente ao subtítulo. Para a imagem
    de Google Glass a tag fica assim:

    <img scr="imagens/googleglass.jpg"/>
    8. O texto logo após a indicação (IMAGEM) é uma leganda para a imagem. Complete seu
    código utilizando as tags <figure></figure> e <figcaption></figcaption>, assim:

    <figure>

    <img src="imagens/googleglass.jpg" alt="Foto Google Glass"/>

    <figcaption>O projeto Glass é citado como tendência de tecnologia vestível para o


    futuro.</figcaption>

    </figure>

    PÁGINA 8
    HTML 5
    9. Salvando e atualizando o navegador você tem:

    10. Repita o mesmo procedimento para os demais itens do documento.


    o Salve periodicamente seu trabalho para evitar perca.
    11. Utilizando o FileZilla e publique seu site.

    PÁGINA 9

    Вам также может понравиться