🚀

CSS/HTML
Exam 98-383: Introduction to Programming Using HTML and CSS - Learn
Languages: English, Japanese, Chinese (Traditional), Chinese (Simplified), Spanish, Portuguese
(Brazil), French, German, Korean Candidates for this exam should be able to recognize and write
syntactically correct HTML and CSS, structure data using HTML elements, and create and apply
[Link]

HTML
É uma linguagem de marcação

tags de tabela(table tags)

h1-h6

p define um parágrafo

br Insira uma única quebra de linha simples em um texto, tag vazia não posui final

hr para definir quebras temáticas no conteúdo. Exibido como uma régua horizontal que é usada para separar o

conteúdo (ou definir uma mudança)

div é um elemento de nível de bloco. Define uma divisão ou seção em um documento HTML. É usada como um

contêiner para elementos

span é um contêiner embutido q marca uma parte de um texto ou documento. É parecida com o <div> ,
mas <span> é um elemento embutido. Suporta os atributos globais e de evento em HTML .

ul define uma lista não ordenada. Use a <ul> tag junto com a tag <li> para criar listas não ordenadas.

ol define uma lista ordenada. Uma lista ordenada pode ser numérica ou alfabética. em conjunto com <li>

li define um item da lista. É usada em listas ordenadas ( <ol> ), listas não ordenadas ( <ul> ) e em listas de menu

( <menu> )

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

tags semânticas

header Um cabeçalho para um <artigo>. contêiner para conteúdo introdutório ou um conjunto de links de
navegação. Pode ter vários <header> elementos em um documento HTML. No entanto, <header> não pode ser

colocado em um <footer>, <address> ou outro <header> .

<article>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>

CSS/HTML 1
 </header>
<p>Lorem Ipsum dolor set amet....</p>
</article>

nav define um conjunto de links de navegação, bloco principal de links de navegação.

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/python/">Python</a>
</nav>

section seção em um documento.

article especifica conteúdo independente e autocontido. não é renderizado como algo especial em um navegador.

aside define algum conteúdo além do conteúdo em que é colocada. geralmente é colocado como uma barra lateral

em um documento

footer define um rodapé para um documento ou seção. informações de contato dentro de um <footer> elemento
devem estar dentro de uma tag <address> .

details Especifique os detalhes adicionais que o usuário pode abrir e fechar sob demanda:

isso é detalhe

conteudo do detalhe

<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, a
ward-winning fireworks and seasonal special events.</p>
</details>

summary define um título visível para o elemento <details> . O título pode ser clicado para visualizar / ocultar os

detalhes.

figure para marcar uma foto em um documento e um elemento <figcaption> para definir uma legenda para a foto:
especifica conteúdo independente, como ilustrações, diagramas, fotos, listagens de código, etc.

<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

caption define uma legenda da tabela. deve ser inserida imediatamente após a tag <table> .

<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
</tr>
<tr>
<td>January</td>
</tr>
</table>

navegação(navigation)
image links;

<a> define um hiperlink no elemento href;

target especifica onde abrir o documento vinculado: <a target="_blank|_self|_parent|_top|framename">

CSS/HTML 2
 Marcadores HTML também chamados de "bookmarks" são usados para permitir que os leitores pulem para
partes específicas de uma página web.;

exemplo
Primeiro crie o marcador com o atributo CSS id. Veja o exemplo abaixo:

<h2 id="top1">Objetivo</h2>
Em seguida, adicione o link do marcador utilizando o atributo href:
quando o marcador estiver na mesma pagina

<a href="#top1">Objetivo</a>
Veja que utilizamos o símbolo # para indicar o valor do atributo id.
quando o marcador estiver em outra pagina

<a href="/nome_do_link.html#top1">Objetivo</a>

Links relativos: vão do caminho atual voltando para as pastas

links absolutos: é o caminho completo desde o inicio

navegando em pastas simples

1. ../ Com este símbolo podemos voltar um diretório, ou seja, se você está em um diretório x dentro de y, com os

2. *./*
Acessando arquivos desta forma você está querendo acessar os arquivos que estão no diretório atual, ou seja, v
3. */*

Utilizando o símbolo de barra você está indo até a raiz do projeto, ou seja, onde você terá acesso a todas as pas
4. ../diretorio1
Com esta instrução, você está voltando um diretório e acessando o diretorio1 na raiz do projeto;

5. /css/[Link]
Com esta instrução você está acessando a raiz do projeto, depois a pasta de arquivos CSS e o arquivo de CSS c
6. /diretorio1/diretorio2

A partir da raiz do projeto, você está acessando a pasta1 e depois a pasta2;

7. ../../ Com esta sequência você está voltando duas pastas/diretórios;

formulários(forms)

<form action="/action_page.php" method="get">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>

method atributo especifica como enviar dados do formulário (os dados do formulário são enviados para a página

especificada no action atributo).(get/post)

<input> entrada de dados

<select> – Define uma lista selecionável, também conhecida como drop-down;

<textarea> – Define uma área de texto, podendo conter diversas linhas de texto;

<output> – Define elementos de saída para o formulário;

<option> – Define uma lista de opções dentro de um drop-down

<datalist> especifica uma lista de opções predefinidas (dropdow) para um elemento <input> .usada para
fornecer um recurso de "preenchimento automático" para elementos <input>. Os usuários verão uma lista

CSS/HTML 3
 suspensa de opções predefinidas à medida que inserem os dados.

<fieldset> elemento é usado para agrupar dados relacionados em um formulário.

<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

Estrutura do html

<meta> fornece informações ao navegador de como ele deve processar a pagina

<h1> até <h6>

<p> paragrafo
<p> oiii vou quebrar a linha <br> estou na linha de baixo </p>

<body> destina-se ao conteúdo da página.

<head> Contém informações que não são visiveis para o usuário. De uso e controle do documento: vinculação
com outros arquivos, aplicação de lógica de programação de scripts e metadados.

<em> italico

<strong> negrito
<img src="images/[Link]" alt=descrição textual da imagem" >

<img src="[Link] >

<figcaption> elemento informa aos navegadores e à tecnologia de assistência que a legenda descreve o outro

conteúdo do <figure> elemento.

<video> disponivel no html5

<video src="[Link]" controls>

<p>Your browser doesn't support HTML5 video. Here is a <a href="[Link]">link to the video</a
> instead.</p>
</video>

src contém um caminho para o vídeo que você deseja incorporar.

controls atributo para incluir a própria interface de controle do navegadora .

O parágrafo dentro das <video> tags
Isso é chamado de conteúdo de fallback - será exibido se o navegador que acessa a página não suportar
o <video> elemento, o que nos permite fornecer um fallback para navegadores mais antigos. Isso pode ser o que
você quiser; neste caso, fornecemos um link direto para o arquivo de vídeo, para que o usuário possa pelo
menos acessá-lo de alguma forma, independentemente do navegador que estiver usando.

<iframe> elementos são projetados para permitir que você incorpore outros documentos da web no documento atual.
<embed> e <object> têm uma função diferente para <iframe> esses elementos são ferramentas de incorporação de
propósito geral para incorporar conteúdo externo, como PDFs.
<select> <opition> para dropdow

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

CSS/HTML 4
 <title>New Webpage</title>

<link href="aqui entra olink do seu arquivo extern" rel="stylesheet">

// ou
<style>
/* estilo aplicado em tag */
h2{
color: darkgreen;
}
/* estilo aplicado em id */
#meuTitulo{
color:red;
}
/* estilo aplicado em classe */
.tituloModificado{
color: blue;
}
</style>
</head>
<body>
...
</body>
</html>

Anotar imagens com figuras e legendas de figuras

imagem n vinculada a legenda(mas correto)

<div class="figure">
<img src="images/[Link]"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth"
width="400"
height="341">

<p>A T-Rex on display in the Manchester University Museum.</p>

</div>

solução melhor com html 5

<figure>
<img src="images/[Link]"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth"
width="400"
height="341">

<figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>

</figure>

CSS
CSS é uma linguagem de estilo, também conhecida como folhas de estilo em cascata.

# id

. classe

CSS/HTML 5
 img[src] <img src="[Link]">

a:hover quando mouse estiver em cima

Linkando css externo

<link rel="stylesheet" type="text/css" href="aqui entra o

link do seu arquivo externo">

css inline é pouco utilizado em websites por deixar o código "poluído" com muita informação, mas é muito
utilizado na criação de mailings e e-mail marketing.

<p style="color:red;">TEXT TESXT TEXT TEXT TEXT TEXT TEX</p>

varios seletores

p, li, h1 {
color: red;
}

Como devemos usar uma variável no CSS? color: var(variavel-cor)

propriedades

padding , o espaço ao redor do conteúdo (ex.: ao redor do texto de um parágrafo).

border , a linha sólida do lado de fora do padding.

margin , o espaço externo a um elemento.

width (largura de um elemento).

background-color , a cor atrás do conteúdo de um elemento e do padding.

color , a cor do conteúdo de um elemento (geralmente texto).

text-shadow : cria uma sombra no texto dentro de um elemento.

display é essencial para a construção de layouts responsivos.

background-color: #FF9500; : define a cor de fundo do elemento.

border-width: que corresponde ao tamanho da borda;

border-style: que define o estilo da borda e é uma informação obrigatória;

border-color: para definir a cor da borda.

transition é usada para adicionar um efeito de transição gradativa ao modificarmos o estado de um elemento
na página.

position é utilizada para especificar como será o posicionamento de um elemento na página. trabalha em
conjunto com top, bottom, left e right.

CSS/HTML 6
 position: static | relative | fixed | absolute | sticky

box-shadow CSS, podemos criar efeitos de sombras ao redor ou no interior do elemento.

box-shadow: [inset][h-offset][v-offset][blur][spread][color];

gradient, que são efeitos de transição de cores

pseudo-classes

:active

:checked

:default (en-US)

:dir() (en-US)

:disabled

:empty

:enabled

:first (en-US)

:first-child

:first-of-type

:fullscreen

:focus

:hover

:indeterminate (en-US)

:in-range (en-US)

:invalid

:lang() (en-US)

:last-child

:last-of-type

:left (en-US)

:link

:not()

:nth-child()

:nth-last-child()

:nth-last-of-type() (en-US)

:nth-of-type()

:only-child

:only-of-type

:optional

:out-of-range

:read-only (en-US)

:read-write

CSS/HTML 7
 :required

:right (en-US)

:root

:scope (en-US)

:target

:valid

:visited

propriedades do display

inline Exibe um elemento como um elemento embutido (como <span>). Quaisquer propriedades de altura e
largura não terão efeito
block Exibe um elemento como um elemento de bloco (como <p>). Ele começa em uma nova linha e ocupa toda a

largura
contents Faz com que o contêiner desapareça, tornando os elementos filhos filhos do elemento no próximo nível

acima no DOM
flex Exibe um elemento como um flex container em nível de bloco
grid Exibe um elemento como um contêiner de grade em nível de bloco
Exibe um elemento como um contêiner de bloco de nível embutido. O próprio elemento é formatado
inline-block

como um elemento embutido, mas você pode aplicar valores de altura e largura
inline-flex Exibe um elemento como um flex container de nível embutido
inline-grid Exibe um elemento como um contêiner de grade de nível embutido
inline-table O elemento é exibido como uma tabela de nível embutido
list-item Deixe o elemento se comportar como um elemento <li>
run-in Exibe um elemento como bloco ou embutido, dependendo do contexto
table Deixe o elemento se comportar como um elemento <table>
table-caption Deixe o elemento se comportar como um elemento <caption>

table-column-group Deixe o elemento se comportar como um elemento <colgroup>

table-header-group Deixe o elemento se comportar como um elemento <thead>
table-footer-group Deixe o elemento se comportar como um elemento <tfoot>
table-row-group Deixe o elemento se comportar como um elemento <tbody>
table-cellDeixe o elemento se comportar como um elemento <td>
table-column Deixe o elemento se comportar como um elemento <col>

table-row Deixe o elemento se comportar como um elemento <tr>

none O elemento foi completamente removido
initial Define esta propriedade com seu valor padrão. Leia sobre o inicial
inherit Herda essa propriedade de seu elemento pai. Leia sobre herdar

estilos que posicionam o conteúdo

position: static; não é posicionado de nenhuma maneira especial; está sempre posicionado de acordo com o fluxo

normal da página:

position: relative; está posicionado em relação à sua posição normal. possibilita uso de left, rigth, top, bottom

position: absolute; é posicionado em relação ao ancestral posicionado mais próximo (em vez de posicionado em

relação à janela de visualização, como fixo).são removidos do fluxo normal e podem sobrepor elementos. se um
elemento posicionado de forma absoluta não tiver ancestrais posicionados, ele usará o corpo do documento e se
moverá junto com a rolagem da página.

max-width largura máxima do elemento

overflow controla o que acontece com o conteúdo que é muito grande para caber em uma área. Especifica se deve
cortar o conteúdo ou adicionar barras de rolagem quando o conteúdo de um elemento é muito grande para caber
na área especificada.
possui os seguintes valores:

visible

O estouro não é cortado.

O conteúdo é renderizado fora da caixa do elemento

CSS/HTML 8
 hidden

-O estouro é cortado e o resto do conteúdo ficará invisível

scroll

O estouro é cortado e uma barra de rolagem é adicionada para ver o resto do conteúdo

auto

Semelhante ao scroll, mas adiciona barras de rolagem apenas quando necessário

height e width altura e a largura

auto Este é o padrão. O navegador calcula a altura e largura

length Define a altura / largura em px, cm etc.

% Define a altura / largura em porcentagem do bloco que contém

initial Define a altura / largura para seu valor padrão

inherit A altura / largura será herdada de seu valor pai

display: block

Ocupa 100% da largura do elemento pai

Ocupa sempre a sua própria linha e é posicionado abaixo do elemento anterior

A altura é definida de acordo com o conteúdo interno

É possível definir Width e Height

Você pode definir valores de margin-top e margin-bottom

display: inline; as margens / preenchimentos superior e inferior não são respeitados

Ocupa a largura total do seu conteúdo apenas

Um elemento inline após outro elemento inline ocupam a mesma linha

Não é possível definir Width e Height

Não é possível definir valores de margin-top e margin-bottom

Ao aplicar o float, automaticamente eles assumem características de display block

Se aplicado dentro de um texto, irá seguir o fluxo do conteúdo

display: inline-block as margens / preenchimentos superior e inferior são respeitados, não adiciona uma quebra de

linha após o elemento

visibility propriedade especifica se um elemento é ou não visível.

visible: o elemento é visivel
hidden: O elemento está oculto (mas ainda ocupa espaço)
collapse: Apenas para linhas da tabela (<tr>), grupos de linhas (<tbody>), colunas (<col>), grupos de colunas
(<colgroup>). Este valor remove uma linha ou coluna, mas não afeta o layout da tabela. O espaço ocupado pela
linha ou coluna ficará disponível para outros conteúdos.
Se o recolhimento for usado em outros elementos, ele será processado como "oculto"
initial: Define esta propriedade com seu valor padrão
inherit: herda essa propriedade de seu elemento pai
Box Model(modelo de caixa):

CSS/HTML 9
 border-style propriedade especifica que tipo de borda [Link] ter de um a quatro valores (para a borda superior,

borda direita, borda inferior e borda esquerda).

Os seguintes valores são permitidos:

dotted Define uma borda pontilhada

dashed Define uma borda tracejada

solid Define uma borda sólida

double Define uma borda dupla

groove Define uma borda com sulcos 3D.O efeito depende do valor da cor da borda

ridge Define uma borda estriada 3D. O efeito depende do valor da cor da borda

inset Define uma borda de inserção 3D.O efeito depende do valor da cor da borda

outset Define uma borda de início 3D.O efeito depende do valor da cor da borda

none Não define nenhuma fronteira

hidden Define uma borda oculta

border-width: medium|thin|thick|length|initial|inherit;
medium= especifica uma borda média. Este é o padrão
thin = especifica uma borda fina
thick= especifica uma borda espessa
length= permite definir a espessura da borda
initial= Define esta propriedade com seu valor padrão.
inherit= Herda esta propriedade de seu elemento pai

@media only screen and (min-width: 768px) {} responsividade

Fontes seguras de texto: [Link]

Links uteis

CSS básico - Aprendendo desenvolvimento web |Fundamentos

MDN de HTML | Introdução a HTML | Introdução a HTML/CSS: criação de página
CSS (Folha de Estilo em Cascata) é o código que você usa
If you're seeing this message, it means we're having trouble loading external resources on our websit
[Link]
para dar estilo à sua página Web. CSS básico apresentaos
tudo
domínios *.[Link] e *.[Link] estão desbloqueados. Para entrar como usuário e utiliza
ntendendo-a-folha-de-estilos/37459
que você precisa para começar. Responderemos a perguntas
em seu navegador.
[Link]
[Link]
rted_with_the_web/CSS_basics

CSS/HTML 10