Luan fonseca, 20 anos, programador desde 2010, Graduando em Enhgenharia de Software/UFRN, formado como Técnico de Infomática para Internet com ênfase WEB pelo IDM, Desenvolvedor de Software na empresa Multmeio, Trainee na empresa Júnior, 4soft e Entusiasta e evangelista Python e de todo o movimento Open-Source.
"É uma linguagem, comumente utilizada para se construir páginas na Internet, não tem poder computacional, apenas de Marcação"
"É uma linguagem, utilizada para adicionar estilo, foi criada com o intuito de melhorar as marcações e adicionar mais poder à exibição do HTML."
"É uma linguagem front-end, onde seu escopo natural é o Browser, atuando sobre os elementos HTML e Eventos que o Browser envia. Ela tem poder computacional, podendo além de manipular os elementos da página, também pode efetuar calculos e outras coisas que toda Linguagem de Programação pode fazer."
"Html, é muito flexível, baseado em tags, que por sua vez possuem atributos e esses atributos possuem valores."
<exemplo nome="Primeiro Exemplo" tipo="Texto">
Primeiro paragrafo do texto.
</examplo>
"Criamos uma tag chamada examplo , ela tem 2 atributos, um nome e um tipo ."
"Como liberdade nem sempre é bom, uma organização chamada W3C, se dispõe à classificar, organizar e manter as tags. Para que todos consigam entender o HTML de outras pessoas sem muitas dificuldades."
<p name="Primeiro Exemplo" class="Texto">
Primeiro paragrafo do texto.
</p>
+-----------------------------------------------------+ | | | Cabeçalho da Pagina | | | +-----------------------------------------------------+ | | | +--------------------+ +--------------------+ | | | Bloco Esquerdo | | Bloco Direito | | | +--------------------+ +--------------------+ | | | +----------------+ | | Lista de Itens | | | | | Paragrafo | | | * Item 1 | | | | | | | | * Item 2 | | | | | | | | * Item 3 | | | | | | | | * Item 4 | | | | +----------------+ | | * Item 5 | | | +--------------------+ +--------------------+ | | | +-----------------------------------------------------+ | | | Rodapé da Página | | | +-----------------------------------------------------+
Cabeçado == header
+-----------------------------------------------------+ | | | Cabeçalho da Pagina | | | +-----------------------------------------------------+
rodapé == footer
+-----------------------------------------------------+ | | | Rodapé da Página | | | +-----------------------------------------------------+
Bloco == section
+-----------------------------------------------------+ | | | +--------------------+ +--------------------+ | | | Bloco Esquerdo | | Bloco Direito | | | +--------------------+ +--------------------+ | | | +----------------+ | | Lista de Itens | | | | | Paragrafo | | | * Item 1 | | | | | | | | * Item 2 | | | | | | | | * Item 3 | | | | | | | | * Item 4 | | | | +----------------+ | | * Item 5 | | | +--------------------+ +--------------------+ | | |
Lista == li
+--------------------+ | Bloco Direito | +--------------------+ | Lista de Itens | | * Item 1 | | * Item 2 | | * Item 3 | | * Item 4 | | * Item 5 | +--------------------+
Criando a estrutura básica do HTML.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Cabeçalho da Pagina</h1>
</header>
<footer>
Rodapé da Página
</footer>
</body>
</html>
Adicionando o bloco esquerdo, <section>
...
<header>
<h1>Cabeçalho da Pagina</h1>
</header>
<section>
<section>
<h2>Block Esquerdo</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</section>
</section>
<footer>
Rodapé da Página
</footer>
...
Adicionando o bloco direito, <section>
...
</section>
<section>
<h2>Block Direito</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</section>
</section>
...
O CSS, é composto por propriedades, elas são definidas pela W3C e os navegadores tem que acompanhar, em tese. Com isso, essas propriedades dizem ao navegador como ele deve exibir o elemento (a tag). Existem inúmeras propriedades, veja algumas:
margin, width, height, display, padding, font, color, background, display, float, postion, border, text-decoration...
Utilizando o atributo style, passaremos os valores de estilo para os elementos.
...
<header>
<h1>Cabeçalho da Pagina</h1>
</header>
<section style="width: 800px;">
<section style="width: 300px; float: left">
<h2>Block Esquerdo</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</section>
</section>
<footer>
Rodapé da Página
</footer>
...
Utilizando o atributo style, passaremos os valores de estilo para os elementos.
... </section> <section style="width: 300px; float: left">
<h2>Block Direito</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </section> <div style="clear: both;"></div> </section> ...
O uso do estilo em cascata é um truque do CSS, para evitar duplicação de código, facilitar na organização, adicionar uma hierarquia de estilo... Com isso, você pode manipular os elementos HTML através de classes, IDs e outro atributos.
<head>
<style type="text/css">
.texto {
font-size: 10px
}
</style>
</head>
<body>
</section class="texto">
Esse texto tem fonte de 10px.
</section>
</body>
Criando estilos para nossa pagina
<head>
<style type="text/css">
.main-section {
width: 600px
}
.small-section {
width: 300px;
}
.pull-left {
float: left
}
.clear {
clear: both;
}
</style>
</head>
Substituindo estilos inline por suas classes.
- <section style="width: 600px;">
+ <section class="main-section">
- <section style="width: 300px; float: left;">
+ <section class="small-section pull-left">
- <div style="clear: both;"></div>
+ <div class="clear"></div>