Introdução ao HTML

Introdução ao HTML

https://www.facebook.com/alvarofpinheiroaulas/br.linkedin.com/in/alvarofpinheiro/

http://www.alvarofpinheiro.eti.br


World Wide Web (WWW)

A World Wide Web (WWW) é mais frequentemente chamada de a Web (Teia) e é a denominação dada a uma rede de computadores ao redor do mundo. Todos os computadores na Web podem comunicar-se uns com os outros. Todos os computadores usam um padrão de comunicação chamado HTTP. A informação na Web é armazenada em documentos chamados páginas Web. As páginas Web são arquivos armazenados em computadores chamados servidores Web. Os computadores que interpretam as páginas Web são chamados clientes Web. Os Clientes Web carregam as páginas com um programa chamado navegador Web.


Hyper Text Markup Language (HTML)

HTML significa Linguagem de Marcação de Hipertexto. Um arquivo HTML é um arquivo de texto contendo pequenas etiquetas de marcação (markup tags). As marcações dizem para o navegador Web como mostrar a página. Um arquivo HTML deve ter uma extensão de arquivo htm ou html. Um arquivo HTML pode ser criado usando um simples editor de textos.


Document Type Definition (DTD)

Um documento HTML é validado em relação a uma DTD, isto é, Definição de Tipo de Documento. Antes que um arquivo HTML possa ser apropriadamente validado, uma DTD correto deve ser adicionado como primeira linha do arquivo.

<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EM " "http://www.w3.org/TR/html4/strict.dtd">


Tags - Cabeçalho<!DOCTYPE> Define o tipo do documento<html> Tag de início<head> Define informação sobre o documento<title> Define o título do documento<base> Define o URL base para todos os vínculos numa página<link> Define a referência do recurso<meta> Define meta informação

<html> <head> <title>Título da página</title> </head> <body> Esta é minha primeira página. <b>Este texto está em negrito</b> </body></html>


Tags - Página

<html> Define um documento HTML<body> Define o corpo do documento<h1> a <h6> Define título 1 a título 6<p> Define um parágrafo<br> Insere uma única quebra de linha<hr> Define uma linha horizontal


Tags - Formatação

<b> Define texto em negrito<big> Define texto grande<em> Define texto enfatizado;<i> Define texto em itálico<small> Define texto pequeno<strong> Define texto forte<sub> Define texto subescrito<sup> Define texto superescrito


Tags - Entrada

<form> Primeiro nome: <input type="text" name="firstname"> <br> Último nome: <input type="text" name="lastname"></form>


Tags - Saída

<code> Define texto de código de computador<kbd> Define texto de teclado<samp> Define amostra de código de computador<tt> Define texto de teletipo<var> Define uma variável<pre> Define texto pré-formatado


Tags - Controle<form> Define um formulário para entradas do usuário<input> Define um campo de entrada<textarea> Define controle de entrada de texto multi-linhas<label> Define um rótulo para um controle<fieldset> Define um conjunto de campos<legend> Define um título para um conjunto de campos<select> Define uma lista selecionável (uma caixa drop-down)<optgroup> Define um grupo de opção<option> Define uma opção em uma caixa drop-down<button> Define um botão para pressionar


Tags - BotõesBotões Radiais:<form> <input type="radio" name="sex" value="male"> Masculino <br> <input type="radio" name="sex" value="female"> Feminino</form>

Caixas de Seleção:<form> <input type="checkbox" name="bike"> Eu tenho uma bicicleta <br> <input type="checkbox" name="car"> Eu tenho um carro</form>


Tags - Listas

Listas Não Ordenadas: Uma lista não ordenada é uma lista de itens. As listas de itens são marcadas com bullets.<ul><li>Café</li><li>Leite</li></ul>

Listas ordenadas: Uma lista ordenada é também uma lista de itens. As listas de itens são marcadas com números.<ol><li>Café</li><li>Leite</li></ol>


Tags - Imagem

<img> Define uma imagem<map> Define um mapa de imagem<area> Define uma área dentro de um mapa de imagem

<img src="url">

O atributo alt é usado para definir um "texto alternativo" para uma imagem. O valor do atributo alt é um texto definido pelo autor:

<img src="boat.gif" alt="Big Boat">


Tags - Background

<body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black">


Tags – EstiloFolha de Estilo Externa<head> <link rel="stylesheet" type="text/css" href="meuestilo.css"></head>

Folha de Estilo Interna<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style></head>

Estilos Local (inline)<p style="color: red; margin-left: 20px"> Este é um parágrafo</p>


Tags – HTML5

<embed> inserir conteúdo externo<video> inserir vídeos<audio> inserir audio stream<source> inserir vídeo ou audio

Technology

Introdução ao HTML