Htmlbasico
-
Upload
fernando-vargas -
Category
Documents
-
view
375 -
download
0
Transcript of Htmlbasico
![Page 1: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/1.jpg)
HTML/CSS
![Page 2: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/2.jpg)
Dados Pessoais
Nome: Fernando Vargas
Curso: Sistemas de Informação
Twitter: twitter.com/fernandopfv
Blog: www.sociedadeeinformatica.blogspot.com
E-mail: [email protected]
Exemplo de site desenvolvido:
www.elos-eventos.com.br
![Page 3: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/3.jpg)
Estrutura HTML<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
![Page 4: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/4.jpg)
Algumas Tags Importantes<!-- comentar codigos no código html -->
<!– border serve para colocar borda na tabela -->
<table border=“1”>
<tr> <!-- Representa uma linha da tabela -->
<td>
Representa célula(coluna) da tabela
</td>
</tr>
</table>
![Page 5: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/5.jpg)
Esta tag é inserida dentro das tags “head” e serve
para referenciar um arquivo externo.
<link href=“css.css"rel="stylesheet“ type="text/css">
![Page 6: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/6.jpg)
Tags <marquee>
Esta tag serve para exibir um letreiro
<blink>
Para faze o texto ficar piscando
![Page 7: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/7.jpg)
Fazendo links
<a href=“#”>Nome do link </a>
![Page 8: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/8.jpg)
Ancora Exemplo de Ancora em HTML
Implementação de Ancora:
<a href="#nome da ancora">Aqui voce coloca todo o texto desejado</a>
<A NAME="nome da ancora aqui"></A>
![Page 9: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/9.jpg)
Tags para Listas<ul> <!-- Cria uma lista -->
<li> <!– Cria item uma lista -->teste 1
</li><ul> <!– Para subitens de uma lista-->
<li>teste 2
</li></ul>
</ul>
![Page 10: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/10.jpg)
Tag DIVO elemento div foi criado com o HTML 4 com a
finalidade de fornecer um mecanismo genérico
para agrupar e prover estrutura aos documentos.
Alguns recursos desta tag é a facilidade de
trabalhar estilos.
É utilizado no CSS para que cada seção tenha
atributos diferenciados
![Page 11: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/11.jpg)
Estilos É a abreviatura para Cascading Style Sheets.
— Folha de Estilos em Cascata.
define o layout de documentos HTML.
![Page 12: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/12.jpg)
Diferença entre HTML e CSS HTML é usado para estruturar conteúdos. CSS é usado
para formatar conteúdos estruturados.
![Page 13: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/13.jpg)
Benefícios CSS é uma revolução no mundo do web design. Os
benefícios concretos do uso de CSS incluem:
controle do layout de vários documentos a partir de uma simples folha de estilos;
maior precisão no controle do layout;
aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.);
emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.
![Page 14: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/14.jpg)
Estrutura do CSS Ex:
body {
background-color: #FF000;
}
![Page 15: Htmlbasico](https://reader035.fdocumentos.tips/reader035/viewer/2022081404/5597b0da1a28abb12b8b45d4/html5/thumbnails/15.jpg)
Exercicio 1 Fazer um página contendo dois links internos um com uma
lista com subitens e o outro link com textos e ancoras.
O Título do corpo da página precisa ter um letreiro piscante.
Para facilitar o trabalho copiem o texto da web porém a ancora precisa ser feita.
As novas páginas deverão ter opção de voltar para a página anterior.
No final da página inicial terá um letreiro com o seguinte texto: Fim da Página Index
A página inicial deve estar centralizada.