Anúncios
BEM VINDO(A) AO FÓRUM ADG!

RESPEITE AS REGRAS DO FÓRUM Smile

SEJA UM PLAYER EXEMPLAR. GANHE BENEFÍCIOS COM SEU EXEMPLO.

EM BREVE EVENTOS DIÁRIOS, FIQUE ATENTO E PARTICIPE.

VAGAS ABERTAS NAS ÁRIAS SECUNDÁRIAS.

******************************

FIQUE ATENTO CHAGENLOG DO FÓRUM, NELA SÃO POSTA ATUALIZAÇÕES E NOVIDADES. SAIBA MAIS CLICANDO AQUI


[TUTORIAL] CSS desde o inicio | Introducao: Uma pagina HTML basica

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Ketholy ♥
Ketholy ♥
DIRETORA
DIRETORA
Feminino INSCRITO DIA : 25/07/2016
GRUPO : DIREÇÃO
MENSAGENS : 58
PONTOS : 2297
IDADE : 19
https://assuntosgeral-com-br.forumeiros.com

MensagemKetholy ♥ em Ter Jan 01, 2019 7:00 pm



Introdução

Você não tem por que se intimidar com a perspectiva de usar as Folhas de Estilo em Cascata. Usar um computador pode ser algo assustador quando se vai experimentar pela primeira vez, mas decorrido algum tempo nem se pensa mais nas dificuldades iniciais. Tudo se resume, em se aprender por etapas e é isto que eu vou fazer nesta série de tutoriais. Uma etapa de cada vez.

Quer você seja usuário de um editor WYSIWYG e conhecedor do código por ele gerado ou mesmo não tenha sequer criado uma página Web, este tutorial vai orientá-lo na direção certa.

O tutorial pressupõe um pequeno ou nenhum conhecimento de produção de uma página Web. Ele trata o assunto realmente ' do seu início'

O que vai ser preciso?
Nada especial. Se você tem acesso a um editor de página Web, ótimo. Se não, você pode usar qualquer editor de texto - NotePad no PC ou SimpleText ou TextEdit em Mac. Se você é usuário do DreamWeaver ou GoLive, iremos usar o modo de 'código'.

Não se apavore!
Um editor de imagens não será essencial, pois a princípio não irei me preocupar muito com criação de imagens.

Oh, você irá precisar de um navegador, mas isto eu não precisava dizer. De fato, eu recomendo que você tenha alguns diferentes navegadores. Se você só possui o Explorer, deveria instalar o Mozilla e alguns outros que você poderá obter consultando qualquer listagem Browsers Atuais.

Se você desejar fazer upload de suas páginas para um servidor Web, vai precisar de um programa FTP, mas não se preocupe com isto agora, pois poderá fazer tudo ensinado no tutorial, no seu próprio computador.

Etapa número 1 - Uma página básica
Antes de fazer qualquer coisa iremos precisar de uma página Web. E a seguir você tem uma página, a mais básica possível.

Código:
<html>
 <head>
 </head>
 <body>
  Esta é a minha página Web
</body>
</html>

Temos aqui três conjuntos de 'tags' - as tags, normalmente são aos pares, mas nem sempre é assim. Englobando toda a página temos o par de tags .... A primeira é a 'tag de abertura' e a 'tag' de fechamento é a mesma com uma / (barra) entre o sinal de 'menor que' (<) e html.

Dentro da tag existem mais dois pares de tags.

... contém informações que não foram ainda colocadas no nosso exemplo, a mais importante destas informações é o título da página que aparece na barra de títulos do navegador. Você dá um título a sua página, escrevendo-o dentro da tag title, como mostrado a seguir...

Código:
<html>
 <head>
  <title>Minha Página</title>
 </head>
 <body>
  Este é o conteúdo da minha página Web!
</body>
</html>

O par de tags ... engloba todo o conteúdo da sua página Web, texto, imagens, filmes Flash - e tudo mais. Você poderá digitar no seu editor de texto, na janela de código do seu editor WYSIWYG - ou mesmo copiar colar o código da página básica mostrado acima.

HTMLephant

Este é meu HTMLfante. Sim concordo, ele não é tão original, mas pelo menos você não irá esquecê-lo!

Bem, agora temos uma página Web que é bem renderizada em qualquer navegador - depois que você tiver 'salvado' ela. Dê a ela o nome de 'index.html' pois este é o nome apropriado para a primeira página de qualquer Web site. Você poderá salvar o arquivo em qualquer lugar no hard disk do seu computador, mas para tornar as coisas claras e em ordem, crie um novo diretório para salvar sua página Web.

O caminho normal para abrir sua página em um navegador é usar a opção 'Abrir' ('Open') no menu 'Arquivos' ('File') mas há um modo mais rápido. Crie um 'shortcut' do seu arquivo no desktop. Dali você poderá arrastar o ícone do 'shortcut' direto para a janela do navegador e sua página será carregada e mostrada!

Exemplo: https://www.maujor.com/tutorial/joe/minhapag1.html

Sua página deverá se parecer com esta »

Ainda que seja uma maravilha, sua página Web não possui um ingrediente vital - o conteúdo. Não há sentido em uma página Web se ela não diz nada (ou outra coisa senão "Este é o conteúdo da minha página Web!") mas isto eu vou deixar por sua conta.

Qualquer conteúdo deve ser colocado entre o par de tags... para que o navegador possa renderizá-lo.

Encher de textos a página, assim como ela está, não dá uma estrutura e nem estiliza os textos. Por não dar estrutura eu quero dizer que os textos simplesmente fluem da esquerda para a direita, de cima para baixo, que as palavras não tem outra ênfase particular que não seja a ordem natural em que são escritas. Faria muito mais sentido grupar palavras e sentenças em parágrafos, títulos, sub-títulos - bem, você deve saber, aquelas coisas básicas de estruturação de textos que se aprende na escola.

Browsers ignoram qualquer pulo de linha ou parágrafos que você insira em uma porção de texto. Eles ignoram também tabulações e até múltiplos espaços entre palavras que são interpretados como um espaço único.

É útil em qualquer porção de texto marcar títulos, sub-títulos, alguns parágrafos e talvez até uma assinatura final.

Em HTML, existem diferentes tags de marcação que se constituem no mecanismo apropriado para estruturar os textos.

Cria-se um parágrafo, colocando texto entre o par de tags

...

. Em HTML, um parágrafo é um bloco constituido de uma ou mais sentenças separado do próximo bloco por um espaço - tal como este paragráfo que você vê aqui.

Para títulos, existem seis níveis distintos de ênfase, indo desde o mais alto nível

...

até o mais baixo
...
. Eles são como mostrados a seguir...



Os seis níveis de t´tulos renderizados no browser

Como você pode notar diminui o tamanho quando cresce o número que indica o nível sendo que o h4 equivale aproximadamente ao tamanho de texto chamado 'small' (pequeno). h5 e h6 são 'smaller' (menor) ,mas em negrito.

Existem outros truques que podemos usar para dar ênfase a palavras ou frases. Antes de considerar como eles devem ser apresentados (como deve se parecer), considere acima de tudo sua função.

Bold (negrito) é uma variante mais destacada que o texto normal e marcada com o par de tags ... contudo, trata-se de um estilo de apresentação para impressão e na Web é preferível usar-se strong .... Embora elas (tags bold e strong) se pareçam iguais quando renderizadas na tela de um monitor, o HTML deverá servir a outros dispositivos também. Softs leitores de tela usados por pessoas portadoras de necessidades especiais para visão, entenderão perfeitamente e lerão com a devida ênfase.

Você deve saber que itálico é conseguido com a tag .... E aqui também, é melhor você não se utilizar de estilização visual, mas usar .... Este par de tags dá a funcionalidade do itálico ao texto independentemente do dispositivo em uso.

Sublinhado pode ser conseguido com o par de tags ... , mas sublinhados na Web tem um significado especial. Usualmente indica um link. É melhor não usar sublinhado para enfatizar, pois esta prática poderá confundir o visitante do site.

Uma importante tag é a de quebra de linha
. Ao contrário de outras tags, esta não requer uma tag de fechamento, aliás tag de fechamento neste caso não faria qualquer sentido, não é mesmo?

Usando estas tags básicas de marcação, o texto começa a tomar forma. Ele se assemelhará a um texto produzido em um processador de texto.

Esta página básica provavelmente se parecerá um pouco diferente quando visualizada em diferentes navegadores e computadores. Cada navegador tem o seu próprio estilo padrão e a menos que você configure seu navegador ele usará os estilos padrão. Para sobrescrever os estilos padrão dos navegadores, nós criaremos nossos próprios estilos que serão agrupados em uma 'folha de estilos'.

Atenciosamente: Equipe ADG


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Crie uma conta ou faça login para responder

Você deve ser um membro para responder.

Crie uma Conta

Junte-se a nossa comunidade! É fácil!


Criar nova conta

Entrar

Já é um membro? Não se preocupe, clique aqui para entrar.


Entrar

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