21
sábado, 23 de março de 13

Front-End (HTML)

Embed Size (px)

Citation preview

Page 1: Front-End (HTML)

sábado, 23 de março de 13

Page 2: Front-End (HTML)

DesenvolvimentoFront-End

sábado, 23 de março de 13

Page 3: Front-End (HTML)

• HTML

• Semântica

• SEO

• CSS

• JavaScript

• Bibliotecas e Frameworks

sábado, 23 de março de 13

Page 4: Front-End (HTML)

Tabelas vs Tableless

sábado, 23 de março de 13

Page 5: Front-End (HTML)

HTML

sábado, 23 de março de 13

Page 6: Front-End (HTML)

HyperText Markup Language

HTML não é linguagem de programação

sábado, 23 de março de 13

Page 7: Front-End (HTML)

Tags

<tag atributo="valor"></tag>

<tag atributo="valor">

sábado, 23 de março de 13

Page 8: Front-End (HTML)

Estrutura básica de um documento

sábado, 23 de março de 13

Page 9: Front-End (HTML)

<!doctype>

a tag ```<!doctype>``` defineo tipo de html que estamos escrevendo, no caso do exemplo acima HTML5, fazendo o browser compreendercorretamente os elementos presentes no documento.

sábado, 23 de março de 13

Page 10: Front-End (HTML)

Outros exemplos de Doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

sábado, 23 de março de 13

Page 11: Front-End (HTML)

Elementos para marcação de texto

• <h1></h1>, .., <h6></h6>

• <p></p>

• <b></b>

• <i></i>

• <strong></strong>

• <em></em>

• <span></span>

sábado, 23 de março de 13

Page 12: Front-End (HTML)

Elementos para marcação de imagens

<img src="imagem.jpg" alt="Descrição alternativa">

sábado, 23 de março de 13

Page 13: Front-End (HTML)

Elementos estruturais• Lista não ordenada

• Lista ordenada

• Lista de definição

• <div></div>

sábado, 23 de março de 13

Page 14: Front-End (HTML)

Elementos de formulário

• action : define o endereço para onde os dados serão enviados

• method : define o método de envio dos dados através do protocoo HTTP que pode ser POST ou GET

• enctype : esse atributo deve ser utilizado em formulários que enviem arquivos com o valor de multipart/form-data

sábado, 23 de março de 13

Page 15: Front-End (HTML)

<label></label>

sábado, 23 de março de 13

Page 16: Front-End (HTML)

<input type=”x”>• text

• password

• radio

• checkbox

• button

• file

• hidden

• submit

• reset

sábado, 23 de março de 13

Page 17: Front-End (HTML)

select

sábado, 23 de março de 13

Page 18: Front-End (HTML)

Outros• <textarea></textarea>

• <button></button>

sábado, 23 de março de 13

Page 19: Front-End (HTML)

Atributos comuns nos elementos de formulário

• value: define um valor padrão para o campo (exceto em textareas).

• disabled: desativa um campo (exceto `<input type="hidden">`, os dados desse campo não serão enviados com o formulário.

• readonly: o valor do campo não pode ser editado, mas os dados são enviados com o formulário.

• checked : valido para elemenetos `radio` e `checkbox`, definem o campo como selecionado por padrão.

sábado, 23 de março de 13

Page 20: Front-End (HTML)

Hyperlinks

sábado, 23 de março de 13

Page 21: Front-End (HTML)

IFrame

sábado, 23 de março de 13