AULA 1 DDW I
HTML:(hypertext Markup Language ou linguagem de marcação de hipertexto).
A linguagem HTML foi criada por Tim Berners-lee quando ele trabalhava com
pesquisador para CERN e popularizada pelo aparecimento do browser Mosaic
criado ppor Marc Andreessen.
CONCEITOS BÁSICOS
Uma página HTML e um arquivo-texto simples(ASCII) contendo o texto da
página e os comandos HTML que definem a formatação da mesma.
Os comandos são indicados por marcadores chamados de “tags” que vêm
entre os símbolos de < > a maioria dos comandos vem aos pares, sendo que
a cada abertura corresponde a um fechamento e cada fechamento é uma
repetição do comando de abertura precedido por / uma barra.
ESTRUTURA DE UMA PÁGINA.
Comandos de abertura do HTML
<HTML>
Cabeçalho abertura <head>
fechamento </head>
Título abertura <title>
fechamento </HTML>
fechamento </title>
Corpo da página abertura <body> fechamento </body>
Exemplo de uma página simples
<!DOCTYPE html PUBLIC "- / /W3C/ /DTD XHTML 1.0 transitional / / EN"
"http:// www.w3.org / TR / xhtml / DTD xhtml - transitional . dtd" >
<html>
<head>
Comando que inicia a
página HTML
<title> Aula 1 de DDWI</title>
<meta name="description" content="aula inicial para alunos de informática">
<meta name="keywords" content="aulas ,treinamento,cursos">
</head>
<body bgcolor="red">
área do corpo <br> escrevendo na mesma linha e fazendo a quebra </br>
<!-- um==novo====comentários --> <br></br><br>
-->
mais conteúdo </br>
</body>
Comando que finaliza uma
página HTML.
</HTML>
Observem que todas as tags que foram abertas obrigatoriamente foram
fechadas.
Observem os dois comandos abaixo.
<meta name="description" content="aula inicial para alunos de informática">
<meta name="keywords" content="aulas ,treinamento,cursos">
Eles são úteis na identificação do site junto aos sistemas de buscas, tanto a
descrição do site quanto as palavras chaves devem ser coerentes com o
conteúdo do site para facilitar os buscadores, dessa forma se seu site for de
vendas ele terá uma maior visibilidade na rede de internet.
Dentro dos comandos existem possibilidades de acrescentar atributos
/qualidades ex:
Vamos colocar uma cor no fundo de uma página:
Obs: “<body”: inicia o comando do corpo antes de fechá-lo posso
atribuir cor para esse corpo, cor do texto que será escrito neste
corpo,imagem de fundo, a cor dos links, sua margem superior,
sua margem esquerda depois fecho com ”> “
<body
bgcolor=”red”
text=”blue”
background=”img/imagem.jpg”
link=”#FFFF00”
vlink=”#FF00FF”
alink=”#00FF00”
topmargin=”15”
leftmargin=”12” >
Obs : fechamos apenas as tags que inicia o corpo não o corpo propriamente
dito, pois para fechar o corpo de fato, é dessa forma </body>
Dentro de um corpo, é que de fato construído uma página de internet, bem
para temos que editar os textos, imagens,tabelas e outros elementos que
veremos em aulas futuras, neste momento vamos nos concentrar nas fontes.
PARA FORMATAR UMA FONTE temos que abrir o comando :
Ex: <font face=”arial” size=”4” color=”red” > escrevo o meu texto e depois
fecho o comando da fonte dessa forma </font>
Agora posso escrever um novo parágrafo com outro tamanho de fonte ex:
<font face=”verdana” size=”6” color=”#FF00FF” > escrevo um no parágrafo e
fecho a fonte </font>
No HTML existe uma diferença entre o as representações de tamanhos de
fontes ;Ex arial tamanho 3 = fonte arial tamanho 12 no processador de textos
Word e BR-office
Obs : a tabela a baixo de conversão:
HTML
1
2
3
4
5
6
7
Pontos
8
10
12
14
18
24
36
O HTML POSSUI UMA ESTRUTURA PADRÃO PARA TÍTULOS DE
PARÁGRAFOS .
Crie uma página HTML e teste os títulos abaixo.
<h1> Título 1</h1>
<h2> Título 2</h2>
<h3> Título 3</h3>
<h4> Título 4</h4>
<h5> Título 5</h5>
<h6> Título 6</h6>
FORMATAÇÃO DE PARÁGRAFO ; para abrir um parágrafo <p> digitar o texto
desejado e depois fecha </p>
Exemplo de um parágrafo dentro de uma página HTML.
<HTML>
<head>
<title>
</title> </head>
<body>
<h3> título do parágrafo</h3>
Aqui estou abrindo o comando do parágrafo <p> agora o comando da fonte
<fonte face=”arial” color=”#FF00FF” size=”3”> digito aqui as informações,
noticias,redações, etc.... e depois fecho o comando da fonte </font>
fecho o comando do parágrafo </p>
agora
Agora tenho que fechar o comando do corpo </body>
Por último estou fechando o comando do HTML </HTML>
Para inserir uma imagem eu utilizo o comando <img src=”endereço físico da
imagem e sua extensão depois fecho a tag que foi aberta dessa forma >
Exemplo
<img
src=” nome da pasta que está a imagem ou endereço de
internet/nome_imagem.jpg” >
Observem que sempre depois do endereço vem uma barra / e depois o nome
da imagem com sua extensão.