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.
Download
