Introdução ao HTML

<HTML><HTML>
Vinícius Roggério da RochaVinícius Roggério da Rocha
www.MonolitoNimbus.com.brwww.MonolitoNimbus.com.br

O que é HTML?

HTML = HyperText Markup Language ou
Linguagem de Marcação de Hipertexto

Linguagem: maneira de se comunicar
(entre máquinas, pessoas ou ambos)

Marcação: anotação de texto de modo que
apareça estruturado (parágrafo, tópicos...)

Hipertexto: texto em formato digital ao qual
se pode juntar imagens, sons, links, outros
blocos de texto...

O que são páginas HTML?

Tudo o que é acessado através de um browser
(ou navegador) na internet (ou localmente)

Código HTML

O navegador interpreta (“renderiza”) o
código HTML

O código é escrito em editor de texto
(notepad/bloco de notas, gedit...)

Organização: escolher navegador
(visualização), editor (edição, “abrir
com...”), criar pasta de trabalho... arquivo
extensão “.html” ou “.htm”

Tags
<a>exemplo</a>
- tudo o que vem entre os sinais de menor e
maior, sempre em letras minúsculas
- toda tag deve ser aberta e fechada
<html>
Código
</html>

<html>
<head>
</head>
<body>
</body>
</html>
- Todo código deve ter
cabeçalho (head) e corpo
(body)
- Identação: ao colocar uma tag
dentro da outra, tabular tag
mais interna

<html>
<head>
<title>Aula de HTML</title>
</head>
<body>
Olá mundo!
</body>
</html>
- Colocando título (de maneira
que o usuário entenda sobre o
que é, sem caracteres especiais
ou erros de português) e
conteúdo

<html>
<head>
</head>
<body>
<h1>TOP Center</h1>
<h2>Curso de HTML</h2>
<p>Olá mundo!</p>
<p>Meu nome é Fulano.<p>
</body>
</html>
- Estruturar texto (marcação
semântica): título, subtítulo...
<h1> a <h6> e parágrafos <p>
(elementos em bloco)

<html>
<head>
</head>
<body>
<h1>TOP Center</h1>
<p>Olá mundo!</p>
Meu nome é Fulano.<br />
Estou adorando essa aula! <br />
</body>
</html> - Pular linha sem colocar
espaço: <br />

<html>
<head>
</head>
<body>
<h1 align=“center”>TOP Center</h1>
<p>Olá mundo!</p>
Meu nome é Fulano.<br />
Estou adorando essa aula! <br />
</body>
</html> - Atributos: <h1 align=“center”>
(aspas duplas)

<html>
<head>
</head>
<body>
<h1 align=“center”>TOP Center</h1>
<p>Olá mundo!</p>
Meu nome é <i>Fulano</i>.<br />
Estou <b>adorando</b> essa aula! <br />
</body>
</html> - Elementos inline: itálico (italic)
<i>, negrito (bold) <b>...

Outros tópicos - CSS

CSS (Cascading Style Sheets)

Linguagem de estilo

Escrito no meio do código HTML, head ou
arquivo ‘.css’ separado

Exemplo
/* comentário em css */
body {
font-family: Arial, Verdana, sans-serif;
background-color: #FFF;
margin: 5px 10px;
}


PHP (Hypertext Preprocessor)

Linguagem pré-processada no servidor

Escrito no meio do código HTML

Exemplo <?php
$vet01 = array();
$vet01[] = "Sistemas operacionais";
$vet01[] = "Compiladores";
$vet01[] = "Bancos de dados";
$vet02 = array(1, 2, 3, 4, 5);
$vet03 = array( 0 => 0, 2 => 3, 10 => "item 10");
for ($i = 0; $i < count($vet01); $i++) {
echo $vet01[$i] . "<br />";
}
?>
Outros tópicos - PHP


Sistema de gerenciamento de banco de dados

Utiliza a linguagem SQL (Linguagem de
Consulta Estruturada, do inglês Structured
Query Language) como interface

Escrito no meio do código PHP

Exemplo <?php
// Create connection
$con=mysqli_connect("example.com","peter","abc123","my_db");
// Check connection
if (mysqli_connect_errno($con)) {
echo "Failed to connect to MySQL: “. Mysqli_connect_error();
}
?>
Outros tópicos - MySQL


Linguagem de programação interpretada

Atua no servidor (depende do navegador)

Ex: <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Wikipédia</title>
<script>
function hello() {
alert("Bem-vindo à Wikipédia");
}
document.getElementById("hello").addEventListener("click", hello, false);
</script>
</head>
<body>
<noscript>Seu navegador não suporta JavaScript ou está
desabilitado.</noscript>
<button type="button" name="button" id="hello">Say Hello</button>
</body>
</html>
Outros tópicos – JavaScript

Introdução ao HTML

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Introdução ao HTML (20)

Mais de Vinícius Roggério da Rocha (20)

Introdução ao HTML