Desenvolvimento Web - 02 - HTML.pdf

Desenvolvimento Web HTML 5 Chessman Kennedy Faria Corrêa HTML HTML (Hypertext Markup Language) é uma linguagem de marcação de hipertexto. Linguagem padrão para criação de páginas web. É a linguagem interpretada pelos navegadores. Versão atual: 5.2 Fonte importante: W3Schoo...

Desenvolvimento Web HTML 5 Chessman Kennedy Faria Corrêa HTML HTML (Hypertext Markup Language) é uma linguagem de marcação de hipertexto. Linguagem padrão para criação de páginas web. É a linguagem interpretada pelos navegadores. Versão atual: 5.2 Fonte importante: W3Schools Online Web Tutorials www.w3schools.com 2 O Arquivo index.html O index.html é o principal arquivo de um site um aplicativo web. Este arquivo é aberto automaticamente pelo navegador quando é informado o endereço do site ou aplicativo web. 3 Usando Tags do HTML Tags são marcações do HTML que indicam o que o navegador deve fazer com o conteúdo. Uma tag tem o formato , sendo ? uma letra ou palavra que indica o nome do elemento. 4 Usando Tags do HTML Crie um arquivo index.html como mostrado a seguir e abra a página no navegador. 5 Usando Tags HTML Geralmente utiliza-se uma tag de abertura e uma tag de fechamento: conteúdo Exemplo: Ola mundo 6 Usando Tags HTML Existem casos em que não se utiliza tag de fechamento: Exemplo: 7 Estrutura de um arquivo html Para informar ao navegador que o arquivo contém HTML 5, é necessário informar a tag a seguir no início do arquivo. 8 Estrutura de um arquivo html O próximo passo é definir o bloco de conteúdo html. Para isso, use as tags e. 9 Cabeçalho do Arquivo O cabeçalho fornece informações sobre a página usados pelo navegador. Estas informações não são mostradas na janela do navegador. Conteúdos: Título da página Estruturas de formatação. Código Javascript 10 Cabeçalho do Arquivo Para definir um cabeçalho, utilize as tags e , como mostrado na figura. 11 Corpo do Arquivo O corpo é o local onde coloca-se o conteúdo a ser mostrado pelo navegador. O corpo é definido a partir das tags e. 12 Corpo do Arquivo Escreva o código a seguir, salve o arquivo e abra-o no navegador. 13 Abrindo a Página no Navegador 14 Definindo o Idioma Para garantir que o navegador mostre a acentuação corretamente, use a tag , informando valor "utf- 8"para o atributo charset como mostrado a seguir. Salve o arquivo a abra no navegador. 15 Definindo o Título da Página O título da página é mostrado na aba do navegador. Está assim porque o título ainda não foi informado 16 Definindo o Título da Página Para definir o título da página, use as tags e no cabeçalho, como mostrado na figura a seguir. Salve o arquivo a abra no navegador. 17 Definindo o Título da Página Agora, aparece assim! 18 Títulos O HTML permite definir títulos. Os títulos vão de até. O tamanho da fonte de é o maior, e o de é o menor. 19 Títulos Experimente: 20 Títulos 21 Parágrafos Um parágrafo é definido pelas tags. Experimente o exemplo a seguir. 22 Parágrafos Observe que existe um espaço entre os parágrafos. 23 Quebra de Linha Para quebrar uma linha, use a tag. 24 Quebra de Linha Observe que não existe espaço entre linhas com quebra. 25 Linha de Separação Para usar uma linha para separar conteúdos da página, use a tag. 26 Linha de Separação 27 Formatação de Texto – Método Antigo Você pode usar as tags a seguir para a formatação de texto. Negrito:. Itálico: Sublinhado: Riscado: 28 Formatação de Texto – Método Antigo 29 Formatação de Texto 30 Formatação de Texto – Método mais Recente Recomenda-se usar as tags novas de formatação. Negrito:. Itálico: Riscado: 31 Formatação de Texto – Método mais Recente 32 Formatação de Texto – Método mais Recente 33 Lista não Ordenada É uma lista não enumerada. Use as tags para definir a lista, Use as tags para cada item da lista. 34 Lista não Ordenada 35 Lista não Ordenada 36 Lista não Ordenada Você pode mudar o marcador usado no início de cada item. Para isso, defina um dos seguintes valores para o atributo type da tag : Círculo preenchido (padrão): "disc" Círculo não preenchido: "circle" Quadrado: "square" Exemplo: 37 Lista não Ordenada 38 Lista não Ordenada 39 Lista Ordenada É uma lista enumerada. Use as tags para definir a lista, Use as tags para cada item da lista. Experimente: 40 Lista Ordenada 41 Lista Ordenada 42 Lista Ordenada Você pode mudar o tipo de enumeração dos itens. Para isso, defina um dos seguintes valores para o atributo type da tag : Algarismos (padrão): "1" Letras maiúsculas: "A" Letras minúsculas: "a" Algarismos romanos com letras maiúsculas: "I" Algarismos romanos com letras minúsculas: "i" Exemplo: 43 Lista Ordenada 44 Lista Ordenada 45 Listas Aninhadas É possível criar uma lista dentro de outra. Para isso, crie a nova lista dentro de item da lista mas externa, como mostrado a seguir. Lista Interna 46 Pesquise! Pesquise também sobre lista de definições. 47 Exercício – Crie esta página: 48 Imagem Local Use a tag Exemplo: Você pode usar qualquer tipo de arquivo de imagem. Não esqueça de indicar o caminho completo onde a imagem se encontra. Exemplo: 49 Imagem Local Crie uma pasta para um novo projeto. Crie uma pasta chamada imagens na pasta do projeto. Escolha uma imagem e salve na pasta. 50 Imagem Local Crie o arquivo index.html dentro da pasta do projeto. 51 Imagem Local 52 Ajuste da Imagem É possível ajustar o tamanho da imagem. Para ajustar o tamanho da imagem a partir da altura, use o atributo height. A largura é ajustada automaticamente. Exemplo: Para ajustar o tamanho da imagem a partir da largura, use o atributo width. A altura é ajustada automaticamente. Exemplo: 53 Ajuste da Imagem 54 Ajuste da Imagem 55 Ajuste da Imagem Você pode usar height e width juntos, mas cuidado para não distorcer a imagem! Você também pode definir o tamanho percentual em relação à janela do navegador. Neste caso, as dimensões da imagem mudam em função da largura e da altura da janela. Exemplos: 56 Outros Atributos para a Imagem Use alt para mostrar um título no lugar da imagem, caso o navegador não consiga abrir a imagem. Use title para mostrar o título da imagem quando o usuário posicionar o cursor do mouse sobre a imagem. Exemplo: 57 Imagem na Web Para usar uma imagem que está na web, basta informar o endereço da imagem. Para copiar o endereço da imagem, ache a imagem no navegador. Clique com o botão direito do mouse e execute o comando Copiar Link. 58 Imagem na Web 59 Imagem na Web 60 Imagem na Web O uso de imagem na web deve ser evitado, pois ela pode deixar de existir ou não ser mais disponibilizada. 61 Vídeo Os principais navegadores possuem suporte para a reprodução de vídeos. É possível reproduzir os seguintes tipos de vídeo: MP4 WebM Ogg 62 Vídeo Para reproduzir um vídeo, use as tags e. Informe as dimensões da área de exibição do vídeo usando os atributos width (largura) e height (altura). Use o atributo controls quando quiser incluir os controles de reprodução do vídeo (reproduzir, pausar, volume, etc.) Use o atributo autoplay para executar o vídeo automaticamente. Use o atributo mute quando quiser iniciar a reprodução do vídeo sem áudio. Exemplo: 63 Vídeo Use a tag para informar o vídeo e o seu tipo. Use o atributo src para informar o caminho e o nome do vídeo. Use o atributo type para informar o formato do vídeo. Use um dos valores a seguir: Mp4: "video/mp4" WebM: "video/webm" Ogg: "video/ogg" Exemplo: 64 Vídeo Experimente: Crie uma pasta com o nome exemplo_video. Dentro da pasta exemplo_video, crie uma pasta como o nome videos. Coloque um vídeo mp4 na pasta videos. Crie o arquivo index.htm na pasta exemplo_video. Codifique o arquivo como mostrado a seguir. 65 Vídeo 66 Vídeo 67 Vídeo do Youtube Para reproduzir um vídeo que está no Youtube, use as tags e. Use os atributos height e width para definir as dimensões da área de exibição do vídeo. Use o atributo src para informar o endereço do vídeo e as configurações de reprodução. Exemplo: 68 Vídeo do Youtube Para configurar a reprodução do vídeo, você pode adicionar os atributos a seguir na url do vídeo. Use o & para separar os atributos. Inclua controls=1 para mostrar exibir os controles de reprodução do vídeo e controls=0 para esconder. Inclua loop=1 para repetir o vídeo automaticamente. Inclua mute=1 para iniciar o vídeo sem som. Inclua autoplay=1&mute=1 para iniciar a reprodução automaticamente (a reprodução automática só pode ser executada com o som desativado). 69 Vídeo do Youtube 70 Vídeo do Youtube 71 Mapa Para colocar um mapa googlemaps em uma página página, use o elemento iframe. 72 Mapa Para obter o mapa, acesse o googlemaps. Digite o endereço que deve ser mostrado no mapa. Abra o menu. 73 Mapa Clique e compartilhar ou incorporar mapa. 74 Mapa Clique em Incorporar um mapa. Clique em copiar html. Cole no arquivo. 75 Mapa Experimente: 76 Mapa 77 Áudio Os principais navegadores possuem suporte para a reprodução de áudio. É possível reproduzir os seguintes tipos de áudio: MP3 Wav Ogg 78 Áudio Para reproduzir um áudio, use as tags e. Use o atributo controls quando quiser incluir os controles de reprodução do áudio (reproduzir, pausar, volume, etc.) Use o atributo autoplay para executar o áudio automaticamente. Exemplo: 79 Áudio Use a tag para informar o áudio e o seu tipo. Use o atributo src para informar o caminho e o nome do áudio. Use o atributo type para informar o formato do áudio. Use um dos valores a seguir: Mp3: "audio/mpeg" Wav: "audio/wav" Ogg: "audio/ogg" Exemplo: 80 Áudio Experimente: Crie uma pasta com o nome exemplo_audio. Dentro da pasta exemplo_audio, crie uma pasta como o nome audios. Coloque um arquivo de áudio mp3 na pasta audios. Crie o arquivo index.htm na pasta exemplo_audio. Codifique o arquivo como mostrado a seguir. 81 Áudio 82 Áudio 83 Links e Navegação A navegação de uma página para outra, ou de uma posição para outra da mesma página, é realizada a partir de links. Um link permite acessar outra página ou um local da mesma página. Para fazer o acesso, use as tags e , usando o atributo href para informar o caminho e o nome da página a ser acessada (ou local da página). Coloque a descrição do link entre as tags. Exemplo: Segunda página 84 Links e Navegação Crie um arquivo com extensão html na pasta do projeto (ex: segundaPagina.html). 85 Links e Navegação Crie outro arquivo com extensão html na pasta do projeto (ex: terceiraPagina.html). 86 Links e Navegação No arquivo index.html, codifique os links para as páginas. 87 Links e Navegação 88 Links e Navegação Se a página estiver em uma pasta, informe o endereço completo, como mostrado no exemplo a seguir. Cadastrar Cliente 89 Link para outro Site Para navegar para outro site, coloque o endereço completo como mostrado no exemplo a seguir. Google 90 Link para Outro Site 91 Link para Outro Site 92 Abrindo o Link em outra Página Para abrir o conteúdo do o link em outra página (aba), use a propriedade target, como mostrado no exemplo a seguir. Google 93 Link de Envio de Email Para enviar um email, use um link como mostrado a seguir. Enviar email Será a aberta a janela do aplicativo de envio de email. 94 Navegando para outra Parte da mesma Página Para navegar para outras partes da mesma página, identifique cada bloco da página com um id. Em seguida, referencie o id no link. Exemplo. Primeira notícia...... 95 Tabela Use as tags para criar uma tabela. 96 Tabela - Borda Use o atributo border para definir a espessura da borda da tabela, como mostrado a seguir. Para criar uma tabela sem bordas, informe o valor zero: 97 Tabela - Linha Use as tags para criar uma linha para a tabela, como mostrado no exemplo a seguir. 98 Tabela - Título Use as tags para incluir o título de uma coluna. O exemplo a seguir ilustra a definição do título de 3 colunas. Titulo 1 Titulo 2 Titulo 3 99 Tabela - Dados Use as tags para incluir uma coluna com algum dado na linha da tabela. O exemplo a seguir demonstra uma tabela com 1 linha os dados de 3 colunas. 100 Tabela 101 Tabela 102 Tabela – Alinhamento Para alinhar um dado na célula, use o atributo align na tag. Informe um dos seguintes valores: left right center Exemplo: 103 Tabela – Largura Fixa Para definir a largura da tabela, use o atributo width na tag table. Exemplo: 104 Tabela – Largura Proporcional Para definir a largura da tabela proporcional à largura da janela do navegador, use o atributo width na tag table, informando um valor percentual. Exemplo: Experimente: redimensione a janela e observe o que acontece! 105 Tabela – Célula Expandida Para fazer com que uma célula ocupe mais de uma coluna, use o atributo colspan na tag. Informe a quantidade de colunas que devem ser ocupadas. Para fazer com que uma célula ocupe mais de uma linha, use o atributo rowspan na tag. Informe a quantidade de linhas que devem ser ocupadas. 106 Tabela – Célula Expandida 107 Tabela – Célula Expandida 108 Tabela – Alinhamento de Conteúdo Para alinhar um dado na célula, use o atributo align na tag. Informe um dos seguintes valores: left right center Exemplo: 109 Tabela – Alinhamento de Conteúdo 110 Tabela – Alinhamento de Conteúdo 111 Estruturação da Tabela titulo 1 Você pode definir titulo 2 explicitamente o cabeçalho, o corpo e o rodapé de uma tabela. Para isso, use as tags thead, tbody e tfoot, como Body1 linha1 Body2 linha1 mostrado no exemplo ao lado. Body1 linha2 Body2 linha2 Foot 1 Foot 2 112 Formulário Para criar um formulário, use as tags e O atributo method informa o método de envio, que pode ser get ou post. Prefira o post, pois este não coloca os dados do formulário na url, de forma que fique visível. O atributo action informa o arquivo que irá processar o envio. 113 Formulário - Rótulo O rótulo é usado para identificar o conteúdo e ser colocado em um componente de entrada de dados. Use as tags e para definir um rótulo. Exemplo: Nome: 114 Formulário – Entrada de Dados Para definir um componente de entrada de dados, use a tag Use o atributo type para informar o tipo de entrada. Informe um dos seguintes valores para type: text (caixa de edição) password (caixa de senha) checkbox (caixa de marcar) radio (botão de rádio) email (caixa de edição com verificação da formato do email) button (botão) submit (botão de envio) Use o atributo name para dar um nome com o qual o valor será associado. Exemplo: Nome: 115 Formulário – Caixa de Edição Para definir uma caixa de edição, use a tag Informe o valor text pra o atributo type para informar o tipo de entrada. Use o atributo name para dar um nome com o qual o valor será associado. Exemplo: Nome: 116 Formulário – Caixa de Edição 117 Formulário – Caixa de Edição Experimente também os componentes password e email! 118 Formulário – Caixa de Marcar Para definir uma caixa de marcar, use a tag Informe o valor checkbox pra o atributo type para informar o tipo de entrada. Use o atributo name para dar um nome com o qual o valor será associado. Passe o valor true para o atributo checked caso queira que o componente fique marcado. Exemplo: Presencial 119 Formulário – Caixa de Marcar 120 Formulário – Caixa de Marcar 121 Formulário – Botões de Rádio Para definir um botão rádio, use a tag Informe o valor radio pra o atributo type para informar o tipo de entrada. Para que botões de rádio funcionem como um grupo, use o mesmo valor para o atributo name. Passe o valor true para o atributo checked caso queira que o componente fique marcado. Informe o valor para o atributo value que deve ser enviado caso o botão de rádio esteja selecionado. Exemplo: Nacional Estrangeira 122 Formulário – Botões de Rádio 123 Formulário – Botões de Rádio 124 Formulário - Caixas Combinadas (Combobox) Para criar um combobox, use as tags e. Use o atributo name para informar o nome a ser associado com o valor. Exemplo: 125 Formulário - Caixas Combinadas Para incluir um item no combobox, use as tags e. Use o atributo value para informar o valor a ser enviado quando a opção for selecionada. Exemplo: Cama e mesa Banho Eletrodoméstico Eletrônico 126 Formulário - Caixas Combinadas 127 Formulário – Caixas Combinadas 128 Formulário – Caixa de Texto Para definir uma caixa de texto, use as tags e Use o atributo name para dar um nome com o qual o valor será associado. Use o atributo rows para informar a quantidade inicial de linhas. Use o atributo cols para informar a quantidade inicial de colunas. Exemplo: Descrição: 129 Formulário – Caixa de Texto 130 Formulário – Caixa de Texto 131 Formulário – Botão de Envio Para definir um botão para o envio dos dados, use a tag Informe o valor submit pra o atributo type para informar o tipo de entrada. Use o atributo name para dar um nome com o qual o valor será associado. Use o atributo value para informar o texto que deve ser mostrado no botão. Exemplo: 132 Formulário – Botão de Envio 133 Formulário – Botão de Envio 134 Formulário – Botão de Envio Os dados enviados podem ser vistos na url após o botão de envio ser pressionado: Você vai estudar em breve como fazer o envio de dados de forma segura. 135 Formulário - Caixas de Grupo É possível agrupar os componentes do formulário usando caixas de grupos. Para isso, crie um bloco usando o elemento fieldset como mostrado a seguir. Para incluir um título para a caia de grupo, use o elemento legend, como mostrado a seguir. 136 Formulário - Caixas de Grupo Para incluir um título para a caia de grupo, use o elemento legend, como mostrado a seguir. Título da Caixa de Grupo 137 Formulário – Campos Obrigatórios Use o atributo required para obrigar o usuário a informar o valor. 138 Formulário – Campos Obrigatórios 139 Imagem de Fundo Para colocar uma imagem de fundo, use o atributo background na tag : A imagem será replicada em toda a janela do navegador. 140 Caracteres Especiais Caracteres usados na linguagem HTML não podem ser usados como texto normal. Por exemplo, o caractere < pode ser confundido com a abertura de uma tag. Para reproduzir estes caracteres, é necessário usar códigos especiais. Acesse o endereço a seguir para ter acesso à lista de códigos. https://www.w3schools.com/html/html_entities.asp Por exemplo, para mostrar a < b digite a &lt b 141 Caracteres Especiais Para inserir mais que um espaço entre dois caracteres, use &nbsp. 142 Caracteres Especiais Para inserir mais que um espaço entre dois caracteres, use &nbsp. Experimente: 143 Identificação de Elementos Muitas vezes é necessário localizar um elemento para formatá-lo ou para realizar alguma operação. Para definir um identificador para um elemento (pode ser qualquer elemento), use o atributo id, como mostrado no exemplo a seguir. Observação. Assume-se que os identificadores dentro de uma página terão valores únicos e isso é por conta do desenvolvedor! Identificadores com valores repetidos não serão verificados e não irão gerar erro. 144 Classificação de Elementos Elementos podem ser classificados. Ao contrário do identificador, vários elementos podem fazer parte da mesma classe. A classificação permite aplicar formatos a vários elementos e realizar operações com todos os elementos que pertencem à mesma classe. Para informar a qual classe um elemento pertence, use o atributo class, como mostrado no exemplo a seguir. Cama e mesa Banho Eletrodoméstico Eletrônico 145 Exercício Crie um site com a seguinte estrutura: Página Principal: Logo da empresa. Pelos menos dois parágrafos com título. Links para as seguintes páginas: Quem somos, Serviços e Entre em Contato Quem somos Link para voltar para a página principal. Pelos menos dois parágrafos com título e separados por uma linha. Reprodução de um vídeo do Youtube. 146 Exercício Entre em contato: Link para voltar para a página principal. Formulário para o usuário informar: endereço de email, o assunto (com possibilidade de selecionar um de 4 assuntos predefinidos, e descrição. Serviços: Link para voltar para a página principal. Link para ir para a página de contatos. Tabela listando pelo menos 3 serviços e os respectivos preços. 147