WebDesign AULA 2: Introdução a HTML

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

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

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 :

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

WebDesign AULA 2: Introdução a HTML

Mais conteúdo relacionado

Mais procurados

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

Mais de Dra. Camila Hamdan

WebDesign AULA 2: Introdução a HTML