Life RPG Maker 2.0
Bem vindo a LRM, forum de ajuda Maker
Registre-se em nosso forum e aproveite Very Happy
esperamos que você seja ajudado e esperamos que nos ajude Very Happy
Life RPG Maker 2.0

2ª versão do forum life rpg maker

Os membros mais ativos do mês

Últimos assuntos
» Kingdon 1.6
Ter Jun 09, 2015 3:02 pm por MasterKill

» Tempo dinâmico e Hora do Sistema
Seg Dez 09, 2013 5:42 pm por jonathas

» Sistema de Natação
Sab Dez 07, 2013 5:14 pm por jonathas

» Classificar Inventario
Sab Dez 07, 2013 12:07 pm por Samuka_Adm

» VOLTEI ALELUIA :D
Sab Dez 07, 2013 10:35 am por Samuka_Adm

» Netplay Master v4.0.7
Qua Jun 26, 2013 1:32 pm por xdario

» The League Of War [Season 1]
Sex Jan 18, 2013 6:02 pm por Warrior

» Meu primeiro desenho que posto :D
Qua Jan 09, 2013 1:37 pm por PedroMatoso

» Window Configurações
Qua Jan 09, 2013 1:36 pm por PedroMatoso

Parceiros
Fórum grátis

Fórum grátis


Mundo RPG Maker
MMORPG BRASIL

Você não está conectado. Conecte-se ou registre-se

SK - HTML - Aula 1

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 SK - HTML - Aula 1 em Qui Out 25, 2012 7:41 pm

SameKage

avatar
Aprendiz
Aprendiz
Yo pessoal ! Sejam bem vindos ao meu simples mas preciso ...




Eu pretendo inicialmente, dividir o curso em oito ou nove aulas, de forma que não fique pesado para mim formular tudo e passar para vocês e também não os sobrecarregue.

As aulas em si terão o melhor conteúdo possível, de autoria quase toda minha, pois pegarei curiosidades e dicas de outros sites ou pessoas experientes, porém o design será muito fraco por motivos de tempo... mas prometo a vocês que assim que todas as aulas forem postadas, trarei para vocês todas elas reunidas como um curso, que terá um design bem agradável e um conteúdo extra

Enfim, espero que gostem e que tirem suas dúvidas por aqui mesmo se tiverem e caso apreciem mesmo o curso, dê algum crédito a mim, pois é muito cansativo passar meu conhecimento adiante :)

Bom, sem mais delongas ...

Introdução
Spoiler:

Do que se trata a World Wide Web (WWW)

Atualmente, fazemos bom uso da internet em nosso cotidiano, a mesma que é considerada um fenômeno e mais que um modismo, se tornou realidade para grande parte da população mundial. São mais de 40 milhões de usuários de cerca de 90 países e este número continua a crescer cada vez mais e mais rápido

Mais conhecida como WWW (sim, o mesmo www que você digita na barra de endereços de seu navegador) , a World Wib Web nada mais é do que uma estrutura de navegação espalhada por diversos itens de dados em milhares de computadores diferentes. Em outras palávras acaba sendo a interface gráfica da internet, pois o acesso a web é feito sem a necessidade da mesma

Bom, eu poderia muito bem explicar mais a fundo este assunto e sobre a parte eletrônica da internet, mas deixarei isto para a última aula, para que possamos chegar mais rápido a parte prática do assunto

Vamos agora para a última revisão teórica para esta aula, após esta pequena explicação já entraremos mais a fundo na web

Apresentando o HTML
Spoiler:

Em meados da década de 90, alguns cientistas se deram conta de que precisavam de um acesso a troca de informações e de documentação entre cientistas de diferentes universidades

Dessa forma, Tim Berners-Lee (meu ídolo XD) criou a HTML. O projeto inicial tornou-se um sucesso jamais imaginado e através dele, surgiram as fundações da internet, tal como a conhecemos hoje

A HTML, Hyper Text Markup Language, tem o significado de Linguagem de Marcação de Hipertexto, sendo uma linguagem universal de códigos padrões destinados à criação de páginas para exibição nos navegadores web. E é essa linguagem que você aprenderá durante este curso !

Completa no quesito multimídia, a marcação de Hipertexto permite a exibição, nos navegadores, de filmes, mp3 e imagens.

Simples como escrever em uma folha em branco, trabalhar com HTML tem suas virtudes e é bem parecido com o que você usa em fóruns. Para isso você usará um aplicativo bem simples, nada de dreamweaver ou outros editores dinâmicos, será apenas o Bloco de Notas do Windows :)

Ah, lembrando que um documento HTML é um simples documento de texto, porém com extensão diferente. (Simples, não?)

Os Links
Spoiler:

Também chamados de hipervínculos quando se trata de imagens, os links são textos ou figuras que possuem determinado endereço de outra página "linkado" a eles. Cada documento HTML na verdade é uma página e, vários documentos se tornam um website. As várias páginas de um site se interligam através dos links, ou chamados vínculos que geralmente podem ser identificados pela presença de um sublinhado ou cor diferente, além de o mouse assumir a forma de uma "mãozinha"

Note que uma página HTML é um arquivo, então, quando um link é acessado, outra página é chamada. Geralmente, o arquivo da página principal de um site recebe o nome de index.html ou default.html, mas não é uma regra

Basicamente, páginas estáticas são a essência do HTML, por isso seu conteúdo nunca se altera, a não ser que seu programador o faça. Ao contrário de outras linguagens, como AspScript ou JavaScript

Mas acho que já chega de teoria, que tal colocarmos a mão na massa? É, eu sei que estava chato :/ mas agora você vai gostar ^^
Conhecendo as Tags
Spoiler:

Sabendo que a HTML é vital para que os navegadores exibam sites, surge a dúvida : como isso é feito ?

Recebe o nome de TAG, a maioria dos comandos HTML. Você identifica um TAG do restante do documento através dos símbolos < e > ( Note a semelhança com posts de fóruns, que usam [ e ] )

Existem TAGs de abertura e de fechamento. O que caracteriza um TAG de fechamento é uma barra ( / ), por exemplo : </html>. Isso demonstra no caso que o documento html foi fechado. Já o de abertura, não possui a barra : <html>

Ah, lembrem-se disso : todo texto que for incluído entre seus delimitadores de abertura e fechamento sofrerá as alterações produzidas por ele
Primeiras TAGs
Spoiler:

Bom, já sabendo que cada TAG tem abertura e fechamento, abaixo serão explicadas as TAGs de base, sendo apresentadas apenas as de abertura, mas não se preocupe, já que será algo automático para você em breve, fique atento a cada explicação :

<HTML> : Sendo o primeiro TAG existente em um documento HTML, que é bem fácil de lembrar :), ela determina que todo texto que se encontra entre suas delimitações (abertura e fechamento) será da linguagem do Hipertexto

<HEAD> : Aqui são inseridas informações especiais disponíveis da página e também o seu nome. Este nome é a frase exibida na barra de títulos do navegador, quando a página é carregada

<BODY> : A maior parte do seu trabalho será feita dentro desta TAG, onde você irá escrever os códigos para inserir sons, figuras e tudo mais

Nota: Apenas com estas três TAGs, já se pode construir o que chamamos de site

<TITLE> : Este TAG tem a função de inserir um título na barra de título do navegador, quando a página é carregada. Ela sempre é inserida dentro das delimitações da TAG <HEAD>

Baseado nessas explicações, pode-se retirar a seguinte estrutura padrão básica para um documento HTML :
Código:

<html>
  <head>
    <title>
    " Título da Página "
    </title>
  </head>
  " Informações sobre a página e título "
    <body>
    " Todo o restante do código "
    </body>
</html>
Perceba que para cada TAG de abertura, foi usada uma de fechamento inserida de forma correta.

Alguns podem estar se perguntando : por que você usou espaços ao inserir as TAGs ?

- Bom, isso é uma questão estética chamada endentação, que se trata de um posicionamento das TAGs que facilite o compreendimento do código e a sua edição, mas ele não é uma regra, porém recomendo que usem mesmo assim para terem um melhor entendimento do que estão fazendo
TAGs comuns de textos
Spoiler:

Além dos TAGs de base, existem tabém as de formatação e de estilo de textos, modificando os mesmos dentro de suas delimitações

Veja a seguir alguns TAGs para formatação de texto, parágrafo e cabeçalhos :

TAGs de Formatação :

<i> e </i> = itálico
<b> e </b> = negrito
<u> e </u> = sublinhado
<sub> e </sub> = subscrito
<sup> e </sup> = sobrescrito


Outros TAGs

<br> Quebra de linha, como se fosse o enter. Ele não possui fechamento por não possuir conteúdo a ser usado nele
<tt> e </tt> = Apresenta o texto em fonte monoespaço.
<hr> Insere uma linha horizontal no documento e não possui fechamento
<h1> e </h1> até <h6> e </h6> = São estilos de cabeçalho, quanto menor o número maior a fonte usada. (Funciona como o atributo "size")
<p> e </p> Coloca um parágrafo no texto entre suas delimitações (muito útil)
<pre> e </pre> = Exibe o texto no navegador exatamente como está no código. (Com toda certeza o mais útil dos TAGs de texto para economizar código)

Observação : O navegador não interpreta linha excessivas, quebras de linha ou espaços, por isso o uso das TAGs.

Não se preocupe em decorar todos os TAGs, isso se dá com o tempo :)
Atribuições de uma TAG
Spoiler:

Cada TAG possui suas próprias propriedades que permitem a configuração de seus componentes, alterando a forma como são exibidos. Eles podem se relacionar tamanho, cor e várias outras definições

Você se lembra da TAG <hr> ? Abra o bloco de notas no seu computador, digite o seguinte código e salve como .html :

Código:

<html>
  <head>
    <title>
    " Título da Página "
    </title>
  </head>
  " Informações sobre a página e título "
    <body>
    <hr>
    " Todo o restante do código "
    <hr>
    </body>
</html>

Agora abra em seu navegador digitando o endereço do documento ou pelo comando de abrir mesmo, perceba que as linhas ocupam toda a página. Mas vamos testar o seguinte :

Mofique uma das TAGs <hr> em seu bloco de notas para <hr width=500> , veja o que acontece ao atualizar o navegador. Isso é um atributo !

Este termo em inglês (width) significa largura, ou seja, este atributo define que o valor contido nele será o tamanho da linha ( <hr> ) . O mesmo valor também pode ser expresso em porcentagem, sendo que 100% corresponde ao tamanho máximo

Agora que você conhece este atributo, veja outros que alteram a aparência da linha horizontal ( <hr> )



SIZE = espessura da linha ( Valor padrão = 2, sem o atributo, o navegador interpreta size=2 )
ALIGN = define o alinhamento da barra em relação ao navegador
NOSHADE = modifica a aparência da linha para uma cor sólida

[/font]
DESAFIO
Spoiler:

Quem fazer o melhor documento HTML se apresentando usando as TAGs apresentadas nesta aula, receberá +1 de Fama

Mas façam pelo aprendizado, que é mais importante :)
Condições para a disponibilização da aula em outros locais :

Deve ser usado este código no final da postagem e usar o mesmo nome do tópico oficial (SK - HTML - Aula 1) :

Código:
[center]Aula trazida pelo :
[url=http://distritorpgmaker.forumeiros.com][img]http://img826.imageshack.us/img826/1774/agorasimmenor.jpg[/img][/url]

Autor: SameKage
[img]http://r15.imgfast.net/users/1516/31/31/06/avatars/1-0.jpg[/img]
Outras Aulas :

[url=http://distritorpgmaker.forumeiros.com/t99-sk-logica-de-programacao-aula-1#196] SK- Lógica de Programação - Aula 1[/url]
[url=http://distritorpgmaker.forumeiros.com/t113-sk-logica-de-programacao-aula-2#216]SK- Lógica de Programação - Aula 2[/url][/center]

Aula trazida pelo :
[Você precisa estar registrado e conectado para ver este link.]

Autor: SameKage

Outras Aulas :

[Você precisa estar registrado e conectado para ver este link.]
[Você precisa estar registrado e conectado para ver este link.]

Enfim espero que tenham gostado ^^

Até a próxima aula ! OBS : Eu vou continuar com as de lógica, só estou formulando a aula antes de escrever


_________________
Ei, tem um tempinho livre? Visite o Distrito Maker !!
[Você precisa estar registrado e conectado para ver este link.]
Ver perfil do usuário http://distritomaker.forumeiros.com

2 Re: SK - HTML - Aula 1 em Qui Out 25, 2012 8:38 pm

mano vc bugou o resposta rapida do forum kkkkkkkk
mas boa aula vlw por compartilha-la conoscom mesmo eu ja sabendo disso ai ^^ xD

Ver perfil do usuário http://liferpgmakerv2.forumais.com

3 Re: SK - HTML - Aula 1 em Sex Out 26, 2012 3:09 pm

SameKage

avatar
Aprendiz
Aprendiz
É bugou * -* kkk

Mas obrigado por responder, foi mal o problema


_________________
Ei, tem um tempinho livre? Visite o Distrito Maker !!
[Você precisa estar registrado e conectado para ver este link.]
Ver perfil do usuário http://distritomaker.forumeiros.com

4 Re: SK - HTML - Aula 1 em Sex Out 26, 2012 4:25 pm

pronto desbuguei manin tive ke desativar HTML e.e
e nda agr problema resolvido
vlw por postar
xD

Ver perfil do usuário http://liferpgmakerv2.forumais.com

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

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