O documento discute o uso de elementos <div> e <span> em HTML para agrupar conteúdo. Explica que <div> é um contêiner de bloco genérico e <span> é um contêiner em linha genérico que podem ser usados para agrupar seções quando não há uma tag semântica apropriada. Também fornece exemplos de como estruturar uma página web usando <div> para criar cabeçalhos, rodapés, menus e seções de conteúdo.
Utilizado para a atividade da disciplina de Metodologia do Ensino Superior do curso de Especialização em Engenharia de Software da Universidade Federal do Paraná - UFPR.
Utilizado para a atividade da disciplina de Metodologia do Ensino Superior do curso de Especialização em Engenharia de Software da Universidade Federal do Paraná - UFPR.
Slides do curso técnico de informática do IFPE - Campus Garanhuns. Disciplina de linguagens de programação para a web. Apresenta uma introdução sobre o desenvolvimento para esta área e introduz o HTML.
Apresentação para o Flisol 2014 abordando o tema de Computação em Nuvem, com demonstração sobre como levantar um ambiente com Apache/MySQL/PHP/Wordpress em 5 minutos usando serviços em nuvem (AWS)
APIs, REST e RESTful: O que os programadores precisam saber? - Marcos Echevar...Tchelinux
A arquitetura das aplicações web vem mudando ao longo do tempo, não basta só sabermos fazer requests e esperarmos um json de retorno. Entender o conceito por trás das APIs e as vantagens do padrão RESTful farão toda a diferença na hora de desenvolver aplicações "elegantes".
Marcos Echevarria é Marcos Echevarria é mestre em Ciência da Computação pela Universidade Católica de Pelotas. Desenvolve sistemas web há mais de 10 anos, tendo liderado equipes em projetos de médio e grande porte em empresas nacionais e internacionais. Atualmente é CEO na empresa Be Mobile e professor na Universidade Católica de Pelotas, onde leciona as disciplinas de Algoritmos e Engenharia de Software.
Para mais informações:
https://twitter.com/quinhodev
Introdução ao conceito de APIs RESTful. Características, boas práticas e o que é importante se levar em consideração durante o desenvolvimento de uma API RESTful.
Aborda utilização de verbos HTTP, códigos de status, headers, controles de hipermídia, formatos de representação entre outros.
Slides do curso técnico de informática do IFPE - Campus Garanhuns. Disciplina de linguagens de programação para a web. Apresenta uma introdução sobre o desenvolvimento para esta área e introduz o HTML.
Apresentação para o Flisol 2014 abordando o tema de Computação em Nuvem, com demonstração sobre como levantar um ambiente com Apache/MySQL/PHP/Wordpress em 5 minutos usando serviços em nuvem (AWS)
APIs, REST e RESTful: O que os programadores precisam saber? - Marcos Echevar...Tchelinux
A arquitetura das aplicações web vem mudando ao longo do tempo, não basta só sabermos fazer requests e esperarmos um json de retorno. Entender o conceito por trás das APIs e as vantagens do padrão RESTful farão toda a diferença na hora de desenvolver aplicações "elegantes".
Marcos Echevarria é Marcos Echevarria é mestre em Ciência da Computação pela Universidade Católica de Pelotas. Desenvolve sistemas web há mais de 10 anos, tendo liderado equipes em projetos de médio e grande porte em empresas nacionais e internacionais. Atualmente é CEO na empresa Be Mobile e professor na Universidade Católica de Pelotas, onde leciona as disciplinas de Algoritmos e Engenharia de Software.
Para mais informações:
https://twitter.com/quinhodev
Introdução ao conceito de APIs RESTful. Características, boas práticas e o que é importante se levar em consideração durante o desenvolvimento de uma API RESTful.
Aborda utilização de verbos HTTP, códigos de status, headers, controles de hipermídia, formatos de representação entre outros.
Elementos essenciais de CSS para desenvolvedores web. Exemplos de páginas HTML com estilos definidos via CSS. Inclui botões, fontes, layouts, frameworks e bibliotecas. Vários links apontam para fontes adicionais.
Slides da apresentação HTM Básico para inciantes.
Este tutorial é destinado para inciantes em HTML e que pretende ter uma base de conhecimento mínimo para poder avançar seus estudos. O material faz parte de um contexto de uma apresentação, assim sendo, seria muito relevante assistir também sua apresentação.
Espero que gostem!
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
Essa apresentação visa dar enfase para quem deseja conhecer HTML5, CSS3 e o conceito de prototipagem, a partir disso foi possivel fazer grupo de trabalhos para criação de desenvolvimento de interfaces para sistemas web.
Slides do Workshop de HTML+CSS da Universidade de Verão de 2010 no Dep. de Eng. Informática em Coimbra.
O site de apoio está aqui: http://nei.dei.uc.pt/workshop-html-css/
2. Divs e Spans - (X)HTML
Bem vindos a aula de Div e Span...
Até agora conhecemos umas tags de nível de bloco
boxs umas tags de nível in-line, elementos h1, h2,
p=bloco=quebra acima e abaixo; b, em, citação=in-line=
sem quebra.
Div = elemento em bloco
Span = elemento in-line
São elementos genéricos, não foram criados para
atender a marcação semântica...
3. Divs e Spans - (X)HTML
A marcação semântica diz que devemos marcar os elementos de acordo
com o significado de cada um.
Paragrafo = <p>
Titulo = <h1>
Imagine que eu tenho uma estrutura que não tenho nenhuma tag
especifica pra marcar semanticamente aquele elemento. Ou seja,
Um elemento animais, comida, meio ambiente, eu não tenho uma tag
especifica pra aquela seção do portal, aquele grupo de conteúdos, ai
podemos utilizar as DIVs.
E se eu tiver uma linha, um texto de um registro e ele não tiver uma
tag que represente semanticamente o que eu quer representar (h1, p)
nos usamos os SPANs...
4. Divs e Spans - (X)HTML
Denominados container genéricos podemos ver alguns exemplos nos
seguintes sites...
Observe as seções... Topo, menu, conteúdo e rodapé... As seções da
página estão divididas....
5. Divs e Spans - (X)HTML
Imagine que nos temos dois grupos de conteúdo (Comida e
bebida). Como agrupamos as comidas e as bebidas....
Como estruturamos essa seção, quero colocar uma “borda em
torno da seção comida...
Podemos alterar a largura de cada elemento <p> </p> e os
outros?
Dessa forma necessitamos aplicar a cada parágrafo...
Porém ao usarmos Divs, podemos definir a largura dentro dela.
6. Divs e Spans - (X)HTML
Então criamos as divs necessárias, para comida e bebida
(<div style="width:250px;"> ... </div>)
Testar............
Com as divs podemos criar cabeçalhos,
Rodapés, menus e conteúdos...
Colocar cor de fundo: background-color:#CCFFDD
Testar............
Colocar em duas colunas: float:left;
Span é um container genérico em linha, eu
quero alterar o estilo sem dar ênfase, negrito (i).
<span color:blue;> repositor </span>
7. Divs e Spans - (X)HTML
Desenvolver uma pagina conforme a figura abaixo:
10. Divs e Spans - (X)HTML
<html>
<head>
<title></title>
<meta name="" content="">
<link href="stilo.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="tudo">
<div id="titulopagina">
<h1><center>Curso: Técnico em Informática - MC</center></h1>
<h2><center>Sistemas Web</center></h2>
<p>Autor: Nome do aluno. Também parte do título</p>
</div> <!-- fechando titulopagina -->
11. Divs e Spans - (X)HTML
<div id="menu">
<h2>Menu de opções:</h2>
<ul>
<li class="impar">Disciplinas</li>
<li>Alunos</li>
<li class="impar">Página com HTML5</li>
<li>Scripts com JavaScript</li>
<li class="impar">JQuery</li>
<li>CSS3</li>
<li class="impar">Links</li>
</ul>
<div style="width:180px; height:135px; border:3px solid red; padding:10px; margin:10px">
<img src="../imagens/montanhas.jpg" width="180px" />
</div>
</div> <!-- fechando menu -->
12. Divs e Spans - (X)HTML
<div id="conteudo">
<h2>Conteúdo principal da página</h2>
<p>
Projeto de desenvolvimento de uma página pode ser pessoal, ou de outra finalidade. Esta deve conter um layout
organizado da seguinte forma:
<br/><br/>
<ol>
<li>Título principal</li>
<li>Menu que pode ser superior, lado esquerdo ou lado direito, </li>
<li>Um arquivo CSS para controlar a aparência da página</li>
<li>Links para sites dinâmicos desenvolvido em php e jsp Quando desenvolver a página dinâmica incluir co
ntroles javascript e Ajax nas mesmas.</li>
<li>Link para os dados pessoais do aluno</li>
<li>Link para seu currículo</li>
<li>Conteúdo contendo as disciplinas que o aluno está cursando.</li>
<li>A estruturação do site deve ser por conta do aluno</li>
<li>Imagens ou galeria de imagens</li>
<li>Outros itens que acharem importantes.</li>
13. Divs e Spans - (X)HTML
</ol>
Use a imaginação no desenvolvimento da página especificando tudo o que será colocado na mesma.
(Verificar Menu dinâmico)
</p>
<p><a href="../../pasta/arquivo.doc">arquivo 1</a>
<a href="../../pasta/desenvolvendoPG.doc">arquivo 2</a>
<a href="../../pasta/Aula1 - html.pdf">arquivo 3</a>
</p>
<h3>Próxima página
<a href="newp.html">Nova página</a> </h3>
</div> <!-- fechando conteúdo -->
<div id="rodape">
<h2>Desenvolvido por: Alunos Téc. Informática </h2>
</div> <!-- fechando rodapé -->
</div> <!-- fechando tudo -->
</body>
</html>