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:
[____ADMINISTRAÇÃO____] Alterações IMPORTANTES no fórum.
Unity Remota 5, sem reação.
[PROJETO MOBILE] Defeat the Illuminatis
[TUTORIAL] Sistema de Oficina de Carros
Unity 2018 - Bug com a iluminação da Spotlight nos Objetos
[TUTORIAL] Menu Pause AVANÇADO (Unity 5.3 ou superior)
iniciar jogo com uma cena desativada e ativá-la ao colidir com bloco desativando as outras
Como Faz pra barra de vida aparecer de uma cena pra outra?
Problema com cenário infinito ou algum tipo de bug na Unity?
[TUTORIAL] Barra de VIDA / HP contínua
Salvar e carregar dados json player pref
Blander ao juntar algumas partes ficam mais escuro
Problema com Esqueleto do personagem
{Possível Projeto para Unity} Buscando membros para formar uma Equipe...
[TUTORIAL] Como spawnar inimigos [Tutorial simples]
Não consigo fazer o box collider descer junto com o personagem.
BUG UNITY 3D ROSA A SCENE E GAME
Sistema de Grau Realista - Jogo de Moto
(Dúvida) Encontrar o objeto mais próximo partindo do ponto inicial ao final.
Programação Unity android 2D
(UNITY) Erro ao compilar a Build Android
Erro na sincronização dos player no Photon
[TUTORIAL] Barra de vida usando a UI da Unity(Slider)
[Projeto] Line Battle
Procuro Equipe Para Criação de Jogo [PAGO]
[TUTORIAL] Desbloqueio e Escolha de Personagens.
[RESOLVIDO] Problema com o navmesh agent
[RESOLVIDO] Registro cadrastando uma vez?
Vaga de modelador 3D, com remuneração...
Problemas com Colisores
[____ENQUETE____] Eleições para presidente 2018 (2º turno)
Como criar Atlas de textura com modelos exportados do Sketchup?
Unity - Sistema de Pagamento
[RESOLVIDO] iniciar áudio ao passar por uma área da cena
[RESOLVIDO] como envia asset para asset store
[TUTORIAL] Mover personagem com Touch, no estilo SUBWAY SURFERS
codigo não deleta prefab e não respeita o if
[TUTORIAL] Filtros de áudio para AudioListner (Low pass filter, High pass filter, etc)
[____CICLO DE TRABALHO DA UNITY____]
Meu jogo não está abrindo em outro PC
[TUTORIAL] DANO POR QUEDA e BARRA DE VIDA CONTÍNUA no mesmo script
[TUTORIAL] Sistema de vida,morte,dano
Discord para desenvolvimento de jogos
FAB in WWII (Novo jogo na Play Storee é Free :D)
[____TÓPICO LIVRE____] FALE O QUE QUISER (Parte 2)
[TUTORIAL] Sistema de PORTAS e CHAVES
Criar uma Array ou List com as resoluções suportadas
Alguem traz esse tutorial pro forum?
Realistic fps prefab tenho esses erros ao tentar colocar um script de entrar sair do carro
[RESOLVIDO] Alguem pode me ajudar? tenho esse erro aqui em um script
[RESOLVIDO] Personagem 2d batendo na borda e voando.
[RESOLVIDO] Não consigo usar o Sphere collider.
[RESOLVIDO] Como usa o UI.Text do unity?
Como criar botão de nova tentativa
[RESOLVIDO] Duvida em Jogo de tiro 2D
[RESOLVIDO] duvida com PlayerPrefs
Iniciar animação em determinado frame
Sistema De Troca De Armas 2D
[TUTORIAL] Script de arma completo! [FREE]
[TUTORIAL] Ordenar valores de uma array[] em ordem CRESCENTE OU DECRESCENTE
Meu jogo de runner em primeira pessoa !
[RESOLVIDO] Timer pra mudar de cena na unity 2018
Atualizar Build
[TUTORIAL] 42 ÓTIMAS DICAS DE OTIMIZAÇÃO PARA JOGOS MOBILE (Android)
Como usar Vector3.Angles para detectar que algo está na frente de outro objeto?
[TUTORIAL] Como fazer porta malas do carro abrir atravez de um botão?
Script nao funciona
Como desativar scripts em objetos distantes
[RESOLVIDO] Bug Da Unity ?
[AULA] HTML - Aula 1: Introdução
Raycast
[TUTORIAL]"Morte" do personagem (Unity 5.3 ou Superior)
Problema com a unity ads
como eu faço para a camera orbitar um objeto atraves de um joystick?????
XML, suporte e utilização.
Arrastar objetos em plano 2D (ArrastarT).
[TUTORIAL] Sistema de fome, sede, barra de vida, barra de estamina, itens e dano por queda
Participe da Game Jam - Jaaj do canal Amdré Young!
Criar sistema de arrastar e soltar objetos em determinado lugar
AWM Champions I
[RESOLVIDO] Como verificar se o objeto é diferente de null
COMO FAÇO PARA FAZER UM SISTEMA DE SKIN PARA ANDROID ESTILO HEAVY BUS, PROTON BUS, ETC
[TUTORIAL] Snake com Unity + C#
Sobre Som (Ouvir som do sistema , duas caixas de som ... )
Configurar NPCs
[RESOLVIDO] Script Carta
[TUTORIAL] Texto Legenda Character Por Character Para Uso Básico
Ajuda com script movimento por Grid Tile no Navmesh
[Devlog] Lost in the world 05/10
[___COMO UTILIZAR O FÓRUM___] Principais botões e suas funções
inimigo nao persegue player
[RESOLVIDO] Build setting não entra
[RESOLVIDO] Player Sair Da animaçao
[RESOLVIDO] Erro colider
Dúvida sobre Resolução
[____APOIE O FÓRUM E O CANAL E GANHE RECOMPENSAS____]
[____ENQUETE____] Eleições para presidente 2018
[Plugin dll] DigData basico save data Para Unity
Conquistas Steam? Adicionar
Ontem à(s) 11:22 pm
Ontem à(s) 10:47 pm
Ontem à(s) 7:17 pm
Ontem à(s) 7:09 pm
Ontem à(s) 4:52 pm
Ontem à(s) 2:57 pm
Ontem à(s) 1:11 pm
Ontem à(s) 12:27 pm
Ontem à(s) 11:47 am
Ontem à(s) 10:36 am
Ontem à(s) 9:49 am
Qua Out 17, 2018 11:45 pm
Qua Out 17, 2018 11:17 pm
Qua Out 17, 2018 10:14 pm
Qua Out 17, 2018 9:49 pm
Qua Out 17, 2018 8:32 pm
Qua Out 17, 2018 5:18 pm
Qua Out 17, 2018 5:16 pm
Qua Out 17, 2018 5:13 pm
Qua Out 17, 2018 5:13 pm
Qua Out 17, 2018 5:10 pm
Qua Out 17, 2018 4:35 pm
Qua Out 17, 2018 3:13 pm
Qua Out 17, 2018 7:28 am
Ter Out 16, 2018 9:56 pm
Ter Out 16, 2018 3:34 pm
Ter Out 16, 2018 12:41 pm
Ter Out 16, 2018 11:48 am
Seg Out 15, 2018 5:34 pm
Seg Out 15, 2018 5:03 pm
Seg Out 15, 2018 2:46 pm
Seg Out 15, 2018 1:19 pm
Seg Out 15, 2018 12:56 pm
Seg Out 15, 2018 11:34 am
Seg Out 15, 2018 6:17 am
Seg Out 15, 2018 12:30 am
Seg Out 15, 2018 12:18 am
Dom Out 14, 2018 12:52 am
Sab Out 13, 2018 9:08 pm
Sab Out 13, 2018 5:24 pm
Sab Out 13, 2018 4:00 pm
Sex Out 12, 2018 10:42 pm
Sex Out 12, 2018 6:00 pm
Sex Out 12, 2018 2:56 pm
Sex Out 12, 2018 2:55 pm
Sex Out 12, 2018 2:42 pm
Qui Out 11, 2018 8:59 pm
Qui Out 11, 2018 8:32 pm
Qui Out 11, 2018 3:09 pm
Qui Out 11, 2018 2:32 pm
Qui Out 11, 2018 12:15 pm
Qui Out 11, 2018 11:35 am
Qui Out 11, 2018 10:50 am
Qui Out 11, 2018 8:24 am
Qua Out 10, 2018 11:31 pm
Qua Out 10, 2018 10:43 pm
Qua Out 10, 2018 8:22 pm
Qua Out 10, 2018 4:53 pm
Qua Out 10, 2018 4:44 pm
Qua Out 10, 2018 3:48 pm
Qua Out 10, 2018 12:40 pm
Ter Out 09, 2018 9:51 pm
Ter Out 09, 2018 8:16 pm
Ter Out 09, 2018 8:16 pm
Ter Out 09, 2018 8:10 pm
Ter Out 09, 2018 8:09 pm
Ter Out 09, 2018 7:38 pm
Ter Out 09, 2018 2:55 pm
Seg Out 08, 2018 6:13 pm
Seg Out 08, 2018 4:40 pm
Seg Out 08, 2018 2:39 pm
Seg Out 08, 2018 12:52 pm
Seg Out 08, 2018 12:16 pm
Seg Out 08, 2018 10:33 am
Dom Out 07, 2018 1:59 pm
Dom Out 07, 2018 11:53 am
Dom Out 07, 2018 10:53 am
Sab Out 06, 2018 11:14 pm
Sab Out 06, 2018 10:55 pm
Sab Out 06, 2018 8:50 pm
Sab Out 06, 2018 8:41 pm
Sab Out 06, 2018 2:21 pm
Sab Out 06, 2018 1:33 pm
Sab Out 06, 2018 2:04 am
Sex Out 05, 2018 8:22 pm
Sex Out 05, 2018 7:39 pm
Sex Out 05, 2018 6:35 pm
Sex Out 05, 2018 11:27 am
Sex Out 05, 2018 11:22 am
Sex Out 05, 2018 9:35 am
Sex Out 05, 2018 12:53 am
Qui Out 04, 2018 11:40 pm
Qui Out 04, 2018 10:43 pm
Qui Out 04, 2018 6:23 pm
Qui Out 04, 2018 3:36 pm
Qui Out 04, 2018 3:12 pm
Qui Out 04, 2018 3:11 pm
Qui Out 04, 2018 3:11 pm
Qui Out 04, 2018 3:07 pm
MarcosSchultz
hao3726
dstaroski
leandrospp7
CaerHunter
Mourao
Daniel Dória
Callyde Jr
FabioBRPA
francisco barroso
dstaroski
DominicDK
DominicDK
NoctisLucis
francisco barroso
MayLeone
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
francisco barroso
hao3726
dstaroski
dstaroski
MRX
ismarspn
Jmspp
Callyde Jr
igorobm
conceptfac
Dom3000
Isabela
Callyde Jr
Daniel Dória
diegopds
MarcosSchultz
igorobm
MarcosSchultz
MarcosSchultz
Flávio
francisco barroso
Callyde Jr
SuperGamer
SoullSec
SoullSec
SoullSec
Flávio
francisco barroso
Samuelostgamer
Samuelostgamer
gurgelg752
luansantos
guimaraf
theus.mors
TecnoGames
Eduardoro39
QueriaStarMorto
QueriaStarMorto
mecjo
NyanHeavyBR
CaioItz
RodriGO3477
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
FelipeSouza11
FelipeSouza11
QueriaStarMorto
Tegh
Jmspp
Callyde Jr
Jmspp
Gabryellx007
Tegh
Tegh
SuperGamer
Luizdanhp
MarcosSchultz
TioUV
QueriaStarMorto
KAYKETHEO27
NKKF
MarcosSchultz
Callyde Jr
francisco barroso
FelipeSouza11
Nowsfeky
Mateus2583
FelipeSouza11
Callyde Jr
Daniel Dória
marcosdanielnerydasilva
francisco barroso
NKKF
dstaroski
dstaroski
dstaroski
dstaroski

[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


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.




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:



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:



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:

Salve o documento (CTRL+S), atualize a página e veja o que acontece:





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:



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:


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


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:


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:


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):



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:


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á!
avatar
MayLeone
ProgramadorMaster

Feminino PONTOS : 484
REPUTAÇÃO : 151
Áreas de atuação : Unity, Rpg Maker, Scratch, C#, C++, HTML, CSS, JS, MySQL, Blender
Respeito as regras :

Ver perfil do usuário 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.
avatar
Tegh
Avançado
Avançado

Masculino PONTOS : 204
REPUTAÇÃO : 29
Idade : 17
Áreas de atuação : Desenvolvimento de Software com C#, aprendizado na Unity e formulação de Sprite no estilo PixelArt.
Respeito as regras :

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

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