O que é HTML?
HTML é uma linguagem de marcação que é usada para produção
de páginas web, A sigla HTML significa Hypertext Markup Language. A versão de HTML ensinada nesse blog será a cinco,
ou seja, HTML cinco. O HTML é escrito por meio de tags, que ficam entre os
sinais <>. Tags são palavras chave que assumem uma determinada função.
Para escrever um
documento em HTML você só precisa de um editor de texto simples como o bloco de
notas ou o notepad++.
Tags.
-A primeira tag
para abrir o documento HTML é<
DOCTYPE> ela informa para o navegador qual a versão estamos utilizando.
Ex:<!DOCTYPE>
Elementos de hoot.
-A segunda tag que
aparece no documento HTML é a tag <html>
ela é usada pra abrir o documento, e recebe o atributo lang que indica a
linguagem do arquivo.
Ex: <html lang=”pt-br”>
</html>
Todas as tags que aparecerão daqui para frente
ficarão dentro da tag html.
Metadados.
-A tag <head>
é usada para colocar elementos que não aparecerão na página é dentro dela que
você coloca o titulo da aba por meio da tag <title> e a tag <meta>
que providencia um metadado sobre o documento html. Eles são
usados para especificar descrições, palavras chave, autor do documento, entre
outros os metadados são usados, por exemplo, por mecanismos de busca.
A tag meta recebe os atributos
charset usado pra indicar a decodificação da página, name que nomeia o
metadado, e content que indica o conteúdo.
Ex: <!Doctype>
<html>
<head lang=”pt-br”>
<title>exemplo</title>
<meta name="keywords"
content="Sites">
<meta name= “Author" content=
“juliana Oliveira">
<meta charset="UTF-8">
</head>
</html>
Ainda na head existe a tag <link>
que define a relação entre um documento e um recurso externo, que possui os
seguintes atributos href a url do link. Rel Especifica a relação entre os
documentos esse atributo é obrigatório, e possui os valores: alternate. Archives, author, bookmark,
external, first, help, icon,
last, license,
next, nofollow,
noreferrer, pingback,
prefetch, prev,
search, sidebar,
stylesheet, tag,
up.E o atributo hreflang que indica a linguagem do
texto do link.
A tag <style> é usada
para definir um estilo de informação para um documento html. Cada documento
html pode conter múltiplos estilos, ele recebe os atributos media que
especifica que mídia ou dispositivo esse recurso é usado, e a tag type com o
valor text/css é usado para especificar um código em css. Para abrir uma página de estilo externa,
utilize a tag link que seria um arquivo de extensão css.
Ex: <html>
<head>
<title>Exemplo</title>
<style type="text/css">
<!--Aqui ficaria o codigo em
css-->
</style>
</head>
</html>Ex 2: <html>
<head>
<title>Exemplo2</title>
<link rel="stylesheet" type="text/css" href="estiloexterno.css" />
</head>
</html>
Como é possível perceber,
sem o código css essas tags não alteram o visual da página.
Sessões.
Agora vamos começar a introduzir as tags que
efetivamente vão aparecer na página sem
o uso do css.
A tag <body> indica
o corpo da página. Uma página da web possui diversas divisões dentro do <body> agora vamos falar
delas, a tag <section> define uma seção de conteúdo na página, a tag <header> define um cabeçalho, o <footer> define um rodapé. A tag <aticle> define um conteúdo dentro
da página ou de uma seção da página.<nav>
define um conjunto de links que formam a navegação, seja o menu ou links relacionados
ao conteúdo da página. E o <aside>
que define um conteúdo relacionado a um artigo. O <Hgroup> indica elementos de cabeçalho com tamanhos variados,
usado para titulo e subtítulo ele vai de
<h1> a <h6> sendo o <h1>
é o maior tamanho e o <h6> o menor tamanho.
Ex :
<!DOCTYPE>
<html
lang="pt-br">
<head>
<title>exemplo4</title>
</head>
<body>
<header>
<hgroup>
<h1>Cabeçalho</h1>
<h2>mudando</h2>
<h3>de</h3>
<h4>tamanho</h4>
</header>
<nav>
<p> menu </p>
</nav>
<section>
<article>
<p> Conteúdo da seção </p>
</article>
</section>
<footer>
<p> rodapé da página </p>
</footer>
</body>
</html>
Comentário.
Para
escrever um comentário no arquivo HTML se usa <!--comentário aqui-->
Ex: <!DOCTYPE>
<html
lang="pt-br">
<head>
<title>exemplo3</title>
</head>
<body>
isso aparece <!--isso não-->
</body>
</html>
Elementos de agrupamento.
A tag <p> indica o inicio de um
parágrafo, a tag <hr> traça
uma linha horizontal no arquivo. A tag<blockquote> indica uma citação em bloco, muito usada em
blogs para inserir uma citação de outro autor.
Agora vamos falar de listas que são muito
usadas nas páginas web <ol> é
usada para dar inicio em uma lista ordenada, e <li> indica os elementos da lista. O <ul> indica uma lista não ordenada os elementos dessa lista
também são indicados pela tag <li>.
A <dl> inicia uma lista de
definição <dt> um tema a ser
definido <dd>definição do
termo.
A tag <div>
é usada para fazer uma divisão na página.
Ex: <!DOCTYPE>
<html
lang="pt-br">
<head>
<title>exemplo3</title>
</head>
<body>
<div>
<p> Douglas Adams é o ator do guia
do mochileiro das galáxias</p>
<blockquote> "Desde os tempos imemoriais houve menos de meia dúzia
de mortais cujas mentes foram capazes de
contemplar o
universo em sua totalidade. "-Douglas
Adams</blockquote>
<hr>
</div>
<div>
<ul>
<li>personagens</li>
<ol>
<li> Arthur Dent</li>
<li> Ford
Prefect</li>
<li> Zaphod Beeblebrox</li>
<li>
Trillian</li>
</ul>
<dl>
<dt>O guia
do mochileiro das galáxias</dt>
<dd>
Série de livros escrita por Douglas
Adams
que narra à história de Arthur dent no espaço. </dd>
</body>
</html>
Elementos de texto semânticos.
A tag <a> é utilizada para adicionar hiperlinks
a sua página, também é usada na elaboração de menus, possui o atributo target
que recebe o valor _blank abre o link em nova aba ou nova janela e o _parent abre
na mesma janela. O atributo href que indica o local para onde o link irá
redirecionar o usuário, esse local possui duas formas de aparecer . Como link
absoluto que descreve todo o caminho do arquivo “c:\users...” ou uma url “http://www.google.com.br”
esse tipo de endereçamento não é muito indicado pois quando o site fora para um
servidor todos os links ficarão quebrados. A outra forma é o uso de ink
relativo, nessa modalidade você utiliza um esquema de pastas da seguinte forma
:
““../
nomedoarquivo.extensão” usado para subir um diretório e “nomedodiretorio/arquivo.extensão”
para descer um diretório, ou simplesmente “arquivo.extensão” se ele estiver no
mesmo diretório.A tag <br> é usada para pular linha no documento HTML.
<!DOCTYPE>
<html>
<head>
<title> Link </title>
</head>
<body>
<a
href=pagina1.html target=principal> Link 1 </a> <br>
<a
href=pagina3.html target=principal> Link 2</a> <br>
<a
href=nova_pagina_2.html target=principal> Link 3 </a> <br>
<a
href=nova_pagina_1.html target=principal> Link 4 </a> <br>
<br> <br> <br>
<a
href=imagem1.html target=principal> Imagem 1 </a> <br>
<a
href=imagem2.html target=principal> Imagem 2 </a> <br>
<a
href=imagem3.html target=principal> Imagem 3 </a>
</body>
</html>
A tag <strong> define o texto
importante. A tag <em> é usado
para dar ênfase em um determinado texto. A tag <abbr> indica uma abreviatura ou acrônimo, como "LOTR" isso serve para por exemplo auxiliar mecanismos de busca. A tag
<span> é usado para agrupar elementos em um documento ela não fornece
nenhuma mudança visual por si só mas fornece uma maneira de adicionar por
exemplo formatação css.
<!DOCTYPE>
<html>
<head>
<title> Link </title>
</head>
<body>
<p><strong> A algumas horas o
relógio tocou.</strong></p>
<abbr>LOTR</abbr>
<p>É a abreviação de lord of the
rings.</p>
</body>
</html>
Conteúdo embutido.
A tag img é
usada para adicionar uma imagem a página possui o atributo src que indica a url
do arquivo, o atributo alt que é usado para adicionar um texto secundário a
imagem
ex:
<!DOCTYPE>
<html>
<head>
<title>
Imagem
</title>
</head>
<body>
<img src="matt.jpg" alt="doctor who">
</body>
</html>
<html>
<head>
<title>
Imagem
</title>
</head>
<body>
<img src="matt.jpg" alt="doctor who">
</body>
</html>
Nenhum comentário:
Postar um comentário