Prof. Rudson rudsondant@gmail.com apostilas.wikidot.com/hipermidia Faculdade de Excelência Educacional do Rio Grande do Norte INTRODUÇÃO À HTML Curso: Desenvolvimento de Sistemas para Internet Disciplina: Tecnologia Hipermídia e Multimídia Prof. Rudson rudsondant@gmail.com apostilas.wikidot.com/hipermidia
O que é HTML? Linguagem de marcação que descreve a estrutura, o conteúdo e a apresentação de um documento e sua relação com outros documentos Podemos apresentar uma informação e vinculá- la a outros recursos: texto, áudio, vídeo, gráficos, etc. Permite que várias informações sejam exibidas de forma simultânea
O que é HTML? Tags Elementos que compõe a estrutura de um documento HTML Elementos de marcação que definirão como os navegadores exibirão as informações contidas nas páginas do sítio Uma tag sempre está entre os caracteres: “<” e “>” Na maioria das vezes, uma tag possui uma tag de fechamento Exemplo: <body> ... </body> Podem possuir atributos, que definem suas características ou propriedades
Elementos <html> ... </html> Indicam, respectivamente, o início e o fim do documento <head> ... </head> Seção do cabeçalho, definições lógicas sobre o documento (identificação, catalogação, título, vínculos, etc.) <title> ... </title>:
Exemplo1 <HTML> <HEAD> <TITLE>Minha Página</TITLE> </HEAD> </HTML>
Elementos <body> ... </body> <h*> ... </h*> Definição de todo o conteúdo do documento que será exibido pelos navegadores <h*> ... </h*> Identificação dos 6 níveis de títulos diferentes em um documento (* = 1, 2, 3, 4, 5, ou 6) <p> ... </p> Definem um bloco de texto como um parágrafo
Exemplo 2 <body> <h1>Bem Vindo!!!</h1> Essa é minha primeira página <p>O que você achou dela?</p> </body>
Elementos do corpo <em> ... </em> Enfatizam o texto em itálico equivalente a <i>...</i> <strong> ... </strong> Enfatizam o texto em negrito equivalente a <b>...</b> <br> insere uma quebra na linha do parágrafo utilizado para pular linhas <hr> insere uma linha horizontal no parágrafo
Exemplo 3 <body> <h1>Bem Vindo!!!</h1> <strong>Essa</strong> é minha <em>primeira</em> página <p>O que <i>você</i> <b>achou</b> dela?</p> <hr>
Ligações e Imagens <a href=" endereço do link"> Nome do link</a> insere um link href representa o endereço <img src="nome da imagem" width="largura" height="altura"> insere uma imagem src representa o nome do arquivo width – a largura em pixels height – altura em pixels
Exemplo 4 <p>Conheça minha páginas favoritas</p> <a href="http://html-color-codes.com/">Cores para Web</a> <br> <a href="http://apostilas.wikidot.com/hipermidia">Tecnologia Hipermídia</a>
Exemplo 5 <hr> <p>Minhas imagens</p> <img src="PC.jpg" width="200" height="150">
Exercício Crie um documento HTML, no bloco de notas, contendo as seguintes informações: Cabeçalho (com título: nome meu do seu sítio) Corpo: Seu nome (título 1) Curso (título 2) Matrícula (título 3) Lista das disciplinas cursadas links para 3 páginas que você goste