>_ Hello, world!

Web Dev - II

Bem vindo à mais um ano, jovem Fuzzier.

Os primeiros passos para desenvolvimento web.

HyperText Markup Language, conhecido comumente como HTML, é a fundação da web. Graças à essa linguagem de marcação, a estrutura de tudo, inclusive deste site, é possível. Portanto, para um bom desenvolvedor front-end, HTML é sua porta de entrada. Através de Cascading Style Sheets, ou CSS, você torna tudo mais apresentável, e junto do JavaScript, você é capaz de manipular todo tipo de objeto e elemento em suas criações HTML.

Principais Aplicações:

Desenvolvimento de sites e portfólios: Estruturação e conteúdo de páginas web, estilização visual de páginas e páginas interativas.
Interfaces de sistemas internos (CRMs, ERPs): Utilizados principalmente no mercado atual para criação de sistemas focados na gestão do relacionamento com os clientes e sistemas que integram e gerenciam informações de diferentes setores de uma empresa, respectivamente.

HTML

1 - Elementos, tags e atributos básicos.

Introdução ao HTML: informações básicas sobre a linguagem e seus elementos iniciais mais utilizados.
Adaptando-se ao Visual Studio Code e suas funcionalidades.
Criando nossa "área de trabalho"; pastas prontas que irão conter nossos projetos.

2 - <p> e <div>

Crie uma <div> que contenha um título de sua escolha e da maneira que desejar, e então escreva uma frase.

3 - <img> e <a>

Insira uma imagem de sua escolha com <img src=""> e faça ela redirecionar para algum lugar, utilizando <a href="">,

4 - <style>

Modifique o <style> para que todos os elementos encontrem-se centralizados dentro da <div>.

5 - Site estruturado

Crie seu site baseado no que sabe, com um cabeçalho e um rodapé.

6 - Logo e FavIcon

Definindo logo do seu site, e seu ícone de navegador.
Localize o <head> em seu código e, dentro dele, insira <link rel="icon" type="image/icon" href=""> .

7 - Cabeçalho e <nav>

Crie um cabeçalho e insira as informações essenciais de novas páginas através de um <nav>.

8 - Rodapé

Finalize seu site criando um rodapé e inserindo o que deseja.

9 - Página novas

Crie uma nova página de sua escolha, inserindo o arquivo .html na pasta de seu site.

10 - Formulários?

Crie uma aba que inclua um pequeno formulário com as informações de sua escolha. Utilize <label> e <form>.

HTML - Formulários e Banco de Dados

11 - Formulários

Entendendo um pouco como funciona exatemente os formulários em HTML.

12 - Enfeitando o formulário

Utilizando CSS para melhorar a interface visual do formulário.

13 - Banco de Dados?

Associe os dados enviados para um banco de dados, permitindo alteração.

14 - Banco de Dados

Entendendo um pouco como funciona exatemente um Banco de Dados, através da plataforma MySQL Workbench, e sua comunicação com o banco.
Estabelecendo conexão e entendendo como a plataforma interage com o HTML.

15 - Imagens

Adicionando imagens no banco de dados através do formulário.

Testando seus conhecimentos até aqui:

O que são elementos, tags e atributos? Exemplifique.

O que são <head>, <body> e <meta>, num arquivo html?

Qual a diferença entre "id" e "class", em um HTML?

Quais as principais funcionalidades do <form> em um site? Por que usar?

Resposta:

Tags: São os "marcadores" da linguagem, escritos entre sinais < >. Geralmente vêm em pares: uma tag de abertura e uma de fechamento.

Elementos: É o conjunto completo: tag de abertura + conteúdo + tag de fechamento. Alguns elementos são auto-fechados (não têm conteúdo nem tag de fechamento), como <br>.

Atributos: São informações extras adicionadas dentro da tag de abertura, no formato nome="valor". Eles configuram ou descrevem o elemento.

Resposta:

id: Identifica um elemento único na página. Cada deve aparecer uma só vez no documento.

class: Identifica um grupo de elementos. A mesma classe pode ser usada em vários elementos, e um elemento pode ter várias classes.

Resposta:

<head>: Contém informações sobre a página, que não aparecem visualmente para o usuário (metadados, título da aba, links para CSS, scripts, etc.).

<body>: Contém tudo que é visível na tela: textos, imagens, botões, links, tabelas, etc.

Resposta:

<form>: Principal mecanismo de coleta de dados do usuário em uma página web. Ele agrupa campos de entrada e os envia para um servidor ou script. Ele serve para, comumente, Coletar dados do usuário, oferecer escolhas, enviar arquivos, etc.

Materiais de consulta:

Informações básicas em relação à HTML e CSS:

Formato Significado Exemplo

{:.2f} Float com 2 casas decimais f"{3.1415:.2f}" → '3.14'

{:0>5} Preencher com zeros à esquerda (tamanho 5) f"{42:0>5}" → '00042'

{:*>8} Alinhar à direita com * f"{'Oi':*>8}" → '******Oi'

{:<10} Alinhar à esquerda f"{'Oi':<10}" → 'Oi '

{:^10} Centralizar f"{'Oi':^10}" → ' Oi '

{:,} Separador de milhar f"{1000000:,}" → '1,000,000'

{:b} Binário f"{10:b}" → '1010'

{:x} Hexadecimal (minúsculo) f"{255:x}" → 'ff'

{:X} Hexadecimal (maiúsculo) f"{255:X}" → 'FF'

{:o} Octal f"{10:o}" → '12'

{:%} Porcentagem (multiplica por 100) f"{0.85:%}" → '85.000000%'

{:.0%} Porcentagem sem casas decimais f"{0.85:.0%}" → '85%'

{{/}} Escapar chaves f"{{exemplo}}" → '{exemplo}'

Bora contribuir com o DuzzyBot?

Aproveite para consolidar seus novos conhecimentos elaborando algumas quests sobre o que você aprendeu. Após uma revisão manual, elas poderão integrar a base de dados do DuzzyBot no discord.

Contribuir

Report abuse