Curso Web Designer UTD. Aula 02

Transcrição

1 Curso Web Designer UTD Aula 02

2 Conhecendo o HTML 3

3 Objetivos da Aula parte 1/2 Conhecendo a sintaxe; Evolução HTML x HTML5; O futuro e o presente da Web com o HTML5; Conhecendo suas características; Tags doctype, head e body; Diferenças entre as versões de HTML; 4

4 Objetivos da Aula parte 2/2 Criando sua primeira página HTML; Novos elementos e atributos; Elementos que saíram ou foram descontinuados; Criando um markup semântico; Conhecendo elementos block e inline; Criando listas. 5

5 Conhecendo a sintaxe 6

6 Conhecendo a sintaxe Os documentos HTML podem ser criados utilizando qualquer editor de texto, como por exemplo o Bloco de Notas. Extensões:.html,.htm 7

7 Conhecendo a sintaxe Todo documento HTML possui uma estrutura básica: <html></html>: marca o início e o fim do documento HTML; <head> </head>: delimita a área de cabeçalho do documento; <title></title>: utilizada dentro da tag <head>, define o título do documento; <body></body>: marca o início e o fim do conteu do (corpo), onde estarão textos, imagens e links da sua página. 8

9 Conhecendo a sintaxe <HTML > Os elementos HTML, com exceção do DOCTYPE, devem ser inseridos no conteu do do elemento html. <HEAD> Esse elemento e aberto e fechado com a tag <html> e deve conter exatamente um elemento head seguido de um elemento body. <BODY> 10

10 Conhecendo a sintaxe <HTML > A Tag HEAD e onde fica toda a parte inteligente da página. No HEAD ficam os metadados que são informações sobre <HEAD> a página, e o conteu do ali publicado. O elemento HEAD e aberto e fechado pelas tags <head> e </head>, respectivamente. <BODY> Obrigatoriamente, salvo poucas exceções, o corpo do head deve conter uma ocorre ncia do elemento title. 11

11 Conhecendo a <HTML > sintaxe O conteu do de uma página web deve ser definido no corpo do elemento body. <HEAD> Por exemplo, cabeçalhos, podemos textos, inserir no corpo do body: listas, tabelas, entre outros componentes. <BODY> Esse elemento e aberto pela tag <body> e fechado pela tag </body>. 12

12 Conhecendo a sintaxe Criando um documento HTML : Abra um editor de texto; Escreva a estrutura de um documento HTML; Abra o arquivo no seu Salve o documento nas navegador (browser). extensões.html ou.htm; 13

13 Conhecendo a sintaxe O texto em HTML e formatado Tambe m podemos utilizar atributos de acordo com os chamados de como: elementos da formatação. São eles: vários (Class) tipos, ou Identificadores classes únicos (ID). Marca de I n í c io I ní c Conteu do Marca de Fim im 14

14 Conhecendo a sintaxe Tags As tags dizem ao web browser como o texto e as imagens serão exibidas. Elas são representadas pelos sinais < >. O fechamento de uma tag que a tag está finalizando deve ser feito usando a barra /, indicando a marcação de um texto. Exemplos: <p> Texto </p> <b> Texto </b> <br/> 15

15 Conhecendo a sintaxe Pontos importantes: A ordem das tags devem ser obedecidas; As tags devem ser abertas e fechadas corretamente; Cada elemento do HTML possui um propo sito bem definido. Nem todas as tags fecham com </nomedatag>, algumas fecham na declaração dela mesma. 16

17 Conhecendo a sintaxe Comentários Podemos adicionar comentários em um documento HTML dentro das tags . No entanto, esses comentários são ignorados pelos navegadores.  18

18 Conhecendo a sintaxe Tı tulos Assim como em um livro, uma página web pode conter títulos para estabelecer uma divisão uma hierarquia de do seu conteu do: <h1>título</h1> <h2> Subtítulo nível 2</h2> <h3> Subtítulo nível 3</h3> <h4> Subtítulo nível 4</h4> <h5> Subtítulo nível 5 </h5> <h6> Subtítulo nível 6</h6> 19

19 Conhecendo a sintaxe Tı tulos 20

20 Conhecendo a sintaxe Parágrafos <p></p>: tag para definição de parágrafo: <p>conteúdo</p> 21

21 Conhecendo a sintaxe Links <a></a>: tag que cria um link com outro documento ou âncoras: <a href= url >Texto</a> href= Destino do link Para envio de , utilizar o valor mailto: na propriedade href; e, para link externo, utilizar a URL absoluta. 22

22 Conhecendo a sintaxe Links 23

23 Conhecendo a sintaxe Formatação de caracteres <b></b>: tag para texto em negrito; <i></i>: tag para texto em itálico; <u></u>: tag para texto sublinhado; <strong></strong>: tag para e nfase em negrito; <em></em>: tag para e nfase em itálico; <br />: tag para quebra de linha. 24

24 Conhecendo a sintaxe Formatação de caracteres 25

25 Conhecendo a sintaxe Formatação de caracteres <small></small>: tag para texto pequeno; <big></big>: tag para texto grande; <sub></sub>: tag para texto subscrito; <sup></sup>: tag para texto sobrescrito; <code></code>: tag para co digo de programa; <pre></pre>: tag para texto pre -formatado. 26

26 Conhecendo a sintaxe Formatação de caracteres 27

27 Conhecendo a sintaxe Outros Elementos <div></div>: tag que define um bloco de elementos <span></span>: tag que, em conjunto um texto. Ela por si só não faz alteração <address></address>: tag que define proprietario/autor da página; <blockquote></blockquote>: na página HTML; com o estilo, pode formatar alguma no co digo; informações de contato do tag que define uma citação longa com margens. 28

28 Conhecendo a sintaxe Imagens <img />: tag que insere uma imagem: <img src= imagem.jpg alt= Descrição width= 200 height= 100 /> src = [URL] Indica o caminho da imagem. alt = [texto] Especifica um texto para imagem. height = [pixel ou %] Especifica a altura da imagem (opcional); width = [pixel ou %] Especifica a largura da imagem (opcional). 29

29 Conhecendo a sintaxe Imagens O browser procura a imagem no direto rio atual. Caso a imagem esteja em um direto rio diferente indicar o ao do documento, será necessário direto rio. 30

30 Conhecendo a sintaxe Imagens Caso o arquivo HTML não encontre a imagem e exibido o que foi definido na propriedade alt : Ela tambe m e utilizada por leitores de tela, ajudando assim na acessibilidade. 31

31 Conhecendo a sintaxe Listas Existem alguns tipos de listas no HTML com seus respectivos elementos, são eles: <ol></ol>: tag para criar listas ordenadas (ol = ordered list); <ul></ul>: tag para criar listas não ordenadas (ul = unordered <li></li>: tag para criar os itens da lista; <dl></dl>: tag para criar as listas definidas / listas list); de termos; <dt></dt>: tag que define o termo da lista; <dd></dd>: tag que define o subitem do termo. 32

32 Conhecendo a sintaxe Exemplo - Lista Ordenada 33

33 Conhecendo a sintaxe Exemplo - Lista Não Ordenada 34

34 Conhecendo a sintaxe Exemplo - Lista de Termos 35

35 Conhecendo a sintaxe Listas alinhadas (Lista dentro da lista) 36

36 Conhecendo a sintaxe As TAGs HTML possuem características Atr ib uto s tr ib to Padr ões r Id; Class; Title; alguns tipos de atributos que definem as de cada TAG. São eles: Atr ib uto s tr ib to Opcionais is A tr ib u to s Re q Atr ib uto s de A tr ib u to s e tr ib to u e r id o s Evento q u e r id o to Name; Type; Src; Alt e etc; Value e etc. Onmouseover; Onkeypress; Onclick e etc. Style e etc. 37

37 Conhecendo a sintaxe A linguagem HTML e regida por um DTD (Document Type Definition). Este documento define os elementos, atributos e entidades que fazem parte do vocabulário de uma linguagem de marcação. Ele identifica: Quais elementos compõem o vocabulário de uma linguagem de marcação; Como os elementos podem ser utilizados em conjunto; Quais atributos podem ser usados com cada elemento; Quais entidades existentes e suas representações. 38

38 Conhecendo a sintaxe Atenção Todos os declaração exibir documentos HTML devem do DOCTYPE. E, para um corretamente uma página informar o tipo de documento web, ter uma navegador devemos com a declaração <! DOCTYPE>. 39

39 Conhecendo Veja a declaração <!DOCTYPE> para HTM 4.01 L a sintaxe os principais tipos de documentos: XHTM 1.0 e 1.1 L <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " 40

40 Conhecendo Veja a declaração <!DOCTYPE> para HTM 4.01 L a sintaxe os principais tipos de documentos: XHTM 1.0 e 1.1 L <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" " 41

41 Conhecendo a sintaxe <!DOCTYPE html> Para uma apresentação correta, o browser precisará saber os tipos de caracteres que utilizará no documento. São eles: UTF ISO UTF-8 (Unicode Transformation Format) 42

42 Conhecendo a sintaxe ISO Nu meros de 0 a 9, caracteres UPPERCASE & Lowercase da tabela ASCII ( e Símbolos. North America, Western Europe, Latin America, the Caribbean, Canada e Africa. UTF (Unicode Transformation Format) padroniza todos os caracteres, nu meros e símbolos existentes nas ISOs. UTF-8 e o mais conhecido e utilizado para codificar caracteres de páginas e . Use o UTF-8! 43

43 Conhecendo a sintaxe Tag meta A tag meta define as informações Esses valores não são apresentados na tela, mas por sua lidos pelos vez, são servidores, do conteu do da página É necessário (metadados). que estejam sempre dentro da tag head. serviços de buscas, etc. 44

44 Conhecendo a sintaxe Propriedades da tag html A propriedade lang especifica o co digo da linguagem para o documento: pt = Portugue s; en = English A propriedade dir especifica a direção do co digo para o documento: ltr (Left to Right) ou rtl (Right to Left) 45

45 Faça agora os exercícios propostos para a sala de aula Acesse o site neloliveira.com.br/ Acesse o link Cruso Web Designer que está no menu Projetos Realize o exercício Aula 01

46 Evolução HTML x HTML5 46

47 Evolução HTML x HTML5 HTML5 esuas mudanças Enquanto o W3C focava suas atenções para a criação da segunda versão do XHTML, um grupo chamado Web Hypertext Application Technology Working Group ou WHATWG trabalhava em uma versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas baseados na web. 47

48 Evolução HTML x HTML5 Em 2004, o WHATWG foi fundado por desenvolvedores de empresas como: Mozilla, Apple e Opera. Eles não estavam felizes com o caminho que a Web tomava e nem com o rumo dado ao XHTML. Por esse motivo, estas organizações se juntaram para escrever o que seria chamado hoje de HTML5. 48

49 Evolução HTML x HTML5 Por volta de 2006, o trabalho do WHATWG passou a ser conhecido no mundo e principalmente pelo W3C. Ambas trabalhavam separadamente, mas com o tempo o W3C passou a reconhecer o trabalho do grupo. Em Outubro de 2006, Tim Berners-Lee anunciou que trabalharia juntamente com o WHATW na produção do G detrimento do XHTML2. HTML5 em, 49

50 Evolução HTML x HTML5 Mesmo com a junção, o XHTML seria mantido paralelamente de acordo com as mudanças causadas no HTML. Em 2009 o grupo que estava cuidando do XHTML2 foi descontinuado. E hoje o HTML5 e a nova versão do HTML4. 50

51 Evolução HTML x HTML5 Enquanto o WHATWG define as regras de marcação que usaremos no HTML5 e no XHTML, eles tambe m definem APIs da que formarão a base arquitetura web. Um dos principais objetivos do HTML5 e : Facilitar a desenvolvedor manipulação do elemento, a modificar as características possibilitando o dos objetos de forma não intrusiva, e que seja transparente para o usuário final. 51

52 Evolução HTML x HTML5 Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e ao Javascript para fazerem seu trabalho da melhor maneira possível. O HTML permite, por meio de suas APIs, a manipulação das 5 características destes elementos, de forma que o website ou a aplicação continue leve e funcional, sem a necessidade de criar grandes blocos de scripts. HTML5 = Website leve e funcional. 52

53 Evolução HTM x HTML L 5 Em uma entrevista, Ian Hickson mencionou que no ano de 2022, o HTML5 se tornaria uma proposta de recomendação. O que se seguiu foi uma onda de indignação pu blica a web designers e desenvolvedores. Eles partir de alguns não entendiam o que essa "recomendação" significava, mas sabiam ate que não poderiam esperar o ano de

54 Evolução HTML x HTML5 A data que realmente especificação foi importa para o HTML e 2012, quando a 5 devidamente tornar-se "candidato um recomendação." O WHATWG tem mantido o foco para manter a retrocompatibilidade. Nenhum site precisará ser refeito totalmente para se adequar aos novos conceitos e regras. O HTML está sendo criado para que seja compatível com os 5 browsers recentes, possibilitando das novas a utilização características imediatamente. A regra primordial entre os desenvolvedores web Don t Break The Web e seguida a risca. 54

55 Evolução HTML x HTML5 Ale m de disso, o HTML passou por várias mudanças na alguns elementos, entre eles a nossa declaração de Metatag Charset, Tag Link, Tag Script entre outras novas features. Metatag Charset Nas versões anteriores ao HTML5, essa tag era escrita dessa forma: <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> O novo co digo para o HTML5 resumiu bastante as coisas, retirou todo o co digo inu til e deixou a linha seguinte assim: <meta charset= utf-8 /> 55

56 Evolução HTML x HTML5 A estrutura básica do HTML5 continua versões anteriores, sendo praticamente a mesma das mas com menos co digo. Veja a estrutura básica implementada na versão 5: 56

57 HTML5 e o futuro da Web 57

58 HTML5 e o futuro da Web O futuro e o presente da Web com o HTML5 Desde que os primeiros sites foram exibidos no domínio publico da internet, muita coisa já mudou e evoluiu. Mas, o que se mante m daquele tempo ate hoje e o HTML. A linguagem de marcação utilizada para exibir os dados formatados, de forma estruturada como vemos hoje, pode ser considerado um sobrevivente. 58

59 HTML5 e o futuro da Web Atualmente cada vez mais navegadores implementam recursos HTML5 Ficou claro que todos compraram a ideia, conseque ncia.e que já existem muitas coisas em HTML5. em disso, Padrões Pad ões É possível ter uma u nica web onde todos podem desenvolver seguindo o mesmo padrão. O mais importante e que esses padrões trabalham individualmente com uma rede de conexão ligada com CSS, mais um motivo para que todos aceitem a linguagem. 59

60 HTML5 e o futuro da Web Para o usuário comum, a principal mudança e que o HTML5 dispensa a instalação de plugins para as seguintes atividades: Assistir vídeos em diferentes formatos. Estas e outras atividades ficaram mais simples com Visualiz Elementos Visualizar de páginas da web de pági a linguagem. Em dispositivos mo veis, por exemplo, e possível acessar a internet com muita rapidez. 60

61 HTML5 e o futuro da Web O HTML5 conta com tags canvas para as seguintes ações: Renderizar imagens; 4 4 Co digos que incorpore vídeos 3 3 em páginas da internet; Caching de aplicações (que permite o acesso a APIs de geolocalização; Bancos de dados com entradas de valores; aplicativos mesmo offline); Tudo utilizando um sistema mais simples Palavras-chave e SQL. e padronizado. 61

62 Novos Elementos 65

63 Novos Elementos Elementos de Seção O DIV tem a função de criar divisões e quando criamos um website dividimos as áreas do layout em seções. O problema do DIV, e que ele não tem nenhum significado semântico. Os sistemas de busca, por exemplo, não permitem saber quando se trata de um rodape, um cabeçalho ou um sidebar; porque tudo e feito com DIVs. Com isto, colocamos o mesmo nível hierárquico de informação para todas as seções. 66

64 Novos Elementos Para resolver esse problema, foi criado um conjunto novos de elementos que ale m de dividir as áreas do layout, tambe m entrega o significado. Esses elementos são chamados de Conteúdos de Seções ou Sectioning Content. Esse conjunto de tags tem a seguinte função: Dividir as áreas do layout como fazı amos com os DIVs, mas cada uma delas carregando um significado especı fico. 67

65 Novos Elementos Entenda agora o que significa cada um destes elementos: <main></main>: a tag main e específica para o principal conteu do do documento (site); <section></section>: a tag section define uma nova seção gene rica no documento; <nav></nav>: o elemento nav representa uma seção da página que conte m links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que conte m links importantes; <article></article>: o elemento article e onde colocamos o texto ou a informação principal. 68

66 Novos Elementos <aside></aside>: o elemento aside representa informação relativo ao conteu do principal; <header></header>: o elemento um header representa bloco de um grupo de introdução ou de elementos de navegação. Ele pode ser utilizado para agrupar índices de conteu dos, campos de busca ou ate mesmo logos; <footer></footer>: o elemento footer representa literalmente o rodape da página. Seria o u ltimo elemento antes de fechar a tag HTML. Ele não precisa aparecer necessariamente seção. no final de uma 69

67 Elementos descontinuados 70

68 Elementos descontinuados Elementos que saı ram ou foram descontinuados Esses elementos foram descontinuados porque os seus efeitos são apenas visuais: basefont, big, center, font, s, strike, tt, u Já esses elementos foram descontinuados porque ferem os princípios de acessibilide e usabilidade: frame frameset, noframes 71

69 Elementos block e inline 72

70 Elementos block e inline Todos os elementos HTML, podem ser separados em dois grupos de comportamento visual CSS: Elementos bloco (block) Elementos em linha (inline) Seja em bloco ou em linha, o comportamento outras características mudam. visual do elemento e Apesar da possibilidade de mudar o modo de exibição de cada elemento a com o CSS, cada tag por padrão pertence outro grupo. 73

71 Elementos block e inline Elementos bloco (block) ocupam todo o espaço horizontal disponível, e iniciam uma nova linha no documento. Novos elementos irão começar na pro xima linha livre. Veja alguns exemplos de elementos bloco: div (division, ou divisão, tag bloco gene rica); h1 ate h6 (títulos); p (parágrafo); ul e ol (lista não ordenada / lista ordenada), dentre outros. 74

72 Elementos block e inline Elementos em linha (inline) ocupam apenas o espaço necessário e não iniciam uma nova linha. São chamados elementos em linha, justamente porque podem aparecer na mesma linha de Exemplos de elementos em linha: outros elementos. span (tag em linha gene rica); strong (destaca importância, e nfase); a (âncora, links); img (imagem), dentre outros. 75

73 Próximos Passos Para que voce tenha um melhor aproveitamento do curso, participe das seguintes atividades: Aula: HTML5 e suas APIs Faça a leitura dos slides; Assistir a Videoaula; Realizar Laborato rio e Teste Faça os de Conhecimento; do Projeto Dexter. exercício propostos Mãos à obra! 76