Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Aula 1

    Enviado por

    Dagoberto Hendges Leite
    10 visualizações25 páginas
    web desing 1

    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
    web desing 1

    Direitos autorais:

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

    Aula 1

    Enviado por

    Dagoberto Hendges Leite
    web desing 1

    Direitos autorais:

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

    Introdução

    Curso de Análise e Desenvolvimento de Sistemas (ADS)


    Unidade Curricular: Webdesign
    Professora: Jéssica Zanelato Soares
    Conteúdo
    ● Apresentação da Unidade Curricular;
    ● Introdução ao HTML;
    ● TAGs HTML;
    ● Exercícios.
    UC - Unidade Curricular
    Jéssica Zanelato Soares

    ● Graduada em Gestão da Tecnologia da Informação / IFSC - 2013


    ● Especialização em Arquitetura de Software / IGTI - 2019
    ● 8 anos de experiência em análise e desenvolvimento de sistemas
    ● Host do podcast PodProgramar

    Contato: jessica.zanelato@edu.sc.senai.br
    UC - Unidade Curricular
    ● Webdesign.
    ● 1° fase.
    ● Objetivo geral: Desenvolver aplicações web; Compreender as estruturas
    básicas (TAGs) do HTML; Utilizar frameworks para otimizar e acelerar o
    desenvolvimento de sites.
    ● Carga horária: 70 horas.
    UC - Unidade Curricular
    ● Plano de Ensino
    ● Cronograma
    UC - Unidade Curricular
    Como a web funciona?
    O que o servidor faz?
    O que o navegador faz?
    O que é HTML?
    ● Linguagem de marcação de hipertexto, ou seja, é uma linguagem para a
    criação de websites, interpretadas pelo navegador;

    ● HTML é o acrônimo para Hyper Text Markup Linguage.


    HTML
    ● Nesta UC vamos trabalhar com o frontend (client-side), que é a visão do
    cliente;
    ● O back-end (server-side) será trabalhado em outras disciplinas ao longo do
    curso.
    HTML
    ● Existem diversas IDEs para
    desenvolver sites;

    ● Auxilia na organização e
    gerenciamento do
    código-fonte;

    ● Agilidade no
    desenvolvimento.
    Visual Studio Code
    HTML
    ● W3C
    ○ World Wide Web Consortium;
    ○ Organização internacional para padronização da Internet.
    HTML
    ● W3schools
    ○ Referências e tutoriais
    ○ Linguagens: HTML, CSS, Javascript, PHP, SQL, etc…
    ○ Frameworks: Bootstrap e jQuery
    HTML
    ● TAGs
    ○ São elementos ou etiquetas para marcação padrão em páginas web que são interpretadas
    pelos navegadores.
    ○ Aparecem entre os sinais de menor “<” e maior “>”.
    ○ Geralmente são utilizadas em pares, sendo a última TAG de finalização com precedência de
    uma barra “/”.
    ○ Exemplo:
    ■ <p>oi, mundo</p>
    ■ <b>olá, pessoal</b>
    HTML
    HTML
    ● <!DOCTYPE>:
    ○ Inserida antes da TAG <html>.
    ○ Não é uma TAG, mas uma instrução ao browser sobre a versão do HTML que está sendo
    utilizada.
    ○ HTML 4.0:
    ■ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
    ○ HTML 5:
    ■ <!DOCTYPE HTML>
    ■ Vamos utilizar este!
    HTML
    ● TAG <HTML>
    ○ A TAG que indica o início e fim de uma página HTML é <html> e </html>.
    ○ Logo depois temos as TAGs <head> (cabeçalho) e <body> (corpo).
    HTML
    ● TAG <HEAD>:
    ○ Informações para o navegador.
    ○ Não são visíveis na página.
    ○ Obrigatoriamente deve-se inserir a TAG title para ser inserido na barra de títulos do
    navegador.
    ○ Podemos configurar a codificação da página por meio a configuração do charset.
    ■ Charset: especifica as regras de codificação dos caracteres.
    ■ Principais: UTF-8 (Unicode) e ISO-8859-1 (Alfabeto Latino).
    HTML
    ● TAGs Negrito e Itálico:
    ○ Padrão: <b> utilizado para negrito;
    ○ Padrão: <i> utilizado para itálico;

    ○ HTML5: <strong> utilizado para negrito e para semântica;


    ○ HTML5: <em> utilizado para itálico e para semântica.
    Exercício de fixação
    1. Crie um arquivo HTML usando as TAGs <html>, <head>, <title>, <body>,
    <h1>, <h2>, <p>, <b>, <i>, <strong> e <em>. Não esqueça do DOCTYPE!
    2. Abra no navegador e veja a mágica acontecer.
    HTML
    ● Mais TAGs:
    ○ <u>: Sublinhado
    ○ <br>: quebra de linha (diferente das outras tags não tem uma TAG de fechamento)
    ○ <hr>: quebra temática entre elementos de nível de parágrafo
    HTML
    ● Atributos são informações que passamos na Tag para que ela se comporte
    de uma certa maneira.
    ● TAGs com atributos:
    ○ <a href=”https://google.com” target=”_blank”>clique aqui</a>
    ■ Links são definidos usando a TAG <a>. O endereço é definido no atributo “href”.
    ■ Ao definir o atributo “target” como “_blank”, a página será aberta em uma nova aba.
    ○ <img src="img_girl.jpg" height="20" width="20" alt="Imagem de uma garota">
    ■ Imagens são definidas usando a TAG <img> e o endereço da imagem é especificado no
    atributo “src”.
    ■ Altura é definida no atributo “height” e largura no atributo “width”.
    ■ Um texto alternativo é definido no atributo “alt”.
    HTML
    ● Outros exemplos de atributos:
    ○ <p align=”center”>Texto</p> (center, left, right, justify)
    ○ Porém este atributo não é mais suportado no HTML5

    Para mais tags e atributos:


    https://www.w3schools.com/tags/
    Exercício de fixação
    1. Adicione as novas TAGs que você conheceu agora na sua página HTML.
    2. Abra no navegador e veja a mágica acontecer.

    Você também pode gostar