Últimos assuntos
Quem está conectado?
Há 2 usuários online :: 0 registrados, 0 invisíveis e 2 visitantes Nenhum
[ Ver toda a lista ]
O recorde de usuários online foi de 13 em Sex Mar 04, 2022 3:18 am
Top dos mais postadores
| Warrior_Maker |
| |||
| Tayllor |
| |||
| KingSora |
| |||
| ~FullzDied |
| |||
| SynysterGates |
| |||
| NeeTo |
| |||
| Alumary |
| |||
| SameKage |
| |||
| samuel250 |
| |||
| Vitor-DR. |
|
Parceiros
SK - HTML - Aula 1
Página 1 de 1
SK - HTML - Aula 1
por SameKage Qui Set 13, 2012 12:35 pm
Yo pessoal ! Sejam bem vindos ao meu simples mas preciso ...
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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 ^^
- 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
- 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>
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
- 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
- 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]
- 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
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 :
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Autor: SameKage
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Outras Aulas :
SK- Lógica de Programação - Aula 1
SK- Lógica de Programação - Aula 2
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Autor: SameKage
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Outras Aulas :
SK- Lógica de Programação - Aula 1
SK- Lógica de Programação - Aula 2
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
SameKage- Iniciante
- Mensagens : 12
Cash : 2
Créditos : 2
Data de inscrição : 02/09/2012
Idade : 26
Localização : Lagoa da Prata (MG) -
Tópicos semelhantes» Aula 1 - Inicio Pixel Art
» SK - Lógica de Programação - Aula 1 e 2
» SK - Lógica de Programação - Aula 3
» SK - Lógica de Programação - Aula 1 e 2
» SK - Lógica de Programação - Aula 3
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
» Sistema de Guild (do Eduardo)
» Sistema de Guild
» Teco Fabrica
» Apresentaçao
» Editando nick
» Sistema De Vila
» alguns tilesets
» Tilesets de natureza
» Olá, vim para trazer sistemas e muitas outras coisas
» [Recrutando] Bleach Online Dark Saga
» Dragon Ball Fox
» Tutorial Mapper - Como avaliar um mapa
» Life RPG Maker 2.0
» Fórum decaido
» Dragon Ball Elite
» Auto Ataque por checkbox
» Pokémon Online - Xstrond Games BETA
» Auto Correr Por CheckBox
» Auto Loot para Eclipse Origins
» Ganhar Item em Certo Nivel
» SK - Lógica de Programação - Aula 3
» Distrito Rpg Maker 2.0 no Ar !!
» Sistemas que preciso
» [ALL] Títulos nos NPC's 1.0
» Vídeo Tutorial Mapper Caverna - MMORPG 2D
» Sistema de plantar e colher
» Perfect engine
» O Seu pirata chegou !
» Novidades para tutorpg o que acha?
» [ZIG ZAG GAMES] Age of Dragons
» Me ajudem Pliss
» SK - HTML - Aula 1
» Forum Decaindo
» Meus 3 mapas
» [Apresentação] Okumura-Rin~
» 3 primeiras sprites
» [EEB] Comando para Salvar Seu Game
» [Off] Olha Suas PM Tayllor
» Fabrica da JCG Corp: Technology in designer [Fechada