Jump to content
Sign in to follow this  
CWB

Criando Sites - Conteudo Html E Introdução À Css

Recommended Posts

Tentando assistir o jogo do Brasil com USA pelo G1, meio que está impossível assistir. Vim fazer tutorial \o

Vou dar continuidade da Parte 2.1 e terminar de colocar o conteudo, pra que na Parte 3 estilizar esse conteúdo com CSS.

Depois de falar da organização dos sites, qual a importancia dela, explicar o que e tableless, vamos agora pular toda essa parte que foi falada na 2.1 e vamos logo ao conteúdo.

Abra seu arquivo index.html e coloque a estrutura que criamos:


<div id="geral">
<div id="divCima">
<div id="divLogo">

</div>

<div id="divMenu">

</div>
</div>

<div id="divMeio">
<div id="divConteudo">

</div>

<div id="menuAside">

</div>
</div>

<div id="divBaixo">
<div id="divRodape">

</div>
</div>
</div>

Vou explicar aqui o que vai contem em cada div.

Id Geral - Ela "passa" a ser o nosso "body" iremos colocar todo o conteudo dentro dela, nela que definimos largura do site e se ele vai ser centralizado ou não.

Id divCima - O nome ja diz, vai ser a parte de cima do nosso site, onde vai ficar o logo, e o menu.

Id divLogo - Aqui vai ficar a imagem do nosso logo

Id divMenu - Nosso menu, vai conter todos os links, como Home, Cadastro, Download, Ranking, etc

Id divMeio - Nosso conteudo, e onde vai aparecer os textos, imagens, etc

Id divConteudo - Aqui realmente vai conter todo o texto, imagens, tabulação de dados, vai ser a "página" do site

Id divAside - Nesse "menu" , vão ficar coisas como top 5, vote

Id divBaixo - Rodapé

Id divRodape - Aqui pode colocar aquela famosa frase "Todos os direitos reservado" , também um sitemap - mapa de links

Depois de explicado o que vai conter cada div, vamos começar com a divCima, divLogo:


<div id="divLogo">
<h1>Cronus Emulator - Ragnarok Online</h1>
<h2>Seu site de Ragnarok</h2>
</div>

Tags Headings

As tags headings no html vão de h1 até h6. Elas são usadas para títulos, subtítulos etc. Também são usadas como hierarquia de h1 como valor maior para h6 como valor menor.

Usei elas, h1 o nosso logo, e o h2 o nosso slogan

Onde uso as tags headings?

Usa-se as tags headings, para títulos na seguinte ordem:


h1
h2
h3
h4
h5
h6

Exemplo:


<h1>Título</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>
<h2>Subtítulo</h2>

<h1>Título</h1>
<h2>Título</h2>

Exemplo no G1:

h1h2.jpg

Enfim, a semântica das tags headings são para títulos, lembrando, h1 maior relevância, h6 menor relevância.

Ok, criamos o nosso logo, lembrando que voce pode colocar uma imagem .

Como colocar uma imagem?

Simples, usa a seguinte tag

<img src="CAMINHO-DA-IMAGEM.jpg" width="LARGURA" height="ALTURA" alt="TEXTO-ALT" title="TITULO" />

<img src="imagens/logo-ragnarok.jpg" width="1000" height="100" alt="ragnarok-online" title="Cronus Emulator - Ragnarok Online" />

Lembras das excessões? A tag img é uma delas, veja que o fechamento e feito da seguinte maneira />

Vou explicar o que cada coisa faz

src - Creio que pra mim, src é a abreviatura de source, ou seja, caminho da imagem, em qual pasta ela está

width - largura da imagem, é muito importante declarar a largura da imagem aqui, pois o navegador nao vai perder tempo para ler as dimensoes dela e dai definir o tamanho. NUNCA, mas NUNCA, declare valor errado aqui, se for redimensionar uma imagem, redimensione no photoshop, não aqui, e outra NUNCA mas NUNCA, distorça uma imagem, deixa a largura e altura na mesma proproção

height - altura da imagem, vale a mesma coisa

alt - importante para buscadores, como Google etc. O Google não consegue ler o que está escrito na imagem, por isso a tag alt, de alternative text, ou seja, texto alternativo

title - outra coisa importante para buscadores, o title define o titulo dessa imagem, ou seja, quando voce passa o mouse em cima de uma imagem, e ve aquela caixa com texto, é o title. PS: A caixa se chama Tooltip

--

Depois de explicar isso, vamos construir nosso menu.

<div id="divMenu">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

A semântica de criar vários links, é usando essas tags, a ul e a li. É incorreto usar li fora da ul.

O que significa ul e li? ul - unordered list, ou seja, lista não ordenada. Ele cria uma lista, com os li, existe tbm a tag <ol>, ao contrário é uma ordened list li - list item, ou seja, item de lista. Ele que vai ser os "links" da nossa "lista de link", ele que vao ser os menus Dentro das tags li, colocaremos os nomes dos links


<li>Home</li>
<li>Cadastro</li>
<li>Download</li>
<li>Ranking</li>
<li>Contato</li>

Exemplo do G1

ulli.jpg

Pronto, nosso menu está pronto. Mas ele está feio, e agora? Este tutorial é apenas a criação do nosso HTML, para melhor entendimento das tags, da semântica, não vou misturar com CSS por enquanto.

Enfim, criadoo a parte de cima (Top) vamos agora criar nosso conteúdo. Aqui não tem muito o que fazer, ou seja, vou colocar algumas tags que da para usar.

Mais pra frente do tutorial, vamos criar um sistema de noticias, então vou deixar aqui a estrutura pra depois manipularmos isso com o php.


<h1>Título da Noticia<h1>
<h2>Sub-título da Noticia<h2>
<h3>Postado por: Admin - hh:mm dd/mm/aaaa</h3>
<p>Aqui vem a notícia, nosso parágrago</p>

Simples né? Das tags que usei apenas a <p> eu não falei. A tag p siginifca paragraph, ou seja, parágrafo. NUNCA coloque um texto solto no seu site, sem tags, use a tag <p>, ela é usada pra textos, se não é um titulo, sub titulo, etc, use a tag p ;) - Em alguns casos é melhor as tags headings, por exemplo, na frase "Todos os direitos reservados" é melhor usar uma tag heading como <h4> ou a <h5>. Com o tempo isso vai ser fácil.

Ok, mas como eu vou precisar separar cada noticia futuramente , vamos colocar divisões nelas, ela vão ficar assim:


<div class="noticias">
<h1>Título da Noticia<h1>
<h2>Sub-título da Noticia<h2>
<h3>Postado por: Admin - hh:mm dd/mm/aaaa</h3>
<p>Aqui vem a notícia, nosso parágrafo</p>
</div>

Vish, mais coisas? O que é essa class ai?

Class

O nome já diz, é uma classe. Bem, tava escrevendo mais ia acabar enrolando vocês, então uma boa definição de class.

Qualquer informação de estilo que precise ser aplicada a múltiplos elementos em uma página deve ser feita com uma classe. - Mateus Souza

Tomemos como exemplo, a class que acabamos de usar, essa div noticias usaremos para uma próxima notícia, e assim sucessivamente, ou seja, várias divs usarão a class noticia.

Class X ID

Não tem, qual é melhor, qual o correto usar, class ou id, ela servem para pegar algum valor, definir nomes, a diferença é que class e pra ser usada pra múltiplos elementos, e id, para elementos únicos, ou seja, todo o seu HTML só pode ser usado esse id uma vez. Entenderam?

Enfim, depois de explicar o que é class, e criar nossa notícia, vamos para o menu lateral, o menu Aside.

Aside

Tradução tosca do google -> "De lado"... huuuuuum. Whatever. O aside são menus lateriais. Pronto '-'


<div id="menuAseide">
<div id="top5">
<h3>Top 5</h3>
<ul>
<li>ZePequeno</li>
<li>Beramar</li>
<li>Dunga</li>
<li>LadyGaga</li>
<li>GalvaoBueno</li>
</ul>
</div>
</div>

Acho que não preciso explicar muita coisa aqui né? Criei uma div chamada top 5 e com um titulo e depois uma lista nao ordenada com os nomes dos melhores do servidor.

E agora por ultimo o nosso rodapé


<div id="divRodape">
<h4>Cronus Emulator Ragnarok Online - Todos os direitos reservados ~ 2010</h4>
</div>

Nenhum segredo aqui também, creio que ja expliquei o que utilizei aqui.

Enfim nosso layout ficou assim:

SEM CSS

siteestrutura.jpg

Pretendo deixar nesse formato com CSS

exemplo2s.jpg

Galera, parte 2.2 terminada, bora pra Parte 3 - Estilizando conteúdo com CSS

Edited by CWB
  • Love 1

Share this post


Link to post
Share on other sites

esperei esse tutorial o dia inteiro aoieoaieoaieoaie

Share this post


Link to post
Share on other sites

Pois é MIA, eu quase perco esse tutorial, terminei tudo, dai deu um pau no fórum, dai deu uns bug, mas consegui arrumar, e ta ai, demorou mais saiu ^^

Bora a Parte 3

Share this post


Link to post
Share on other sites

:D adogo

Share this post


Link to post
Share on other sites

Poxa, tomare que o pessoal aprenda e apareça com design melhores.

Bom tutorial.

Share this post


Link to post
Share on other sites

Ótimo!

Go Parte 3!

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

Seja bem vindo ao Cronus-Emulator.
É sempre um prazer te-lo conosco.
Você pode visualizar nossas áreas de suporte para encontrar suas soluções sem a necessidade de se registrar!
Registrando em nossa comunidade, você poderá conhecer mais sobre nosso projeto, criar tópicos, responder tópicos existentes, baixar milhares de recursos em nosso sistema de downloads, participar de nossa comunidade, customizar seu perfil e muito mais... Se você já possui uma conta, faça seu login - ou crie uma conta. Também temos integração com Google+ e Facebook.

×
×
  • Create New...