SchultzGames
Para tirar dúvidas, crie um tópico especifico na área "Dúvidas em Geral" e aguarde ser respondido. Evite comentar em tópicos não relacionados a sua dúvida :D
TÓPICOS RECENTES:
Tópico:
Postado em:
Postado por:
Rotacionar objeto e mover para a direita e para a esquerda
[TUTORIAL] Sistema de DIA E NOITE completo, com luzes noturnas e SISTEMA DE NUVENS
[____TÓPICO LIVRE____] FALE O QUE QUISER (Parte 2)
Implementar geração de terrenos com interpolação bicúbica
Unity - Como fazer uma parede que se move sozinha empurrar o Player?
Posso fazer jogos com gráficos e áudio dos consoles da terceira geração?
Como ativa ou desativar o botão usando outro botão
Dúvida sobre Instanciate
posso divulgar o fórum em meu site?
build settings parou de funcionar!!!
Não consigo mais abrir projeto nenhum na Unity!
como desativar um script usando botão na unity
como fazer botão simular uma tecla do teclado para jogos android unity
Clonar partícula na cena.
Preciso de ajuda com GetMouseButton para dar play em audio
TRIGGER DE ANIMAÇÃO
Otimização
[RESOLVIDO] Rotação de um gameobject sem que os filhos se alterem?
Trigger Raio e Trovão
Não consigo desativar script de gameObject (C#)
Alguém poderia mudar esse script pra botão
Como desativar e habilitar o Skinned MeshRenderer?
Como transformar um vídeo em espaço editável na Unity?
[TUTORIAL] Inimigo seguir e atacar Player ao encostar
Trocar Personagem/Skin
Como faz para o jogo rodar mesmo quando minimizado?
Alguem poderia me ajudar com combo 2d?
Jogador pode escolher que tipo de pos processamento usar nas configurações?
Como se faz um sistema de combo pra mobile
Como fazer com que collider detecte colisao de objeto especifico?
Problema mudar de sprite sempre que seja adicionado um novo sprite a lista
Colocar video no unity
Imagem excedendo o limite da tela. Como resolver?
Erro no Android
Como abrir uma empresa de games?
Informação Importante sobre o Edge Collider 2D
Como consigo aquele efeito de lanterna imagem abaixo
Como posso usar a função OnClick nesse script
[TUTORIAL] Como carregar uma cena em segundo plano?
[Tutorial] Sistema de Combos (Mobile e PC)
Personagem sofre dando e continua de onde parou com condição.
Como Abrir Porta do Carro (Capo,PortaMalas, Portas) Mirando Nelas
[RESOLVIDO] Várias faixas de música
[RESOLVIDO] int Random.Range(int min, int max) para geração procedural ?
Como fazer o som funcionar de acordo com a velocidade do objeto
Alto falante Vibrar
[RESOLVIDO] Luz no interior
[TUTORIAL] Como Fazer com que as Luzes Iluminem apenas o que você deseja
Traduções e Dublagens de games
[RESOLVIDO] Cono mudar a Tag por script?
[RESOLVIDO] Qualidade do sprite - Compression
[TUTORIAL] Unity 3D - AnimationCurve
[RESOLVIDO] Partículas com imagem
[RESOLVIDO] DUVIDA SOBRE ATIVAR UM GAMEOBJECT ATRAVÉS DE UMA CONDIÇÃO
NavMesh não consegue reproduzir sprits de um jogador
NavMesh não faz animação do jogador
Bom dia amigos compro assets do meu interesse!
Criar Ranking Online
[TUTORIAL] ScrollView rapida e facil de fazer
colocar imagem no fórum
Unity ou Game Maker Studio
[TUTORIAL] Tocar audios de uma lista em uma sequência que se repete
Error CS0246, não sei o que fazer
Como faço pra um colisor não reconhecer outro colisor sem usar IsTrigger
[RESOLVIDO] Alteração de nomes e rastreamento das mudanças
Som unity
CHAVE DE ASSINATURA
[TUTORIAL]identificar se está no controle ou teclado
[TUTORIAL] Sistema de fome, sede, barra de vida, barra de estamina, itens e dano por queda
Não estou conseguindo ativar o evento do onClick após instanciar o botão
Exportar Modelo 3D da Unity
Duvida sobre Spawn
Dúvida sobre volatile
[UE4] Por favor me digam como me livrar do motion blur!
[RESOLVIDO] Float to transform
[RESOLVIDO] mudar a cor quando a personagem passa
Como ativar um 'Panel'
Como faço pra desligar e ligar outro text?
Como Faço Para Ativar/Desativar Material Por Script ?
como modificar o script para receber e registar o dano no personagem
[TUTORIAL] Inteligência artificial, inimigo e AIPoints
Meu personagem está tomando repulsão da parede
Problemas com IEnumerator
Meu personagem ta tremendo quando toca em alguma coisa
[TUTORIAL] Como criar tiro no Unity usando Raycast
Scripts travados
Como faço para mudar a posição de um objeto para perto de outro.
Alteração de personagens durante o jogo // parte 2
Como se faz uma grid, apenas e somente uma grid em 3D?
meu primeiro jogo pronto
quero corverter uma int em string
Como mudar a posição de um objeto constantemente sem estar na void Update
Como conseguir fazer para minha moto dar grau
[RESOLVIDO] Alteração de personagens durante o jogo
Como fazer um retrovisor leve para android?
Preciso de um script para andar de moto alguem consegue me ajudar
Como consigo fazer esse efeito de escurecer o ambiente ao atacar?
Como fazer pra selecionar um inimigo pra atacar de varios unity 2d
Setparent Photon
Hoje à(s) 11:51 am
Hoje à(s) 11:21 am
Hoje à(s) 10:39 am
Hoje à(s) 10:24 am
Hoje à(s) 12:38 am
Ontem à(s) 3:15 pm
Ontem à(s) 1:19 pm
Ontem à(s) 12:24 pm
Ontem à(s) 11:57 am
Ontem à(s) 11:49 am
Ontem à(s) 9:09 am
Sex Jan 22, 2021 4:27 pm
Sex Jan 22, 2021 2:32 pm
Sex Jan 22, 2021 2:25 pm
Sex Jan 22, 2021 12:41 pm
Sex Jan 22, 2021 10:12 am
Sex Jan 22, 2021 9:47 am
Sex Jan 22, 2021 3:34 am
Sex Jan 22, 2021 1:06 am
Qui Jan 21, 2021 10:59 pm
Qui Jan 21, 2021 7:56 pm
Qui Jan 21, 2021 5:11 pm
Qui Jan 21, 2021 3:47 pm
Qui Jan 21, 2021 11:17 am
Qui Jan 21, 2021 10:45 am
Qui Jan 21, 2021 9:54 am
Qua Jan 20, 2021 11:55 pm
Qua Jan 20, 2021 11:53 pm
Qua Jan 20, 2021 11:07 pm
Qua Jan 20, 2021 9:52 pm
Qua Jan 20, 2021 5:29 pm
Qua Jan 20, 2021 4:58 pm
Qua Jan 20, 2021 3:56 pm
Qua Jan 20, 2021 3:53 pm
Qua Jan 20, 2021 9:26 am
Ter Jan 19, 2021 10:30 pm
Ter Jan 19, 2021 8:28 pm
Ter Jan 19, 2021 4:48 pm
Ter Jan 19, 2021 6:49 am
Seg Jan 18, 2021 11:39 pm
Seg Jan 18, 2021 9:31 pm
Seg Jan 18, 2021 10:47 am
Seg Jan 18, 2021 10:34 am
Dom Jan 17, 2021 10:54 pm
Dom Jan 17, 2021 6:28 pm
Dom Jan 17, 2021 2:07 pm
Dom Jan 17, 2021 12:21 pm
Dom Jan 17, 2021 11:19 am
Dom Jan 17, 2021 11:17 am
Dom Jan 17, 2021 11:15 am
Dom Jan 17, 2021 1:44 am
Sab Jan 16, 2021 6:40 pm
Sab Jan 16, 2021 11:43 am
Sab Jan 16, 2021 11:12 am
Sex Jan 15, 2021 8:20 pm
Sex Jan 15, 2021 1:39 am
Qui Jan 14, 2021 9:53 pm
Qui Jan 14, 2021 7:44 pm
Qui Jan 14, 2021 5:35 pm
Qui Jan 14, 2021 3:55 pm
Qui Jan 14, 2021 2:07 pm
Qui Jan 14, 2021 1:51 pm
Qui Jan 14, 2021 12:56 pm
Qua Jan 13, 2021 6:57 pm
Qua Jan 13, 2021 2:45 pm
Ter Jan 12, 2021 11:14 pm
Ter Jan 12, 2021 8:14 pm
Ter Jan 12, 2021 3:16 pm
Seg Jan 11, 2021 6:26 pm
Seg Jan 11, 2021 5:55 pm
Seg Jan 11, 2021 10:51 am
Dom Jan 10, 2021 7:18 pm
Dom Jan 10, 2021 6:21 pm
Dom Jan 10, 2021 3:24 pm
Dom Jan 10, 2021 2:31 pm
Dom Jan 10, 2021 2:29 pm
Dom Jan 10, 2021 10:44 am
Sab Jan 09, 2021 9:30 pm
Sex Jan 08, 2021 9:14 am
Sex Jan 08, 2021 7:07 am
Sex Jan 08, 2021 1:02 am
Sex Jan 08, 2021 12:33 am
Qui Jan 07, 2021 7:31 pm
Qui Jan 07, 2021 5:31 pm
Qui Jan 07, 2021 3:51 pm
Qui Jan 07, 2021 3:49 pm
Qui Jan 07, 2021 12:12 am
Qua Jan 06, 2021 7:40 pm
Qua Jan 06, 2021 4:57 pm
Qua Jan 06, 2021 7:36 am
Ter Jan 05, 2021 5:29 pm
Ter Jan 05, 2021 1:58 pm
Ter Jan 05, 2021 10:35 am
Ter Jan 05, 2021 5:22 am
Ter Jan 05, 2021 1:00 am
Ter Jan 05, 2021 12:02 am
Seg Jan 04, 2021 4:33 pm
Seg Jan 04, 2021 3:24 pm
Seg Jan 04, 2021 3:15 pm
acefogo
NKKF
NKKF
Harcher
Arcebispo
dutrabr100
Pokedlg
Pokedlg
dutrabr100
SauloeArthur
sopturn
Vans 123
SauloeArthur
Pokedlg
Charlesoff
Pokedlg
Fagner
ADSK
Pokedlg
wooZbr
Pokedlg
Pokedlg
dutrabr100
SauloeArthur
dutrabr100
NKKF
dutrabr100
dutrabr100
Pokedlg
SamoelBanner
Pokedlg
SauloeArthur
NKKF
orph
dutrabr100
acefogo
Fagner
Vans 123
amoraleite
Pokedlg
acefogo
dutrabr100
Pokedlg
dutrabr100
Pokedlg
savtoi
dragongirl
dutrabr100
Rangel Oblivion
dutrabr100
JoelMJunior
MarcosSchultz
dragongirl
dutrabr100
Ren Allen
Ren Allen
LucasGamerFx
SauloeArthur
NKKF
dutrabr100
SauloeArthur
Pokedlg
SauloeArthur
dutrabr100
Alexandre Santos
Pokedlg
starfreddybou69
diegopds
Super
dutrabr100
TIKO
dutrabr100
SauloeArthur
lesgoy
Fagner
Pokedlg
dutrabr100
Pokedlg
SauloeArthur
redPRO
glauco
Op3000
Pokedlg
JulioWinchester
SauloeArthur
SauloeArthur
Leozitu
Ren Allen
speedluk
SauloeArthur
BatataBugada54321
Pokedlg
Pokedlg
Ren Allen
Fagner
123
Pokedlg
macinhadeborracha
MRX

[AULA] HTML - Aula 1: Introdução

Ir em baixo

TUTORIAL [AULA] HTML - Aula 1: Introdução

Mensagem por MayLeone em Seg Out 08, 2018 3:52 pm

[AULA] HTML - Aula 1: Introdução 425px-HTML5_logo_resized.svg

Apresentação:
Bem vindos a nossa primeira aula de HTML5 para iniciantes aqui no blog! Nessa série de aulas você irá aprender os conceitos básicos da linguagem HTML em sua mais recente versão, além de aprender também sobre CSS3 e Javascript que trabalharão em conjunto com o HTML para desenvolvimento de paginas e aplicações web.
Ao final deste curso você estará apto a criar web páginas utilizando essas três linguagens e também saberá os conceitos básicos de cada uma para inicializar sua especialização em programação front-end. Vamos lá?

O que eu preciso para programar em HTML?
Você precisa basicamente de um navegador(browser) instalando em sua máquina, ex: Mozilla Firefox, Google Chrome, Internet Explorer, Edge, Opera, Safari e etc... E vai precisar também de um editor de textos (como o bloco de notas, por exemplo) para escrever os códigos.
Como dito, qualquer editor de textos está sendo válido para programar em HTML, mas aqui nas aulas iremos utilizar o sofware gratuito: NotePad++ que consiste num editor de texto para programadores. Ele suporta a linguagem HTML (e muitas outras, aliás), possui sistema de auto complete (escreve algumas palavras-chaves automaticamente para você), colore seu código para melhor visualização e permite trabalhar o código com mais de uma guia ao mesmo tempo (isso nos será útil quando entrarmos em CSS e Javascript), por isso estou recomendo esta ferramenta que além de tudo é de graça, mas você pode se sentir à vontade para editar seus códigos no editor de sua preferência.

[AULA] HTML - Aula 1: Introdução Icon[AULA] HTML - Aula 1: Introdução Icon



O que é HTML?
HTML é a sigla para a palavra em inglês: HyperText Markup Language ou em português: Linguagem de marcação de hipertexto, ou seja, o HTML é uma linguagem de marcação e não uma linguagem de programação como muitos podem se confundir no início!
Ela foi desenvolvida para ser lida por navegadores web, nos permitindo assim, criar estruturas para as páginas online, como blogs, sites, e etc.
Como é uma linguagem de marcação, o HTML se utiliza de marcações (o que chamaremos de tags daqui por diante) para determinar algum comportamento ou alguma aparência a um hipertexto.

O que é um hipertexto?
Se ficou com dúvidas sobre o que seria um hipertexto, eu irei explicar rapidamente: um hipertexto é um termo para o tipo de texto ou informação que possui conjuntos de blocos de outros textos/informações que podem ser lidos de forma dinâmica, não necessariamente como um texto comum onde temos normalmente uma leitura/visualização linear.
Os hipertextos estão presentes em nossa vida digital, como os textos que você lê em blogs (este aqui, por exemplo) e que podem conter hiperligações que levam a outros textos, como os tão famosos links, que podem desviar sua leitura para outro bloco de texto.
Um hipertexto não envolve somente textos, mas toda a hipermídia, como imagens, vídeos e sons também.
Abaixo você pode visualizar uma ilustração do que seria um hipertexto:


[AULA] HTML - Aula 1: Introdução Hipertexto-21

Um texto comum (como num livro, por exemplo) normalmente é lido linearmente, começando de cima para baixo, porém, um hipertexto desvia sua leitura para outros hipertextos, tornando sua leitura dinâmica (não-linear).
Você neste momento está lendo este trecho da aula, mas se clicar aqui poderá ser desviado para outro tipo de texto, ou seja, a leitura deixa de ser linear.

Marcações(Tags):
Pois bem, como dito mais acima, o HTML é uma linguagem de marcação, ou seja, vai consistir em marcar com tags determinados hipertextos. Esta tag poderá atribuir a um hipertexto uma aparência (mudar a cor da fonte, por exemplo) ou um comportamento específico.

Abra o seu NotePad++ (ou o editor de sua preferência) e crie um arquivo HTML indo a >> Language >> H >> HTML.
Agora o editor irá entender de que estaremos editando um arquivo HTML.
Após fazer isso, vá em File >> Save As >> >> Desktop >> E coloque o nome do arquivo como sendo "teste.html" (a extensão .html nos serve para podermos abrir o arquivo num navegador e podermos acompanhar as alterações feitas em tempo real).
Se você ir ao seu Desktop e clicar duas vezes sobre o arquivo "teste.html" você vai abrir uma página web em branco: essa página é seu arquivo HTML que vai conter a estrutura do seu "site" de testes.

Volte ao NotePad++ para que eu possa lhe explicar como funcionam as tags:
Apenas digite no arquivo a seguinte frase: "Olá mundo!!" Agora salve o arquivo (CTRL+S) e atualize a página web:

[AULA] HTML - Aula 1: Introdução Untitled%2B2


Perceba que temos aqui um texto qualquer em nossa página web, mas se eu quiser deixar esse texto em negrito?
Para fazer isto eu irei utilizar uma tag HTML que vai dar essa aparência ao meu texto.
Para usar tags basta escrever o símbolo do menor "<" colocar a tag específica e depois inserir o sinal do maior ">".
No caso para deixar a palavra em negrito, a tag é "b", ou seja "bold", que significa negrito em inglês.

E então depois definir a tag desejada, você vai colocar após a mesma o texto que deseja deixar com aquela formatação, no caso, "Olá mundo". Após o texto a ser formatado, é sempre importante fecharmos a tag que acabamos de abrir, pois dessa forma iremos delimitar quais textos irão ser influenciados por este comportamento.
Para fechar uma tag basta utilizar o sinal do menor novamente seguido da barra invertida para a direita "/" e colocar a tag com o sinal do maior, ficando assim:

[AULA] HTML - Aula 1: Introdução Untitled%2B3
Salve o documento (CTRL+S), atualize a página e veja o que acontece:


[AULA] HTML - Aula 1: Introdução Untitled%2B4



Perceba que o texto ficou mais forte, não é?
Agora veja como o fechamento de tags é importante: após " < /b>" digite "Seja bem vindo a primeira aula de HTML5", salve o arquivo e atualize novamente a página:

[AULA] HTML - Aula 1: Introdução Untitled%2B5


Note que a frase "Olá mundo" está em negrito, mas "Seja bem vindo a primeira aula de HTML5" não está. Isso acontece porque os textos só ficarão em negrito se estiverem entre a tag 'b', ou seja, entre < b> <  /b>, qualquer texto fora dessa tag não sofrerá influência da mesma.
Agora veja o que ocorre se tirarmos o fechamento da tag "< /b>" de onde ela está e colocarmos após o final da segunda frase:

[AULA] HTML - Aula 1: Introdução Untitled%2B6

Resultado ao salvar o aquivo e atualizar a página:

[AULA] HTML - Aula 1: Introdução Untitled%2B7

Neste momento, todo o texto da página está em negrito pois ele está entre a tag "b".
Com o fechamento de tags temos então um controle sobre quais hipertextos iremos influenciar com aquela determinada tag, mas saiba de antemão que temos tags em HTML que não possuem fechamento, pois não precisamos delimitar nada entre elas, mas isso veremos mais para frente, ok?

Outra informação que eu gostaria de dizer é que o HTML não é case sensitive, ou seja, diferente de C++ ou C#, ele não distingue letras maiúsculas das minúsculas, para o HTML você escrever < b> seria a mesma coisa que escrever < B>.

Estrutura básica de páginas web:
Agora que você entendeu o conceito de tags em HTML nós iremos nos aprofundar um pouco mais na linguagem, começando por criarmos a estrutura básica de qualquer página web atual.
Quando começar um arquivo HTML você deve primeiramente especificar qual versão do HTML está utilizando (em nossas aulas iremos usar o HTML 5 que é a versão mais recente da linguagem) então para especificar essa informação nós iremos digitar no início do documento o seguinte:

[AULA] HTML - Aula 1: Introdução Untitled%2B8

Ou seja, nós estamos deixando subentendido para o navegador que estamos trabalhando com a versão 5 do HTML (tipo de documento).
Atenção: Essa informação não é uma tag e sim uma especificação ao navegador! 

Após declarar a versão HTML você deve inserir outra tag muito importante:


[AULA] HTML - Aula 1: Introdução Untitled%2B9
A tag "html" vai informar ao navegador que o que teremos dentro dela se trata de um arquivo HTML, pois podemos ter outros tipos de documentos em nossas páginas web, como arquivos javascript ou em css, por isso, é importante explicitar a linguagem que está sendo utilizada naquela situação.

Depois teremos as tags para estruturação básica da página: o cabeçalho(head) e o corpo (body):


[AULA] HTML - Aula 1: Introdução Untitled%2B10

Dentro da tag de cabeçalho(head) nós iremos ter toda a parte visual e comportamental do nosso site, como estilos da página em CSS e códigos em Javascript, ambos assuntos que serão tratados mais pra frente em nossas aulas, por isso por enquanto, talvez coloquemos poucas coisas dentro dessa tag e ela fique um pouco vazia, mas com o passar das aulas você verá o que poderá ser colocado entre essa tag de cabeçalho.

Já no caso da tag "body", nós temos o corpo da página, ou seja, tudo o que será inteligível e visualizado pelo usuário, como textos, imagens, links, vídeos, menus, formulários, e etc.

Para facilitar a compreensão, imagine então a estrutura deste site: essa aula que você está lendo, as imagens, os botões e menus em volta estão compreendidos dentro da tag "body", pois é tudo o que pode ser visível ou acessado pelo usuário, enquanto plugins de comportamentos do site e até mesmo as definições de cores da página (por exemplo) estão inseridas dentro do cabeçalho(head). 
Portanto, é importante para qualquer web página a definição dessas duas tags estruturais! 

Podemos então, escrevermos novamente nossa frase "Olá mundo!" na página, mas agora de forma estruturada, dentro da tag body:


[AULA] HTML - Aula 1: Introdução Untitled%2B12
Ao salvar e atualizar a página, você pode ter a impressão de que nada mudou (e visualmente de fato nada mudou) mesmo com todas essas tags inseridas no arquivo, mas quando tornarmos nossa página mais completa e com mais informações, você irá perceber que a utilização dessas tags são muito importantes.

Finalização:
E chegamos ao final da nossa primeira aula de HTML! Creio que para uma aula de apresentação o conteúdo aqui passado foi suficiente para uma introdução à linguagem e seus conceitos iniciais! Mas não paramos por aqui, na próxima aula nós iremos estudar sobre algumas tags de formatação de texto em HTML (como o negrito, visto nessa aula) e também outras tags interessantes como tags para títulos, listas, parágrafos e etc, então continue estudando a acompanhando o blog! Te vejo lá!
MayLeone
MayLeone
Instrutor

Feminino PONTOS : 2136
REPUTAÇÃO : 493
Áreas de atuação : Unity & C#
Respeito as regras : [AULA] HTML - Aula 1: Introdução Aad8pUi

http://compilemosfacil.blogspot.com.br

Voltar ao Topo Ir em baixo

TUTORIAL Re: [AULA] HTML - Aula 1: Introdução

Mensagem por Tegh em Seg Out 08, 2018 4:40 pm

Front-end ahhh... que coisa boa de lembrar, ótima aula e que venham mais.

Tegh
Avançado
Avançado

Masculino PONTOS : 1256
REPUTAÇÃO : 97
Idade : 19
Respeito as regras : [AULA] HTML - Aula 1: Introdução WvDYdlf

Voltar ao Topo Ir em baixo

Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum