Combo de estudo de como interligar as três ferramentas e linguagens corretamente
HyperText Markup Language, como o próprio nome diz, o HTML é uma linguagem de marcação, usada para estrutar o texto e criar conexões com outros elementos do website. De maneira simplória: "O esqueleto" da página web. Esta marcação é dada em tags.
Tags são instruções na linguagem de marcação, tendo uma marca de início e outra de fim para que o navegador possa renderizar uma página. ( < > , </ > ).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Titulo da página </title>
</head>
<body>
</body>
</html>- Nota: Os elementos dados entre < > e </ > são as chamadas tags.
- Para gerar essa estrutura inicial basta digitar ! no seu editor de texto.
Os elementos
- Lista Não Ordenada Lista sem numeração, a qual a ordem não importa. Usa-se a tag < ul > e para criar elementos de lista usa-e < li >
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>- Lista Ordenada Lista numerada (1,2, 3...), a qual se importa em ordenar. Usa-se a tag < ol > e para criar elementos de lista usa-e < li >
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ol>Inicializada com a tag <table> e e struturada em Caption (cabeçalho), thead, tbody e tfood. No "thead" são adicionadas linhas <tr> e dentro das linhas são adicionadas colunas <th> , para a criação de colunas na tabela. Para adicionar dados na tabela usamos o <td>.
Legenda:
tr: (table rows)
th: (table height)
td : (table data)
``` HTML
<table>
<thead>
<tr>
<th> </th>
<th></th>
<th></th>
</tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
```
Pode se ver o padrao estrutural de um elemento apartir da imagem a cima.
DICA STYLES:
header img
{
border: 1px xolid #808080;
border-radius: 4px; // Arredonda a Borda
}Se almentar exponencialmente o px de border-radius forma-se um círculo.
###Types of display
display: block;
Usa todo o espaço horizontal disponível, ou seja usatodo o espaço horizontal da tela, a não ser que tenha uma fixed position.
display: inline;
Usa a largura do elemento para permitir que o item compartilhe a mesma linha.
display: hidden;
Usa o espaço do elemento porém ele não é mostrado. Espaço em branco.
display: none;
Não usa nenhum espaço e nem mostra nada.
display: flex;
Linha/Coluna como base de layout, faz possível o uso do conceito de flex box
####Flex Box layout:
flex-start / start: ítens alinhados com o início do container. O valor (com maior suporte dos navegadores) flex-start se guia pela flex-direction, enquanto start se guia pela direção do writing-mode.
- flex-end / end: ítens alinhados com o final do container. O valor (com maior suporte dos navegadores) flex-end se guia pela flex-direction, enquanto end se guia pela direção do writing-mode.
- `center`: ítens centralizados no container.
- `space-between`: ítens distribuídos igualmente; a primeira linha junto ao início do container e a última linha junto ao final do container.
- `space-around`: ítens distribuídos igualmente com o mesmo espaçamento entre cada linha.
- `space-evenly`: ítens distribuídos igualmente com o mesmo espaçamento entre eles.
- `stretch` (padrão): ítens em cada linha esticam para ocupar o espaço remanescente entre elas.
display: grid;: atua em containers apenas. Além de que é necessário nomear os elementos comgrid-area: nomeElemento, por exemplo:
header{
...;
...;
grid-area:header;
}Assim possibilita aplicar:
.container{
display: grid;
grid-template-areas:
"header header"
"main aside"
"footer footer
grid-template-columns: auto 200px //mantem ser o maior possível no caso especificado sempre ser 200px
grid-gap: 8px // deixa uma margem/ brecha entre os elementos.
}##JavaScript
Existe 3 formas de se criar um codigo Script de forma que unifique com o HTML e o CSS.
-
in Line <script> ... </script> que é feito diretamente no index.html.
-
document que é linkar um documento index.js ao html. Para linkar:
<script> scr= "index.js"> ...</script>A melhor forma de se trabalhar com ambos são os usos de funções, como por exemplo para mostrar uma mensagem pulo de linha pode se fazer uma função com html incluso:
function showMessage(message){
document.writeln("<p>" + message + "</p>");
}** PORÉM EXISTE UM FORMA MELHOR USANDO DOM **
- window. document: Global Objects
- document.body and document.head: find those elements
- documents.getElementById(): Encotra o elemento apartir da ID
- documents. getElementsByClassName(): Enconta os elementos pelo nome da classe.
funcitio showMessage(message){
const formInfo = documents.getELementsById("fomrInfo");
formInfo.innerHTML = "<p> + message + "</p>;
}Em um elemento:
const contactForm = document.getElementById("contactForm");
contactForm,addEventListener("submit", function (event){
event.preventDefault();
showMessage("Sending your message...");
});Em varios elementos de um class (just like a array)
const experiences = documents.getElementsByClassName("experience");
for ( let i = 0; i < experiences.length; i++){
const item = experiences[i];
item.addEventListener("mouseenter", function (event){
event.target.style = "background-color: #999999";
});
item.addEventListener("mouseleave", function (event){
event.target.style = "background-color: #10f000";
});
}Na classe pode-se usar como avanco de object que aceite métodos e funções
class Contact{
constructor(form){
this.fullname = form.elements["fullname"].value;
this.email = form.elements["email"].value;
this.subject = form.elements["subject"].value;
this.body = form.elements["body"].value;
}
fullname = "";
email = "";
subject = "";
body = "";
send(){
console.info(this.formatMessage());
showMessage("We're note seend emails to day");
}
formatMessage(){
return `To: ${this.fullName}`
Email: ${this.email}
Subject: ${this.subject}
Body: ${this.body}`;
}
}The problem with Browser:
Existem uma grande variedade de browsers, e nem todos ele suportam certas ferramentas. Pode-se verificar se aquela ferramenta é validade em uma maioria de navegadores no site "Can i use", que irá gerar uma porcentagem de quantos usuários e qual versão de browser tem acesso a tal ferramenta.