SlideShare uma empresa Scribd logo
1 de 43
Baixar para ler offline
Profa. Camila Hamdan
http://www.camilahamdan.net
DESIGN GRÁFICO PARA WEB
Introdução a HTML 5
INTRODUÇÃO AO HTML
INTRODUÇÃO AO HTML
O HTML (HyperText Markup Language/ Linguagem de Marcação 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 incrível que
pareça 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 marcação (tags)
para descrever documentos da web (páginas da internet).
HTML significa Hyper Text Markup Language
Uma linguagem de marcação é um conjunto de tags de
marcação
Os documentos HTML são descritos por tags HTML
Cada tag HTML descreve o conteúdo do documento diferente
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
HTML Editores
Faça uma página 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 página 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 Acessórios . Clique Bloco de Notas .
Para abrir o bloco de notas no Windows 8 ou posterior:
Abra a tela de início (o símbolo janela no canto inferior esquerdo da sua
tela). Escreva Notepad .
•A declaração DOCTYPE define o tipo de documento em HTML
•O texto entre <html> e </ html> descreve o documento HTML
•O texto entre <head> e </ head> fornece informações sobre o documento
•O texto entre <title> e </ title> fornece um título para o documento
•O texto entre <body> e </ body> descreve o conteúdo da página visível
•O texto entre <h1> e </ h1> descreve o título
•O texto entre <p> e </ p> descreve o parágrafo
Usando esta descrição, um navegador pode exibir um documento com um
título e um parágrafo.
Explicação do código...
<!DOCTYPE html>
<html>
<head>
<title>Título da Página</title>
</head>
<body>
<h1>Descreve o Título</h1>
<p>Descreve o parágrafo.</p>
</body>
</html>
PASSO 2: ESCREVA O SEGUINTE CÓDIGO
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 codificação preferida para arquivos HTML.
ANSI codificação abrange EUA e apenas caracteres da Europa Ocidental.
PASSO 3: SALVE A PÁGINA COM A EXTENSÃO (.html)
PASSO 4: VER A PÁGINA DE EXTENSÃO (.html) NO SEU NAVEGADOR
Abra o arquivo HTML salvo no seu navegador favorito. O resultado será muito semelhante a este:
•Tags HTML normalmente vêm em pares como <p> e </ p>
•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
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
HTML exemplos básicos
Documentos em HTML
Todos os documentos HTML deve começar com uma declaração do tipo: <! DOCTYPE html> .
O documento HTML em si começa com <html> e termina com </ html> .
A parte visível do documento HTML é entre <body> e </ body> .
HTML Títulos
Títulos HTML são definidos com os <h1> para <h6> tags:
<h1> define o título mais importante. <h6> define o título menos importante.
Nota: Os navegadores automaticamente adicionar algum espaço vazio (a
margem) antes e depois de cada título.
Use títulos HTML apenas para títulos. Não use títulos para tornar o
texto grande ou em negrito .
Os motores de busca usar suas posições para indexar a estrutura e o conteúdo de suas
páginas web.
Usuários buscam páginas por suas posições. É importante a utilização de posições para
mostrar a estrutura do documento.
posições h1 deve ter a principal posição, seguido por posições h2, h3, em seguida, o
menos importante.
Regras horizontais HTML
A tag <hr> cria uma linha horizontal em uma página HTML.
O elemento hr pode ser usado para separar o conteúdo:
O HTML <head> Elemento
O HTML <head> elemento não tem nada a ver com posições HTML.
O HTML <head> contém meta dados. Os Meta dados não são exibidos.
O HTML <head> é colocado entre a tag <html> e a tag <body>:
HTML Parágrafos
Parágrafos HTML são definidos com o <p> tag:
Links em HTML
Links em HTML são definidas com a <a> tag:
O endereço do link é especificado no atributo href .
Os atributos são usados ​​para fornecer informações adicionais sobre os elementos HTML.
Imagens de HTML
Imagens HTML são definidos com o <img> tag.
O arquivo de origem ( src ), texto alternativo ( alt ), e tamanho ( largura e altura ) são
fornecidos como atributos :
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
Elementos HTML
HTML documentos são compostos por HTML elements .
Elementos HTML são escritos com um início tag, com um fim tag, com o conteúdo no
meio:
HTML elemento de tudo, desde a marca de início para a marca de fim:
Meu primeiro cabeçalho
Meu primeiro parágrafo
Tag de início Tag de fim
Elementos HTML podem ser alinhados (elementos podem conter elementos).
Todos os documentos HTML consistem em elementos HTML alinhadas.
Este exemplo contém quatro elementos HTML:
Elementos HTML
O <html> elemento define o documento inteiro .
Ele tem um começo tag <html> e um final tag </ html>.
O elemento de conteúdo é outro elemento HTML (o elemento <body>).
O elemento <body> define o corpo do documento .
Ele tem uma tag de início <body> e uma tag final </ body>.
O elemento de conteúdo é de dois outros elementos HTML (<h1> e <p>).
O <h1> elemento define um título do cabeçalho .
Ele tem uma tag de início <h1> e um final tag </ h1>.
O elemento de conteúdo é: meu primeiro ponto.
O <p> elemento define um parágrafo .
Ele tem uma tag de início <p> e um final tag </ p>.
O elemento de conteúdo está: Meu primeiro parágrafo.
Não se esqueça da final Tag
Alguns elementos HTML serão exibidos corretamente, mesmo se você esquecer a tag de
fim:
O exemplo acima funciona em todos os navegadores, porém, erros inesperados podem
ocorrer caso você esqueça a tag de fim.
Elementos HTML sem conteúdo são chamados de elementos vazios.
<br> é um elemento vazio, sem uma tag de fechamento (o <br> tag define uma quebra
de linha).
Os elementos vazios podem ser "fechados" na tag de abertura assim: <br />.
ELEMENTOS VAZIOS em HTML
Dica: Use tags com letras minúsculas
Tags HTML não diferencia as letras maiúsculas de minúsculas: <P> significa o mesmo
que <p>.
O padrão HTML5 não requer letras minúsculas, mas W3C recomenda minúsculas em
HTML4, e exige minúsculas para os mais complexos tipos de documentos como o
XHTML.
Desta forma, optamos por convenção, utilizar tags com letras minúsculas.
ATRIBUTOS em HTML
Atributos visam fornecer informações adicionais sobre os elementos em HTML.
Atributos HTML
•Elementos HTML podem ter atributos
•Os atributos fornecem informações adicionais sobre um elemento
•Os atributos são sempre especificados com a tag de início
•Atributos vêm em pares nome / valor como: name = "value"
O idioma do documento pode ser declarada na tag <html>.
A linguagem é declarada como o atributo lang.
Declarar uma língua é 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”
Parágrafos em HTML são definidos com a tag <p>.
Neste exemplo, o elemento <p> tem um atributo de título atributo.
O valor do atributo é “About Camila Hamdan":
ATRIBUTO TITLE
Links em HTML são definidos com a tag <a>.
O endereço do link é especificado no href atributo:
ATRIBUTO HREF
Código em HTML Resultado
Imagens HTML são definidos com a tag <img>.
O tipo de fonte ( src ), e o tamanho da imagem ( largura e altura ) são fornecidos
como atributos :
ATRIBUTOS DE TAMANHO
Código 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 não pode ser exibido.
O valor do atributo pode ser lido por "leitores de tela". Desta forma, alguém
"escuta" a página da Web, ou seja, uma pessoa cega, pode "ouvir" o elemento.
ATRIBUTOS ALT
https://soundcloud.com/cyberneticgirl/camilahamdan_googlevoice_test
Aspas simples ou duplas?
Aspas duplas são os mais comuns em HTML, mas o estilo único também pode ser usado.
Em algumas situações, quando o próprio valor do atributo contém aspas, é necessário o uso
de aspas simples:
<p title='John "ShotGun" Nelson'>
Ou vice-versa:
<p title="John 'ShotGun' Nelson">
Desta forma, compreendemos que:
•Todos os elementos HTML pode ter atributos
•O atributo título fornece "dica de ferramenta" informação adicional
•O atributo href fornece informações de endereço para links
• Os atributos de largura e altura fornecem informações de tamanho para imagens
•O atributo alt fornece texto para leitores de tela promovendo a acessibilidade de pessoas
com deficiência visual ou baixa visão.
•Optamos por convenção usar sempre minúsculas nos nomes de atributos em HTML, como
também, citar os atributos com aspas duplas.
A lista completa de todos os atributos para cada elemento HTML, está listado na página: HTML Tag Referência .
1. Faça uma pequena página em HTML falando sobre você!
2. Insira uma imagem sua na página;
3. Transforme uma palavra da página em um link que vai para seu
Facebook;
4. Especifique um texto alternativo para ser lido por "leitores de tela".
EXERCÍCIO

Mais conteúdo relacionado

Mais procurados (20)

Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
Html e css
Html e cssHtml e css
Html e css
 
Curso HTML e CSS
Curso HTML e CSSCurso HTML e CSS
Curso HTML e CSS
 
HTML Formatando Textos
HTML Formatando TextosHTML Formatando Textos
HTML Formatando Textos
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
00 a linguagem html
00 a linguagem html00 a linguagem html
00 a linguagem html
 
Programacao para Web I 03 HTML
Programacao para Web I 03 HTMLProgramacao para Web I 03 HTML
Programacao para Web I 03 HTML
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e ParágrafoIntrodução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
 
HTML
HTMLHTML
HTML
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Html5 aula 02
Html5 aula 02Html5 aula 02
Html5 aula 02
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Apostila html
Apostila htmlApostila html
Apostila html
 

Semelhante a WebDesign AULA 2: Introdução a HTML

Semelhante a WebDesign AULA 2: Introdução a HTML (20)

Html 01
Html 01Html 01
Html 01
 
W3C Web Standards HTML
W3C Web Standards HTMLW3C Web Standards HTML
W3C Web Standards HTML
 
Curso de XHTML
Curso de XHTMLCurso de XHTML
Curso de XHTML
 
Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02
 
426 curso html
426 curso html426 curso html
426 curso html
 
Html - capitulo 05
Html - capitulo 05Html - capitulo 05
Html - capitulo 05
 
Html completo
Html completoHtml completo
Html completo
 
Xhtml 2011 - atualizado
Xhtml   2011 - atualizadoXhtml   2011 - atualizado
Xhtml 2011 - atualizado
 
HTML básico
HTML básicoHTML básico
HTML básico
 
Html manual
Html manualHtml manual
Html manual
 
Html
HtmlHtml
Html
 
html
html html
html
 
Html manual
Html manualHtml manual
Html manual
 
Html5 primeiros passos
Html5 primeiros passosHtml5 primeiros passos
Html5 primeiros passos
 
Apostila De Html
Apostila De HtmlApostila De Html
Apostila De Html
 
Linguagem de-programacao-html 2
Linguagem de-programacao-html 2Linguagem de-programacao-html 2
Linguagem de-programacao-html 2
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 
Html
HtmlHtml
Html
 
Html E Css
Html E CssHtml E Css
Html E Css
 
Aula html
Aula htmlAula html
Aula html
 

Mais de Dra. Camila Hamdan

Introdução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e Tecnologia
Introdução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e TecnologiaIntrodução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e Tecnologia
Introdução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e TecnologiaDra. Camila Hamdan
 
Design Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDesign Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDra. Camila Hamdan
 
Design Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - MultimídiaDesign Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - MultimídiaDra. Camila Hamdan
 
AULA 5 e 6: princípios de modelagem digital para animação
AULA 5 e 6: princípios de modelagem digital para animaçãoAULA 5 e 6: princípios de modelagem digital para animação
AULA 5 e 6: princípios de modelagem digital para animaçãoDra. Camila Hamdan
 
AULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICA
AULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICAAULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICA
AULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICADra. Camila Hamdan
 
Portal periódicos CAPES: Guia - Maio 2015
Portal periódicos CAPES: Guia - Maio 2015Portal periódicos CAPES: Guia - Maio 2015
Portal periódicos CAPES: Guia - Maio 2015Dra. Camila Hamdan
 
Ergonomia e Usabilidade AULA 6.
Ergonomia e Usabilidade AULA 6.Ergonomia e Usabilidade AULA 6.
Ergonomia e Usabilidade AULA 6.Dra. Camila Hamdan
 
Ergonomia e Usabilidade AULA 4: Erro
Ergonomia e Usabilidade AULA 4: ErroErgonomia e Usabilidade AULA 4: Erro
Ergonomia e Usabilidade AULA 4: ErroDra. Camila Hamdan
 
Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)
Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)
Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)Dra. Camila Hamdan
 
Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:Dra. Camila Hamdan
 
Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013
Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013
Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013Dra. Camila Hamdan
 
Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...
Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...
Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...Dra. Camila Hamdan
 
Projeto: Mergulhador (Modelagem Digital)
 Projeto: Mergulhador (Modelagem Digital) Projeto: Mergulhador (Modelagem Digital)
Projeto: Mergulhador (Modelagem Digital)Dra. Camila Hamdan
 
Discriplina: Ergonomia e Usabilidade - 2o. semestre 2015 Cronograma
Discriplina: Ergonomia e Usabilidade - 2o. semestre 2015 CronogramaDiscriplina: Ergonomia e Usabilidade - 2o. semestre 2015 Cronograma
Discriplina: Ergonomia e Usabilidade - 2o. semestre 2015 CronogramaDra. Camila Hamdan
 
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de UsabilidadeErgonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de UsabilidadeDra. Camila Hamdan
 
Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...
Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...
Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...Dra. Camila Hamdan
 
Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...
Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...
Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...Dra. Camila Hamdan
 
Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015
Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015
Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015Dra. Camila Hamdan
 
Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...Dra. Camila Hamdan
 
Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...Dra. Camila Hamdan
 

Mais de Dra. Camila Hamdan (20)

Introdução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e Tecnologia
Introdução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e TecnologiaIntrodução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e Tecnologia
Introdução Arte, Cultura e Sociedade: Entendendo a Origem da Arte e Tecnologia
 
Design Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDesign Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklist
 
Design Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - MultimídiaDesign Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - Multimídia
 
AULA 5 e 6: princípios de modelagem digital para animação
AULA 5 e 6: princípios de modelagem digital para animaçãoAULA 5 e 6: princípios de modelagem digital para animação
AULA 5 e 6: princípios de modelagem digital para animação
 
AULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICA
AULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICAAULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICA
AULA IV: APRESENTAÇÃO DA INTERFACE GRÁFICA
 
Portal periódicos CAPES: Guia - Maio 2015
Portal periódicos CAPES: Guia - Maio 2015Portal periódicos CAPES: Guia - Maio 2015
Portal periódicos CAPES: Guia - Maio 2015
 
Ergonomia e Usabilidade AULA 6.
Ergonomia e Usabilidade AULA 6.Ergonomia e Usabilidade AULA 6.
Ergonomia e Usabilidade AULA 6.
 
Ergonomia e Usabilidade AULA 4: Erro
Ergonomia e Usabilidade AULA 4: ErroErgonomia e Usabilidade AULA 4: Erro
Ergonomia e Usabilidade AULA 4: Erro
 
Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)
Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)
Jogos em Realidade Aumentada (Projeto PIBITI 2015-2016)
 
Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:
 
Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013
Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013
Jogos em Realidade Virtual e Aumentada- 3º Congresso de IC - UDF 2013
 
Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...
Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...
Maquete Virtual - UDF/4R (Tour Virtual) - Jogos em Realidade Virtual e Aument...
 
Projeto: Mergulhador (Modelagem Digital)
 Projeto: Mergulhador (Modelagem Digital) Projeto: Mergulhador (Modelagem Digital)
Projeto: Mergulhador (Modelagem Digital)
 
Discriplina: Ergonomia e Usabilidade - 2o. semestre 2015 Cronograma
Discriplina: Ergonomia e Usabilidade - 2o. semestre 2015 CronogramaDiscriplina: Ergonomia e Usabilidade - 2o. semestre 2015 Cronograma
Discriplina: Ergonomia e Usabilidade - 2o. semestre 2015 Cronograma
 
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de UsabilidadeErgonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
 
Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...
Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...
Animação Digital AULA 12: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. R...
 
Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...
Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...
Animação Digital AULA 10: CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. P...
 
Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015
Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015
Modelo para Apresentação (Avaliacao 1): Modelagem 3D_1o. semestre 2015
 
Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 9): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
 
Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
Animação Digital (Aula 8): CONFIGURANDO UM PERSONAGEM PARA ANIMAÇÃO NO MAYA. ...
 

WebDesign AULA 2: Introdução a HTML

  • 1. Profa. Camila Hamdan http://www.camilahamdan.net DESIGN GRÁFICO PARA WEB Introdução a HTML 5
  • 3. O HTML (HyperText Markup Language/ Linguagem de Marcação 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 incrível que pareça 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.
  • 4. OU SEJA: HTML é uma linguagem de marcação (tags) para descrever documentos da web (páginas da internet). HTML significa Hyper Text Markup Language Uma linguagem de marcação é um conjunto de tags de marcação Os documentos HTML são descritos por tags HTML Cada tag HTML descreve o conteúdo do documento diferente
  • 7. HTML Editores Faça uma página 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.
  • 8. Siga os 4 passos para criar sua primeira página 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 Acessórios . Clique Bloco de Notas . Para abrir o bloco de notas no Windows 8 ou posterior: Abra a tela de início (o símbolo janela no canto inferior esquerdo da sua tela). Escreva Notepad .
  • 9. •A declaração DOCTYPE define o tipo de documento em HTML •O texto entre <html> e </ html> descreve o documento HTML •O texto entre <head> e </ head> fornece informações sobre o documento •O texto entre <title> e </ title> fornece um título para o documento •O texto entre <body> e </ body> descreve o conteúdo da página visível •O texto entre <h1> e </ h1> descreve o título •O texto entre <p> e </ p> descreve o parágrafo Usando esta descrição, um navegador pode exibir um documento com um título e um parágrafo. Explicação do código... <!DOCTYPE html> <html> <head> <title>Título da Página</title> </head> <body> <h1>Descreve o Título</h1> <p>Descreve o parágrafo.</p> </body> </html> PASSO 2: ESCREVA O SEGUINTE CÓDIGO
  • 10. 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 codificação preferida para arquivos HTML. ANSI codificação abrange EUA e apenas caracteres da Europa Ocidental. PASSO 3: SALVE A PÁGINA COM A EXTENSÃO (.html)
  • 11. PASSO 4: VER A PÁGINA DE EXTENSÃO (.html) NO SEU NAVEGADOR Abra o arquivo HTML salvo no seu navegador favorito. O resultado será muito semelhante a este:
  • 12. •Tags HTML normalmente vêm em pares como <p> e </ p> •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
  • 17. HTML exemplos básicos Documentos em HTML Todos os documentos HTML deve começar com uma declaração do tipo: <! DOCTYPE html> . O documento HTML em si começa com <html> e termina com </ html> . A parte visível do documento HTML é entre <body> e </ body> .
  • 18. HTML Títulos Títulos HTML são definidos com os <h1> para <h6> tags: <h1> define o título mais importante. <h6> define o título menos importante. Nota: Os navegadores automaticamente adicionar algum espaço vazio (a margem) antes e depois de cada título.
  • 19. Use títulos HTML apenas para títulos. Não use títulos para tornar o texto grande ou em negrito . Os motores de busca usar suas posições para indexar a estrutura e o conteúdo de suas páginas web. Usuários buscam páginas por suas posições. É importante a utilização de posições para mostrar a estrutura do documento. posições h1 deve ter a principal posição, seguido por posições h2, h3, em seguida, o menos importante.
  • 20. Regras horizontais HTML A tag <hr> cria uma linha horizontal em uma página HTML. O elemento hr pode ser usado para separar o conteúdo:
  • 21. O HTML <head> Elemento O HTML <head> elemento não tem nada a ver com posições HTML. O HTML <head> contém meta dados. Os Meta dados não são exibidos. O HTML <head> é colocado entre a tag <html> e a tag <body>:
  • 22. HTML Parágrafos Parágrafos HTML são definidos com o <p> tag:
  • 23. Links em HTML Links em HTML são definidas com a <a> tag: O endereço do link é especificado no atributo href . Os atributos são usados ​​para fornecer informações adicionais sobre os elementos HTML.
  • 24. Imagens de HTML Imagens HTML são definidos com o <img> tag. O arquivo de origem ( src ), texto alternativo ( alt ), e tamanho ( largura e altura ) são fornecidos como atributos :
  • 27. Elementos HTML HTML documentos são compostos por HTML elements . Elementos HTML são escritos com um início tag, com um fim tag, com o conteúdo no meio: HTML elemento de tudo, desde a marca de início para a marca de fim: Meu primeiro cabeçalho Meu primeiro parágrafo Tag de início Tag de fim
  • 28. Elementos HTML podem ser alinhados (elementos podem conter elementos). Todos os documentos HTML consistem em elementos HTML alinhadas. Este exemplo contém quatro elementos HTML: Elementos HTML
  • 29. O <html> elemento define o documento inteiro . Ele tem um começo tag <html> e um final tag </ html>. O elemento de conteúdo é outro elemento HTML (o elemento <body>).
  • 30. O elemento <body> define o corpo do documento . Ele tem uma tag de início <body> e uma tag final </ body>. O elemento de conteúdo é de dois outros elementos HTML (<h1> e <p>).
  • 31. O <h1> elemento define um título do cabeçalho . Ele tem uma tag de início <h1> e um final tag </ h1>. O elemento de conteúdo é: meu primeiro ponto. O <p> elemento define um parágrafo . Ele tem uma tag de início <p> e um final tag </ p>. O elemento de conteúdo está: Meu primeiro parágrafo.
  • 32. Não se esqueça da final Tag Alguns elementos HTML serão exibidos corretamente, mesmo se você esquecer a tag de fim: O exemplo acima funciona em todos os navegadores, porém, erros inesperados podem ocorrer caso você esqueça a tag de fim.
  • 33. Elementos HTML sem conteúdo são chamados de elementos vazios. <br> é um elemento vazio, sem uma tag de fechamento (o <br> tag define uma quebra de linha). Os elementos vazios podem ser "fechados" na tag de abertura assim: <br />. ELEMENTOS VAZIOS em HTML Dica: Use tags com letras minúsculas Tags HTML não diferencia as letras maiúsculas de minúsculas: <P> significa o mesmo que <p>. O padrão HTML5 não requer letras minúsculas, mas W3C recomenda minúsculas em HTML4, e exige minúsculas para os mais complexos tipos de documentos como o XHTML. Desta forma, optamos por convenção, utilizar tags com letras minúsculas.
  • 34. ATRIBUTOS em HTML Atributos visam fornecer informações adicionais sobre os elementos em HTML. Atributos HTML •Elementos HTML podem ter atributos •Os atributos fornecem informações adicionais sobre um elemento •Os atributos são sempre especificados com a tag de início •Atributos vêm em pares nome / valor como: name = "value"
  • 35. O idioma do documento pode ser declarada na tag <html>. A linguagem é declarada como o atributo lang. Declarar uma língua é 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”
  • 36. Parágrafos em HTML são definidos com a tag <p>. Neste exemplo, o elemento <p> tem um atributo de título atributo. O valor do atributo é “About Camila Hamdan": ATRIBUTO TITLE
  • 37. Links em HTML são definidos com a tag <a>. O endereço do link é especificado no href atributo: ATRIBUTO HREF Código em HTML Resultado
  • 38. Imagens HTML são definidos com a tag <img>. O tipo de fonte ( src ), e o tamanho da imagem ( largura e altura ) são fornecidos como atributos : ATRIBUTOS DE TAMANHO Código em HTML Resultado O tamanho da imagem é especificado em pixels: width = “200" significa 200 pixels de tela ampla.
  • 39. O atributo alt especifica um texto alternativo para ser usado, quando um elemento HTML não pode ser exibido. O valor do atributo pode ser lido por "leitores de tela". Desta forma, alguém "escuta" a página da Web, ou seja, uma pessoa cega, pode "ouvir" o elemento. ATRIBUTOS ALT https://soundcloud.com/cyberneticgirl/camilahamdan_googlevoice_test
  • 40. Aspas simples ou duplas? Aspas duplas são os mais comuns em HTML, mas o estilo único também pode ser usado. Em algumas situações, quando o próprio valor do atributo contém aspas, é necessário o uso de aspas simples: <p title='John "ShotGun" Nelson'> Ou vice-versa: <p title="John 'ShotGun' Nelson">
  • 41. Desta forma, compreendemos que: •Todos os elementos HTML pode ter atributos •O atributo título fornece "dica de ferramenta" informação adicional •O atributo href fornece informações de endereço para links • Os atributos de largura e altura fornecem informações de tamanho para imagens •O atributo alt fornece texto para leitores de tela promovendo a acessibilidade de pessoas com deficiência visual ou baixa visão. •Optamos por convenção usar sempre minúsculas nos nomes de atributos em HTML, como também, citar os atributos com aspas duplas.
  • 42. A lista completa de todos os atributos para cada elemento HTML, está listado na página: HTML Tag Referência .
  • 43. 1. Faça uma pequena página em HTML falando sobre você! 2. Insira uma imagem sua na página; 3. Transforme uma palavra da página em um link que vai para seu Facebook; 4. Especifique um texto alternativo para ser lido por "leitores de tela". EXERCÍCIO