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:
Erro após reinstalar o Unity!
Erro ao publicar na google play
como fazer a luz ficar "important" e "not important" por script?
[TUTORIAL] Sistema de Entregas + GPS!
[TUTORIAL] Desenvolvendo um jogo de quebra-cabeças
duvida sobre sistema de cheats estilo gta sa
[Tutorial] Gerando Objetos Proceduralmente
[____TÓPICO LIVRE____] FALE O QUE QUISER (Parte 2)
COMO EXECUTAR AUDIO QUANDO PLAYER MORRE
[____ASSET____] MS Vehicle System (FREE VERSION)
[TUTORIAL] Unity 5.5 - Splash Screen
SOU MODELADOR SE TIVER ALGUEM PRECISANDO AI ME CONTATE
Como bloquear rotação em um eixo do objeto?
Como adicionar todos materiais de um Obj em um Array ou Lista?
PopUp bloqueando versões antigas do jogo
[____ QUAL A OPINIÃO DE VOCÊS SOBRE O FÓRUM? ____]
[TUTORIAL] Sistema de PORTAS e CHAVES
Movimentação 3D View Blender
Som não funciona no IOS
Requisitos de hardware para Post Processing
Imagem Aparecer como pergunta
Aparecer item comprado
Por que a UI da esse "BUG"?
Zerar os tempos do Cronometro Unity
Ajuda na unity
Girar personagem no próprio eixo usando joystick virtual
Problema com Esqueleto do personagem
PRESSIONAR BOTÃO TOUCH NO ANDROID SERÁ O MESMO QUE PRESSIONAR UMA TECLA DO TECLADO REAL
Quanto Devo Cobrar Por Um Pacote De Modelos 3D ?
Script de Contagem Regressiva
Ajuda com o codigo.
Como acessar uma variável de um script utilizando como parâmetro uma variável nomescript
CRIEI MEU PRIMEIRO JOGO! 1 ANO DE TRABALHO!
Como eu faço pra poder interagir apenas uma vez com um objeto de luz?
MOVIMENTAÇAO DE UM CUBO
Duvida sobre materiais e textura
Super Husky - meu jogo
Duvida sobre Unity
[Em Desenvolvimento] Battles of Worlds
Dúvida de imagem sobre realidade aumentada
Converter string em virgula em float (decimal)
[TUTORIAL] Como usar FREE EASY CRIATURA CONTROLE IA
Duvida em relação processo de geração de receita
Preciso de ajuda com GetButtonDown with Axis
Me ajudem por favor
Detectando Colisão da Arma com o Inimigo
Como posiciono meu interestial admob pra aparecer apenas quando o personagem morrer?
Como eu faria pra ter uma animação diferente para cada lado em um jogo de plataforma 2D?
JOGO DE CARRO EM 2D E PRECISO DE AJUDA EM SCRIPT QUE VAI PRA FRENTE E PRA TRAZ
[RESOLVIDO] Abrir Tampa Ao Apertar o Botão do Mouse
Problemas com .blend para unity
Assetion faled on expression: SUCCEEDED(hr)´
[RESOLVIDO] Raycast que seque o player
OBJETO CONTINUAR FLUTUANDO TENDO RAGDOLL
[TUTORIAL] Roleta de Premios
COMO INTRODUZO O NPC NO VEÍCULO UTILIZANDO O MS VEHICLE SYSTEM?
Duvida - Tilemap
[TUTORIAL] Salvar a última posição do personagem ao trocar de cena
Sistema de codigos utilizando PlayerPrefs
[Duvida] Jogo Futebol - Fisica
[RESOLVIDO] Visual Studio não se auto-completa
[RESOLVIDO] Não consigo somar o PlayerPrafs do meu game
[RESOLVIDO] AJUDA COM SCRIPT COLETAR 8 PEÇAS PARA ABRIR PORTA
Conta desenvolvedor android
[RESOLVIDO] Criando terreno para mobile
SnowFall
Erro no Script
AJUDA COM PROBLEMA QUANDO INIMIGO MORRE
[Duvida] Como Edito uma animação do Mixamo ?
Sea Ruler
Tem como texturizar apenas uma face do cubo no Unity?
[RESOLVIDO] Light moba style
[RESOLVIDO] Problema com script básico
Por que o unity não está abrindo? Grizzly 2.3.30? Request failed?
[DÚVIDA] Fazer um zumbi..
[RESOLVIDO] Como Fasso Para O HingeJoint Virar em Duas Direçoes?
[RESOLVIDO] Obter um valor ne uma lista
Duvidas sobre Programação, Banco de Dados, PHP/XML em Unity, Json ou PlayerPrefs?
[RESOLVIDO] Quando dou BAKE na cena, as sombras dos objetos somem!
SkyBox Lerp
Como fazer pro meu tiro matar o inimigo?
[ARTIGO] Inteligência Artificial para Jogos
[TUTORIAL] Unity 5 - Wheel Collider, veículos, suspensão realista.
dança
Caixa de notificações
SCRIPT DE INTELIGENCIA ARTIFICIAL PARA ZUMBI, DESVIAR DE OBJETOS E ATACAR JOGADOR
Script faz a função tudo certo na unity, já quando gero apk o script não faz a função
[RESOLVIDO] Script não funciona corretamente, qual seria o problema?
Qual o nome das funções prontas no Unity (transform, linecast)
Arquivos com Casa, arvores, Gramas, Objetos3d Etc...
Novo App Maquininha Virtual
Shader com efeito de dissolução
[TUTORIAL] Sistema de DIA E NOITE completo, com luzes noturnas e SISTEMA DE NUVENS
Formação de Equipe ( Favela Killer)
Movimentação com RigidBOdy2D dando travadinhas
Como Configurar a Unity, para que modifique o seu Eixo?
Pegar Valor int, Como?
POSSO PUBLICAR MEUS JOGOS USANDO VERSÃO GRATUITA DESSA ENGINE...
Parceria em game 2D
Hoje à(s) 12:04 pm
Hoje à(s) 12:02 pm
Hoje à(s) 10:06 am
Hoje à(s) 10:02 am
Hoje à(s) 9:46 am
Ontem à(s) 11:53 pm
Ontem à(s) 9:42 pm
Ontem à(s) 9:20 pm
Ontem à(s) 8:17 pm
Ontem à(s) 1:04 pm
Ontem à(s) 2:01 am
Dom Jun 16, 2019 6:02 pm
Dom Jun 16, 2019 2:43 pm
Dom Jun 16, 2019 2:16 pm
Dom Jun 16, 2019 1:16 pm
Dom Jun 16, 2019 4:33 am
Dom Jun 16, 2019 4:03 am
Sab Jun 15, 2019 5:52 pm
Sab Jun 15, 2019 3:16 pm
Sab Jun 15, 2019 2:43 pm
Sab Jun 15, 2019 1:43 pm
Sab Jun 15, 2019 12:01 am
Sex Jun 14, 2019 10:47 pm
Sex Jun 14, 2019 9:39 pm
Sex Jun 14, 2019 9:20 pm
Sex Jun 14, 2019 8:56 pm
Sex Jun 14, 2019 8:31 pm
Sex Jun 14, 2019 8:18 pm
Sex Jun 14, 2019 8:12 pm
Sex Jun 14, 2019 7:09 pm
Sex Jun 14, 2019 6:26 pm
Sex Jun 14, 2019 8:59 am
Sex Jun 14, 2019 5:25 am
Qui Jun 13, 2019 7:42 pm
Qui Jun 13, 2019 7:33 pm
Qui Jun 13, 2019 1:02 pm
Qua Jun 12, 2019 8:26 pm
Qua Jun 12, 2019 5:27 pm
Qua Jun 12, 2019 3:54 pm
Qua Jun 12, 2019 3:01 pm
Qua Jun 12, 2019 2:50 pm
Qua Jun 12, 2019 12:13 pm
Ter Jun 11, 2019 5:26 pm
Ter Jun 11, 2019 3:47 pm
Ter Jun 11, 2019 3:43 pm
Ter Jun 11, 2019 8:13 am
Seg Jun 10, 2019 12:24 pm
Dom Jun 09, 2019 10:46 pm
Dom Jun 09, 2019 3:19 pm
Dom Jun 09, 2019 2:21 pm
Dom Jun 09, 2019 12:04 pm
Dom Jun 09, 2019 10:42 am
Sab Jun 08, 2019 11:56 pm
Sab Jun 08, 2019 10:52 pm
Sab Jun 08, 2019 10:33 pm
Sab Jun 08, 2019 10:06 pm
Sab Jun 08, 2019 9:41 pm
Sab Jun 08, 2019 8:40 pm
Sab Jun 08, 2019 8:32 pm
Sab Jun 08, 2019 2:00 pm
Sab Jun 08, 2019 12:50 pm
Sab Jun 08, 2019 8:59 am
Sex Jun 07, 2019 8:21 pm
Sex Jun 07, 2019 3:50 pm
Sex Jun 07, 2019 3:39 pm
Qui Jun 06, 2019 10:47 pm
Qui Jun 06, 2019 2:48 pm
Qua Jun 05, 2019 1:48 pm
Qua Jun 05, 2019 10:43 am
Ter Jun 04, 2019 6:35 pm
Ter Jun 04, 2019 3:20 pm
Ter Jun 04, 2019 11:20 am
Seg Jun 03, 2019 3:49 am
Seg Jun 03, 2019 2:31 am
Dom Jun 02, 2019 11:53 pm
Dom Jun 02, 2019 10:01 pm
Dom Jun 02, 2019 12:44 pm
Sab Jun 01, 2019 2:42 pm
Sab Jun 01, 2019 4:32 am
Sex Maio 31, 2019 8:26 pm
Sex Maio 31, 2019 4:02 pm
Sex Maio 31, 2019 12:20 pm
Qui Maio 30, 2019 7:34 pm
Qui Maio 30, 2019 4:29 pm
Qui Maio 30, 2019 4:27 pm
Qui Maio 30, 2019 4:26 pm
Qua Maio 29, 2019 3:42 pm
Qua Maio 29, 2019 10:15 am
Ter Maio 28, 2019 5:40 pm
Ter Maio 28, 2019 2:49 pm
Ter Maio 28, 2019 1:47 pm
Ter Maio 28, 2019 9:37 am
Ter Maio 28, 2019 9:22 am
Ter Maio 28, 2019 8:31 am
Seg Maio 27, 2019 4:53 pm
Seg Maio 27, 2019 3:22 pm
Seg Maio 27, 2019 2:42 pm
Dom Maio 26, 2019 5:58 pm
Dom Maio 26, 2019 11:44 am
slevimk
slevimk
MarceloYBP
JhoowGamer
Diego Felix
kalango studios games
Matrirxp
NKKF
Diego Felix
dkrazor
henriquegusbr
Socates
LúcioHenrique098
ffabim
Diguinho
MarcosSchultz
MarcosSchultz
lesgoy
fjosmoreno
guimaraf
MayLeone
Magnatah
glauco
Magnatah
Magnatah
Magnatah
Magnatah
Magnatah
Magnatah
Magnatah
artplayer
Tegh
fluminintia
diegopds
diegopds
ronigleydson
GameLACK
poyser
Dom3000
numb123
numb123
Unidade3d5
poyser
velho rabugento
JohnRambo
marlok3d
slevimk
mathhBR
Magnatah
williangamesbr4021
Magnatah
Giuliano Neto
hendrick22
MarcosSchultz
Diguinho
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MayLeone
LúcioHenrique098
yurinogueira
yurinogueira
JohnRambo
JohnRambo
NKKF
artplayer
Diego Felix
diegopds
NKKF
ronigleydson
erifmeurer
yurinogueira
luiz12345
gcs13
williangamesbr4021
hendrick22
artplayer
BrazaTattoo
Brian Victor
JohnRambo
Callyde Jr
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MayLeone
glauco
Tegh
glauco
fecirineu
fabricadegame
fabricadegame
thales.ulisses
MarcosSchultz
glauco
Tegh
GameLACK
Priste_Hell

[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
ProgramadorMaster

Feminino PONTOS : 974
REPUTAÇÃO : 255
Áreas de atuação : Unity, C++/C#, HTML, CSS, JS, jQuery, PHP, MySQL, XML, Blender
Respeito as regras : [AULA] HTML - Aula 1: Introdução Aad8pUi

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.
Tegh
Tegh
ProgramadorMaster

Masculino PONTOS : 599
REPUTAÇÃO : 82
Idade : 18
Áreas de atuação :
Programador intermediário de C#;
Conhecedor da plataforma .NET Framework/Core e Unity;
Respeito as regras : [AULA] HTML - Aula 1: Introdução Aad8pUi

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