Baixe o app para aproveitar ainda mais
Prévia do material em texto
Aprendendo Web com HTML5 Carlos Rodrigo, Júnior Mendes . 1. INTRODUÇÃO HTML é uma linguagem de marcação da World Wide Web. A especificação do HTML5 ainda está em construção, mas a maioria dos browsers já suportam boa parte dos novos elementos e APIs do HTML5 ROTEIRO E MATERIAIS 1. 3 Camadas de Desenvolvimento Web; 2. Principais Tags de uma estrutura Web; 3. Praticando as Tags; 4. Porque o novo HTML5; 5. Principais características do HTML5; 6. Desafio das funcionalidades do HTML, criando um minisite; 7. “CSS” sintaxe do css, propriedades; 8. Criando o seu primeiro site HTML com CSS. ROTEIRO E MATERIAIS Ferramenta de Desenvolvimento • Editor padrão do Sist. Operacional Windows: Notepad Linux: gedit • Editor de texto que recomendo... Brackets As três camadas de desenvolvimento • Primeira Camada: Informação – HTML • Segunda Camada: Formatação – CSS • Terceira Camada : Comportamento – JavaScript 3 Camadas de Desenvolvimento Web Primeira Camada: Informação • O HTML marca a informação dando-lhe significado; • O conteúdo deve ser marcado entre tags. EX.: <h1> Olá Pessoal! </h1> Segunda Camada: Formatação • CSS- Cascading Style Sheets • O CSS formata o conteúdo em HTML cuidando do design da página. • Existem duas formas de usar o CSS. Embutido no HTML entre as tags <style></style> ou em um arquivo externo conectado ao HTML por um link. Terceira Camada: Comportamento • Com o JavaScript você pode dimensionar, rotacionar e reformatar os elementos de sua página. • Controla os valores definidos pelo CSS e manipula as propriedades. Exemplo para identificar cada elemento em uma página...! “www.uol.com.br” Principais Tags de uma estrutura Web • A tag <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > indicar ao browser qual a versão do HTML em que o documento está escrito. • A tag <HTML> – usado em conjunto com sua tag de fechamento < / HTML > e será colocado no início e no final do documento. • A tag <HEAD> - que também terá seu tag de fechamento </HEAD> servirá para delimitar uma área de cabeçalho. • A tag <meta http-equiv="content-type" content="text/html; charset=UTF-8"> - serve para o reconhecimento da biblioteca de alfabetos • A tag <TITLE> - será usado dentro dos tags <HEAD> , e servirá apenas para colocar um título que aparecerá na barra de título do seu browser ( não esqueça o </TITLE> ) . • Dentro das tag’s <BODY> </BODY> serão colocados todos os comandos , textos e imagens da sua página Porque o novo HTML5... A versão anterior do HTML foi a (4.01) que foi lançada em 1999 e não evoluiu desde lá A web, ao contrário, mudou bastante se fazendo necessário o novo... HTML5 o novo padrão para HTML! Principais características do HTML5 Uma característica admirada por todos, foi a que o HTML5 acarretou todas as funcionalidades do HTML anterior. Excluíndo apenas as tags não usadas, ou as que foram melhoradas em sua funcionalidade. Exemplos de Tags tradicionais do HTML4. • A tag <h> Texto qualquer </h> cria uma espécie de cabeçalho no documento. Ex.: <h1> Cabeçalho Grande </h1> . . . . . . <h6> Cabeçalho Pequeno </h6> • A tag <p> Adiciona um parágrafo na sua página.</p> • A tag <b>Negrito</b> • A tag <i> Italico</i> • A tag <u>Sublinhado</u> • A tag <center> para centralizar o texto. • A tag <br/> ela é usada assim porque o valor é ela mesma, a tag é o próprio atributo, “quebra de linha”. • A tag <hr/> é do mesmo jeito. Ela cria uma linha horizontal na tela. • A tag <a href=“link”> O que vai aparecer na tela</a> essa tag vai direcionar você ao link que desejar. • A tag <img src=“diretorio da imagem.formatodaimg” alt=“nomeParaRepresentarImagem”/> essa tag é de puxar uma imagem selecionada. O que temos de novidade no HTML5? • Novos elementos semânticos e atributos. Novos elementos de marcação para conteúdo <article>, <footer>, <header>, <nav>, <section> Novos controles de formulários Calendário, datas, horas, email, telefones, url, busca, etc. • APIs nativas para assistir a criação de aplicações web. • Armazemanento Local. Desafio • Criar um site de um artista favorito seu... 1. Onde terá uma imagem desse artista; 2. E uma lista com 5 músicas que você mais gosta 3. Com links direcionando para algum site onde poderemos ver a letra da canção. CSS O que eu posso fazer com CSS? CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. Aguarde e você verá! Qual é a diferença entre CSS e HTML? HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados. Suponha que desejamos uma cor de fundo vermelha para a página web: Usando HTML podemos fazer assim: <body bgcolor="#FF0000"> Com CSS o mesmo resultado será obtido assim: body {background-color: #FF0000;} Como você pode notar os códigos HTML e CSS são mais ou menos parecidos. O exemplo acima serve também para demonstrar o fundamento do modelo CSS: A sintaxe básica das CSS Com CSS o mesmo resultado será obtido assim: body {background-color: #FF0000;} Exemplos de propriedades do CSS .h1 { color: black; } .h1 {font-family: arial, verdana, sans-serif;} .h2 {font-family: "Times New Roman", serif;} .p { font-family: arial; color: blue; } .p { text-align: justify; } pode ser center para centralizar. Exemplos de propriedades do CSS .a:link { color: blue; } “Links não visitados” .a:visited { color: red; } “Links Visitados” .a:active { background-color: red; } “Links Ativos” .a:hover { color: orange; font-style: italic; } “Curso sobre o link” .a { text-decoration:none; } “Aqui tira o sublinhado do link” Obs.: Você tem que colocar em todos os “a” Exemplos de propriedades do CSS #img { height: 200px; width: 200px; } Obs.: na questão dos tamanhos pode usar px ou %, que equivale à porcetagem da tela. Você deve está se perguntando mas e esse “jogo da velha” no lugar do ponto...! Identificando (Classes e Id’s ) . = Classe # = Id Classe é usado para um grupo de elementos. EX. .p { font-family: arial; color: blue; } Já o Id é usado para um único elemento. EX. #img { height: 200px; width: 200px; } Como usar as (Classes e Id’s ) no meu HTML <body> <p class=“p”>O sabiá não sabia.</br> Que o sábio sabia.</br> Que o sabiá não sabia assobiar.</p> </body> Como usar as (Classes e Id’s ) no meu HTML <body> <img id=“img” src ="imagens/anderson.jpg“> </body>Desafio • Formate o site que você criou recetemente. 1. Mude o background; 2. Altere o tamanho da imagem para 200px de altura e 200px de largura; 3. Estilize os links das músicas; 4. Formate a fonte da lista de músicas; 5. Crie um cabeçalho com a frase ”Expotec de João Camara 2014” antes do nome do artista; 6. Crie um rodapé com a frase “Desenvolvido por (coloque o seu nome)”. Desafio • Para ajudar no desafio segue o link com a tabela de cores: http://www.cultura.ufpa.br/dicas/htm/htm-cor1.htm AGRADECIMENTOS Obrigado a todos que estão aqui presentes...
Compartilhar