Curso Html e CSS

Páginas

Praticando Módulos 2 e 3

Link para fora do site, aplicando o target _blank Vamos ao Google?. Não, vamos voltar ao início. Passe o mouse sobre o link para ver o título.

Aplicando links com imagens, ou com qualquer outra coisa. Vejamos: Logo Qualquer

Essa imagem não combina com este site. FAzer o quê :/

Outra forma de fazer links é através do ID. Colocamos ID's em cada área do site, para então puxá-lo com links. Por exemplo, vejamos os títulos abaixo:
Este link irá levá-lo mais abaixo na página, pois esta "chamando" o título h3 Tabelas no html. Pelo ID.
Aplicando estilo css no link. Usando a class para dar estilo somente nos links que tiverem a class especificada. Neste caso, vou usar a class="link". Este é um exemplo de link com efeitos css.. Aplicamos uma cor, um tamanho de fonte e o hover para mudar de cor ao passar o mouse. E um text-decoration none, para remover aquela linha padrão que aparece embaixo de todo link.

Formatação de Textos

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum tempore excepturi minima dolorum voluptates fugit vitae voluptatum eligendi, fugiat sequi aliquid repellat itaque quia iste. Esse totam at tempora repudiandae!

Este negrito é sem semântica. Usando a tag B.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores possimus quod iure animi facilis, doloremque id dolorem eum, excepturi sapiente maxime laborum iste nulla autem incidunt consequuntur quo provident nisi.

Esse negrito é usando a tag strong, que possui semântica, significa que o google vai saber que isso é mais importante que o restante do texto, uma forma de destacar essa frase.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. At quibusdam ut accusantium commodi nobis, ducimus consequuntur! Dolores placeat consectetur, eius magnam minus quis. Optio perspiciatis deserunt minus? Totam, consequuntur vero.

Itáilico com tag i, sem semÂntica.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, at. Earum quam possimus omnis architecto explicabo? Reiciendis consectetur expedita obcaecati consequatur vero aperiam corrupti aspernatur aliquam voluptates libero! Quibusdam, fugit.

Agora um texto em itálico com a tag "em" que possui semântica.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. A eveniet ex earum quidem repellendus dolor praesentium, at in repudiandae! Accusamus quibusdam dolores veniam aliquid ipsam? Sunt adipisci quos iusto aspernatur.

Agora um texto com tag small que serve para diminuir o texto.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, ipsam! Sequi blanditiis laboriosam recusandae libero quisquam odit laborum eum dignissimos mollitia natus, esse cupiditate facere, fugiat veritatis adipisci quam quasi?

Tag del em ação.

Lorem ipsum dolor sit^amet, consectetur adipisicing elit. Sit error deleniti magnam amet id dolore iste officiis temporibus!^Maiores odio voluptatem voluptas impedit eum illum rerum eius architecto blanditiis^ipsam.

Tag sup em ação.

Lorem ipsum_dolor sit, amet consectetur adipisicing elit. Labore iure perferendis, laboriosam recusandae omnis at quam veritatis qui atque quod, unde itaque molestias placeat repudiandae voluptates officia dolor? Voluptatibus,_architecto!

Tag sub em ação.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut eius temporibus excepturi, maiores a recusandae cumque quo totam delectus reprehenderit voluptas, neque quos aperiam magnam quis eaque. Rerum, qui saepe!

Tag mark em ação.

Formatação de Textos no css

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam eaque tempore, vel, beatae dicta voluptatem repudiandae, alias nesciunt aut aperiam quisquam voluptas! Nobis ipsum neque esse dicta sint quam deserunt?

Mudamos a cor do texto com css.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem provident eius laboriosam ipsum, impedit quidem doloribus debitis consequatur cupiditate, expedita exercitationem aut optio natus dolorem, iste sed voluptas? Dolor, reprehenderit!

Mudamos o tamanho do texto com css.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit nostrum deleniti pariatur quisquam rem provident quam? Nihil quasi aperiam quas laborum consequuntur tenetur, incidunt itaque explicabo! Reprehenderit dolores minima commodi.

Mudamos o estilo do texto com font-weight:bold no css.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus minima deleniti distinctio necessitatibus fugiat aspernatur? Aspernatur blanditiis ipsa omnis! Quaerat veritatis repellat accusantium provident voluptate modi laudantium sequi quam non?

Mudamos a fonte família. É um grupo de fontes. Para o caso de um computador que não tenha a fonte principal, exiba a fonte secundária na lista e assim por diante. Podemos criar uma família colocando uma fonte atrás da outra separada por vírgula.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque cum, iste ratione itaque unde voluptatum debitis expedita, sint, corrupti rem quo. Dicta dolore quos recusandae numquam dolores animi corrupti aut.

Usamos o text-align para centralizar o texto. Também poderia colocar na direita, esquerda e justificado.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Excepturi vero illum voluptate consequatur ea nemo sapiente consequuntur eligendi quam, deleniti voluptas, eos harum similique dolores est nesciunt! Earum, vero temporibus.

Usamos o text-align para justificar o texto.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto dignissimos officiis quod laborum necessitatibus quae tempora suscipit. Sed necessitatibus perspiciatis officiis asperiores tempore cum hic ratione adipisci ipsam, ut voluptate.

Usamos o text-decoration: line-through.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum minima animi at delectus itaque iure est enim saepe fugiat reiciendis nihil suscipit consequuntur tempora, expedita ratione, sequi cumque sit quod?

usamos o text-transform: uppercase.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est, veniam velit voluptatem explicabo eaque vitae iure autem tempora in. Est iste amet commodi quisquam unde! Aliquam quod tenetur consequuntur blanditiis?

text-shadow: 0px 2px 3px red; Esses 4 itens são obrigatórios. O primeiro, é o movimento da sombra para a direita. O segundo, é o movimento para baixo. E o terceiro é o esfumaçamento da cor. O ultimo item é a cor.

Google.

Escolha a fonte.

Selecione a opção de customização.

Escolha a forma de embed

Copie o link e cole no head do html

Assim o site irá carregar essa fonte quando for acessado.

Comentário no html

Tag de comentário é para adicionar informações internas no html. Usamos assim:
"< ! - -" tudo junto e para fechar: "- - >" Tudo junto sem aspas.

Listas no html

Lista de Compras

Café
Leite
Arroz
Bolacha

Ol é a tag para lista ordenada.

Usando o type
é possível mudar
a ordem da lista de número para letra
ou para algarismo romano

podemos usar < ol start="34" >
para começar a lista
de outro número que não seja 1

Lista desordenada, usamos o Ul.

Usamos li para iten list
usamos style="list-style-type:disc"
Para aparecer um disco, nos itens da lista
poderia usar "square" no lugar de disc
square é quadrado
none seria para uma lista sem marcador

Criando uma lista dentro de outra lista

Marcas
- Fiat
- Ford
- Kia

Por padrão os marcadores mudam para que tenha uma diferença entre uma lista dentro da outra.

TAbelas no html

Exemplo de Tabela 1

1	2
3	4
5	6

Exemplo de tabela 2.

a	b	c	d
1	2	3	4
A	B	C	D
I	II	III	IV

Exemplo de tabela 3.

Fruta	Preço
maça	R$ 10,00
Pera	R$ 5,00
Melancia	R$ 20,00
Abacate	R$ 8,00
Melão	R$ 7,00

Tabela sem formatação para aplicar o css.

Gênesis	Êxodo	Números
Capítulo 1	Capítulo 1	Capítulo 1
Capítulo 2	Capítulo 2	Capítulo 2
Capítulo 3	Capítulo 3	Capítulo 3
Capítulo 4	Capítulo 4	Capítulo 4
Capítulo 5	Capítulo 5	Capítulo 5
Capítulo 6	Capítulo 6	Capítulo 6
Capítulo 7	Capítulo 7	Capítulo 7

Tabela 2 sem formatação para aplicar o css.

Gênesis	Êxodo	Números
Capítulo 1	Capítulo 1	Capítulo 1
Capítulo 2	Capítulo 2	Capítulo 2
Capítulo 3	Capítulo 3	Capítulo 3
Capítulo 4	Capítulo 4	Capítulo 4
Capítulo 5	Capítulo 5	Capítulo 5
Capítulo 6	Capítulo 6	Capítulo 7