Criado por Mateus Cordeiro / João Pedro Rodrigues (aka JP)
<!DOCTYPE html>
<html>
<head>
<title><!-- Título da Página --></title>
<!-- links, scripts, meta, style -->
</head>
<body>
<!-- Corpo da Página -->
</body>
</html>
See the Pen Atributos by Mateus Cordeiro (@mateuscgc) on CodePen.
Elementos que sempre começam em uma nova linha e esticam o máximo que podem.
Elementos que não começam nova linha e só usam o espaço necessário.
See the Pen JqDjv by Mateus Cordeiro (@mateuscgc) on CodePen.
See the Pen HGKof by Mateus Cordeiro (@mateuscgc) on CodePen.
See the Pen zBKfn by Mateus Cordeiro (@mateuscgc) on CodePen.
See the Pen span by Mateus Cordeiro (@mateuscgc) on CodePen.
See the Pen Ordered lists by Mateus Cordeiro (@mateuscgc) on CodePen.
See the Pen Unordered lists by Mateus Cordeiro (@mateuscgc) on CodePen.
See the Pen tbeFB by Mateus Cordeiro (@mateuscgc) on CodePen.
See the Pen links by Mateus Cordeiro (@mateuscgc) on CodePen.
Em html, links são definidos com a tag <a>.
<p>This is a <a href="www.google.com.br">link</a></p>
See the Pen KJCut by Gabriel Gomes (@Gabrielgqa) on CodePen.
estilização de links.
See the Pen plHnC by Mateus Cordeiro (@mateuscgc) on CodePen.
See the Pen umqtx by Mateus Cordeiro (@mateuscgc) on CodePen.
Em html, imagens são definidas com a tag<img>.
A tag <img> é vazia, contém apenas atributos e não tem fechamento.
O atributo src o endereço (url) da imagem a ser renderizada:
<img src="url">
O atributo alt especifica um texto alternativo para a imagem, caso não seja possível a sua renderização.
O valor do atributo alt deve descrever a imagem em palavras:
<img src="html5.gif" alt="The official HTML5 Icon">
Você pode usar width e height para definir as dimensões da imagem.
O valores são especificados em pixels:
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
É comum utilizar imagens como links:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
Tabelas são definidas com a tag <table>.
Tabelas são divididas em linhas com a tag <tr>.
Linhas são divididas em células de dados com a tag <td>.
Celulas que representam cabeçalhos são definidas com a tag <th>tag.
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Ada<d>
<td>Jackson</td>
<td>78</td>
</tr>
</table>
See the Pen Izrad by Gabriel Gomes (@Gabrielgqa) on CodePen.
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
See the Pen Aockd by Gabriel Gomes (@Gabrielgqa) on CodePen.
Colspan: Faz com que um célula expanda mais que uma coluna, atributo colspan:
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
See the Pen IECjo by Gabriel Gomes (@Gabrielgqa) on CodePen.
Roespan: Faz com que um célula expanda mais que uma linha, atributo rowspan:
<table style="width:100%">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
See the Pen wKLuC by Gabriel Gomes (@Gabrielgqa) on CodePen.
Formulários HTML são usados para coletar dados do usuário.
Um dos principais mecanismos para enviar dados aos servidores.
Um <form> html contém elementos (tags) de entrada de dados (input) como campos de texto e de marcação, seleção.
<form>
.
input elements
.
</form>
O mais importante elemento em um formulário.
O elemento <input> é utilizado para coletar dados do usuário.
O elemento <input> pode pode variar em relação ao seu atributo type. Um <input> pode ser dos tipos: text field, checkbox, password, radio, submit, e muitos outros.
<input type="text"> Define um campo de uma linha para texto:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
See the Pen ynArH by Gabriel Gomes (@Gabrielgqa) on CodePen.
<input type="password"> Define um campo para senha:
<form>
Password: <input type="password" name="pwd">
</form>
See the Pen jarlv by Gabriel Gomes (@Gabrielgqa) on CodePen.
<input type="radio"> Define um campo de seleção que se agrupado permite ao usuário escolher apenas uma opção dentre várias:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
See the Pen hxzqb by Gabriel Gomes (@Gabrielgqa) on CodePen.
<input type="checkbox"> Define um campo de seleção para que o usuário marque verdadeiro ou falso para um determinada opção:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
See the Pen hxzqb by Gabriel Gomes (@Gabrielgqa) on CodePen.
<input type="submit"> define um botão para submissão do formulário.
Os dados de um formulário são enviados para o endereço especificado no atributo action utilizando o método definido no atributo action (GET, POST):
<form name="input" action="demo_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
See the Pen ioIyk by Gabriel Gomes (@Gabrielgqa) on CodePen.
O elemento <select> é usado para criar uma lista de itens a serem selcionados.
O elemento <option> é usado dentro do <select> para definir as opções.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
See the Pen iuGDs by Gabriel Gomes (@Gabrielgqa) on CodePen.
O elemento <textarea> define um campo para texto de várias linhas.
<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
See the Pen rjsCv by Gabriel Gomes (@Gabrielgqa) on CodePen.
O HTML5 introduziu diversos novos tipos que permitem melhor controle e validação.
<form>
<p>Type number</p>Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
<form>
<p>Type date</p>Birthday:
<input type="date" name="bday">
</form>
<form>
<p>Type color</p>Select your favorite color:
<input type="color" name="favcolor">
</form>
<form>
<p>Type range</p>
<input type="range" name="points" min="0" max="10">
</form>
<form>
<p>Type mail</p>E-mail:
<input type="email" name="email">
</form>
<form>
<p>Type tel</p>Telephone:
<input type="tel" name="usrtel">
</form>
See the Pen BoIeb by Gabriel Gomes (@Gabrielgqa) on CodePen.
An HTML form with autocomplete on (and off for one input field):
<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
See the Pen kuzvd by Gabriel Gomes (@Gabrielgqa) on CodePen.
The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when submitted.
<form action="demo_form.asp" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
See the Pen gHadD by Gabriel Gomes (@Gabrielgqa) on CodePen.
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
See the Pen HnGmf by Gabriel Gomes (@Gabrielgqa) on CodePen.
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before submitting the form.
<form action="demo_form.asp">
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>
See the Pen svqDu by Gabriel Gomes (@Gabrielgqa) on CodePen.
The autofocus attribute is a boolean attribute.
When present, it specifies that an <input> element should automatically get focus when the page loads.
<form action="demo_form.asp">
First name: <input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
See the Pen LBEwq by Gabriel Gomes (@Gabrielgqa) on CodePen.
See the Pen aWQdex by Mateus Cordeiro (@mateuscgc) on CodePen.
<html>
<head>
<script src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</head>
<body>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<script src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</body>
</html>
Seletor {
propriedade : valor ;
propriedade : valor ;
propriedade : valor ;
}
<div style="width: 200px; height: 200px; border-radius: 6px; display: block;">
<!-- mais html -->
<div>
<!DOCTYPE html>
<html>
<head>
<title><!-- Título da Página --></title>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40 px;
}
</style>
</head>
<body>
<!-- Corpo da Página -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title><!-- Título da Página --></title>
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
</head>
<body>
<!-- Corpo da Página -->
</body>
</html>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40 px;
}
Seletor Universal *
* {
margin : 0px ;
color : blue ;
}
.Class Seleciona todos os elementos com determinada classe
.msg-box {
width: 200px;
height: 100px;
padding: 20px;
}
#Id Seleciona o elemento com determinada id
#news {
float: left;
position: absolute;
display: inline;
}
tag Seleciona todos os elementos da tag.
p {
color: red;
}
tag1, tag2 Seleciona todos os elementos da lista.
div, .box, #comentario {
font-size: 20px;
font-family: arial;
}
div {
font-size: 20px;
font-family: arial;
}
.box {
font-size: 20px;
font-family: arial;
}
#comentario {
font-size: 20px;
font-family: arial;
}
tag1 tag2 Seleciona todos os tag2 dentro de tag1.
.msg-box p {
color: pink;
text-align: center;
}
tag1 > tag2 Seleciona todos os tag2 que são filhos de tag1.
#menu > div {
width: 100px;
margin-top: 20px;
}
tag1 + tag2 Seleciona todos os tag2 ques estão imediatamente depois de tag1.
.title + .subtitle{
color: #777;
font-wheight: bold;
}
tag1 ~ tag2 Seleciona todos os tag2 que apareceram depois de pelo menos um tag1
p ~ ul {
background: #ff0000;
}
tag:active Seleciona um elemento ativo
a {
background-color: blue;
}
a:active {
background-color: yellow;
}
tag:hover Seleciona o elemento quando o mouse está em cima dele
div {
width: 70px;
}
div:hover {
width: 100px;
}
tag:first-child Selecionam as tag que sejam a primeira filha de seus pais
.box:first-child {
background-color: red;
color: grey;
}
tag:Last-Child Seleciona as tag que são a ultima filha de seus pais
.box:last-child {
background-color: red;
color: grey;
}
tag:nth-child(x)Seleciona o elemento tag que é filha de número x
.box:nth-child(10) {
background-color: red;
color: grey;
}
Em CSS temos várias unidades de medida: px, pt, em, rem, %, entre outras.
Você utiliza px para definir a largura de um elemento, o tamanho do texto, a espessura da borda e outras coisas. A unidade px é utilizada para definir o tamanho dos textos por que é a medida mais exata que você pode encontrar. Por não ser uma medida variável, são fáceis de controlar.
<p>Esse é o texto</p>
See the Pen pJLaf by Gabriel Gomes (@Gabrielgqa) on CodePen.
O problema de utilizar fonts em em é que elas são variáveis como a porcentagem. Diferentemente da utilização de pixels, temos que fazer um pouco de matemática para planejar nossas unidades no projeto. Não é nada de outro mundo, então pare de preguiça.
O cálculo: 20 ÷ 16 = 1.25em
<p>Esse é o texto</p>
See the Pen nBvKq by Gabriel Gomes (@Gabrielgqa) on CodePen.
O uso do % é bem semelhante ao do EM. Assim, ele é também variável de acordo com o contexto.
<p>Esse é o texto</p>
See the Pen txnqu by Gabriel Gomes (@Gabrielgqa) on CodePen.
A REM sempre terá o valor de contexto do ROOT (é isso que significa o R do REM), ou seja, sempre o body… Os valores ficariam assim se referenciando pelo body.
See the Pen size by Mateus Cordeiro (@mateuscgc) on CodePen.
Esta propriedade é usada para definir o estilo, cor e espessura da borda do elemento.
<p>Esse é um parágrafo</p>
See the Pen tpaAq by Gabriel Gomes (@Gabrielgqa) on CodePen.
.box {
border: 3px solid yellow;
}
.box {
border-style: solid;
border-width: 3px;
border-color: yellow;
}
See the Pen border styles by Mateus Cordeiro (@mateuscgc) on CodePen.
See the Pen gpJLm by Mateus Cordeiro (@mateuscgc) on CodePen.
See the Pen oreiu by Mateus Cordeiro (@mateuscgc) on CodePen.
margin especifica um determinado espaçamento em volta de um elemento.
See the Pen side borders by Mateus Cordeiro (@mateuscgc) on CodePen.
margin: 25px 50px 75px 100px;
/*top margin is 25px*/
/*right margin is 50px/
/*bottom margin is 75px*/
/*left margin is 100px*/
margin: 25px 50px 75px;
/*top margin is 25px*/
/*right and left margins are 50px*/
/*bottom margin is 75px*/
margin: 25px 50px;
/*top and bottom margins are 25px*/
/*right and left margins are 50px*/
margin: 25px;
/*all four margins are 25px*/
padding especifica um determinado espaçamento entre os limites do elemento e seu conteudo.
See the Pen xiEej by Mateus Cordeiro (@mateuscgc) on CodePen.
padding: 25px 50px 75px 100px;
/*top padding is 25px*/
/*right padding is 50px/
/*bottom padding is 75px*/
/*left padding is 100px*/
padding: 25px 50px 75px;
/*top padding is 25px*/
/*right and left padding are 50px*/
/*bottom padding is 75px*/
padding: 25px 50px;
/*top and bottom padding are 25px*/
/*right and left padding are 50px*/
padding: 25px;
/*all four margins are 25px*/
A propriedade position especifica o tipo de posicionamento de um elemento.
position: static;
position: absolute;
position: fixed;
position: relative;
position: initial;
position: inherit;
Exemplo
A propriedade display especifica o tipo de caixa de um elemento html.
display: inline; /*default*/
display: block; /*Ex: <p>*/
display: inline-block;
display: list-item;
display: none;
display: initial;
Exemplo
See the Pen float by Mateus Cordeiro (@mateuscgc) on CodePen.
Em CSS temos algumas propriedades específicas para estilização das fontes, são elas:
<p class="fs">Texto formatado</p>
<p class="ff">Texto formatado</p>
<p class="fv">Texto formatado</p>
<p class="fst">Texto formatado</p>
<p class="fw">Texto formatado</p>
<p class="f">Texto formatado<p>
See the Pen BzADb by Gabriel Gomes (@Gabrielgqa) on CodePen.
Em CSS temos algumas propriedades específicas para estilização detextos, são elas:
<p class="cl">Texto formatado</p>
<p class="ls">Texto formatado</p>
<p class="ws">Texto formatado</p>
<p class="ta">Texto formatado</p>
<p class="td">Texto formatado</p>
<p class="tt">Texto formatado</p>
<p class="dc">Texto formatado</p>
See the Pen fsBwL by Gabriel Gomes (@Gabrielgqa) on CodePen.
Como já vimos, em CSS é possível alterar as cores. Isso serve para qualquer elemento HTML.
Para o valor da cor temos diferentes tipos de medida:
I { color: red }
I { color: #FF0000 }
I { color: rgb (255, 0, 0) }
A propriedade background define as características (os valores na regra CSS) do fundo dos elementos HTML. Elas são:
<div id="bc"></div>
<div id="bi"></div>
See the Pen cHJph by Gabriel Gomes (@Gabrielgqa) on CodePen.
Estiliza o cursor do mouse.
Alguns dos valores são:
See the Pen HBxzG by Mateus Cordeiro (@mateuscgc) on CodePen.