HTML

João Eduardo Montandon

Desenvolvimento de Aplicativos Web - COLTEC/MG

HTML

Hypertext Markup Language
Linguagem voltada para marcação/estruturação de documentos da web
Responsáveis pela estrutura da página web
Baseada em tags XML
As tags são interpretadas pelo browser, e então o conteúdo é exibido para o usuário

HTML

					
<p>HTML</p>
<p>DAW. Coltec/UFMG.</p>
<ul>
    <li>HTML - Definições</li>
    <li>Estrutura HTML</li>
    <li>Principais Tags</li>
</ul>

➯

HTML - Tags

A linguagem possui um conjunto de tags XML utilizadas para descrever sua estrutura
Toda tag possui atributo e valor

				
			<a href="http://www.google.com.br">Clique aqui</a>

Tags - Atributos

Uma tag pode ter 0 ou mais atributos
Um atributo é uma tupla de dados
São utilizados para definirem propriedades da tag

				
		<tag attr1="valor1" attr2="valor2" attr3="valor3">...</tag>

Tags - Valor

Valor: conteúdo a ser exibido pela tag
HTML permite fazer o aninhamento de tags

				
<tag ...> valor da tag </tag>

				
<tag ...>
	<tag ...> texto </tag>
</tag>

HTML - Estrutura Básica

				
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
         <title>Minha primeira página HTML</title>
    </head>
    <body>
         <!– meu comentário —>
         <p> Essa é a minha primeira página web. </p>
    </body>
</html>

HTML - Estrutura Básica

<!DOCTYPE>: Versão do documento HTML
<html>: delimita a página HTML
<head>: Cabeçalho da página. Contém informações de configuração da página
<body>: Corpo da página. Contém toda informação que será exibida para o funcionário

HTML - Exemplos

					
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
         <title>Minha primeira página HTML</title>
    </head>
    <body>
		<p>Isso é um parágrafo</p>
		<h1>Primeiro Título</h1>
		<h2>Segundo Título</h2>
		<h3>Terceiro Título</h3>
		<h4>Quarta Título</h4>
		<h5>Quinta Título</h5>
		<h6>Sexto Título</h6>
		<a href="http://www.google.com"> Google </a>
	</body>
</html>

HTML - Exemplos

					
<div style="background-color:orange;
text-align:center">
	<p>Coloque um texto aqui.</p>
</div>
<div style="border:1px solid black">
	<p>Coloque o conteúdo aqui.</p>
</div>
<table border = "1">
	<tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
	</tr>
</table>

HTML - Exemplos

					
<input type="text" name="nome" value=""
	maxlength="100"/>
<button id="botao1" name="clique" value="Submit"
	type="button">Clique me</button>
<menu>
	<li>Abacaxi</li>
	<li>Maçã</li>
	<li>Laranja</li>
</menu>
<label>None</label>
<img src="../pictures/google-logo.jpg"
	width="225" alt="Google it"/>

HTML - Principais Elementos

João Eduardo Montandon

Desenvolvimento de Aplicativos Web - COLTEC/MG

Introdução

A linguagem HTML fornece uma série de elementos que ajudam na estruturação de uma página web

Os principais elementos estão relacionados a:

Manipulação de Texto
Containers
Formulários
Elementos Multimedia

Manipulação de Texto

Contém elementos que fazem a estruturação textual da página

Headings
Formatação
Parágrafos
Listas
etc..

Texto - Headings

					
<h1>Titulo 1</h1>

<h2>Titulo 2</h2>

<h3>Titulo 3</h3>

<h4>Titulo 4</h4>

<h5>Titulo 5</h5>

<h6>Titulo 6</h6>

Texto - Formatação

					
<b>Frase em negrito</b>

<strong>Frase STRONG!!</strong>

<i>Texto em italico</i>

<em>Enfatizando essa frase</em>

<code>System.out.println("oi");</code>

x<sub>2</sub> diferente de x<sup>2</sup>

Texto - Parágrafos

					
<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna.
</p>
<p>
Duis aute irure dolor in reprehenderit
voluptate velit esse cillum dolore
nulla pariatur.
</p>

Texto - Listas

					
<ol>
	<li>Questão 1</li>
	<li>Questão 2</li>
	<li>Questão 3</li>
</ol>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

Containers

Principal característica: Agrupam demais componentes HTML

Header
Body
Divs
Tables
Footer

Containers - `head`

Cabeçalho onde são armazenadas informações da página (Título, CSS, meta tags, etc.).

					<head>
<title>Exemplo de header</title>
<style type="text/css">
</style>
<script type="text/javascript">
	//código javascript
</script>
<meta name="blablabla" />
<script src="scripts/meuJS.js" />
</head>

Containers - `body`

					
<body>
<h3>Introdução</h3>
<p>A <i>World Wide Web</i>, criada por
Tim Berners-Lee, surgiu em 1989/1990, no laboratório do
CERN. Seu objetivo inicial era prover um canal onde os
cientistas pudessem publicar e visualizar seus trabalhos
 científicos.</p>
<p>A <i>Web</i> é baseada em três
tecnologias principais:</p>
<ul>
<li>Hypertext Transfer Protocol (HTTP)</li>
<li>Hypertext Markup Language (HTML)</li>
<li>Protocolo TCP/IP</li>
</ul>
</body>

Containers - `div`s

					
<div id="mainPanel" style="float:left;
width:60%; display:block">
	<p>Este é o painel principal. Ele contém o
	texto principal da sua página web. Este é o painel
	principal. Ele contém o texto principal da sua
	página web.</p>
</div>
<div id="sidePanel" style="float:right; width:30%;">
	<p>Este é o painel lateral. Ele contém informações
	relacionadas ao painel principal, como textos
	semelhantes, ou já navegados anteriormente.</p>
</div>

Containers - `table`

					
<table border="1px">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td colspan="2">4 e 5</td>
		<td>6</td>
	</tr>
	<tr>
		<td colspan="3">7, 8 e 9</td>
	</tr>
</table>

Containers - `footer`

Recurso disponível apenas no HTML 5!!

					
<footer>
	<p>Desenvolvido por: ACME Corporation</p>
	<p>Contato:
		<a href="mailto:contato@acme.com">
		contato@acme.com</a>.
	</p>
</footer>

Multimedia

Elementos que permitem inserir elementos multimedia na página.

Link
Imagens
iFrames
etc..

Multimedia - link

					
<a href="http://www.google.com" target="_blank">Click me</a>.

Principais atributos:

href: link da página a ser carregada
target: define se a página será aberta em outra janela
- _blank: nova página
- _self: mesma página

Multimedia - Imagens

					
<img src="http://www.uol.com.br/uploads/29111.jpg" alt="2911" />

Principais atributos:

src: fonte da imagem
alt: texto alternativo da imagem

Multimedia - iFrames

				
<iframe src="http://www.uol.com.br/"></iframe>

Principais atributos:

src: fonte da página a ser carregada
width: largura do frame
height: altura do frame

Formulários

Mecanismo de comunicação básica entre usuário e aplicação web
Permite ao usuário enviar suas informações para a aplicação
HTML possui uma série de elementos de entrada de dados, onde o usuário pode fornecer este tipo de informação

Formulários

Estrutura básica

				
<form>
	Username: <input type="text" name="username"> <br>
	Password: <input type="password" name=“pwd"> <br>
	<input type="submit" value="Log in">
</form>

Formulários

As entradas de dados são feitas através de três tipos de componentes:

<input>: texto, senhas, checkbox, radio buttons, botão submit, botão reset;
<select>: listbox, combobox;
<textarea>: texto em várias linhas;

Formulários - `input`

				
<form>
	Username: <input type="text" name="username">
	Password: <input type="password" name="pwd">
	Sex: <input type="radio" name="sex" value="male">Male</input>
	<input type="radio" name="sex" value="female">Female</input>

	Vehicles: <input type="checkbox" name="vehicle" value="bike">Bike</input>
	<input type="checkbox" name="vehicle" value="motocycle">Motocycle</input>
	<input type="checkbox" name="vehicle" value="car">Car</input>

	<input type="submit" value="Enviar">
</form>

Formulários - `input`

Principais Atributos:

autocomplete: auto-completar
checked: marca elemento como default
name: nome do elemento
type: tipo do elemento de entrada
value: valor do elemento
etc, etc..

Formulários - `select`

					
<form>
	Choose an option:
	<select name="cars">
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
		<option value="fiat">Fiat</option>
		<option value="audi">Audi</option>
	</select>
</form>

Formulários - `textarea`

					
<form>
<textarea rows="10" cols="30">
	The cat was playing in the garden.
</textarea>
</form>

Formulários - `fieldset`

Permite o agrupamento de elementos do formulário em seções.

					
<form>
<fieldset>
	<legend>Personal information:</legend>
	Name: <input type="text" size="30"><br>
	E-mail: <input type="text" size="30"><br>
	Date of birth: <input type="text" size="10">
</fieldset>
</form>

Referências

w3schools: HTML

Mozilla Developer Network: HTML

HTML

HTML

HTML

HTML - Tags

Tags - Atributos

Tags - Valor

HTML - Estrutura Básica

HTML - Estrutura Básica

HTML - Exemplos

HTML - Exemplos

HTML - Exemplos

HTML - Principais Elementos

Introdução

Manipulação de Texto

Manipulação de Texto

Texto - Headings

Texto - Formatação

Texto - Parágrafos

Texto - Listas

Containers

Containers

Containers - head

Containers - body

Containers - divs

Containers - table

Containers - footer

Multimedia

Multimedia

Multimedia - link

Multimedia - Imagens

Multimedia - iFrames

Formulários

Formulários

Formulários

Formulários

Formulários - input

Formulários - input

Formulários - select

Formulários - textarea

Formulários - fieldset

Referências

Containers - `head`

Containers - `body`

Containers - `div`s

Containers - `table`

Containers - `footer`

Formulários - `input`

Formulários - `input`

Formulários - `select`

Formulários - `textarea`

Formulários - `fieldset`