<!DOCTYPE html> <html lang = "pt-br"> <head> <meta charset = UTF-8"> <title> Exemplo de uso correto da semântica HTML </title> </ head >
|
|
- Jerónimo Bennert Almeida
- 7 Há anos
- Visualizações:
Transcrição
1 <!DOCTYPE> Para um navegador exibir corretamente uma página web, devemos informar explicitamente o tipo do documento. O tipo do documento é informado com a declaração <!DOCTYPE>. <! DOCTYPE html > TAG DE ABERTURA <html> Os elementos HTML, com exceção do DOCTYPE, devem ser inseridos no conteúdo do elemento html. Esse elemento é aberto com a tag <html>, fechado com a tag </html> e deve conter exatamente um elemento head seguido de exatamente um elemento body. Diversos autores recomendam a utilização do atributo lang. Esse atributo indica a língua utilizada no documento HTML ou na maior parte dele. Algumas ferramentas de leitura ou de tradução de texto podem utilizar esse atributo para descobrir facilmente em qual língua os textos contidos no documento HTML ou na maior parte dele foram escritos. <!DOCTYPE html> <html lang = "pt-br"> <head> <meta charset = UTF-8"> <title> Exemplo de uso correto da semântica HTML </title> </ head > < body >... </ body > </ html > PARÁGRAFO Tag <p> No exemplo abaixo, utilizamos o elemento p para definir um parágrafo. De acordo com a especificação da linguagem HTML, esse elemento deve ser utilizado justamente para definir parágrafos. Portanto, ele foi aplicado corretamente. <!DOCTYPE html> <html lang = "pt-br"> <head> <meta charset = UTF -8"> <title> Exemplo de uso correto da semântica HTML </title> </head>
2 <body> <p> Este é um texto para mostrar o significado da tag p. </ p> </body> </html> TÍTULOS E SUBTÍTULOS Tag <h> Para inserir títulos em uma página web, devemos utilizar os elementos h1, h2, h3, h4, h5 e h6. Os sufixos numéricos de 1 a 6 indicam o nível do título dentro da hierarquia de títulos do documento. <!DOCTYPE html> <html lang="pt-br"> <!-- cabeçalho --> <head> <meta charset ="UTF-8" /> <title> Exemplo de Títulos </title> </head> <!-- corpo --> <body> <h1>título 1 </h1> <h2>título 2 </h2> <h3>título 3 </h3> <h4>título 4 </h4> <h5>título 5 </h5> <h6>título 6 </h6> </body> </html>
3 Editores HTML Documentos HTML podem ser criados em qualquer editor de texto básico. Contudo, para ganhar produtividade, podemos utilizar ferramentas com mais recursos. Há diversas opções de editores HTML, alguns gratuitos outros pagos. Ferramentas de Desenvolvimento Web Hoje em dia, os principais navegadores possuem ferramentas para testar e depurar as páginas web e a interação com os Web Servers. Nos exemplos dessa apostila, utilizaremos Chrome DevTools do navegador Chrome. Outra ferramenta muito importante é o Firebug do navegador Firefox. ITÁLICO Elemento <i> A especificação da linguagem HTML 5 não é muito precisa na definição da semântica do elemento i. Ela indica a utilização desse elemento para definir nomes científicos, termos técnicos, expressões idiomáticas em outras línguas, transliterações, pensamentos. Normalmente, os navegadores definem o i como inline-level element e exibem o seu conteúdo em itálico. <!DOCTYPE html> <html lang="pt-br"> <!-- cabeçalho --> <head> <meta charset ="UTF-8" /> <title> Exemplo de Títulos </title> </head> <!-- corpo --> <body> <h1> Exemplo do elemento (i) </h1> <p> Desenvolvimento web é o termo utilizado para descrever o desenvolvimento de sites, na <i> Internet </i> ou numa <i>intranet</i>. Este é o profissional que trabalha desenvolvendo websites, podendo ser um Web Designer (Desenvolvedor do Layout), ou Web Developer(Desenvolvedor de sistemas). </body> </p> </html>
4 NEGRITO Elemento <b> A especificação da linguagem HTML 5 não é muito precisa na definição da semântica do elemento b. Ela indica, por exemplo, a utilização desse elemento para definir as palavras chave do resumo de um documento e o nome do produto em texto de avaliação. (usamos para negrito). <!DOCTYPE html> <html lang="pt-br"> <!-- cabeçalho --> <head> <meta charset ="UTF-8" /> <title> Exemplo de (b) </title> </head> <!-- corpo --> <body> <h1> Exemplo do elemento (b) </h1> <p> Atualmente, praticamente todos os <b> sistemas corporativos </b> possuem <b> interfaces web </b>. Para quem deseja atuar no mercado de <b> desenvolvimento de software </b>, é obrigatório o conhecimento das linguagens : <b> HTML </b>, <b> CSS </b> e <b> JavaScript </b>. </p> </body> </html> Texto subscrito <sub> ou sobrescrito <sup> Podemos definir textos subscrito ou sobrescrito com os elementos sub e sup respectivamente. Normalmente, os navegadores definem esses elementos como inline-level elements. <h1> Exemplo de texto subscrito ou sobrescrito </h1> <p > </p> A cidade de São Paulo possui uma área de km <sup>2 </sup>. Em 2011, São Paulo emitiu 16,430 milhões de toneladas de CO <sub> 2 </sub> IGUAL NEGRITO - Texto importante ou enfatizado Tag <strong> Podemos definir textos importantes ou enfatizados com os elementos strong e em respectivamente. Por padrão, nos navegadores, o conteúdo de um elemento strong é exibido em negrito e o conteúdo de um elemento em é exibido em itálico. Normalmente, os navegadores definem esses elementos como inline-level elements.
5 <h1> Exemplo de texto importante (strong) ou enfatizado (enfatizado) </h1> <p> <strong> Brasil </strong> é o único país que ganhou <em> cinco vezes </em> a <strong> copa do mundo de futebol </strong >. </p> Imagens Tag <img> A tag <img> define uma imagem em uma página HTML e necessita de dois atributos preenchidos: src e alt O HTML 5 introduziu duas novas tags específicas para imagem: <figure> e <figcaption>. A tag <figure> define uma imagem com a conhecida tag <img>. Além disso, permite adicionar uma legenda para a imagem por meio da tag <figcaption>. <figure> <img src="img/foto1.png" alt="foto a ser exibida Minha foto"> <figcaption>roteiro do final de semana</figcaption> </figure> Listas não numeradas <ul> <ul> <li> Macarrão instantâneo da sua marca favorita </li> <li> 600 ml de água </li> </ul> Listas numeradas <ol> <ol> <li> Macarrão instantâneo da sua marca favorita </li> <li> 600 ml de água </li> </ol>
6 Links Um site é formado por um conjunto de páginas que estão interligadas. Para permitir que um usuário navegue de uma página para outra, devemos utilizar os links. <a href = "pagina2.html"> Exemplo de link com caminho relativo </a> <a href = "outros/pagina3.html"> exemplo de link com caminho relativo </a> <a href = " Exemplo caminho absoluto </a> Links com IMAGENS Um site é formado por um conjunto de páginas que estão interligadas. Para permitir que um usuário navegue de uma página para outra, devemos utilizar os links. <p>exemplo de link com caminho relativo com Imagens</p> <a href = "pagina2.html"> <img src="img/security-lock.jpg" /> </a> <p> Outro exemplo de link com caminho relativo </p> <a href = "outros/pagina3.html"> <img src="img/tecinformatica.jpg" /> </a> <p>exemplo de link com caminho absoluto</p> <a href = " <img src="img/ubuntu.jpg" /> </a> TABELAS Elemento <table> Quando surge a necessidade de exibir dados de forma tabular em páginas web. <table> <tr> <th> Marca </th> <th> Modelo </th> <th> Ano </th> </tr> <tr> <td> Toyota </td> <td> Corolla </td> <td> 2010 </td> </tr>
7 <tr> <td> Honda </td> <td> Civic </td> <td> 2011 </td> </tr> <tr> <td> Citroen </td> <td> C3 </td> <td> 2012 </td> </tr> </table> CSS - (Cascading Style Sheets) - O CSS é uma (folha de estilo em castata) utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação como HTML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento. Assim como a linguagem HTML, a linguagem CSS é definida pelo W3C. Você pode consultar a especificação do CSS no endereço O W3C faz diversas recomendações sobre como implementar as funcionalidades do CSS. Todo elemento HTML, no corpo de uma página web, está contido em um box. Considere o documento HTML abaixo.
8 O box de um elemento HTML é composto por conteúdo (content), margem interna (padding), borda ( border) e margem externa (margin).
9 Margem externa superior (margin-top) Borda superior (border-top) Margem interna superior (padding-top) Altura do conteúdo (height) Margem interna inferior (padding-bottom) Borda inferior (border-bottom) Margem externa inferior (margin-bottom) Podemos aplicar regras de formatação para cada elemento HTML. Observe a estrutura de uma regra CSS. O seletor determina para quais elementos a regra de formatação deve ser aplicada. Por exemplo, a propriedade font-size é utilizada para definir o tamanho da fonte utilizada nos textos. Folha de estilho externa (External style sheet). Podemos separar o código HTML do código CSS definido as regras de formatação em um arquivo independente. FOLHA DE ESTILO EXTERNA <!DOCTYPE html> <html lang="pt-br"> <!-- cabeçalho --> <head> <meta charset ="UTF-8" /> <title> Desenvolvimento Web </title> <link rel="stylesheet" type="text/css" href="css/arquivo.css" /> </head>
10 // HTML <!DOCTYPE html> <html> <head> </head> <body> <h1>meu primeiro exemplo CSS </h1> <p>este é o primeiro paragrafo </p> </body> </html> // CSS body { } background-color: #d0e4fe; h1 { color: orange; text-align: center; } p { font-family: "Times New Roman"; font-size: 20px; }
11 CORES HEXADECIMAL - Há diversas formas de escolher uma cor na linguagem CSS. A quantidade de cores suportada pela linguagem CSS é Como vimos apenas 147 cores foram nomeadas. Para escolher uma cor que não possui um nome, podemos utilizar o código hexadecimal da cor desejada. Todas as cores possuem um código hexadecimal. Veja o código hexadecimal das cores básicas. AGRUPAMENTOS DE SELETORES Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Separe cada seletor com uma vírgula. A cor de todos os cabeçalhos será verde. h1, h2, h3, h4, h5, h6 { color: #00FF00; } Seletor ( CLASS ) No HTML as regras seriam aplicadas conforme abaixo: <p class = "sobre"> Este parágrafo está falando sobre a empresa. </p> <p class = "venda"> Este parágrafo esta detalhando como comprar </p> <p class = venda > Este parágrafo continua falando sobre venda </p> No CSS as regras seriam aplicadas conforme abaixo: p.sobre { color:#00ffff; /* azul claro - aqua */ } p.venda { color:#0000ff; /* azul blue */ }
12 Seleletor ( ID ) O seletor ID é único. Um seletor ID só pode ser aplicado a um elemento HTML. No HTML as regras seriam aplicadas conforme abaixo: <p id = "anuncio"> Este parágrafo está falando sobre a empresa. </p> <p id = "promocao"> Este parágrafo esta detalhando como comprar </p> No CSS as regras seriam aplicadas conforme abaixo: /* este é um comentário*/ #anuncio { color:#808000; /* verde - olive */ } #promocao { color:#008080; /* verde teal */ } A PROPRIEDADE FONT color:...cor da fonte font-family:...tipo de fonte font-size:...tamanho de fonte font-style:...estilo de fonte font-variant:...fontes maiúsculas de menor altura font-weight:...quanto mais escura a fonte é (negrito) color cor da font No HTML as regras seriam aplicadas conforme abaixo: <h1>cabeçalho com letras vermelhas</h1> <h2>cabeçalho com letras verdes</h2> <p>parágrafo com letras azuis</p> No CSS as regras seriam aplicadas conforme abaixo: h1 {color: #FF0000;} h2 {color: #00FF00;} p {color: rgb(0,0,255);}
13 font-family - O tipo de fonte (aplicada no css) No CSS as regras seriam aplicadas conforme abaixo: h2 {font-family: arial, helvetica, serif;} p {font-family: sans-serif;} font-size - O tamanho de fonte (aplicada no css) h1 {font-size: 14px;} h2 {font-size: smaller;} p {font-size: 100%;} font-style - O estilo de fonte (aplicado no css ) h1 {font-style: italic;} h2 {font-style: normal;} p {font-style: oblique;} /* um pouco mais deitado */ font-variant - fontes maiúsculas "menores" ( aplicado no css ) h3 {font-variant: normal;} p {font-variant: small-caps;} font-weight - Peso das fontes - negrito (intensidade da cor) {font-weight: bold;} BACKGROUND-COLOR A propriedade background-color é utilizada para definir a cor do background dos elementos HTML. Exemplo: backgrond-color background-color: yellow background-color: #c1a4cd
14 Background-image A propriedade background-image é utilizada para definir a imagem que deve ser utilizada como background de um elemento HTML. background-image: url( bg-image.png ) background-repeat Por padrão, se uma imagem utilizada como background for menor do que o box do elemento HTML correspondente, ela será replicada na horizontal e na vertical. A propriedade background- repeat permite controlar como essa replicação deve ser realizada. Essa propriedade aceita os seguintes valores: Valor repeat repeat-x repeat-y no-repeat Descrição A imagem de background é replicada na horizontal e na vertical (padrão) A imagem de background é replicada apenas na horizontal A imagem de background é replicada apenas na vertical A imagem não é replicada
15 Quebrar palavras grantes no texto <wbr/> O recurso quebra uma palavra quando não cabe na página reduzida, assim não será jogada para próxima linha abaixo. Informa que pode ser quebrado quando necessário. <wbr/> Este recurso além de quebrar a palavra quando não couber ao reduzir página é colocado um (-) hífen. Informa que pode ser quebrado quando necessário. CRIANDO FORMULÁRIOS <h1> Criando Formulários</h1> <label> Telefone: </label> <input type="tel" name="txttel" size="15" maxlength="15" title="digite seu telefone"> <label for="usu1"> Usuário 1 </label> <input type="text" name="usu1" size="20" maxlength="20"> <label for="senha1"> Senha 1</label> <input type="text" name="senha1" maxlength="8"> <br> </p> <label for="usu2"> Usuário 2</label> <input type="text" name="usu2" size="20" maxlength="20" readonly=""> <label for="senha2"> Senha 2</label> <input type="password" name="senha2" maxlength="8"> </p> <h2> Botões de rádio </h2> <label> Selecione Cargo: </label> <input type="radio" name="radcargo" value="vend">vendedor <input type="radio" name="radcargo" value="assi">assistente <input type="radio" name="radcargo" value="asse">assessor
16 <h2> Caixas de seleção </h2> <label> Interesses: </label> <br> <input type="checkbox" name="ckcine" value="cine">cinema <br> <input type="checkbox" name="ckespe" value="espo">esporte <br> <input type="checkbox" name="ckviag" value="espo">viagem <br> <input type="checkbox" name="ckleit" value="leit">leitura <br> <h2> Select - Combobox </h2> <label id="labmod" for="mod"> Modalidade Ensino</label> <select name="mod" id="mod"> <option value=""></option> <option value="01">presencial</option> <option value="02">distância </option> <option value="03">em curso</option> <option value="04">não Concluído</option> </select> <h2> Select - Combobox - GRUPOS </h2> <label id="labsoft" for="soft">selecione um Software</label> <select name="soft" id="soft"> <optgroup label="editores"> <option value="00" selected="selected">escolha Software </option> <option value="01">editor de Texto</option> <option value="02">notepad++ </option> <option value="03">aptana</option> <option value="04">netbeans</option> </optgroup> <optgroup label="navegadores"> <option value="05">safari</option> <option value="06">firefox </option> <option value="07">opera</option> <option value="08">chrome</option> </optgroup> </select>
17 <h2> Fieldset - Caixa com borda </h2> <fieldset> <legend> Todas informações na caixa</legend> <label for="usu1"> Usuário 1 </label> <input type="text" name="usu1" size="20" maxlength="20"> </fieldset>
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 maisQuem 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 maisTECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD
TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Compreender a sintaxe utilizada em Folhas de Estilos em Cascata, seu uso e limitações. Apresentar as principais características das
Leia maisIntroduçã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 maisWeb Design Aula 11: XHTML
Web Design Aula 11: XHTML Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação HTML 1.0-2.0: Havia hipertextos, não havia preocupação com a apresentação HTML 3: Guerra dos Browser (Microsoft
Leia maisAutoria Web HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza
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 Apresentar
Leia maisDefinindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar
Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito . Para continuar lendo esse post,
Leia maisProf.: Melba Lima Gorza Aula Introdutória de HTML. Componentes do HTML. Estrutura de um documento XHTML
Prof.: Melba Lima Gorza Aula Introdutória de HTML Componentes do HTML Estrutura de um documento XHTML primeiro Documento XHTML meu primeiro documento XHTML
Leia maisTECNOLOGIAS 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 maisWebdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza
Webdesign Introdução a 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 Apresentar as
Leia maisINTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Estrutura básica do HTML Um documento HTML deve estar delimitado pela tag e . Dentro deste documento, podemos ainda distinguir
Leia maisPÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Aula 06: Introdução Linguagem HTML
PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Aula 06: Introdução Linguagem HTML O Desenvolvimento Web O desenvolvimento web é o termo utilizado para descrever atividade relacionada
Leia maisInternet e Programação Web
COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 2 Técnico Prof. Cesar 2014 1 1. CSS CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo,
Leia maisCSS - 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 maisProgramação de Servidores CST Redes de Computadores
Programação de Servidores CST Redes de Computadores Marx Gomes Van der Linden http://marx.vanderlinden.com.br ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) HMTL Arquivo-texto
Leia maisDesenvolvimento 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 maisDesenvolvimento em Ambiente Web. HTML - Introdução
Desenvolvimento em Ambiente Web HTML - Introdução O que é HTML? HTML é uma linguagem para descrever a estrutura de uma página WEB. Ela permite: Publicar documentos online com cabeçalhos, texto, tabelas,
Leia maisAplicação para Web I. Começando a compreender o HTML
Aplicação para Web I Começando a compreender o HTML A Linguagem da WEB O HTML ou HyperText Markup Language linguagem universal compreendida pelos navegadores web (browsers) para a comunicação utilizando
Leia maisWeb 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 maisC A P I T U L O 0 1 I N T R O D U Ç Ã O XHTML
C A P I T U L O 0 1 I N T R O D U Ç Ã O A O XHTML 1 O QUE É XHTML? XHTML significa Linguagem de Marcação de Hipertexto (Extensible Hypertext Markup Language) XHTML é quase idêntico ao HTML 4.01 XHTML é
Leia maisAula 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 maisLayouts de páginas com HTML e CSS
Layouts de páginas com HTML e CSS Layouts de Páginas com CSS.... 2 Layout com tamanho Líquido... 2 Layout com tamanho Fixo... 3 Desenvolvendo um layout com tamanho fixo.... 5 Layouts de Páginas com CSS.
Leia maisRelatório: Página HTML
Universidade do Minho Escola de Engenharia Relatório: Disciplina: Linguagens de Programação Curso: Engenharia e Gestão Industrial Carolina Fernandes N.º40532 Guilherme Bacinello N.º42119 Diana Rocha N.º40536
Leia maisVejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é :
TABELAS As tabelas são muito importantes para o designer de uma home-page. Com elas podese fazer alinhamentos que dificilmente seriam possíveis com simples comandos. A funcionalidade de uma tabela faz
Leia maisCSS 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 maisIntrodução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Estrutura Básica do Documento HTML
IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage EstruturaBásicadoDocumentoHTML ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger
Leia maisMODULO 4 DESENVOLVIMENTO DE PÁGINAS WEB ESTÁTICAS. Redes de Comunicação
MODULO 4 DESENVOLVIMENTO DE PÁGINAS WEB ESTÁTICAS Redes de Comunicação Regras para um website eficaz Categorização dos conteúdos estrutura lógica dos conteúdos Condensação conteúdos simples e directos
Leia maisLinguagem de Estruturação e Apresentação de Conteúdos
UNIVERSIDADE TECNOLOGICA FEDERAL DO PARANA MINISTERIO DA EDUCAÇÃO Câmpus Santa Helena Curso de Bacharelado em Ciência da Computação Linguagem de Estruturação e Apresentação de Conteúdos Prof. Me. Arlete
Leia maisTecnologias 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 maisWEB DESIGNER WEB DESIGNER
WEB DESIGNER 1 WEB DESIGNER INICIO DO CURSO DE HTML 4.0 Toda vez que você acessar um site (veja tópico Word Wide Web) por meios de domínios quando adiciona a URL na barra de endereço, do seu Navegador
Leia maisCompê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 maiscss 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 mais7. 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 maisLinguagens para WEB Tecnologia Cliente XHTML / CSS. Professora: Lucélia Oliveira
Linguagens para WEB Tecnologia Cliente XHTML / CSS Professora: Lucélia Oliveira Professora Lucélia Oliveira 2 Sumário APRESENTAÇÃO... 5 1. CONCEITOS... 6 1.1. HTML... 6 1.2. XHTML... 6 1.3. tags... 6 2.
Leia maisWeb Design Aula 13: Introdução a CSS
Web Design Aula 13: Introdução a CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Você lembra que HTML e XHTML são linguagens de marcação? Para organizar melhor o visual das páginas
Leia maisIntroduçã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 maisCSS - Cascading Style Sheets
Introdução CSS - Cascading Style Sheets Padrão de Apresentação de Documentos CSS Cascate Style Sheets Objetivos: Conhecer o Histórico; Conhecer a Usabilidade; Por que usar? Quando usar? Como usar? Conhecer
Leia maisProva de pré-requisito
Prova de pré-requisito PHP & MySQL: Técnicas para Web 2.0 1 - Qual das opções constrói a tabela abaixo: DIA MÊS ANO 28 04 1988 22 02 2002 a) b) c) dia mês ano
Leia maisUNIVERSIDADE 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 maisHTML. (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 maisCSS é 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 maisCRIAÇÃO DE SITES (AULA 3)
Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 3) Mais algumas tags Existem tagsque são abertas e fechadas em única tag. Estas
Leia maisWeb Design Aula 15: Conhecendo CSS
Web Design Aula 15: Conhecendo CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Agrupando Seletores Herança Comentários Exercício Adicionando Classes Validação Propriedades Agrupando
Leia maisWeb 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 maisCriação de Web Sites I
de Criação de Web Sites I Conteúdo 12. Introdução... 67 12.1. O que são folhas de estilo?...67 12.2. Para que servem as folhas de estilo...68 Separar apresentação da estrutura...68 Controle absoluto da
Leia maisTABLELESS 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 maisFOLHAS 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 maisIntrodução a Servlets e JSP. Prof. Samuel Martins samuellunamartins at gmail dot com Faculdade São Miguel
Introdução a Servlets e JSP samuellunamartins at gmail dot com Conteúdo da aula Introdução a HTML Introdução a Servlets Preparando o ambiente de programação Exemplo de Servlets 2 Websites na década de
Leia maisCEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML
INICIO DE HTML Neste tutorial usaremos o já conhecido Notepad++ ou Bloco de Notas e um Browser (Chrome, Mozilla ou Internet Explorer). Para nossos exemplos usaremos o Chrome. A estrutura básica de uma
Leia maisUNIVERSIDADE 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 maisAula 2: Listas e Links
Aula 2: Listas e Links Nesta segunda aula, você aprenderá a utilizar listas numeradas ou não, a entender o que são listas de definições e como fazer referências a outros documentos. Vamos entender a diferença
Leia maisHTML Página 29. Índice
PARTE - 5 HTML Página 29 Índice HTML - Hiperlinks... 30 Frames com links... 31 O código fonte do arquivo índex.htm... 31 Conhecendo os comandos border e bordercolor do frame... 31 Conhecendo os comandos
Leia maisEXEMPLO. 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 maisA estrutura de um documento HTML apresenta os seguintes componentes:
A estrutura de um documento HTML apresenta os seguintes componentes: Titulo do Documento texto, imagem, links,... As etiquetas HTML não são sensíveis
Leia maisAUTORIA WEB. Prof. Antonio Arley Rodrigues da Silva. arleysb@gmail.com
AUTORIA WEB Prof. Antonio Arley Rodrigues da Silva arleysb@gmail.com Sumário 1 Introdução... 4 2 HTML... 5 2.1 Estrutura Básica... 5 2.1.1 Exercícios de Fixação... 6 2.2 Semântica HTML... 6 2.3 Parágrafos...
Leia maisAPOSTILA 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 maisProfa. Reane Franco Goulart
Profa. Reane Franco Goulart A linguagem HTML (Hypertext Markup Language) tem o objetivo de formatar textos através de marcações especiais denominadas tags, para que possam ser exibidos de forma conveniente
Leia maisMudanç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 maisLinks e Frames José Antônio da Cunha
Links e Frames José Antônio da Cunha Links Até agora, produzimos documentos simples. Mas os documentos de hipertexto têm como principal característica, fazer ligações com outros hipertextos. Os pontos
Leia maisQUEM 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 maisUnidade IV Introdução à Linguagem PHP Parte 1
Unidade IV Introdução à Linguagem PHP Parte 1 Professor Fabiano de Paula Soldati fpsoldati@yahoo.com.br http://br.groups.yahoo.com/group/professorsoldati/ Introdução HTML = HyperText Markup Language HTML
Leia maisCURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1
ESCOLA ESTADUAL PROF. JOSÉ BARROSO TOSTES PROFESSOR: ESP. ANDREW RODRIGUES CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 1 APOSTILA DE INTRODUÇÃO À LINGUAGEM
Leia maisAprenda a construir com menos tempo e esforco layouts para web
Aprenda a construir com menos tempo e esforco layouts para web Sumário Apresentação 10 Capítulo #1 - Ferramentas necessárias para o desenvolvimento 22 Capítulo #2 - Afinal, o que é HTML? 26 A evolução
Leia maisHTML Página 1. Índice
PARTE - 1 HTML Página 1 Índice HTML A HISTÓRIA... 2 O COMEÇO E A INTEROPERABILIADE... 3 Primeira Página... 4 Entendendo seu código... 5 Abrindo o código fonte da sua página... 6 Comentários na página...
Leia maisWeb Design: Responsivo e Adaptativo. Lara Popov Zambiasi Bazzi Oberderfer
Web Design: Responsivo e Adaptativo Lara Popov Zambiasi Bazzi Oberderfer 1 # Construindo Layouts Tableless Layouts tableless são layouts ou páginas web construídas e estruturadas sem o uso das antigas
Leia maisAula 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 maisFormatos de publicidade
1 Formatos de publicidade Superfull 728x90 px Superfull 728x90 px E-mail marketing E-mail marketing Anuncie no ZAP Publicidade Anuncie no ZAP Publicidade Formato disponível para a home de imóveis, revista
Leia maisScientific Electronic Library Online
FAPESP - CNPq BIREME - FapUNIFESP Scientific Electronic Library Online Manual de Codificação de Tabelas para xhtml Projeto PMC São Paulo Novembro 2013 INTRODUÇÃO Este manual tem o objetivo de mostrar passo
Leia maisLINGUAGEM 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 maisConstruindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec
Construindo Sites com CSS e (X)HTML sites controlados por folhas de estilo em cascata Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...14 Introdução...16 Para quem foi escrito este
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.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores
Leia maisSIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar estilos em HTML com CSS Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte
Leia maisgedit Bloco de notas
GOVERNO DA REPÚBLICA PORTUGUESA gedit Bloco de notas Sistema Operativo Linux Tecnologias de Informação e Comunicação Professor: Joaquim Frias Instruções básicas do HTML TAGS TAGS Uma tag é uma instrução
Leia maisCSS. 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 maisProfessor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1
Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1 Do inglês, Cascading Style Sheet, ou folha de estilo em cascata. É uma linguagem
Leia maisFerramentas Programáveis. Profº Ritielle Souza
Ferramentas Programáveis Profº Ritielle Souza Folhas de Estilo Existem três formas de trabalharmos com folhas de estilos Forma mais usual CSS Externo Estilo na página Forma menos usual estilo inline
Leia maisHTML 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( Curso Introdutório) Versão 0.2a 7 de março de 2005 - Versão - Rascunho -
Apostila de XHTML ( Curso Introdutório) Versão 0.2a 7 de março de 2005 - Versão - Rascunho - Prof. Luis Rodrigo de O. Gonçalves E-mail:luisrodrigoog@yahoo.com.br site: http://www.lrodrigo.cjb.net Prof.
Leia maisIntrodução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Elementos Textuais Básicos
IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo ElementosTextuaisBásicos ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo
Leia maisneste 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 maisIncorporando JavaScript em HTML
Incorporando JavaScript em HTML Existem quatro maneiras de incorporar JavaScript em HTML. Vamos abordar as três primeiras, por ser mais comum: Entre as tags dentro do código HTML. A partir
Leia mais1. INTRODUÇÃO. 1.1 Como são as marcações (tags) HTML?
HTML 1. INTRODUÇÃO HTML abreviação de HiperText Markup Language é a linguagem de programação que usamos para criar uma página Web, que, por sua vez, será composta de textos e comandos especiais, chamados
Leia maisCSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael
CSS ETEC FRANCISCO MORATO Professores: Kelly e Rafael 2015 Agenda Introdução; Website Layouts; CSS; Referências. 2 Website Layouts A maioria dos sites têm colocado o seu conteúdo em várias colunas; Ex.:
Leia maisInstituto Siegen Manual do Professor
Manual do Professor - www.institutosiegen.com.br - 1 Instituto Siegen Manual do Professor Manual do Professor - www.institutosiegen.com.br - 2 Sumário Instituto Siegen...1 Manual do Professor...1 Funcionamento
Leia maisAndré Kawamoto NE31A
André Kawamoto NE31A Internet Internet: uma coleção de redes Todos os computadores conectados à Internet fazem parte de uma rede (rede local, rede doméstica) Rede de Redes Internet x WWW Internet e World
Leia maisCertificado ISO 9001:2000 Nº 23.0021/98. Centro de Informática CETEP Quintino www.ciquintino.com.br. Elaborada por: Wanderson Mirandela
Certificado ISO 9001:2000 Nº 23.0021/98 Centro de Informática CETEP Quintino www.ciquintino.com.br Elaborada por: Wanderson Mirandela A POLÍTICA DA QUALIDADE DO CI Prover cursos de nível básico profissionalizante
Leia maisHTML Básico. Antonio Fernando de Oliveira Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3111 e-mail: antonio@nce.ufrj.br
HTML Básico Antonio Fernando de Oliveira Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3111 e-mail: antonio@nce.ufrj.br Referências Bibliográficas: Iniciando em HTML Ramalho, Makron Books Home
Leia maisAplicativos para Internet Aula 01
Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx
Leia maisUnidade: 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 maisEnsino Técnico Integrado ao Médio FORMAÇÃO PROFISSIONAL. Plano de Trabalho Docente 2014
Ensino Técnico Integrado ao Médio FORMAÇÃO PROFISSIONAL Plano de Trabalho Docente 2014 ETEC PROF. MASSUYUKI KAWANO Código: 136 Município: TUPÃ Eixo Tecnológico: INFORMAÇÃO E COMUNICAÇÃO Habilitação Profissional:
Leia maisIntrodução à Tecnologia Web 2010 HTML HyperText Markup Language XHTML extensible HyperText Markup Language Elementos da Seção do Cabeçalho
IntroduçãoàTecnologiaWeb2010 HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage ElementosdaSeçãodoCabeçalho ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger
Leia maisAutoria Web. Professor: Diego Oliveira. Conteúdo 02: Principais Tags HTML
Autoria Web Professor: Diego Oliveira Conteúdo 02: Principais Tags HTML Diferença de HTML e XHTML Os elementos XHTML devem estar devidamente aninhados Os documentos XHTML devem estar bem-formados Os nomes
Leia maisCartilha de Codificação
Ministério do Planejamento, Orçamento e Gestão Secretaria de Logística e Tecnologia da Informação Departamento de Governo Eletrônico www.governoeletronico.gov.br Padrões Web em Governo Eletrônico Cartilha
Leia maisIntrodução ao HTML Hypertext Markup Language
Introdução ao HTML Hypertext Markup Language Prof. Marcus Ramos Tags São comandos que são inseridos juntamente com o texto a ser apresentado, e que definem a forma como o mesmo será exibido na tela do
Leia maisTecnologia WEB II. Prof. Erwin Alexander Uhlmann. Introdução ao PHP. UHLMANN, Erwin Alexander. Introdução ao PHP. Instituto Siegen. Guarulhos, 2012.
1 Tecnologia WEB II Prof. Erwin Alexander Uhlmann Introdução ao PHP UHLMANN, Erwin Alexander. Introdução ao PHP. Instituto Siegen. Guarulhos, 2012. 2 Agradecimentos Agradeço à minha esposa Kátia por entender
Leia maisDESENVOLVIMENTO 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 mais6.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 maisApostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB -
Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Taquara - RS Sumário Apostila de HTML - Fonte: http://www.icmc.usp.br/ensino/material/html/intro.html
Leia mais