Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 1 Telefone: (65)

Transcrição

1 Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 1

2 Sumário Visão geral da Web... 5 O HTML... 5 Diferencial do HTML Estrutura básica e suas Tags... 6 Conhecendo as Principais Tags e suas aplicações... 7 Negrito e itálico... 7 Títulos para o corpo das paginas... 8 Trabalhando com listas... 8 Trabalhando com imagens... 9 Trabalhando com tabelas Trabalhando com Links Lista de algumas das principais Tags do HTML O que é CSS? Aplicando CSS no documento HTML Utilizando CSS em folha externa Seletores CSS Seleção por Tag Seleção por identificadores (ID) Seleção por classe Criando um projeto utilizando o HTML5 e CSS Criando o HTML primeiro Estrutura Definindo cabeçalho Criando a seção Criando o artigo Conteúdo aparte Definindo o rodapé Criando o CSS Definindo formatações para todo o documento Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 2

3 Formatando a divisão principal da página Formando a seção Formatando o menu de navegação Formatando o artigo Definindo a formatação do conteúdo aside Definindo a formatação do rodapé Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 3

4 Introdução: Bem vindos à nova Web! Dinamismo, evolução, novidades e desafios, estes são os pontos que movem a web, e se você gosta de estar por dentro do que há de novo, ficar informado e atualizado com o mundo que vemos pelo navegador, está convidado a entrar de cabeça neste curso e desenvolver o seu potencial. Para ganharmos o mundo da web começaremos utilizando as novas funcionalidades do HTML5, que tem como papel ser o alicerce das páginas web, cuidando principalmente da semântica do conteúdo. Aliaremos a grandeza do HTML5 com o poder do CSS3, responsável por todo o estilo e design das nossas páginas para criar conteúdo amigável e profissional. Para proporcionar ao usuário opções de controle de conteúdo, utilizaremos o simplicidade e força do PHP como linguagem de programação, em parceria com o banco de dados mais popular da Web, o MySQL, que armazenará todo o conteúdo que desejamos disponibilizar para os usuários. Todo o conteúdo produzido tem um propósito, seja de aprendizado, compartilhamento de conhecimento ou para fins comerciais. E é neste ultimo o nosso foco. Como fazer para fechar um acordo com um cliente? Como começar a desenvolver após acordo fechado? Como cobrar do cliente? Essas perguntas devem estar no mínimo com uma direção segura. Após construção das páginas, queremos que ela seja visitada e que cada vez mais pessoas acessem e compartilhem o nosso conteúdo. Trabalharemos técnicas de SEO para melhorar a visibilidade do seu negócio e ganhar tráfego de qualidade. Tudo está pronto, agora como disponibilizo minha página para todos verem e acessarem? Descobriremos o mundo dos serviços de hospedagem, criação de domínio e colocaremos o nosso conteúdo acessível ao mundo inteiro. Está na hora de juntarmos toda essa sopa de tecnologias para a Web e começarmos a praticar e desenvolver o nosso conteúdo de qualidade com técnicas profissionais. Se você está empolgado, tenha certeza que já é meio caminho andado para o sucesso! Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 4

5 Capítulo 1 Visão do HTML5 Visão geral da Web De acordo com o W3C a Web é baseada em 3 pilares: Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URI. Um Protocolo de acesso para acessar estas fontes, hoje o HTTP. Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de informação: o HTML. O nosso foco é o terceiro pilar, a linguagem HTML. O HTML Como padrão, vamos começar pela sigla HTML, do inglês Hypertext Markup Language ou, em bom português, Linguagem de marcação de Hipertexto. Hipertexto são elementos (texto, imagens, vídeos, etc) interligados. O HTML é uma linguagem para publicar conteúdo, como textos, imagens, vídeos, áudios, documentos, entre outros. É o responsável para passar ao navegador informação de como interpretar o conteúdo. É ele que passa a informação para ler uma imagem, para carregar um vídeo, para definir títulos de noticias, definir parágrafos, hiperlinks, tabelas e muitos outros que abordaremos ao longo deste material. Diferencial do HTML5 O HTML5 é a versão 5 do HTML. Esta nova versão tornou realidade alguns sonhos dos desenvolvedores, como validações de campos só com HTML; trouxe facilidade de manipulação dos elementos, permitindo ao desenvolvedor modificar objetos com o uso de CSS e Javascript de maneira menos limitada. Esta versão cria novas Tags, modifica outras e descontinua algumas que já estavam obsoletas na comunidade dos desenvolvedores. Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 5

6 O Novo HTML foca em compatibilidade, acessibilidade e semântica. Devemos dar especial atenção ao seu aspecto semântico, amplamente reformulado, mudando conceitos de desenvolvimento. Capítulo 2 Praticando o HTML5 Estrutura básica e suas Tags A marcação do conteúdo HTML é através de TAGs, estruturas pré-definidas que possuem um significado. Por exemplo, para definir um paragrafo utilizamos a Tag <p> e para encerrá-lo fechamos a Tag </p> Vamos observar a estrutura de uma página HTML5 e, em seguida, o significado de cada marcação, linha a linha. Na primeira linha, temos a única instrução que não é HTML. O Doctype passa informações do documento ao navegador, neste caso está informando que se trata de um documento escrito em HTML5. Nas linhas 2 e 13 temos a Tag <html>. Esta tag marca o início e fim do conteúdo HTML. Tudo que estiver entre <html> e </html> será tratado com HTML pelo navegador. NOTA: As tag tem uma abertura e fechamento, onde a diferença entre elas é que na de fechamento há uma barra dentro da tag, justamente para indicar que se trata do encerramento desta tag. Dentro da tag html, temos duas tags de mesma importância na hierarquia, são tags irmãs por estarem no mesmo nível dentro do html. O <head> e o <body> Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 6

7 O <head> é a cabeça da página. É onde ficam localizadas informações como o título, links de chamadas a documentos externos como CSS e Javascript e Tags de instruções gerais, como veremos logo. É no <body> que fica todo o conteúdo da página; é o que vemos no navegador, como fotos, texto etc. A tag <title> é sugestiva, parecida com o português, é onde colocamos o título da nossa página. Utilizando a Tag <meta> podemos passar muitas informações ao navegador. Aqui estamos apenas informando a tabela de caracteres a ser utilizada, sendo esta o valor utf-8 que o atributo charset recebe. Utilizando a codificação utf-8 não teremos problemas com acentos da língua portuguesa no html. Conhecendo as Principais Tags e suas aplicações Negrito e itálico <b>texto em negrito</b> <i>texto em itálico</i> Estas duas tags possuem apenas efeito visual. Para dar significado semântico, devemos utilizar as tags a seguir: <strong>texto em negrito com significado semântico </strong> <em>texto em itálico com significado semântico</em> O efeito visual é o mesmo. A diferença está em como os motores de busca vão tratar cada uma. Caso a intenção seja passar apenas efeito visual, utilizamos o primeiro conjunto de tags; caso queiramos enfatizar um trecho de texto com significado para os motores de busca, utilizamos as duas últimas formas. Veremos sobre motores de busca ao estudarmos técnicas de SEO. Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 7

8 Títulos para o corpo das paginas O HTML traz definidos 6 níveis hierárquicos de títulos/subtítulos. Resultado no navegador: Trabalhando com listas Listas servem para organizar conteúdo, de forma a ordená-los em alguma sequência lógica como em uma lista de mais vendidos, ou para listar sem ordenação, como uma lista de supermercado. Listas são amplamente utilizadas também na criação de menus, inclusive menus horizontais com auxilio do CSS Vejamos os tipos de listas a seguir Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 8

9 Listas ordenadas Interpretação do navegador da lista: Listas não ordenadas Trabalhando com imagens Para inserir uma imagem no html, utilizamos a tag <img> e alguns atributos, como observados a seguir: SRC: Local do arquivo, em relação a página Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 9

10 ALT: Texto referente ou descritivo à imagem WIDTH: Largura da imagem HEIGHT: Altura da imagem Trabalhando com tabelas Tabelas são utilizadas para exibir dados tabulares, como grids de resultados de pesquisa a banco de dados, por exemplo, listar o nome, e telefone dos usuários cadastrados. TABLE: define os limites da tabela (inicio e fim) TR : Cria uma linha na tabela TD: Cria uma coluna, sempre dentro de uma linha Resultado no navegador Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 10

11 Trabalhando com Links O Link ancora O Link (âncora) é definido pela tag <a> e tem como principal atributo o href (referência de hipertexto) que deve conter o endereço no qual o usuário será direcionado ao clicar no link. O link para vínculo Este link faz referência a um arquivo localizado no caminho do atributo href estilos.css. Neste caso, o link faz a página html ficar apta a receber os estilos contidos nesta página css. O mesmo ocorre para vincular arquivos de Javascript. Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 11

12 Lista de algumas das principais Tags do HTML Tag Descrição <! > Define comentário <!DOCTYPE> Define o tipo do documento <a> Define um hiperlink <abbr> Define abreviação <area> Define uma área dentro de um mapa de imagem <article>new Define um artigo <aside>new Define um conteúdo aparte do conteúdo da página <audio>new Define conteúdo de audio <b> Define texto em negrito <body> Define o corpo do documento <br> Define uma quebra de linha <button> Define um botão clicável Usado para desenhar gráficos, em tempo real, através de scripting <canvas>new (normalmente JavaScript) <caption> Define uma leganda na tabela <code> Defines a piece of computer code <del> Define um texto que foi deletado do documento <details>new Define detalhes que o usuário pode visualizar ou ocultar <div> Define uma divisão no documento <em> Define um texto em ênfase <fieldset> Agrupa elementos relacionados em um formulário <figcaption>new Define legenda para um elemento de figura <figure> <figure>new Especifica um conteúdo independente <footer>new Define um rodapé de um documento ou seção <form> Define um formulário HTML para inserção de dados <h1> ao <h6> Define cabeçalhos/títulos HTML <head> Define informações sobre o documento <header>new Define um cabeçalho de um documento ou seção Define uma mudança temática no conteúdo (Cria uma linha <hr> horizontal) <html> Define a Raiz de um documento HTML Define uma parte do texto em uma voz alternativa ou de humor <i> (Deixa o texto em itálico) <img> Define uma imagem <input> Define um controle de entrada de dados <ins> Define um texto que foi inserido dentro do documento <label> Define um rótulo para um elemento <input> <legend> Define um alegenda para um elemento <fieldset> <li> Define um item de lista Define a relação entre um documento e um recurso externo ( mais <link> usado para conectar-se a folhas de estilo) Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 12

13 <map> <mark>new <meta> <nav>new <ol> <p> <pre> <progress>new <script> <section>new <select> <source>new <span> <strong> <style> <table> <td> <textarea> <title> <tr> <ul> <video>new Define um mapa de imagem do lado cliente Define um texto grifado/destacado Define metadados sobre um documento HTML Defines navigation links Define uma lista ordenada Define um parágrafo Define texto pré-formatado Reprenseta o progresso de uma tarefa Define script do lado do cliente Define uma seção no documento Define uma lista no formato drop-down Define multiplas buscas para elementos de midia (<video> e <audio>) Define uma seção no documento(utilizado para formatar pequenas partes de texto) Define texto importante (Deixa o texto em negrito) Define informação de estilo para o documento Define uma tabela Define um céluna dentro de uma tabela <table> Define uma área de texto para entrada de dados Define o título para um documento Define uma linha dentro de uma tabela Define uma lista não ordenada Define um vídeo ou filme Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 13

14 Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 14

15 Capítulo 1 Visão do CSS3 O que é CSS? A sigla CSS significa Folha de estilo em cascata (Cascading Style Sheet). O CSS formata a informação entregue pelo HTML. Esta informação pode ser qualquer tipo de conteúdo como: texto, imagem, vídeo ou áudio. A responsabilidade de estilizar o conteúdo deve ficar sempre para o CSS, aplicando cores, dimensões, posicionamentos e tudo que se possa imaginar em relação à formatação. Trazendo mudanças drásticas para a manipulação visual de elementos, com o uso da nova CSS3, agora podemos controlar: Selecionar primeiro e último elemento Selecionar elementos pares ou ímpares Selecionar elementos específicos de um determinado grupo de elementos Gradiente em textos e elementos Bordas arredondadas Sombra em textos e elementos Manipulação de opacidade Controle de rotação Controle de perspectiva Animação Estruturação independente da posição no código HTML Podemos escrever nossos estilos em cascata dentro do próprio documento HTML ou em um arquivo externo com a extensão css (exemplo: estilos.css) e fazer uma referência a este arquivo dentro do HTML. Vejamos estas formas a seguir. Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 15

16 Capítulo 2 Praticando o CSS3 Aplicando CSS no documento HTML Utilizando a Tag html <style> podemos escrever código css dentro desta tag e terá efeito em todo este documento html. Observem o exemplo e a explicação a seguir. O navegador exibirá o seguinte: Explicando o código: A Linha 6 abre a tag <style> que permite digitar código CSS e a linha 10 encerra o bloco CSS </style> A sintaxe do CSS é simples: seletor { propriedade: valor; Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 16

17 } A propriedade é a característica que você deseja modificar no elemento. O valor é o valor referente a esta característica. Se você quer modificar a cor do texto, o valor é um Hexadecimal, RGBA ou até mesmo o nome da cor por extenso. No exemplo selecionamos a tag p e aplicamos a ela a cor azul. Também podemos utilizar o CSS inline para escrever estilos direto dentro da tag HTML, utilizando o atributo Style e escrevendo o CSS como valor a este atributo. Veja: Este exemplo reproduz o mesmo efeito do anterior, porém se restringe a apenas este parágrafo, enquanto o anterior, declaramos que todos os parágrafos (tag <p> ) terão aquela formatação (cor azul). Vejamos outro exemplo, aplicando estilos na tabela que criamos anteriormente no HTML: Resultado: O texto em cor cinza do código CSS acima indica comentário. Comentários não são considerados. Servem apenas como texto informativo para o desenvolvedor. Criamos comentários colocando qualquer texto dentro /* (barra + asterisco) e encerramos o comentário com */ (asterisco + barra). Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 17

18 Utilizando CSS em folha externa Criamos um documento em branco com a extensão.css. Este documento já esta pronto para escrever tudo que desejarmos em CSS. Exemplo: A única novidade aqui é primeira "utf-8"; assim como o charset da tag meta do HTML, esta linha define a tabela de caracteres a ser utilizada (Questões de linguagem, acentos). Para fazer o vínculo deste arquivo no html, adicionamos a linha abaixo dentro da tag <head> do html. Assim já teremos todos os efeitos CSS aplicados no documento HTML NOTA: Este exemplo considera que o arquivo CSS tenha o nome de estilos.css e esteja na mesma pasta do documento HTML. Recomendamos o uso de arquivos externos, por facilidade de manutenção e reaproveitamento da mesma folha de estilos em vários documentos HTML. Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 18

19 Seletores CSS O seletor representa uma estrutura. Essa estrutura é usada como uma condição para determinar quais elementos de um grupo de elementos serão formatados. Podemos formatar o HMTL com CSS acessando-o basicamente de três maneiras, como listado abaixo: Seleção por Tag Tag HTML Identificadores (ID) Classes Formatamos o conteúdo HTML através do uso de seletores. Como nos exemplos acima, utilizamos como seletor as tags HTML <p> e <table> e aplicamos estilos para todos os elementos que fossem <p> e <table>. Ao escrever um Tag html dentro de CSS estamos utilizando o seleção por TAG Seleção por identificadores (ID) Mesmo tendo vários parágrafos nas páginas, podemos aplicar estilos apenas a um deles, utilizando Identificadores. Atribuímos ao elemento HTML um ID: No CSS fazemos referência a esta ID utilizando o símbolo # antes do nome: Seleção por classe Utilizando as classes, podemos atribuir a formatação para qualquer elemento HTML que possuir esta classe. Criamos as classes no HTML: Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 19

20 nome: Então, no CSS, para referenciarmos uma classe, utilizaremos o caractere. (ponto) antes do Todos os elementos HTML que tiverem a classe nome-classe terão cor verde e borda preta de 1 pixel. Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 20

21 Criando um projeto utilizando o HTML5 e CSS3 Explorando a semântica do html5, vamos construir nossa página e entender as novas tags de estrutura do documento: <header> <section> <article> <aside> <footer> e atag de navegação <nav>. Observe a seguinte imagem como base. Utilizamos a tag <header> para definir cabeçalhos, sendo este o cabeçalho da página, de um artigo ou de uma seção do documento. A tag <footer> assim como a header pode ser utilizada tanto para o documento como um todo, quanto para um artigo ou outra divisão de layout, definindo o seu rodapé. Utilizamos a tag <section> para delimitar seções diferentes no nosso documento e a tag <article> para criar assuntos dentro de uma seção. Para ter certeza se deve utilizar uma ou outra, pense no seguinte: Se olharmos o que tem dentro do <article> este conteúdo tem sentido por si só? O artigo deve conter informações suficientes para ser publicado em qualquer outro local que não seja o seu site e manter o completo entendimento do leitor, bem como separá-lo para publicar em uma revista. A tag <aside> serve para delimitar conteúdo a parte, que não seja o foco da página. Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 21

22 Construiremos o seguinte layout de um portal de noticias: Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 22

23 Criando o HTML primeiro Estrutura Começamos com a estrutura básica do HTML: A div com a id interface foi criada para ajudar na formatação do site com o CSS. Nota-se que já vinculamos um arquivo CSS com a tag <link>. Atenção: Todo o conteúdo a seguir está dentro da tag <div id= interface >. Definindo cabeçalho Dentro do cabeçalho colocamos uma imagem com sendo o banner, e criamos um menu dentro da tag <nav>. O menu são os link (ancoras) para as outras páginas do site. A ID que o <header> e o <nav> possuem servem para facilitar a formatação do CSS, que veremos mais adiante. Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 23

24 Criando a seção Colocamos esta seção logo após o encerramento do cabeçalho da página </header>. Dentro da seção, criaremos o artigo <article> Criando o artigo O artigo é composto por um cabeçalho e um parágrafo. No cabeçalho, temos um grupo de títulos que o compõem, e uma imagem. O parágrafo possui o exto da notícia, e uma tag <span> para que o usuário possa abrir a notícia completa. mais. Podemos colocar vários parágrafos, um após o outro e não utilizar o link no estilo leia Crie várias notícias, a seu critério, copie o artigo com tudo dentro e altere os títulos e conteúdo que terá uma nova notícia! Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 24

25 Conteúdo aparte Com a tag <aside> definimos um conteúdo que não é o foco da nossa página, definimos um titulo para ela em H1, por se tratar do título principal e em seguida os demais títulos de conteúdo todos em H2 por terem a mesma importância dentro do contexto. Colocamos também um vídeo com a tag <video>, definimos uma largura de 275 pixel com o atributo width e ativamos os controle do vídeo com o atributo controls. Dentro da tag <video> utilizamos a tag <source> onde sua finalidade é localizar o vídeo que será exibido, com o atributo src passamos o caminho do vídeo e o atributo type é necessário para informar ao navegar qual é o tipo do vídeo que será exibido. Definindo o rodapé Utiliza-se a tag <footer> para definir o rodapé do documento (também utilizado para definirmos rodapé de um artigo, por exemplo). A tag <span> é utilizada para formatar no CSS. Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 25

26 Criando o CSS Definindo formatações para todo o documento Para aplicar formatação ao documento inteiro, formata-se diretamente na tag <body>. Definimos a fonte, o tamanho e cor de todo o texto, e uma cor de fundo para a página. Formatando a divisão principal da página <div>. Atribuímos largura do nosso site de 800 pixels e um magem automática para centralizar a Novidade na sintaxe: Formatação atribuída a uma tag <div> que possuir a ID interface. ( div#interface { instruções; } ). Formando a seção O padding é utilizado pra definir espaço interno ao elemento HTML. O atributo float faz o elemento HTML flutuar, neste caso para a esquerda, possibilitando assim que dois elementos do tipo bloco fiquem lado a lado. Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 26

27 Formatando o menu de navegação Formatação aplica a toda tag <a> que estiver dentro de uma tag <nav> com a id menu. O elemento <a> é do inline, alteramos para display:block para atribuirmor largura. A instrução float:left faz os link flutuarem para a esquerda, se modo a se acomodarem lado a lado. Text-align:center alinha o texto no centro. Color:#006 define uma cor do texto azul escuro. Textdecoration:none remove o sublinhado padrão dos links. Font-size:14px Define o tamanho do texto em 14 pixels. Height:25px Define a altura em 25 pixels. Line-height:25px Define a altura da linha em 25 pixel, centralizando o texto na vertical. Border-top: 2px solid #C60 Define uma borda superir de 2 pxels de largura, estilo sólido em um tom de azul. Utilizamos o :hover para fazer uma alteração no elemento quando passar o mouse em cima. Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 27

28 Formatando o artigo Novidades: A instrução margim define o espaço externo do elemento. Text-ident Define uma distância de identação do parágrafo(margem de parágrafo). Cursor:pointer Define um efeito visual, mouse em forma de mão ao passar o mouse em cima do elemento. Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 28

29 Definindo a formatação do conteúdo aside Definindo a formatação do rodapé Rua Campo Grande, 533, Sala201, Centro, Cuiabá/Mato Grosso 29