HTML - RibaFS Portal

Introdução ao HTML

2017-06-22T16:43:34-03:00

Introdução ao HTML

Definição

HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.
(Wikipédia)

Ferramentas

Existe uma grande quantidade de ferramentas para se trabalhar com HTML. Citando apenas minhas preferidas:

gedit do Linux - acompanha as principais distribuições Linux
Netbeans for PHP - http://netbeans.org
Eclipse PDT - http://eclipse.org/pdt (prefira a edição AllInOne se na dúvida)

Introdução ao HTML 5

2017-06-22T16:43:34-03:00

HTML5

O HTML5 é a nova versão do HTML.

HTML significa Hyper Text Mark-up Language, linguagem de marcação de texto. Uma linguagem criada para mostrar texto em páginas mas que evoluiu muito e atualmente faz praticamente tudo que outras linguagens mais poderosas fazem. É conhecimento obrigatório para qualquer desenvolvedor web.

O HTML 5 permite fazer no navegador o que antes somente faziamos no desktop do PC ou num telefone móvel e sem a necessidade de plugin extra.

O HTML é uma linguagem de marcação, que usa tags/etiquetas para o reconhecimento do que fazer. Todos os sites na Internet usam o HTML para que sejam exibidos por um navegador. A maioria das tags tem a tag inicial e a de fechamento, veja exemplo abaixo.

O foco do HTML é o conteúdo.

Detalhes:
http://www.w3schools.com/html/html5_intro.asp

Uma página básica e simples em HTML5 deve conter as tags:

[code]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Título do site</title>
</head>
<body>
<h1>Esta é a parte principal da página</h1>

<p>Aqui um texto normal</p>
</body>
</html>
[/code]

Para ser automaticamente reconhecido pelos navegadores deve ter a extensão .htm ou .html.

Acima para identificar HTML5 adiciona-se mais uma tag no início do arquivo:

Veja que adicionamos a primeira e mudamos a segunda (<html>).

Para a criação de um texto em HTML precisamos de um editor de texto e de um navegador.
Tanto podemos usar um editor simples como o bloco de notas, o notepad++ já é melhor e melhor ainda
é uma IDE como o NetBeans.

Se criarmos um arquivo chamado teste.html contendo:

[code]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>
[/code]

Ao abrir num navegador não veremos nada, apenas uma página em branco.

Apenas algumas tags mostram conteúdo, outras são apenas estruturais, como html, head, body, etc.

Validação

O site do w3C tem uma ferramenta da validação online.

Acesse
http://validator.w3.org/

Clique em Validate by Direct input

Cole o código que deseja testar e clique em Check.
Ele fará uma avaliação do seu código, mostrando os erros.

Veja que ele apresenta mais duas alternativas de validação: URL e arquivo.

O HTML5 trouxe muitos recursos importantes para os sites, tanto para si quanto para seus parceiros
CSS e JavaScript. Basta ver a quantidade de ferramentas que existem e que aparecem a cada dia para
a criação de games para mobile.

Mais sobre HTML

2017-06-22T16:43:34-03:00

Comentários

Em HTML para comentar um trecho de código usamos:

Dica sobre o Notepad++
Para trabalhar com caracteres UTF-8 e salvar assim:
Formatar - Codificação em UTF-8 (sem BOM)

Exemplos

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Título do site</title>
</head>
<body>
<h1>Título nível 1</h1>
<h2>Título nível 2</h2>

<div>Aqui temos uma divisão lógica</div>

<hr>
Acima mostrarei uma linha horizontal.

<ol>
<li>Aqui é um item de uma lista ordenada (ol - ordered list)</li>
<li>li significa list item</li>
<li>Podemos adicionar tantos itens quantos quizermos</li>
</ol>

<ul>
<li>Aqui é um item de uma lista não ordenada (ul)</li>
<li>li significa list item</li>
<li>Podemos adicionar tantos itens quantos quizermos</li>
</ol>

<p>Aqui uma <strong>palavra em negrito</strong> em <br>
quebra de linha</p>
</body>
</html>

Exibindo Imagens

Links

<a href="http://ribafs.org" target="_blank">RibaFS Portal</a>

target="_blank" - para abrir a página noutra aba ou janela.

Podemos linkar para IDs da página, veja:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Título do site</title>
</head>
<body>
<div id="topo">Topo da página</div>
<h1>Título nível 1</h1>
<h2>Título nível 2</h2>

<div>Aqui temos uma divisão lógica</div>

<hr>
Acima mostrarei uma linha horizontal.

<ol>
<li>Aqui é um item de uma lista ordenada (ol - ordered list)</li>
<li>li significa list item</li>
<li>Podemos adicionar tantos itens quantos quizermos</li>
</ol>

<ul>
<li>Aqui é um item de uma lista não ordenada (ul)</li>
<li>li significa list item</li>
<li>Podemos adicionar tantos itens quantos quizermos</li>
</ol>

<a href="http://backup/portal/#topo">Voltar ao topo</a>
</body>
</html>

Crie um arquivo chamado links.html e cole o conteúdo acima para testar o link para a mesma página.
Precisará adicionar mais texto no body para que possa rolar a tela e clicar no link que rolará a
tela para o topo.

Link para e-mail

<a href="mailto:ribafs@gmail.com?Subject='E-mail de teste'">Contato</a>

Tabelas

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Título do site</title>
</head>
<body>
<div id="topo">Topo da página</div>
<h1>Título nível 1</h1>

<table>
<caption>Minha Tabela HTML5</caption>
<tr><td>Celula 11</td><td>Célula 12</td></tr>
<tr><td>Celula 21</td><td>Célula 22</td></tr>
<tr><td>Celula 31</td><td>Célula 32</td></tr>
</table>
</body>
</html>

Formulários
Neste assunto o HTML5 trouxe muitas novidades interessantes.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>--Formulário Contato--</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="http://backup/portal/estilo.css" rel="stylesheet" media="all" />
<script src="http://backup/portal/script.js"></script>
</head>
<body>
<form name="meu_form">
<h1>Entre em contato</h1>
<p class="nome">
<input type="text" id="nomeid" placeholder="Tiago Vale" required="required" name="nome" />
<label for="nome">Nome</label>
</p>
<p class="fone">
<input type="text" id="foneid" placeholder="(xx)xx-xx-xx-xx" name="fone" />
<label for="fone">Fone</label>
</p>
<p>
<input type="email" id="emailid" placeholder="fulano@mail.com" name="email" />
<label for="email">Email</label>
</p>
<p>
<textarea placeholder="Deixe sua opinião"></textarea>
</p>
<p class="submit">
<input type="submit" onclick="Enviar();" value="Enviar" />
</p>
</form>
</body>
</html>

Veja em CSS e JavaScript os arquivos estilo.css e script.js.

Algumas novas TAGs do HTML5

<header>Texto</header>

<footer>Texto</footer>

<nav>Texto</nav>

<section>Texto</section>

<section>
<article>
Texto
</article>
<article>
Texto
</article>
</section>

E muitos outros. Veja aqui:
https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/HTML5_element_list

Vídeos

<video width="640" height="480" controls>
<source src="http://backup/portal/video.mp4" type="video/mp4">
<source src="http://backup/portal/video.webm" type="video/webm">
Meus Vídeos
</video>

Áudio

<audio controls>
<source src="http://backup/portal/audio.mp3" type="audio/mpeg">
<source src="http://backup/portal/video.ogg" type="audio/ogg">
Meus Áudio
</audio>

Algumas tags foram adicionadas pelo HTML5 e outras foram removidas. Veja aqui:
http://newhtml5.blogspot.com.br/2011/03/novas-tag.html
http://www.scriptcase.com.br/blog/objetos-removidos-html5/

http://www.w3schools.com/html/html5_intro.asp

Dicas de HTML

2017-06-22T16:43:34-03:00

Criando Form de Contato com HTML5, CSS3 e JavaScript
http://www.devmedia.com.br/criando-form-de-contato-com-html5-css3-e-javascript/29415#ixzz453cK6sZk

Referências:
http://www.w3schools.com/tags/default.asp
http://www.html-reference.com/
http://www.w3.org/TR/html4/
Lista de tags por categoria - http://htmlhelp.com/reference/html40/olist.html
Lista de tags por ordem alfabética - http://htmlhelp.com/reference/html40/alist.html

Simples Wizards
Formato
Form
Frame
Table
Pacote completo

Includes

2017-06-22T16:43:34-03:00

JAVASCRIPT
<script type="text/javascript" src="http://backup/portal//js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

CSS
<link rel="stylesheet" type="text/css" href="http://backup/portal/mystyle.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

EXEMPLOS DE CÓDIFICAÇÃO DE CARACTERES
HTML
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

XML ou JavaScript ou AJAX
<?xml version="1.0" encoding="ISO-8859-1"?>

ASP
<% Response.Charset="ISO-8859-1" %>

PHP
<?php header("Content-Type: text/html; charset=UTF-8",true) ?>

JSP
<%@ page contentType="text/html; charset=ISO-8859-1" %>