Sítios Web I

<html> Marcações populares e estrutura de arquivos

ProfºEduardo Pezutti

http://maverick.td.utfpr.edu.br/slides/sw1 link

HTML 5

Marcações populares

Dentro do <body>

Aos detalhes...

▼

<h1> até <h6>


<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

Os "h" é usado para definir cabeçalho, do mais importante ao menos importante.

Não tem atributo.

<hr>


<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>

<hr>

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>

O hr cria uma linha. É definida para criar uma quebra temática.

Não tem atributo.

<p> e <br>


<p>This is a paragraph.</p>
<p>
  This is a another paragraph.
</p>
<p>
  This is a another paragraph.<br> with line breaks.
</p>

Não tem atributo.

<!-- ... -->


<!--This is a comment. Comments are not displayed in the browser-->
<p>This is a paragraph.</p>

O comentário permite colocar texto dentro do html que não será exibido. Importante para colocar informações extras e úteis.

Não tem atributo.

Existe outras marcações?

Sim, muitas outras. Para encontrar outras marcações utilizadas em um site na Internet, aperte o F12 ou o CTRL + SHIFT + i

Links <a>

▼

A tag <a>(hyperlink) cria uma ligação com outro documento HTML.


<a href="http://www.w3schools.com/">Visite o W3Schools</a>

Atributo target="_blank" para o link abrir em uma nova aba.

Os links podem ser internos, externos (exemplo acima) ou para email.

Link interno


                <a href="#C4">Link Interno</a>

                <h2 id="C4">Referência do link interno</h2>

Link email


<!-- Link para chamar o programa de email do computador -->
<a href="mailto:someone@example.com">e-mail</a>

<!-- Link para chamar o programa de email do computador com Assunto definido -->
<a href="mailto:someone@example.com?Subject=Hello%20again">e-mail com assunto</a>

Links internos (arquivos)

Tem um exemplo na estrutura de arquivos (fim da aula).

Iframe

▼

Forma de escrita

<iframe src="URL"></iframe> 


<!-- Chamada de um link -->
<iframe src="http://www.epbsantos.com"></iframe>

<!-- Chamada com altura e largura específica -->
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

<!-- Chamada sem borda -->
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

Link dentro do iframe

<iframe src="url" name="manda_aqui"></iframe> 


<iframe src="http://www.epbsantos.com" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

Estrutura dos arquivos

▼

Detalhes dos arquivos:

  1. O HTML, para carregar automaticamente, tem que se chamar index: index.html
  2. Normalmente, criar 3 pastas junto com o index:
    • css: Fica os arquivos de estilo
    • js: Guarda os arquivos de script e plugins
    • img: Fica as imagens dos site
  3. As outras páginas de html pode ficar dentro de outra pasta (por organização) ou no mesmo nível do index

ZIP

Uma estrutura básica

Vamos ler HTML

Melhor forma para aprender!

Vamos começar com este daqui (CSS Zen Garden) [INGLÊS]

Tem o nosso também...

Entre nestes sites e aperte F12 ou CTRL + SHIT + I, para ver o código.

ProfºEduardo Pezutti

epsantos@utfpr.edu.br link