0

Resumo de tópicos sobre a área de Front-end

Douglas Lima
Douglas Lima

Um pouco de Front


Segue abaixo um pouco sobre oque estudei da área de Front, alguns conceitos que espero que possa ajudar a quem estiver começando.


HTML (HYPER TEXT MARKUP LANGUAGE) – Linguagem de marcação de hipertexto

Criador: Tim Berners-Lee

Obs.: Não é linguagem de programação, é uma linguagem de marcação; Páginas HTML se comunicam entre si.


Marcação -> determina a localização da informação; (tag – comando html);

Semântica -> determina o significado ou sentido da informação;

Hipertexto -> páginas que possuem ligações c/ outras páginas por meio de hiperlinks.


Iniciar marcação = <marcação> / Concluir marcação = </marcação>


<h1> só pode ter um por página/bloco;

<h2> e <h3> pode ter vários.


Atributos são informações que são alocadas na tag de abertura e mudam o comportamento da tag.

Ex.: <tag atributo = “valor”>texto</tag>


IDE (INTEGRATED DEVELOPMENT ENVIROMENT) – Ambiente de Desenvolvimento Integrado:

Funcionam em qualquer plataforma (multiplataforma)


IDE x Editor: IDE tem recursos adicionais.


Doctype -> informa o tipo de documento.

<!doctype html>


Indentação -> recurso para destacar a estrutura de códigos do documento HTML.


Navegadores:

Estrutura de recursos = motor de renderização -> interpreta o HTML, CSS e renderiza o layout.


Ferramentas para desenvolvedores (f12 – inspecionar):

Elements: dá p/ visualizar o HTML renderizado;

Console: executa código JS diretamente na tela;

Sources: possui acesso aos recursos do site; ex.: jpg, certificados, etc.

Network: monitora toda as requisições que o site realiza;

Perfomance: consegue gravar a performance de renderização da tela;

Memory: rastreia a localização de memória na sua aplicação WEB;

Application: guarda dados, onde pode gerenciá-los;

Security: pode verificar informações se o site é válido em termo de segurança;

Lighthouse: ferramente p/ saber como está a performance do site.


Estrutura de páginas:

Obs.: html:5 – comando para colocar a estrutura inicial html automaticamente.

<meta charset=”UTF-8”> -> especifica um padrão de caracteres da página; ex.: pode usar acentuação, emojis, etc ... que vai ser reconhecido;

<meta name=”viewport” contente=”width=device – width, initial-scale=1.0”> -> serve p/ redimensionar a tela em dispositivos móveis;

<meta http-equiv = “X-UA-compatible” contente= “ie=edge”> -> responsável pela compatibilidade principalmente p/ o internet explore, onde se o internet explore for antigo, ele irá rodar com uma extensão do crhome.


<head>

<section>   } são chamados de elementos de bloco.

<head>     

 

Atributos globais:

Servem p/ passar informações adicionais p/ tag;

Podem ser em pares nome/valor (ex.: nome=”valor”) ou apenas o nome.


Acesskey -> define uma tela de atalho p/ focar no elemento; (1)

Class -> define quais classes CSS serão aplicadas no elemento; (2)

Contenteditable -> define se o conteúdo do elemento pode ou não ser editável; (3)

Data-* -> usado para armazenar dados em um elemento. No lugar do (*) deve definir um nome; (4)

Dir -> define direção do conteúdo de um elemento; se é lido da direita pra esquerda ou da esquerda pra direita; (5)

Draggable -> define se o elemento pode ser arrastado ou não; (6)

Dropzone -> define o que acontece quando o elemento arrastão é solto no elemento; (7)

Hidden -> define o elemento como oculto; (8)

Id -> define uma identificação única para o elemento; (9)

Lang -> define a linguagem do conteúdo do elemento; (10)

Spellcheck -> define se o conteúdo do elemento deve ter sua ortografia verificada; (11)

Style -> define o estilo CSS diretamente no elemento; (12)

Tabindex -> define a posição do elemento na ordem de tabulação da página; (13)

Title -> define informações sobre o elemento; define um titulo para a tag; (14)

Translate -> define se o conteúdo do elemento pode ser traduzido ou não. (15)



0
0

Comentários (2)

1
Leonardo Oliveira

Leonardo Oliveira

02/09/2021 08:25

Muito bom Douglas!

1
Stefanny Tavares

Stefanny Tavares

02/09/2021 09:39

Perfeito <3

Um ser apaixonado por engenharia e tecnologia.

Brasil