Rudinei Goularte SCC0265 – Sistemas Interativos Web Aula 3 Introdução a HTML.

Apresentação em tema: "Rudinei Goularte SCC0265 – Sistemas Interativos Web Aula 3 Introdução a HTML."— Transcrição da apresentação:

1 Rudinei Goularte rudinei@icmc.usp.br SCC0265 – Sistemas Interativos Web Aula 3 Introdução a HTML

2 Linguagens de Marcação Introdução a HTML Roteiro

3 Linguagens de Marcação

4 “uma linguagem de marcação (markup language) combina texto e informações extra sobre o texto.” Exemplos de markup languages: SGML Standard Generalized Markup Language ISO 8879:1986 HTML HTML Hypertext Markup Language RFC 1866 (HTML 2.0) O que é linguagem de marcação?

5 Tags (etiquetas) descriptive markups Marcação que delimita um elemento (SGML) Elemento Um componente da estrutura de um documento Hello World! start tag marca o início end tag marca o final dados De que constitui uma linguagem de marcação?

6 HyperText Markup Language HyperText Markup Language primeiro padrão amplamente utilizado: HTML 2.0 que foi liberada em 1995 HTML 3.2: Recomendação (1997) HTML 4.01: Especificação (1999) XHTML em 2000, HTML foi atualizada para incluir recursos da XML: XHTML (EXtensible Hypertext Markup Language); 2010 – 2nd Edition (XHTML Basic v. 1.1) HTML 5: em desenvolvimento. HTML originalmente projetada para disseminar dados estruturados, passou a ser também um modo de apresentar dados, MAS não oferece marcação significativa do conteúdo desses dados!!! Muitos problemas para busca e recuperação de informações. HTML

7 Structural Example First Header This is a paragraph in the example HTML file. Keep in mind that the title does not appear in the document text, but that the header (defined by H1) does. First item in an ordered list. Second item in an ordered list. Third item in an ordered list. This is an additional paragraph. Technically, end tags are not required for paragraphs, although they are allowed. You can include character highlighting in a paragraph. This sentence of the paragraph is emphasized. Note that the </P> end tag has been omitted. Be sure to read these instructions. Structural Example First Header This is a paragraph in the example HTML file. Keep in mind that the title does not appear in the document text, but that the header (defined by H1) does. First item in an ordered list. Second item in an ordered list. Third item in an ordered list. This is an additional paragraph. Technically, end tags are not required for paragraphs, although they are allowed. You can include character highlighting in a paragraph. This sentence of the paragraph is emphasized. Note that the </P> end tag has been omitted. Be sure to read these instructions.

8

9 HTML Define uma classe simples de documentos Cabeçalhos, parágrafos, listas, tabelas e imagens Suporte mínimo a hipertexto Ligação unidirecional especificada integralmente dentro do documento Outras limitações A linguagem não é extensível Um documento não pode ser reutilizado Pouca, ou quase nenhuma semântica pode ser extraída de um documento HTML

10 Introdução a HTML

11 Estrutura Básica de um documento HTML … … Cabeçalho Corpo do documento

12 Estrutura Básica de um documento HTML … … Cabeçalho Corpo do documento Um documento HTML começa com a tag e termina quando encontra a tag

13 Estrutura Básica de um documento HTML … … Cabeçalho Corpo do documento O cabeçalho permite a definição do título da página, inclusão de metadados, scripts e folhas de estilo.

14 Estrutura Básica de um documento HTML … … Cabeçalho Corpo do documento O conteúdo da página é inserido entre as tags e

15 O elemento cabeçalho é um contêiner para elementos do tipo cabeçalho Metadados, Scripts, Estilos e Título Cabeçalho Título do documento Conteúdo do documento Título do documento Conteúdo do documento

16 O título de um documento HTML é definido pela tag O elemento título é definido no cabeçalho do documento HTML Título Título do documento Conteúdo do documento Título do documento Conteúdo do documento

17 O corpo de um documento HTML é definido pela tag O restante das tags HTML são inseridas no corpo do documento Corpo Título do documento Conteúdo do documento Título do documento Conteúdo do documento

18 Títulos de Conteúdo Quebra de Linhas Parágrafos Linhas Imagens Listas Formulários Formatação Básica Tags HTML

19 Existem seis diferente níveis de títulos para contéudo em páginas html … Títulos de Conteúdo Título 1 Título 2 Título 3 Título 4 Título 5 Título 6 Título 1 Título 2 Título 3 Título 4 Título 5 Título 6

20 A tag insere uma quebra de linha simples em documentos HTML Quebra de Linhas Quebra de Linhas O meu nome é João Silva. Tenho 18 anos. Quebra de Linhas O meu nome é João Silva. Tenho 18 anos.

21 A tag que define um novo parágrafo em HTML é O navegador automaticamente define um espaço antes e depois do parágrafo Parágrafos Parágrafos Parágrafo 1 Parágrafo 2 Parágrafos Parágrafo 1 Parágrafo 2

22 A tag cria uma linha horizontal em uma página HTML Pode ser utilizado para separar conteúdo Linha horizontal Linhas Parágrafo 1. Parágrafo 2. Linhas Parágrafo 1. Parágrafo 2.

23 A tag “adiciona” uma imagem no documentos HTML Alguns atributos para a tag src: define o caminho da imagem alt: texto alternativo para a imagem width: largura da imagem (opcional) height: altura da imagem (opcional) Exemplo... Imagens

24 Imagens Imagens

25 O HTML permite a geração de listas ordenadas e não ordenadas As tag para a geração de listas são: ol: lista ordenada ul: lista não ordenada Para adicionar um item na lista, utiliza-se a tag Exemplo... Listas

26 Lista ordenada: Café Chá Leite Lista não ordenada: Café Chá Leite Lista ordenada: Café Chá Leite Lista não ordenada: Café Chá Leite

27 Âncoras Um elemento âncora “ ” estabelece uma ligação entre dois recursos – São os links – O atributo “href” deve conter o endereço destino da liação. – W3C.

28 Âncoras Âncoras Este é um link para a página da W3C: W3C Âncoras Este é um link para a página da W3C: W3C

29 A tag permite a construção de formulários em HTML Um formulário contém vários elementos geralmente utilizados para entrada de dados. Os mais comuns são: Text Fields Checkbox Radio-buttons Select box Submit buttons Formulários

30 A tag possui dois atributos principais action: específica o caminho para onde os dados do formulário serão enviados. method: determina como os dados do formulário serão enviados. Formulários

31 A tag é utilizada em formulários para selecionar/editar dados O atributo “type” permite variar o tipo do elemento Text field Checkbox Password field Radio button Button Exemplo... Formulários

32 Formulários Nome do Aluno: Homem: Mulher: Aluno Ingressante?: Definir uma senha: Formulários Nome do Aluno: Homem: Mulher: Aluno Ingressante?: Definir uma senha: Exemplo:

33 Formulários Exemplo:

34 Exemplo: Drop Down Lists College Degree? Choose One Some High School High School Degree Some College Bachelor's Degree Doctorate

35 Formatação Básica O HTML fornece algumas tags para formatação básica dos textos Negrito: Itálico: Sublinhado: Centralizar: Exemplo...

36 Formatação Básica Formatação Text normal Negrito Itálico Sublinhado Centralizado Formatação Text normal Negrito Itálico Sublinhado Centralizado

37 Dado um conjunto de arquivos correspondentes a um documento HTML simples, como recuperar toda a informação correspondente ? Várias conexões ftp seriam necessárias. Além disso, análise de cada arquivo.html para verificar que, por exemplo, imagens devem carregadas. Conexão ftp pode durar muito tempo: o usuário pode ficar conectado indefinidamente se o servidor não controla tempo de acesso ocioso. Quando um arquivo de outro servidor é escolhido, nova conexão tem que ser feita, e o trabalho começa todo novamente. Por que HyperText Transfer Protocol - HTTP ?

38 Tal esquema, sem dúvida, dificulta em muito a divulgação e obtenção de hiperdocumentos pela Internet. Não existia, antes de HTTP, uma maneira de requisitar informação hipermídia a partir de um ponto da Internet. Não havia um método padronizado para algum cliente solicitar e um servidor responder àquela solicitação. Por que HyperText Transfer Protocol - HTTP ?

39 Plataforma WEB

40 Cliente e Servidor HTTP

41 Principais Métodos

42 Cabeçalhos

43 Comunicação HTTP

44 Trabalho 1 Individual: desenvolver página(s) HTML com formulários para cadastrar dados de um Pet shop (cães e gatos apenas): registro do animal; do dono; produtos (coleira, ração, etc.); serviços (banho, tosa, massagem, etc.).

45 Mais informações Bibliografia: H. Refsnes. Learn HTML and CSS with W3Schools. Wiley Publishing, 2010. Referências HTML: – http://www.w3schools.com/tags/ – http://www.w3.org/MarkUp/Guide/ – http://www.w3.org/MarkUp/Guide/Advanced.html – http://www.w3.org/TR/html4/interact/forms.html

46 Esses slides têm sido elaborados juntamente com os profs. do grupo de pesquisa “Sistemas Web e Multimídia Interativos”