Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Apresentação trabalho
Compartilhar
Prévia do material em texto
Programação web
Alunos:
José Eduardo
Luan
Pablo
As listas são muito importantes quando queremos listar alguns itens no site e também para a criação de menu de navegação.
As listas ordenadas, como o próprio nome já diz, os itens serão listados de forma ordenada, seja por número, letra, ou algarismos romanos.
Uma lista ordenada começa com a tag “<ol>” e seus respectivos itens da lista ficam dentro da tag “<li>”. Por padrão as listas ordenadas são ordenadas por números, mas também iremos ver como ordena-la por outros métodos.
listas
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Listas em HTML</title>
</head>
<body>
<ol> ou <ol type “a”>
<li>Nome</li>
<li>Numero</li>
<li>Endereço</li>
<li>Pais</li>
</ol>
</body>
</html>
Página:
Nome
Numero
Endereço
Pais
a. Nome
b. Numero
c. Endereço
d. Pais
Já as listas por definição são um pouco mais diferente, elas são representadas pela tag <dl>, seguido de <dt> e <dd>, ficando assim no código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Listas em HTML</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>HTML BASICO</dd>
<dd>HTML AVANÇADO</dd>
<dt>PHP</dt>
<dd>PHP BASICO</dd>
<dd>HPHP INTERMEDIARIO</dd>
<dd>HPHP AVANÇADO</dd>
</dl>
</body>
</html>
Pagina:
HTML
HTML BASICO
HTML AVANÇADO
PHP
PHP BASICO
PHP INTERMEDIARIO
PHP AVANÇADO
Listas desordenadas Você pode criar uma lista desordenada com a ajuda da tag <ul> . As listas desordenadas são de três tipos: quadrados, pontos e círculos. O valor padrão que a maioria dos navegadores dão são pontos.
Contexto:
<h4>Lista de Compras</h4>
<ul>
<li>Leite</li>
<li>Queijo</li>
<li>Ovos</li>
<li>Açúcar</li>
</ul>
Lista de definições você pode fazer uma lista de definições usando a tag <dl>; . Essa lista irá dar a palavra, uma definição. A palavra é indicada em negrito, assim que ficará mais evidente.
<dl>
<dt>Queso</dt>
<dd>Palavra espanhola para queijo.</dd>
<dt>Ordenador</dt>
<dd>Palavra espanhola para computador.</dd>
</dt>
Tabelas
As tabelas são muito importantes para o designer de uma home-page. Com elas pode-se fazer alinhamentos que dificilmente seriam possíveis com simples comandos. A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais profissional e o usuário possa navegar de forma mais eficiente, pois os objetos podem estar melhor posicionados na home-page.
O comando para se inserir uma tabela é <TABLE>; para iniciar uma linha devemos introduzir a tag <TR> e para uma célula (alguns preferem dizer coluna) <TD>. Todos estes comandos são encerrados como </TABLE>, </TR> e </TD> respectivamente.
Código:
<HTML>
<HEAD>
<TITLE>Criando Tabelas</TITLE>
</HEAD>
<BODY>
<CENTER><FONT COLOR=BLUE SIZE=6>TABELA</FONT></CENTER>
<BR>
<TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1>
<TR> <! Cria a primeira linha da tabela>
<TD>PRIMEIRA COLUNA </TD> <! Aqui foi criada uma célula>
<TD>SEGUNDA COLUNA </TD>
<TD>TERCEIRA COLUNA </TD>
</TR> <! Fecha a primeira linha da tabela>
<TR> <! Abre a segunda linha da tabela>
<TD> PRIMEIRA COLUNA</TD>
<TD>SEGUNDA COLUNA </TD>
<TD>TERCEIRA COLUNA </TD>
<TR> <! Encerra a Segunda linha da tabela>
</TABLE> <! Encerra a tabela>
</BODY>
</HTML>
<TABLE BORDER=2>
<TR>
<TD WIDTH=100> WIDTH=100</TD>
<TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD>
</TR>
</TABLE>
Para alterar o largura de uma célula da tabela basta acrescentar o parâmetro WIDTH dentro da tag <TD>. Exemplo1:
Outro atributo que podemos ter nas tabelas é mudar a sua cor de fundo, isto se torna particularmente útil quando se quer dar destaque a uma célula em especial.
<TABLE BORDER=0>
<TR>
<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
</TR>
<TR>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
Um outro uso bastante interessante de tabelas é como moldura para alguma figura. Para isto basta você iniciar uma tabela e definir um valor para BORDER.
<TABLE BORDER=5>
<TR>
<TD> <IMG SRC=NOME DA FIGURA> </TD>
</TR>
</TABLE>
Este exemplo demonstra como formatar um documento HTML com a informação de estilo adicionada à seção <head>.Quando um navegador lê uma folha de estilo, ele formata o documento de acordo com ela. Há três maneiras de inserir uma folha de estilo externa, interna e local (inline).
estilos
Uma folha de estilo externa é ideal quando o estilo é aplicado em muitas páginas. Com uma folha de estilo externa, você pode mudar a aparência de um site Web inteiro pela mudança de um arquivo. Cada página deve vincular-se à folha de estilo usando a tag <link>. A tag <link> vai dentro da seção head.
<head>
<link rel="stylesheet" type="text/css"
href="meuestilo.css">
</head>
Uma folha de estilo interna deve ser usada quando um documento específico tem um estilo único. Você define estilos internos na seção head com a tag <style>.
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
Um estilo local (inline) deve ser usado quando um estilo único deve ser aplicado a uma única ocorrência de um elemento.
Para usar estilos locais (inline) você usa o atributo de estilo na tag relevante. O atributo de estilo pode conter qualquer propriedade CSS.
<p style="color: red; margin-left: 20px">
Este é um parágrafo
</p>
A semântica será importante para que o seu conteúdo tenha sentido mesmo que não tenha nenhum estilo visual. Semântica é o significado da coisa! É graças a semântica que sua página vai indexar legal ou não nos buscadores. Não somente por isso, a semântica ajuda na acessibilidade de sua página ou aplicação.
SemÂntica
O <header> é utilizado para representar o cabeçalho de um documento ou seção declarado no HTML. Nele podemos inserir elementos de <h1> a <h6>, até elementos para representar imagens, parágrafos ou mesmo listas de navegação.
<header>
<h1>Título da página</h1>
<h2>Subtítulo da página</h2>
</header>
<section>
<h3>Seção 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ...</p>
</section>
O elemento <section> representa uma seção dentro de um documento e geralmente contém um título, o qual é definido por meio de um dos elementos entre <h1> e <h6>. Podemos utilizar o <section>, por exemplo, para descrever as seções/tópicos de um documento.
<nav>
<ul>
<li><a href=”#”>pagina 1</a></li>
<li><a href=”#”>pagina 2</a></li>
<li><a href=”#”>pagina 3</a></li>
<li><a href=”#”>pagina 4</a></li>
</ul>
</nav>
O elemento <nav> é utilizado quando precisamos representar um agrupamento de links de navegação, que, por sua vez, são criados com os elementos <ul>, <li> e <a>.
O elemento <main> especifica o conteúdo principal e, consequentemente, de maior relevância dentro da página. Para ser considerada bem construída, uma página deve apresentar apenas um conteúdo principal.
<main>
<h2>Titulo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ...</p>
<article>
<h3>Subtítulo</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum...</p>
</article>
</main>
Meta tags são linhas de código HTML ou "etiquetas" que, entre outras coisas, descrevem o conteúdo do seu site para os buscadores.
METAS TAGS
As meta tags devem ser incluídas no seu código HTML, dentro da tag <head>
<html>
<head>
<title> Aprendendo sobre as meta tags </title>
<meta name="author" content="Erika Sarti">
<meta name="description" content="Meta Tags - O que são e como utilizá-las">
<meta name="keywords" content="sites, web, desenvolvimento"> </head>
...
Mais do que divulgar seu site nos buscadores
As meta tags não servem só para divulgar seu conteúdo. Basicamente, a função delas é fornecer informações adicionais sobre seu site.
content-language = Especifica a língua primária da página.
<meta http-equiv="content-language" content="pt-br">
content-type= Especifica o tipo de conteúdo da página e o conjunto de caracteres que ele usa.
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
author = Por meio das meta tags, você também pode declarar sua autoria sobre a página, "assinando" seu código fonte.
<meta name="author" content=”Eduardo Azevedo">
reply-to = Especifica um endereço de e-mail para entrar em contato com o responsável pelo site.
<meta name="reply-to" content=”eduardo@astertelecom.com.br">
generator = Especifica o programa que construiu a página.
<meta name="generator" content="Microsoft FrontPage 5.0">
redirecionando o visitante para outra página = Esse redirecionamento pode ser feito com meta tag, por meio de uma única linha:
<meta http-equiv="refresh" content=" 5 ;url=http://www.novosite.com/">
As meta tags são interessantes para o seu site, mas não são o mais importante. Você deve priorizar a disponibilização de bom conteúdo e, claro, evitar enganar ou confundir seu usuário. Acreditar que somente um bom trabalho em meta tags será o suficiente para o seu site ser bem indexado é um erro, mesmo porque, conforme já informado no texto, os buscadores estão cada vez mais preparados para identificar "truques".
Existem duas formas para inserirmos código JavaScript em nossa página, inline ou através de arquivos externos.
Mudança de estrutura com javascript
Inline
Para inserirmos o código inline basta colocarmos nosso código JavaScript dentro da tag <script></script> diretamente na página HTML
<head>
<meta charset="utf-8">
<title>
Ambiente Javascript
</title>
<script> alert("Olá mundo!"); </script>
</head>
Outra forma que temos para adicionarmos JavaScript em nossa página é por meio de arquivos externos.
Para isso precisamos criar um novo arquivo apenas com nosso código. É uma convenção usar a extensão .js para facilmente identificarmos que se trata de código JavaScript.
Precisamos definir no atributo src qual o caminho para o arquivo. No exemplo ao lado o arquivo javascript.js está salvo na mesma pasta que está nosso index.html.
Muitas vezes vão ver o script externo ser carregado com o atributo type preenchido com type="text/javascript", esse atributo é usado no HTML4 para definirmos o tipo do script que estamos carregando. No HTML5 não é necessário preencher ele, quando não colocamos ele o navegador assume que o código é JavaScript.
Um detalhe importante, quando você carregar um arquivo externo você não pode colocar junto dele código inline como no exemplo abaixo
Continue navegando
Materiais relacionados
Perguntas relacionadas
Compartilhar