Curso HTML5 e CSS3 I: Suas primeiras páginas da Web / https://cursos.alura.com.br/course/introducao-html-css
Doctype é uma instrução de qual tipo de documento HTML iremos trabalhar na pagina web.
Doctype serve para definir a versao do HTML, como HTML 4.1 e HTML5
Para aplicar basta por...
<!DOCTYPE html>
Primeiro de tudo, antes da tag <html>
Colocamos todo o conteudo do site dentro de algumas tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titulo da pagina</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
</body>
</html>A tag HTML informa ao navegador que este é um documento HTML
Representa também a raiz de um documento HTML
É um receptiente para outros elementos, exceto para o <!DOCTYPE>
<html>
Conteudo
</html>A tag HEAD reprensenta um contêiner para conteudos introdutorios e conjuntos de links da sua pagina.
Informando icones para pagina , titulos e autorias.
<html>
<head>
<meta name="description" content="Descrição do meta dentro da tag HEAD">
<meta charset="utf-8">
<title>Titulo site</title>
</head>
</html>A tag BODY é o corpo do elemento. onde vai conter todo o seu codigo de uma estrutura html. Como texto, hiperlinks, imagens, tabelas, listas etc.
<html>
<head>
<meta name="description" content="Descrição do meta dentro da tag HEAD">
<meta charset="utf-8">
<title>Titulo site</title>
</head>
<body>
The content of the document......
</body>
</html>A tag "rel" define um atributo na qual aquela classe ta se referindo
Neste exemplo, o rel indica que o documento referenciado é uma folha de estilo:
<link rel="stylesheet" href="css/estilo.css">TAG LINK
<link> : define um link entre um documento e um recurso externo, usada para chamar uma folha de estilo externas.Exemplo da tag Link
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>O atributo href especifica o URL da página para onde o link vai ou a folha de estilo externa.
Neste Exemplo o href mostra onde o arquivo estilo.css está.
<link rel="stylesheet" href="css/estilo.css">Na pasta CSS onde a folha estilo.css se encontra
1.6 Atribuindo Tag META > charset="utf-8" (indicando que nossa página usa a codificação de caracteres UTF-8)
TAG META
<meta> : Fornece dados sobre o documento HTML.
Geralmente sao usados para especificar as descrições da pagina, as palavras-chaves e o autor do documento.Mais Exemplos de metas:
<head>
<meta charset="UTF-8">
<meta name="description" content="Curso Alura HTML">
<meta name="keywords" content="HTML5,CSS3,JavaScript">
<meta name="author" content="Joey Andrade">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> TAG TITLE
<title> : Define um titulo para seu documento HTML, é necessária em todos os documentos HTML.
Fornece um título para a página quando ela é adicionada aos favoritos.
Exibe um título para a página nos resultados do mecanismo de pesquisa
Nota que você NÃO pode ter mais de um elemento <title> em um documento HTML.Exemplo da tag Title
<head>
<title>Minha pagina Web</title>
</head>A tag "p" usada geralmente para criaçoes de paragrafos, como o exemplo abaixo.
A tag <p>Paragrafo</p>Podemos atribuir varios paragrafos ao conteudo HTML
Ja com a tag "strong" define um texto, conteudo importante, alem de deixar o texto em "NEGRITO" por assim dizer..
<strong> Conteudo importante da pagina e negrito </strong>A tag "em" enfatiza um texto da pagina HTML, alem de deixar o texto "ITALICO" por assim dizer.
<em> Conteudo infatizado e italico </em>Criando documento de Blog e index... Verificar no repositorio do github
Entendo a criação de estilo inline onde voce pode por um estilo na propria linha html
Exemplo :
<h1 style:font-size:16px"> Bom Trabalho </h1>Você também pode por um estilo para um seletor especifica como o exemplo abaixo:
<style type="text/css">
h1 {
font-size: 16 px;
}
</style>Assim todos os atributos que possuir a tag H1 vai ter o tamanho da fonte de 16px.
Podemos atribuir um elemento inline na tag "p" ou especifica-la na folha de estilo usando.
<style type="text/css">
p {
font-size:16px;
}
</style>OBS: Tema de um conteudo do alura.
Como dito, voce pode criar um novo arquivo, nomear e por a extensão .css no fim do arquivo.
style.css
E por fim chamar esse arquivo dentro do seu documento HTML utilizando a tag rel que mostramos acima.
Semanticamente falando ao usar o link para chamar a sua folha de estilo dará a voce mais organizacão, e nao deixa seu documento HTML sujo e bagunçado com varios codigos css, assim facilita mais na hora de trabalhar o estilo do seu site, vamos dividir as coisas e deixar mais organizados, por favor ne. 😛
Para chamar sua folha de estilo basta fazer igual o exemplo abaixo:
<link rel="stylesheet" href="css/estilo.css">2.6 Adicionando e alterando fontes a elementos de texto, com fonte principal e fontes secundaria(Caso o usuario nao tiver a primeira fonte)
Podemos atribuir varios tipos de fontes para o nosso site... a principal e a secundaria..
<style type="text/css">
h1 {
font-family: "Time New Roman" serif;
}
</style>Como o exemplo acima, vimos que a fonte "Time New Roman" é a primeira fonte a ser chamada ao vizualizar nosso site. Caso o nosso usuario nao tiver essa fonte ele entao entrará no...
Fonte Secundaria. que seria qualquer fonte do tipo serif... ou outra que você definir.
As cores RGB = RED, GREEN e BLUE que no português seria, Vermelho, Verde e Azul.3
Apartir dessa combinação é possiveis criar diversas cores para seu conteudo HTML com numeros que varia de 0 a 225.
O branco é quando se tem o maior valor para as 3 cores, ou seja, 255 para Red, Green e Blue. E o preto é formado quando se tem o valor 0 para essas 3 cores.
Assim sendo, quanto maior o valor mais claro fica e quanto menor o valor mais escuro fica.
<style type="text/css">
body {
background-color: RGB(255, 255, 255);
}
</style>Além disso a outras formas mais faceis de definir uma cor a sua pagina HTML.
<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>Uma cor pode ser especificada usando um valor hexadecimal
Aqui voce encontra varias cores em Hexadecimal o nome e o formato em RGB: Tabelas de cores em Hexadecimal
e por fim podemos usar nomes em Inglês da propria cor.
<style type="text/css">
body {
background-color: blue;
}
</style>Aprofundamos mais no codigo HTML. Abaixo outras formas de ultilizar tags no nosso HTML.
Quando queremos atribuir algum link em nossa pagina HTML, onde ao clicar ser direcionado a outra pagina temos duas formas de fazer esse caminho. Usamos um atributo de link como o exemplo abaixo.
<a href=""> (links absolutos , links relativos) </a>A propriedade "a href" especifica um link a seu texto.
como vimos no exemplo acima temos link Absolutos e links relativo. Abaixo temos 2 exemplos. olhem e veja a diferença.
<a href="http://www.meusite.com.br/caminho.html">Home</a><a href="/caminho.html">Home</a>Uma coisa otima do HTML é a possibilidade de adicionar imagem em nosso documento HTMl.
A Tag "IMG" define a imagem em nossa pagina HTML. Tendo com mais duas propriedades "OBRIGATORIA" que sao o "src" e o "alt".
Como por exemplo:
<img src="exemplo de como colocar" alt="Exemplo da tag img">
Nota q é uma Tag onde nao é nescessario fechar com </img>
A imagem acima foi atribuida da mesma forma como o exemplo de codigo mais acima, basta por o link da pagina. Como vimos antes podemos por links relativo ou absoluto, nesse caso a imagem esta com link absoluto.
Como o titulo ja fala um pouco da TAG "alt" notamos entao que.
O atributo alt é necessário porque ele especifica um texto alternativo para uma imagem se a imagem não puder ser exibida.
O atributo alt fornece informações da imagem para nosso usuario caso ele por algum motivo não puder visualizá-lo (devido à conexão lenta, a um erro no atributo src ou se o usuário usar um leitor de tela).
Vimos muitos exemplos da TAG "IMG" COM "ALT" aqui vai mais um.
<img src="caminhoDaImagem" alt="Imagem sobre tal coisa">Temos uma tag chamado "blockquote" que especifica uma seção na qual foi citado de uma outra fonte.
<blockquote> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </blockquote>a imagem abaixo vai te da uma deia parecida.
Quando usamos a tag "blockquote", provavelmente também usaremos a tag "cite".
A Tag "cite" ela define um titulo.
Titulo de uma obra, trabalho, um livro uma musica, filmes e etc...
Um Exemplo:
<p><cite>O Poderoso Chefao</cite>é um filme norte-americano de 1972.e etc e etc....</p>A semântica no HTML é muito importante. Tem como objetivo descrever significado do conteudo no documento HTMl. tornando mais faceis para outros programadores que forem ler seu codigo HTML..
O Elemtno "main" especifica o conteudo principal do seu documento HTML. E de maior relevância dentro da sua pagina, para ser considerada bem construida. tem como apresentar apenas um conteudo principal.
Exemplos de de como usar a tag "main"
<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><header>: cabeçalho da página ou de uma região dela.
Você pode ter vários elementos "header" em um documento
<article>
<header> <<<-------
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here</p>
</header> <<<-------
<p>Lorem Ipsum dolor set amet....</p>
</article><footer>: A tag "footer" define um rodapé para um documento ou seção.
Você pode ter vários elementos "footer" em um documento.
Como Exemplo:
<footer>
<p>Postado Por: Joel</p>
<p>Contato: <a href="mailto:exemplo@email.com">
exemplo@email.com</a>.</p>
</footer><aside>: conteúdo auxiliar ao conteúdo principal, como links relacionados ao conteúdo
define algum conteúdo além do conteúdo em que é colocado.
Como Exemplo:
<p>Fui para Bahia de carro com minha familia. tem a gruta é tudo lindo e maravilhoso ...</p>
<aside>
<h4>Bom jesus da lapa - Bahia</h4>
<p>Bom jesus da lapa é uma otima cidade da Bahia..</p>
</aside><article>: conteúdo que, por si só, já tem um sentido completo, como um post de um blog ou uma notícia.
especifica um conteudo como exemplo:
<article>
<h1>Meu Titulo</h1>
<p>Minhas Informaçoes</p>
</article><section>: parte/seção de uma página ou texto
Define seções em um documento, como capítulos, cabeçalhos, rodapés ou quaisquer outras seções do documento.
Como Exemplo
<section>
<h1>Titulo</h1>
<p>Aqui Explicamos o que é sobre o titulo, ou outras coisas ..</p>
</section>uma imagem de exemplo de como podemos usar esses conteudos:
Quando quisermos criar uma lista temos uma tag especifica para esses tipos de coisa que é a tag "ul"
Essa tag define uma lista não ordenada.
Use a tag "ul" junto com a tag "li" para criar listas não ordenadas
A Tag "li" define um item da lista
Como Exemplo
<ul>
<li>Cafe</li>
<li>Leite</li>
<li>Suco</li>
</ul>A imagem define melhor o que quero dizer:
ENTIDADES no HTML são simbolos que desejamos usar em nosso HTML..
São usadas para exibir caracteres reservados em HTML
Não basta apenas usar um atalho do teclado para por esse simbolo como > < © e etc. Ou ate mesmo pode nao conter no teclado e entao usamos os codigos.
E mais facil voce por em codigo como o exemplo abaixo, assim o navegador vai interpretar melhor:
<footer>
Todos os Direitos Reservados ©
</footer>
ou
<footer>
Todos os Direitos Reservados ©
</footer>
Ficaria Assim: Todos os Direitos Reservados ©Imagem de Exemplo
Aqui a uma lista grande de varios codigos de entidades
O que são seletores de descendência Explicar exemplo da "nav a, main h1" Mostrar exemplo com código
Explicar como fazer isso (pode ser por texto mesmo)
Mostrar o comando no chrome para fazer isso (ctrl+...)
Explicar que da para mudar o html e css da página local Explicar como fazer isso
Explicar o que é o inspetor Explicar como fazer isso
Explicar como fazer isso e as vantagens de usar o inspetor
Explicar como fazer isso
Explicar como fazer isso
Margin: controla o espaço entre elementos de blocos.Padding: controla o espaço entre o conteúdo de um elemento e sua borda.
Exemplo com código Colocar uma imagem explicando isso
Explicar o que é width Explicar o que é Height Exemplo com código
.minhaDiv {
height: "4324"
}5.1 Propriedades Box-Sizing controla apenas como a largura e a altura de um elemento deve ser calculada.
Explicar o que é box-sizing Colocar uma imagem que explica Colocar exemplo com código
Explicar o que é Line-sizing Colocar uma imagem que explica Colocar exemplo com código
Explicar o que é essas bordas Colocar exemplo com código Colocar uma imagem de como fica
Explicar que temos um estilo padrão do css no navegador Pq temos que resetar? Importância disso Como fazer (para fazer isto basta criar um ....) Exemplo de código
Pq a ordem importa Mostrar um exemplo de dando merda
O que é conflito no css Como eles ocorrem Como evitar
Explicar um pouco melhor o que ele disse aqui
O que é o display Exemplo
Qual a diferença entre inline, block, inline-block, none
Exemplo com código
Quais novas funcionalidades? Explicar cada uma delas Colocar código
Qual a diferença entre ID e CLASS? Pq usamos cada uma ? Exemplo de código css
Explicar um pouco mais sobre o conflito
div {
background-color: red;
}
div {
background-color: blue;
}Explicar cada um deles Colocar código
O que é isso exemplo
.github {
background-image: url(github.png);
}Pq colocou o displayu block ? Explicar direitin e dar exemplo de código
Explicar melhor o que é essas tretas
Eplicar melhor aqui cada um deles individualmente Exemplo de código
O que são conteudos flutuantes Exemplo de código
Explicar melhor float right e left Colcoar imagem de como fica Colocar código exemplo
O que são essas coisas Exemplo com imagem colocar código exemplo
Colocar explicação Colocar o pq usamos isso (quando que é útil) Exemplo do código exemplo imagem
Explicar cada uma delas Mostrar imagem Exemplo de código
Explicar melhor aqui mostrar imagem Exemplo de código
Explicar melhor o absolute Mostrar códigoi MOstrar imagme
Explicar melhor Mostrar código Mostrar imagem
Explicar melhor Explicar o que é cada um (top = cima, left...)
##12.2 Criando a pagina "Portifolio"