APRENDENDO HTML E CSS na prática. Autora: Profª. Danielle Costa

Tamanho: px
Começar a partir da página:

Download "APRENDENDO HTML E CSS na prática. Autora: Profª. Danielle Costa"

Transcrição

1 APRENDENDO HTML E CSS na prática Autora: Profª. Danielle Costa Formiga, MG 2013

2 Índice A Linguagem HTML... 3 Introdução... 3 Estrutura da página... 3 Estrutura do documento HTML... 3 Formatação do Texto... 5 Definição de Listas... 7 Imagens Tabelas Hyperlinks Formulários Frames Tags especiais Elementos Div CSS (Cascading Style Sheets) - Folhas de estilo em cascata Introdução Como criar estilos Seletores As folhas de estilo Modelo de caixa em CSS Layers Vantagens e Desvantagens Atributos do CSS

3 A Linguagem HTML Introdução HTML (Hypertext 1 Markup Language) - é uma linguagem padrão de marcação (tags) de hipertexto, não-proprietário, para exibição de conteúdo no World Wide Web da Internet. Não é considerada uma linguagem de programação porque não possui comandos para tomada de decisões (if..then..else), estruturas de repetição (do..while, repeat..while), funções etc. Compõe-se de diretivas (tags e atributos) que são interpretadas pelos navegadores. Ao interpretar as diferentes diretivas temos a apresentação de uma página seguindo a formatação de texto, cores e imagens definida pelo autor. Página - é um hipertexto no WWW que associa diferentes tipos de mídia como textos, imagens, áudio e vídeo, conectados por hiperlinks. Pode ser única ou estar ligada a outras páginas formando um sistema de informações ou um website. Vale a pena ressaltar que uma página html é composta de texto e deve ser salva como htm ou html. Página principal ou Home Page - A página de entrada ou página inicial. Editores gráficos - O uso dos editores permitem que o autor crie uma página sem conhecer os códigos da linguagem HTML. São exemplos de editores HTML: Adobe Dreamweaver, Nvu, Edit Plus, Microsoft FrontPage e Mozilla Composer,etc. Além de Editores existem também programas Assistentes que transformam documentos gerados em MSWord, PowerPoint e Excel em páginas HTML. Estrutura da página <HTML> e </HTML> - São tags que dizem que o documento é do tipo html, ou seja, uma página web. Estrutura do documento HTML cabeçalho <HEAD> e </HEAD> - aqui especifica-se o título da página <TITLE> e </TITLE>, será apresentado na barra superior do navegador. Corpo <BODY> e </BODY> - aqui especifica-se: cores de fundo, texto, links, e o início do documento. Tudo que estiver entre essas tags é interpretado como corpo do documento e será exibido pelo navegador Propriedades aplicadas a tag body, se não forem aplicadas assumem um valor padrão: 1 Um hipertexto contém um conjunto de textos interligados e recursivos, ele não começa em lugar algum nem tem final e apresenta várias seqüências de leitura. 3

4 bgcolor - cor de fundo para a página background - imagem nos formatos.jpg ou.gif usada de fundo da página text - define uma cor para o texto link - define uma cor para os links vlink - define cor para os link já visitados alink - define a cor para o link na hora que for ativado topmargin -controla a distância do corpo do texto e a margem superior bottommargin - controla a distância do corpo do texto e a margem inferior leftmargin - controla a distância do corpo do texto e a margem esquerda rightmargin - controla a distância do corpo do texto e a margem direita Exemplo 1 <BODY BACKGROUND=nome_imagem BGCOLOR=nome_cor TEXT=nome_cor LINK=nome_cor VLINK=nome_cor ALINK=nome_cor> Exemplo 2 <BODY BACKGROUND=nome_imagem BGCOLOR=#RRGGBB TEXT=#RRGGBB LINK=#código_cor VLINK=#RRGGBB ALINK=#RRGGBB > A Figura 1 abaixo exibe o código HTML visualizado por meio do navegador. Figura 1 Código de uma página HTML 4

5 Formatação do Texto O texto pode ser formatado com as tags de tamanho, itálico, negrito e fonte monoespaçada, sobrescrito e subscrito. Para todas elas é necessário delimitar o início e o fim do texto a ser formatado. Cor e fonte : <font color = nome_cor> Texto </font> <font face = tipo_letra > Texto </font> <font size =+n>texto </font>, onde n seria o incremento ao tamanho original. Tabela 1 Cores Nome da cor (português) Nome da cor (inglês) Hexadecimal Bege Beige #F5F5DC Preta Black # Azul Blue #0000FF Ouro Gold #FFD700 Verde Green # Cinza Gray # Amarela Yellow #FFFF00 Magenta Magenta #FF00FF Marrom Brown #A52A2A Laranja Orange #FFA500 Vermelha Red #FF0000 Rosa Pink #FFC0CB Púrpura Purple # Branca White #FFFFFF Tipos de fonte definidas pela linguagem HTML: Cabeçalhos : <H1> Tamanho H1</H1> <H2> Tamanho H2</H2> <H3> Tamanho H3</H3> <H4> Tamanho H4</H4> <H5> Tamanho H5</H5> <H6> Tamanho H6</H6> Exemplo 3: h6, h5, h4, h3, h2, h1 5

6 Outros estilos : <B> Texto em Negrito ( Bold ) </B> --Texto em Negrito ( Bold ) <I> Texto em Itálico </I> --Texto em Itálico <TT> Texto com fonte monoespaçada </TT> --Texto com fonte monoespaçada <U> Texto sublinhado </u> Texto sublinhado <SUP> Texto sobrescrito </SUP> Texto sobrecrito -- <SUB> Texto subscrito </SUB> -- Texto subscrito Acentuação e Caracteres Especiais A codificação 2 permite a qualquer equipamento interpretar os códigos e exibir na tela o caractere desejado. Funcionamento: Primeiro o caractere "&" Seguido da letra que deverá ser acentuada, pode ser minúscula ou maiúscula Veja a tabela abaixo e coloque o código do acento desejado Acrescente o caractere " ; " ( ponto de vírgula ) Exemplo 4 : diário = diário natação = natação Acentos Agudo Grave Circunflexo Til Trema Cedilha &_acute &_grave &_circ &_tilde &_uml; &_cedil; Caracteres Especiais E < > (c) Espaço em Branco &amp &lt &gt &copy &nbsp Disposição do Texto na Página Diretivas para uma formatação básica de um texto em uma página: <CENTER>: centraliza o texto em relação à página <BR>: quebra de linha, iniciando o texto seguinte na linha logo abaixo <P>: força o fim de um parágrafo, ou seja, pula uma linha antes de iniciar outro parágrafo 2 HTML não diferencia maiúsculas ou minúsculo nos identificadores de tags e nome de atributos 6

7 <HR>: régua horizontal; inclui uma linha horizontal no texto, separando o texto em blocos width = _% comprimento. Ex. width=50% size = _ espessura do traço. Ex. size=6 <PRE> : respeita a formatação original do texto inserido na página Definição de Listas Listas são utilizadas para organizar seu texto em uma relação de itens e subitens, ordenados ou não. Tipos de listas: Listas ordenadas, listas não-ordenadas e listas de definição. Listas Ordenadas <ol> - inicia uma lista type - define o tipo de numeração da lista que pode ser: A - Letras maiúsculas a - Letras minúsculas I - Algarismos romanos 1 - Números arábicos </ol> - finaliza a lista <li> - determina um item da lista Exemplo 5: Código html <ol type= 1 > <li>primeiro <li>segundo <li>terceiro </ol> No browser 1. Primeiro 2. Segundo 3. Terceiro Listas Não Ordenadas <ul> - marca o início da lista type - define o tipo de marcador de cada item da lista que pode ser: disc - pequeno disco sólido square - quadrado preenchido circle - círculo cheio </ul>- marca o final da lista <li> - determina um item da lista Exemplo 6: Código html <ul type= disc > <li>primeira <ul> <li>filha <li>filha </ul> <li>segunda <li>terceira </ul> No browser Primeira Filha Filha Segunda Terceira 7

8 Listas de Definição <dl> marca o início da lista <dt>indica termo a ser definido <dd>indica a definição do termo acima Exemplo 7: Código html <dl> <dt> LW <dd>linguagem Web <dt>ed <dd>estrutura de Dados </dl> No browser LW Linguagem Web ED Estrutura de Dados 8

9 Exercícios de fixação: 1) Crie uma página chamada ex1.html e deixe-a com o seguinte layout: a) O texto Aula de HTML deve ter tamanho 4 e ficar centralizado. b) Após o texto incluir uma Linha Horizontal tamanho 2 e cor Cinza. c) O texto Estrutura da página deve ser em fonte Arial, tamanho 3 e cor Azul. d) O texto Estrutura do Documento deve ser em fonte Arial, Negrito, tamanho 3 e cor Verde. e) O texto Formatação de Texto deve ser em fonte Arial, Itálico, tamanho 3, cor vermelha. f) O texto Disposição do texto nas páginas deve ser em texto pré-formato, fonte Arial, tamanho 5 e cor Magenta. 2) Crie uma página chamada ex2.html e deixe-a com o seguinte layout: a) O cabeçalho Definição de Listas: deve ter tamanho 4. b) Após o cabeçalho incluir uma linha horizontal tamanho 2 e cor cinza. c) Crie as listas com os seguintes itens: 1. Lista Ordenada 1. Primeiro Item da lista ordenada 2. Segundo Item da lista ordenada 2. Lista não Ordenada Primeiro Item da lista não ordenada Segundo Item da lista não ordenada 3. Lista de Definição E1 Exemplo1 Cada item deve ter fonte tamanho 2, alternar as cores das linhas em Verde e Vermelho. 3) Utilizar a página do ex1.html e inserir os comandos necessários para que a mesma tenha uma cor de fundo. Altere o exemplo para receber como fundo uma imagem "fundo.gif". Comandos mínimos para se criar uma página HTML: <html> <head><title></title></head> <body> </body> </html 9

10 Imagens A tag <img> inclui uma imagem dentro de um documento HTML. Elas podem ser usadas Em conjunto com alguns parâmetros como: border para determinar a moldura da imagem. Exemplo 8: Imagem com borda: <IMG border=6 SRC= imagens/figura.gif > width para determinar a largura da imagem height para determinar a altura da imagem Exemplo 9: Imagem com limitação de Altura e Comprimento: <IMG width=50 height=90 SRC= figura.gif > Alinhar um texto em relação a uma imagem. Parâmetros de alinhamento : align=left para alinhar a imagem a esquerda do texto. Exemplo 10: Imagem com texto alinhado a esquerda Texto que acompanha a figura. <IMG align=left SRC= figura.gif > Texto Outros alinhamentos: align=right para alinhar a imagem a direita do texto <IMG align=right SRC= figura.gif > align=top para alinhar o texto com o topo da imagem. <IMG align=top SRC= figura.gif >. align=bottom para alinhar o texto com a parte inferior da imagem. <IMG align=bottom SRC= figura.gif>. align=middle para alinhar o texto com o meio da imagem. Imagem com texto alinhado a meia altura da imagem <IMG align=middle SRC= figura.gif > 10

11 Tabelas Além do propósito original de exibir dados tabulados, as tabelas 3 passaram a ser usadas com sucesso para posicionar elementos nas páginas. As tags <TABLE> </TABLE> identificam a tabela, especifica a espessura da borda com o parâmetro BORDER. <th>... </th> table head define o cabeçalho de cada coluna <tr>... </tr> table row delimita a linha <td>... </td> table data delimita cada elemento da tabela, cada célula. Atributos que podem ser usados nas tabelas: colspan : específica quantas colunas da tabela a célula ocupará rowspan : específica quantas linhas da tabela a célula ocupará width : define a largura exata da célula height : define a altura exata da célula align : alinhamento horizontal ( right, center, left ) valign : alinhamento vertical ( top, middle, bottom ) cellspacing: define o espaço entre as células Exemplo 11: <table border=4 height = 300 > <th>coluna 1</th><th>Coluna 2</th> <tr><td width = 150 >linha1, coluna 1</td><td> linha 1, coluna 2</td></tr> <tr><td width = 150 >linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr> </table> Resultado na tabela: Coluna 1 Coluna 2 linha 1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Exemplo 12: <table border=4> <th colspan=2>colunas 1 e 2</th> <tr> <td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr> <tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr> <th rowspan=3>3 linhas</th> <td>uma linha</td> <tr><td>duas linhas</td></tr> <tr><td>três linhas</td></tr> </table> 3 Dica: Planeje cada tabela antes de iniciar a codificação. Faça um esboço no papel para ter idéia da estrutura. O esquecimento de uma tag pode comprometer a estrutura da tabela. O ideal é escrever a tag de fechamento sempre após a tag de abertura, antes de incluir o conteúdo. 11

12 Resultado na tabela: Colunas 1 e 2 linha 1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 uma linha 3 linhas duas linhas três linhas Hyperlinks A idéia central dos hyperlinks é proporcionar liberdade ao usuário para navegar entre diferentes documentos, clicando em termos ou frases que levem a outros documentos. Fazer links para outros documentos ( páginas, imagens, sons, etc ), através da tag <A> </A>, chamadas de âncoras (anchor tag). Informar o HREF(endereço de onde está a página que será acessada ) e o TEXTO/IMAGEM que indicará o link. < A HREF=http://endereço/documento> texto/imagem </A> Referência a outro documento pode ser feita por : Caminho Absoluto : corresponde ao endereço completo do documento, utilizado quando os documentos estão em servidores ou pastas diferentes. < A HREF=http://máquina/diretório/pagina.html > texto/imagem </A> Caminho Relativo : quando o documento a ser acessado está no mesmo servidor ou pasta que a página atual. < A HREF=../outra-página.html > texto/imagem </A> Um link mailto permite que os usuários enviem mensagens para um endereço de definido, clicando no hyperlink. Exemplo 13 <html> <head> <title> Usando Hyperlinks </title> </head> <body> <A HREF= ex1.html > Exercício de Fixação 1 </A><br> <A HREF= ex2.html > Exercício de Fixação 2 </A><br> <A HREF= > </A> </body> </html 12

13 Exercícios de fixação: 4) Crie uma página chamada ex4.html e deixe-a com o seguinte layout: 5) No ex4.html adicione hyperlinks nos nomes dos alunos. Cada hyperlink deve direcionar para a página pessoal de cada aluno. 13

14 Formulários Os formulários em uma página Web permitem coletar informações dos usuários que visitam uma página. Usando campos de entrada de textos, menus e botões é possível colher dados para diversos fins.também definimos que ação será tomada assim que o formulário for preenchido e enviado. É preciso saber que o HTML oferece apenas os meios para receber as informações do usuário e enviá-las a um servidor ou endereço de . O HTML não provê meios para tratar ou armazenar essas informações. Para manipular e validar os dados inseridos pelo usuário antes de enviá-los ao servidor é preciso ainda de uma linguagem de script cliente-side (do lado do cliente) como o Javascript por exemplo. Definição do Formulário Um formulário é definido pelas tags <form>e</form>. A tag de formulário mais usada é a tag <input>. O tipo de input é especificado com o atributo type. Os tipos de input mais comumente usados são explicados abaixo. Campos Tipo Texto <FORM> Nome:<INPUT TYPE=TEXT NAME="Nome"> Senha:<INPUT TYPE=PASSWORD NAME="Senha" > </FORM> Alguns Atributos VALUE- inicializa o campo com um valor definido. MAXLENGTH define a quantidade máxima de caracteres permitidos no campo DIABLED desabilita o campo para digitação <FORM> Nome: <INPUT TYPE=TEXT NAME="Nome" VALUE="Danielle Costa"> Senha:<INPUT TYPE=PASSWORD NAME="Senha" MAXLENGTH="8"> </FORM> 14

15 SIZE- Delimita o tamanho do espaço para entrada do valor nos campos. <FORM> Nome: <INPUT TYPE=TEXT NAME="Nome" SIZE=30 > Senha:<INPUT TYPE=PASSWORD NAME="Senha"> </FORM> Campos Tipo Múltipla Escolha <FORM> Frutas : <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Abacaxi">Abacaxi <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Morango">Morango <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Limão">Limão <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Pera">Pera <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Laranja">Laranja </FORM> O atributo CHECKED serve para inicializar um item como já escolhido. Campos Tipo Escolha Única <FORM> Estado Civil : <INPUT TYPE=RADIO NAME="estciv" VALUE="Solteiro">Solteiro <INPUT TYPE=RADIO NAME="estciv" VALUE="Casado">Casado <INPUT TYPE=RADIO NAME="estciv" VALUE="Viuvo">Viuvo <INPUT TYPE=RADIO NAME="estciv" VALUE="Divorciado">Divorciado <INPUT TYPE=RADIO NAME="estciv" VALUE="Outros">Outros </FORM> 15

16 Botões de Ação SUBMIT - Envia os dados preenchidos no formulário para o servidor, iniciando a execução do programa especificado no atributo ACTION. RESET - Reinicializa o formulário com os valores previamente definidos. O atributo VALUE define a mensagem sobre o botão. FILE - Exibe a janela para procura de um arquivo HIDDEN - Além dos campos definidos no formulário que estão visíveis e serão preenchidos pelo visitante podemos definir campos não visíveis que estarão passando parâmetros para o programa a ser executado. <FORM> <INPUT TYPE=SUBMIT VALUE="Enviar"> <INPUT TYPE=RESET VALUE="Cancelar"> </FORM> Botões de Seleção SELECT- é utilizada juntamente com a diretiva <OPTION> para definir uma lista de valores a serem selecionados. Pode-se definir um valor como padrão usando o atributo <OPTION SELECTED>valor O atributo SIZE é utilizado para se apresentar mais de um valor na página. <FORM> <SELECT NAME="plataforma" SIZE=3> <OPTION>PC <OPTION>Workstation <OPTION>Alpha <OPTION>Mainframe IBM </SELECT> </FORM> Àrea de Texto A Diretiva TEXTAREA define uma área para entrada de textos. Os atributos COLS e ROWS definem o tamanho da janela. <FORM> <TEXTAREA COLS=60 ROWS=10 NAME="texto">Área para entrada de texto </TEXTAREA> </FORM> 16

17 Passagem de parâmetros pelo formulário O atributo METHOD define o método de acesso a URL onde está o script, programa a ser executado no servidor, especificado pelo atributo ACTION. <FORM METHOD=GET/POST 4 ACTION= script ></FORM> Exemplo 14: <html> <head> <title> Usando tipo oculto </head> <body> <form method=post action= teste.js> <input type=submit name= enviar value="enviar informações"> </form> </body> </html> 4 O método GET envia os dados do formulário em pares/valor anexados à URL descrita em action, separando cada campo como caractere?. Não é recomendado quando não se deseja que o usuário veja o que está sendo enviado. O método POST envia os dados ocultos no corpo da mensagem. 17

18 Exercícios de fixação: 6) Construa um formulário HTML com os seguintes campos: a) Nome: Texto, usuário pode digitar no máximo 20 caracteres. b) Idade: Caixa de seleção com os itens: Entre 0 e 20 Entre 21 e 29 Entre 30 e ou Mais Sexo: Dois botões de radio, tendo um radio o value Masculino e outro radio com o value Feminino. c) Texto, usuário pode digitar no máximo 40 caracteres. d) Observações: TextArea com sete linhas e 40 colunas. 7) Construa o código HTML para o formulário mostrado abaixo. 18

19 Frames Frames ou quadros permitem a divisão da tela de exposição do navegador em diferentes áreas. Assim, é possível, por exemplo, que se determine uma área da tela para ser a página principal eoutras áreas para menus ou links. O Frameset ou conjunto de frames, indica como será estruturado cada quadro na tela em termos de Linhas (rows) e colunas (cols), e quais páginas deverão ser apresentadas em cada um desses quadros. É possível ainda definir atributos em nosso Frameset que controlam a visualização e navegação coordenada entre os frames. Atributos de controle Margem: marginwidth : determina as margens direita e esquerda do frame marginheight : determina as margens superior e inferior do frame Barra de rolagem : Scrolling : determina se o frame terá barra de rolagem se necessário ou não. Eliminação da barra de rolagem < FRAME src =... SCROLLING = "NO" > Alteração da estrutura : Os navegadores permitem que o visitante altere a posição dos frames. Para tanto o atributo noresize inibe esta possibilidade e torna os frames fixos conforme definido. < FRAME src =... NORESIZE> Bordas : É possível definir se nossa estrutura de quadros será apresentada ressaltando-se as bordas entre os frames ou não usando os atributos frameborder e border. Eliminação das bordas dos frames: < FRAMESET src =... FRAMEBORDER="NO" > Eliminação do espaço entre os frames : < FRAMESET src =... FRAMEBORDER="NO" BORDER="0"> Direcionamento O atributo target (alvo) é o que indica onde uma página deverá ser apresenta assim que o visitante clica em um link. Por definição uma nova página será apresentada na mesma área onde está link. Para redirecionar a página para outra área temos as possibilidades a seguir que devem constar na definição no link ( <a href=pagina.html target=... > ) : 19

20 target="nome da área " : carrega a página na área especificada. target=_top : limpa a tela e abre a nova página ocupando toda a tela. target=_blank : abre uma nova janela para exibir a página. target=_self : carrega a página na mesma área do link. Opção é default. Exemplo 15: Como montar dois frames em coluna: <FRAMESET COLS="x, y"> <FRAME SRC="col1.html"> <FRAME SRC="col2.html"> </FRAMESET> Dois frames em linha: <FRAMESET ROWS="x, y"> <FRAME SRC="lin1.html"> <FRAME SRC="lin2.html"> </FRAMESET> Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em coluna e compor a segunda coluna com dois frames em linha: <FRAMESET COLS="x, y"> <FRAME SRC="col1.html"> <FRAMESET ROWS="x, y"> <FRAME SRC="lin1.html"> <FRAME SRC="lin2.html"> </FRAMESET> </FRAMESET> Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em linha e compor a segunda linha com dois frames em coluna: <FRAMESET ROWS="x, y"> <FRAME SRC="lin1.html"> <FRAMESET COLS="x, y"> <FRAME SRC="col1.html"> <FRAME SRC="col2.html"> </FRAMESET> </FRAMESET> 20

21 Exercícios de Fixação 8) Construa a página abaixo utilizando frames. 9) Altere o exercício anterior para exibir bordas e depois barra de rolagem. 21

22 Tags especiais Músicas Inserir música em uma página web é relativamente fácil nos dias de hoje. No passado, várias tags tinham de ser usadas porque os navegadores não tinham um padrão uniforme para arquivos de mídia incorporados. A música é inserida em uma página o uso da tag <embed>. Há outras maneiras de ligar a música, mas incorporar agora é considerado o padrão para a mídia de inserção. A tag <embed> não requer um marca de fechamento. Os seus controles, incluindo Play, Stop, Pause e volume, já estão incluídos. Para personalizar a aparência do player certifique-se de definir os seguintes atributos. width - a largura do player de mídia. height - a altura do player de mídia. hidden - determina se o media player é visível. Se esse valor é definido como "true", o media player não será exibido. Recomenda-se usar esse atributo apenas se você sabe que seus visitantes não vão querer a opção de parar a música que está tocando em sua página web (Os valores são "true" ou "false"). autostart - permite o player para começar automaticamente (os valores são "true" e "falso"). loop - define se o arquivo de mídia vai repetir (os valores são "true" e "falso"). volume - define o volume do arquivo de mídia (os valores variam de "0" a "100"). src - define a localização do arquivo para incorporar na página. Exemplo 16: <html> <head><title> Player de música</title></head> <body> <p>para parar a música pressione Stop/Pause</p> <embed src="beethoven.mid" width="360" height="165" autostart="true" loop="false" volume= 60 > </body> </html> Vídeos Os arquivos de vídeo, incluindo vídeos do YouTube, são incorporados em um documento HTML usando a tag <embed>. O atributo src define o arquivo de vídeo para incorporar na página. 22

23 Flash (.swf) e (Mov) também são tipos de arquivo suportados pela tag <embed>. swf - tipos de arquivo Macromedia Flash - compressão muito alta, ótimo para a web. wmv - Microsoft Window Media - de boa qualidade, compressão variável. mov - formato da Apple filme Quick Time - de boa qualidade, compressão variável. mpeg - O padrão aceito para arquivos da web filme criado pelo Moving Pictures Expert Group de boa qualidade, compressão variável. É possível também simplesmente colocar a URL de seus arquivos de mídia no valor do atributo href, bem como o conceito de imagens "thumbnailing". Exemplo 17: <html> <head><title> Vídeo em flash</title></head> <body> <p>para parar o vídeo pressione Stop/Pause</p> <a href="http://www.tizag.com/pics/flash/motiontween1easy.swf"> motiontween1easy.swf </a> </body> </html> Vídeos do YouTube podem ser incluídos em documentos HTML, e o Google oferece o código para fazê-lo. Exemplo 18: <html> <head><title> Vídeo do YouTube</title></head> <body> <p>para parar o vídeo pressione Stop/Pause</p> <object width="425" height="344"><param name="movie" value=" > </param> <param name="allowfullscreen" value="true></param> </param><param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/opvb89cmrtk&hl=en&fs=1" type="application/xshockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> <embed src="http://www.youtube.com/v/opvb89cmrtk&hl=en&fs=1"type="application/xshockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344 > </embed> </object> </body> </html> 23

24 Exercícios de Fixação 10) Altere o exercício anterior para exibir no índice músicas e vídeos. 24

25 Elementos Div A tag <div> nada mais é do que uma unidade de recipiente que encapsula outros elementos da página e divide o documento HTML em seções. Os desenvolvedores da Web usam elementos <div> para agrupar elementos HTML e aplicar estilos CSS a elementos de uma só vez. Por exemplo, envolvendo um conjunto de elementos de parágrafo em um elemento <div>, o desenvolvedor pode tirar proveito de estilos CSS e aplicar uma fonte de todos os parágrafos de uma só vez, aplicando um estilo de fonte para a marca <div> em vez de codificar o mesmo estilo de cada elemento do parágrafo. Existem muitos layouts de blogs baseados em tags "div", justamente porque você pode atribuír-lhes altura/largura e a distância do canto superior esquerdo da janela do navegador esquerda/superior. Mais as opções de fundo ou cor de fundo, e jogar o conteúdo lá dentro e está tudo pronto! Mas cuidado: Não são todos os navegadores que interpretam bem estes códigos todos. Exemplo 19: <html> <head><title> Exemplo de tag div</title></head> <body> <div id="mydiv" name="mydiv" title="examplo Div Elemento" style="font-family: Helvetica; font-size: 12pt; border: 1px solid black;"> <div id="subdiv1" name="subdiv1" title="subdivision Div Element" style="color: #FF0000; border: 1px dotted black;"> <h5>seção 1</h5> <p>o site é dividido em seções. </p> <p>cada seção tem seu significado e carrega informações de diversos assunt</p> </div> <br /> <div id="subdiv2" name="subdiv2" title="subdivisao Div Elemento" style="color: #FF00FF;border: 1px dashed black;"> <h5>seção 2</h5> <p>este parágrafo será seu parágrafo de conteúdo..</p> <p>este outro parágrafo será o de artigos.</p> </div> </div> </body> </html> 25

26 Exercícios de Fixação 11) Imagine que exista uma seção chamada NOTÍCIAS: Dentro dessa seção há 3 colunas de assuntos diversos que dividem as chamadas Suponha que cada uma colunas seja de um assunto diferente, por exemplo: Esporte, Política e Educação. Crie uma página HTML utilizando a tag <div> para dividir as colunas em 3 seções diferentes. 26

27 CSS (Cascading Style Sheets) - Folhas de estilo em cascata Introdução Todo documento escrito utiliza certos elementos de desenho para formatar seções de texto a fim de manter a mesma aparência, seguir um padrão. Por exemplo, um elemento de desenho Heading 1 é geralmente alguma fonte grande que identifica todas as principais divisões de tópicos de um capítulo, artigo ou página da web. Um elemento de desenho Heading 2 identifica todos os títulos dos subtópicos. A HTML inclui uma tag para praticamente todos os elementos de desenho comumente utilizados. No passado, a tag <H1> em quase todos os web sites parecia a mesma, o texto preto era consideravelmente maior que o corpo do texto normal. Se você quisesse fazer seus próprios títulos diferenciados, tinha que formatar cada tag de título individualmente, utilizando tags <FONT> ou similares. As folhas de estilo em cascata mudam tudo isso. Com uma folha de estilo, é possível fazer uma "declaração global", como "quero que todos os meus títulos <H1> sejam verdes". É preciso dizer isso somente uma vez e cada título <H1> em seu site será verde. Se depois decidir que azul é uma cor melhor, não é preciso voltar e alterar cada tag <H1> para a cor azul. Em vez disso, basta alterar o estilo - a "regra" - para "quero que todos os meus títulos <H1> sejam azuis". Como criar estilos As formatações do CSS são normalmente aplicadas aos elementos (tags) do HTML, como, por exemplo, nos elementos table, p, h1 ou body. No CSS esses elementos são chamados seletores. Cada estilo criado é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe: elemento {atributo1: valor; atributo2: valor...} Elemento - descreve o elemento de design ao qual o estilo será aplicado. Atributo 5 - o aspecto específico do elemento que você quer usar como estilo. Deve ser um nome de atributo CSS válido, como o atributo font-size. Valor - a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão, como 20pt para font-size. Atributo: valor - parte da declaração da regra. É possível atribuir múltiplas declarações separando-as por ponto-e-vírgula (;). 5 O w3c apresenta um guia de referência completo de atributos CSS. O guia está disponível no endereço: 27

28 Exemplo 1 H2 {font-size: 24pt; color: blue} Todos os títulos de nível 2 (tags <H2>) devem ter tamanho de 24 pontos e cor azul; Seletores Existem diversas maneiras de selecionar o conteúdo que deve receber alguma informação de estilo: Seletor de elementos múltiplos Elemento1, Elemento2... {atributo1: valor; atributo2: valor...} H1, H2, H3 {font-weight:bold} /* Faz com que o conteúdo dos elementos H1, H2, H3 fiquem em negrito */ Seletor universal *{atributo1: valor; atributo2: valor...} /* Faz com que o conteúdo dos elementos fiquem em negrito */ Seletor de elementos adjacentes Elemento1 + Elemento2 {atributo1: valor; atributo2: valor...} H1+P {atributo1: valor; atributo2: valor...} /* Faz com que o conteúdo do elemento P fique em negrito, mas somente quando estiver logo após um elemento H1 */ Seletor de elementos filhos Elemento1> Elemento2 {atributo1: valor; atributo2: valor...} DIV>P {font-weight:bold} /* Faz com que o conteúdo dos parágrafos que estiverem dentro de algum DIV, fiquem em negrito */ Seletor HTML: Class. NomeDaClasse {atributo1: valor; atributo2: valor...}, ou Elemento.NomeDaClasse {atributo1: valor; atributo2: valor...} <html> <head><title></title> <STYLE TYPE= TEXT/CSS >.conteudo{font-style:italic; Font-size:24 } </STYLE> </head> <body><p class= conteudo >Bem vindo a página! Tamanho da fonte 24</p> <p>texto normal</p> </body> </html> 28

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css?

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? O html inclui uma tag para praticamente todos os elementos de design comumente

Leia mais

CSS (Style Sheets - Folhas de Estilo)

CSS (Style Sheets - Folhas de Estilo) Anuncie nesse espaço da Aprendendo HomePage, clique aqui e veja como e porque. CSS (Style Sheets - Folhas de Estilo) CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Vc já deve ter visto esses

Leia mais

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe: 48 10. CSS 10.1 O que é CSS? CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Você já deve ter visto esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos, o CSS

Leia mais

CSS Cascading Style Sheets Folhas de Estilo em Cascata

CSS Cascading Style Sheets Folhas de Estilo em Cascata CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1

Leia mais

APOSTILA DE PROGRAMAÇÃO WEB

APOSTILA DE PROGRAMAÇÃO WEB Programação Web - CSS 1 PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO APOSTILA DE PROGRAMAÇÃO WEB CSS CASCADING STYLE SHEETS (FOLHAS DE ESTILO EM CASCATA) Programação Web - CSS 2 INTRODUÇÃO CSS, também conhecido

Leia mais

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,

Leia mais

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

PROGRAMAÇÃO WEB DO LADO DO CLIENTE PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,

Leia mais

Compêndio códigos. {css}

Compêndio códigos. {css} Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado

Leia mais

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos.

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. 1 Índice 1 - INTRODUÇÃO 3 2 - TAGS 3 3 - EDITORES 3 4 - SALVANDO UMA PAGINA HTML 3 5 - INICIANDO UMA PÁGINA 3 6 - CONSTRUINDO

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

7. Cascading Style Sheets (CSS)

7. Cascading Style Sheets (CSS) 7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio 43424 ( prédio dos laboratórios ) Instituto de Informática - UFRGS email : pet@inf.ufrgs.br Av. Bento Gonçalves, 9500 bloco

Leia mais

Tecnologias para Web Design

Tecnologias para Web Design Tecnologias para Web Design CSS Folhas de estilo em cascata ÿ CSS Cascading Style Sheets ÿ Linguagem para definir atributos de estilo dos elementos da linguagem HTML ÿ CSS é uma linguagem independente

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS. UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores

Leia mais

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão 1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

Leia mais

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas

Leia mais

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto) HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 1 Objetivos Conhecer as origens e os objetivos da linguagem CSS. Conhecer a estrutura base de uma regra CSS. Compreender

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

HTML -- Criação de Home Page

HTML -- Criação de Home Page PPáággi innaa 1 LISTAS Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definição (DL). Um detalhe

Leia mais

OPERAÇÃO DE SOFTWARE E APLICATIVOS

OPERAÇÃO DE SOFTWARE E APLICATIVOS OPERAÇÃO DE SOFTWARE E APLICATIVOS 1 SUMÁRIO 1 INTRODUÇÃO A WEB... 4 1.1 O QUE É A WORLD WIDE WEB?... 4 1.2 COMO FUNCIONA A WWW?... 4 1.3 SERVIDORES WEB... 4 1.4 BROWSERS... 4 1.5 PADRÕES DA WEB... 5 1.6

Leia mais

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ O usuário interage com os serviços

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros.

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. Formulários Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. O formulário depende de outros programas no servidor, para receber e

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

Roteiro de Estudos e Atividades Avaliativas HTML Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar

Leia mais

Tecnologias para apresentação de dados - HTML. Aécio Costa

Tecnologias para apresentação de dados - HTML. Aécio Costa Tecnologias para apresentação de dados - HTML Aécio Costa Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript HyperText Markup Language Uma linguagem de marcação utilizada para produzir

Leia mais

DESENVOLVIMENTO WEB I - 7122

DESENVOLVIMENTO WEB I - 7122 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

6.2 - Formulários: form
...
form action method POST GET exceto outros formulários form

6.2 - Formulários: form <form action=url_de_script method=método>...</form> form action method POST GET exceto outros formulários form 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

Compêndio códigos.

Compêndio códigos. <html> Compêndio códigos ADVERTÊNCIA: A que se segue é apenas uma lista com as tags de HTML e os seus possíveis atributos, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba

Leia mais

4 - HTML Básico: 4.2 - Criando documentos HTML:

4 - HTML Básico: 4.2 - Criando documentos HTML: 4 - HTML Básico: 4.1 - O que é HTML? Os documentos na Web são organizados com o uso de comandos que são interpretados pelos browsers. Estes comandos compõem a linguagem HTML (HyperText Markup Language).

Leia mais

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo

Leia mais

Curso PHP Básico. Jairo Charnoski do Nascimento

Curso PHP Básico. Jairo Charnoski do Nascimento Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores

Leia mais

Introdução às Folhas de Estilo

Introdução às Folhas de Estilo Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

CSS -Cascading Style Sheets - Introdução

CSS -Cascading Style Sheets - Introdução CSS -Cascading Style Sheets - Introdução Como surgiu a tecnologia CSS? De início, a linguagem HTML foi criada para a construção de páginas Web, que exibiam apenas documentos científicos. Com a evolução

Leia mais

Unidade: O que é CSS? HTML e CSS? Boa aula!!!

Unidade: O que é CSS? HTML e CSS? Boa aula!!! Unidade: O que é CSS? HTML e CSS? Boa aula!!! Objetivo Construir: Padrões Web, Tableless e outros Como inserir o CSS nas páginas Sintaxe de utilização do CSS Tag DIV e tag SPAN Orientações Durante a explanação

Leia mais

Introdução à Cascading Style Sheets

Introdução à Cascading Style Sheets Estilo e Produtividade para Websites OVERVIEW História e Significado Por que usar? Como usar? Orientações ao Desenvolvedor O que é CSS? O que é CSS? Cascading Style sheets" ou "Folhas de Estilo Encadeadas

Leia mais

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Dicas Importantes: - Sempre crie um diretório em seu computador e salve todos os arquivos que vai usar (imagens e paginas),

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aula 05 e 06 Fernando F. Costa nando@fimes.edu.br 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:

Leia mais

css Cascading Style Sheets CSS CASCADING STYLE SHEETS

css Cascading Style Sheets CSS CASCADING STYLE SHEETS css Cascading Style Sheets CSS CASCADING STYLE SHEETS Oque é o CSS Cascading Style Sheets - Folhas de Estilo em Cascata Não é uma linguagem de programação, é uma linguagem de estilo. Define a apresentação

Leia mais

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário Sumário FORMULÁRIO EM HTML... 2 FORM... 2 ACTION... 2 METHOD... 2 INPUT... 2 INPUT TYPE TEXT... 2 INPUT TYPE PASSWORD... 2 CHECKBOX - Múltipla escolha... 4 RADIO - Escolha única... 4 Botões de ação...

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Formulários HTML Aula 07: Formulários e Frames HTML Os formulários HTML são utilizados, geralmente, como entradas de dados prépreenchimento,

Leia mais

CSS Luciano Otávio de Assis CSS

CSS Luciano Otávio de Assis CSS CSS O HTML tem suas limitações quando se tratar de se construir layout. É certo, você tem seis diferentes tipos s títulos e de 6 diferentes tamanhos de fontes. Quando você trabalha com tabelas, você tem

Leia mais

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir HTML @wre2008 1 Sumário Histórico; Resumo XHTML; Tags; Edição de documentos HTML; Publicação de um documento; Estrutura básica de um documento HTML; Edição de documentos

Leia mais

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.

Leia mais

Aula 5 Cabeçalhos, Imagens e Links

Aula 5 Cabeçalhos, Imagens e Links Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos

Leia mais

3 HTML Tabelas, frames e formulário

3 HTML Tabelas, frames e formulário 3 HTML Tabelas, frames e formulário Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Tabelas...3 Principais atributos das tabelas...4 Principais atributos

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução O Gmail possui duas versões distintas para seu webmail: uma mais recente, que é a versão atual utilizada pelos usuários de Gmail, e

Leia mais

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013 Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS APRESENTANDO O CSS CSS Cascading Style Sheets, ou, em português, Folha de Estilo em Cascata - é uma linguagem de estilo que pode ser utilizada na formatação de documentos HTML. Com CSS, podemos criar regras

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

Tutorial de HTML. O que é HTML? Aprendendo Tutorial de HTML Tutorial: O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página O que é HTML? HTML é uma

Leia mais

Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1. Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann

Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1. Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1 Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-2 Sumário Behaviors

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que

Leia mais

HyperText Markup Language HTML

HyperText Markup Language HTML HyperText Markup Language HTML Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Linguagem de Marcação de Hipertexto. Uma

Leia mais

Capítulo 5 HTML. Ferramentas para produzir HTML. Estrutura Básica HTML 29

Capítulo 5 HTML. Ferramentas para produzir HTML. Estrutura Básica HTML 29 HTML 29 Capítulo 5 HTML A linguagem HTML (HyperText Markup Language) é padrão para publicação de documentos na Internet. Todos os browsers (navegadores como, Netscape, Internet Explorer, Mosaic, NeoPlanet,

Leia mais

Apostila de Introdução ao CSS

Apostila de Introdução ao CSS Universidade Federal Fluminense Centro Tecnológico Escola de Engenharia Curso de Engenharia de Telecomunicações Programa de Educação Tutorial Grupo PET-Tele Apostila de Introdução ao CSS Autor atual: Isabelle

Leia mais

FOLHAS DE ESTILO EM CASCATA

FOLHAS DE ESTILO EM CASCATA FOLHAS DE ESTILO EM CASCATA CSS (Cascading Style Sheets) ou Folhas de Estilo em Cascata são um conjunto de regras de estilo que definem como os elementos e os tags em uma página HTML devem ser exibidos

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB Gabarito AD1 2 semestre de 2014. Observações importantes:

Leia mais

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.

Leia mais

Web design & HTML. avançado

Web design & HTML. avançado Web design & HTML avançado Helder da Rocha Rev.: WDHT-03-2000/04 A4 (ASIT) Copyright 1998, 1999, 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos do autor sobre esta obra

Leia mais

Os componentes de um formulário são: Form, Input, Select e AreaText

Os componentes de um formulário são: Form, Input, Select e AreaText HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet HTML: Listas, Tabelas e Formulários CST Sistemas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Listas Listas de itens são bastante

Leia mais

1) Crie uma nova página chamada Exercício.html e deixe-a com o seguinte layout:

1) Crie uma nova página chamada Exercício.html e deixe-a com o seguinte layout: Exercícios: 1) Crie uma nova página chamada Exercício.html e deixe-a com o seguinte layout: a) O cabeçalho Sistema de Órgãos Colegiados deve ter tamanho 3 e ficar centralizado. b) Após o cabeçalho incluir

Leia mais

MÓDULO 1 - xhtml Básico

MÓDULO 1 - xhtml Básico MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide

Leia mais

2 HTML Inserindo objetos

2 HTML Inserindo objetos 2 HTML Inserindo objetos Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Imagem...3 Links...5 Links para locais da mesma página...6 Áudio e vídeo...8

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode

Leia mais

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: Times New Roman, serif;} Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

3. Formulários e Folhas de Estilo em XHTML

3. Formulários e Folhas de Estilo em XHTML 3. Formulários e Folhas de Estilo em XHTML! Formulários introduzem em páginas XHTML a possibilidade de interação com o usuário. A informação introduzida em um formulário pode ser submetida para tratamento

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:

Leia mais

Curso de HTML. Rone Ilídio

Curso de HTML. Rone Ilídio Curso de HTML Rone Ilídio HTML HyperText Mark-up Language Linguagem criação de páginas Apresenta informações Formada por tags, exemplo: Tag H1: dados marcados com h1 Interessante: Acesse qualquer

Leia mais

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes

Leia mais

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos.

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos. Ana Paula Ambrósio Zanelato anapaula@unitoledo.br Disciplina: Aplicações para Web Conteúdo Introdução; ; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Listas A HTML permite definir três categorias distintas de listas: Ordenadas Sem ordenação Lista de definição 2/28 Listas

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Conceitos de HTML Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Definição de HTML Linguagem de marcadores (tags).

Leia mais

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação;

Leia mais

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou

Leia mais

TABLELESS E PROJETO ESTRUTURAL

TABLELESS E PROJETO ESTRUTURAL Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se

Leia mais

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo.

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Como defino e escrevo uma classe? Classe é um seletor

Leia mais

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira Introdução Introdução a HTML Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA mario@deinf.ufma.br Página Web: É um documento composto de texto e códigos especiais, chamados tags, que especificam

Leia mais

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Curso de Capacitação em Gerenciador de Conteúdo PLONE Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Customização Acionar modo debug 3 Propriedades Básicas 10 Arquivos de Customização 15 2 Customização Intermediário Com a definição do posicionamento

Leia mais

Introdução. História. Como funciona

Introdução. História. Como funciona Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado

Leia mais

O HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo:

O HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo: HTML é a sigla usada para Hyper Text Markup Language (linguagem de Marcação de Hipertexto). É a linguagem destinada a criação de páginas para a WEB. Ao contrário do que muita gente boa pensa, HTML não

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 3: Introdução a Linguagem CSS Desenvolvimento de Sites com PHP e Mysql Objetivos Vincular folhas de estilo CSS em páginas de Internet; Compreender a sintaxe CSS; Controlar a formatação dos elementos

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 09 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

Leia mais

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br Web Introdução Design CSS - Background, Color e Fontes Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br O que veremos... CSS Cores e fundos Fontes Cores e fundos Algumas propriedades

Leia mais

Apostila de HTML e CSS

Apostila de HTML e CSS Apostila de HTML e CSS 1 HTML básico 1... 4 Definição... 4 Requisitos para o desenvolvimento de uma página WEB... 4 TAGs... 4 1.1 Iniciando um documento... 5 ... 5 ... ... 5

Leia mais