03 - HMTL/CSS - Curso de Programação

TAGINICIAL

TAGFINAL

Tagssãooconjuntodecaracteresquecriamumamarcaçãoassociadosaumvalor/atributopré-definido

pelalinguagem.

1.  U%lizamososinaldemenor(<)2.  Seguidodonomedoelemento3.  Eosinaldemaior(>)

4.  U%lizamososinaldemenor(<)+barra(/),5.  Nomedoelemento6.  Eosinaldemaior(>).

PARACRIARUMATAG

PARAFECHARTAG

<b>

</b>

CriarTAGbold

FecharTAGbold

Abrir:Notepad++ouSublimeText

Escrever:OláMundo!

SalvarComo:tags.html

Criaruma2ªlinha:Comomesmotexto

1#EXERCÍCIO

<b> Bold<i> Italic<small> Smaller<strong> Important<sub> Subscripted

<sup> Superscripted<ins> Inserted<del> Deleted<mark> Highlighted<hr> HorizontalRule

TextFormaXngElements

Vamosvercomofunciona

?

EstasTAGSsãousadasparaestruturargráficamenteotexto.

Abrir:-Documentotags.html

-Criar9linhascomotexto“OláMundo!”-Marcarcadatexto/linhacomastagsanteriores.

2#EXERCÍCIO

Notas:-  ATAG<br>criaumaquebradelinha.-  ATAG<p>criaumnovoparagrafoedeixa

umamargemdeintervaloantesderecomeçarotexto.

Vamosvercomofunciona

?

FormaXngParagraphsEstasTAGSsãousadaspara

estruturargráficamenteotexto.

<p> Definesaparagraph<br> Insertsasinglelinebreak<pre> Definespre-formaaedtext

Abrir:-Documento.tags.html

-Criar1romancecom3parágrafos!J-AplicarasTAGS:

-<p>e<pre>

3#EXERCÍCIO

Notas:-  Existem6tamanhosdis%ntosordenados

deformadecrescentedoH1paraoH6.

Vamosvercomofunciona

?

FormaXngHeadingsEstasTAGSsãousadasparaatribuir

níveishieráquicosnassecçõesdostextos

<h1><h2><h3>

<h4><h5>

<h6>

Criar:-Documentoheadings.html

-Escrever6vezesincons%tucionalissimamente!-  Aplicaras6TAGSdecabeçalhos.

4#EXERCÍCIO

Exemplo:<!--Istoéumcomentário--><p>Istoéumparágrafo<p/>

Vamosvercomofunciona

?

CreateCommentsOscomentáriossãodeextremaimportância

paraorganizarocódigoeorientaroprogramador.

Início:<!--Fim:-->

Criar:-Documentocomments.html

-Escrever1poema!J-  Comentarasestrofes…

5#EXERCÍCIO

CreateListsAslistassãomarcaçõesideaisparaajudarou%lizador

aiden%ficarainformaçãoquepretende.

Notas:-  EstasTAGSsãoúteisparaorganizardados

emlistaefacilitaraleituradainformação.

<ol>-ListaOrdenada<ul>-ListanãoOrdenada<dl>-ListadeDescrição

3TIPOSDELISTAS

CreateLists<ol>-ListaOrdenada

Notas:-  Usarsempreataglist<li>paracriararespe%valinha

<ol><li>Benfica</li><li>Porto</li><li>Spor%ng</li></ol>

CreateLists<ul>-ListaNãoOrdenada

Notas:-  Usarsempreataglist<li>paracriararespe%valinha

<ul><li>Benfica</li><li>Porto</li><li>Spor%ng</li></ul>

CreateLists<dl>-ListadeDescrição

Notas:-  Usarsempreataglist<dt>paracriara1ªlinha-  Usarsempreataglist<dd>paracriaralinhasubsequente

<dl><dt>SLB</dt><dd>-Spor%ngLisboaeBenfica</dd><dt>FCP</dt><dd>-FutebolClubedoPorto</dd></dl>

Criar:-Documentolists.html

-Criar1listaordenada:<ol>-Criar1listasemordenação:<ul>

-Criar1ListacomDefinição:<dl>

6#EXERCÍCIO

Nota:Cadalistadeveterpelomenos3linhas

CreateTablesAstabelaspodemserusadasparaexporinformaçõesdeformaclaraefacilmenteorganizadaporlinhasecolunas.

<table>-TAGparacriartabela<tr>-TAGparacriarcoluna(Row)<td>-TAGparacriarcélulas(Date)

3TAGSIMPORTANTES

SIMPLIFICANDO

CreateTables

EXEMPLIFICANDO

<tableborder="1"><tr> <td>Row1Cell1</td> <td>Row1Cell2</td></tr><tr> <td>Row2Cell1</td> <td>Row2Cell2</td></tr>

</table>

Row1Cell1 Row1Cell2Row2Cell1 Row2Cell2

Vamosvercomofunciona

?

CreateTables

COMPLICANDO

AtravésdaTAG<th>(TableHeader)Podemoscriar/destacaroscabeçalhosdatabela.

<th>CABEÇALHOS

EXEMPLIFICANDO

<tableborder="1"><tr> <th>CABEÇALHO1</th> <th>CABEÇALHO2</th></tr><tr> <td>Row1Cell1</td> <td>Row1Cell2</td></tr><tr> <td>Row2Cell1</td> <td>Row2Cell2</td></tr>

</table>

Row1Cell1 Row1Cell2Row2Cell1 Row2Cell2

CABEÇALHO11 CABEÇALHO21

CreateTables

IMPLICANDO

AtravésdoATRIBUTOcolspanPodemosfazerafusãocomcolunas COLSPAN

UNINDO<tdcolspan=“2">FUSÃO!!</td>

EXEMPLIFICANDO

<tableborder="1"><tr> <th>Row1Cell1</td> <th>Row1Cell2</td></tr><tr> <td>Row1Cell1</td> <td>Row1Cell2</td></tr><tr> <tdcolspan="2">FUSÃO!</td></tr>

</table>

Row1Cell1 Row1Cell2FUSÃO!

CABEÇALHO11 CABEÇALHO21

AEXPLORAR…

<colspan> Fusãodecolunas<capXon> Legendadatabela<colgroup>-EstasTAGSpermitemagruparcolunas.<thead><tbody><moot>-Comesteselementospodemosagruparlinhas

detabelasnumcabeçalho,numrodapéenumaoumaissecçõesdocorpodatabela.

Criar:-  Criarumnovodocumentoindex.htmldeacordocomaseguinteestrutura:[VERAQUI]-  Enviarpara:j.almeidabrandao@gmail.com

7#EXERCÍCIO

Notas:AtençãoàindentaçãoAtençãoàestruturaHeadeBody

[VEREXEMPLO]

www.m-voice.org

HTMLLayout

<!DOCTYPEhtml><html>

<head>

</head><body>

<body>

<html>

InformaobrowserdaversãoHTMLu%lizadanapágina.

ABRIRTAGHTML

FECHARTAGHTML

Incluiinformaçõesimportantessobreapágina,ztulo,descrição,keywordseautor

Incluioconteúdodapágina,desdeTítulos,parágrafos,tabelas,listas,Imagens,entreoutros...

INDENTAÇÃO

<!DOCTYPEhtml><html>

<head> <%tle>Home</%tle></head><body> <h1>Home</h1> <p>Home</p><body>

<html>

<!DOCTYPEhtml><html><head><%tle>Home</%tle></head><body><h1>Home</h1><p>Home</p><body><html>

INDENTAÇÃO

<!DOCTYPEhtml><html>

<head> <%tle>Home</%tle></head><body> <h1>Home</h1> <p>Home</p><body>

<html>

INDENTAÇÃO

Criar:-Criardocumentoindex.htmlcomaseguinteestrutura

8#EXERCÍCIO

<!DOCTYPEhtml><html>

<head>

</head><body>

</body>

</html>

Nota:Atençãoàindentação

HTMLLayout

<head></head>

<header>

<Xtle>PáginaPessoal</Xtle>

<!DOCTYPEhtml>

HTMLLayout

<head></head>

FECHARTAGHTML

<header>

<%tle>PáginaPessoal</%tle><metacharset="UTF-8"><metaname="descrip%on"content="PáginapessoaldeJ.Brandão"><metaname="keywords"content="HTML,CSS,XML,JavaScript"><metaname="author"content="JorgeBrandão">

Criar:-Criardocumentoindex.htmlcomaseguinteestrutura

8#EXERCÍCIO

<!DOCTYPEhtml><html>

<head> <%tle>PáginaPessoal</%tle> <metacharset="UTF-8"> <metaname="descrip%on"content="PáginaPessoal"> <metaname="keywords"content="HTML,CSS"> <metaname="author"content="JorgeBrandão”></head>

<body>

</body>

</html>

Nota:Atençãoàindentação

CreatHTMLTagsTalcomoreferido,anteriormente,existemalgumasTAGS

quetêmobrigatóriamentedeserfechadasaocontráriodeoutras,exemplos;

TAGSCOMENCERRAMENTO:

<h1>texto</h1><p>texto</p>

<div>texto</div>

TAGSSEMENCERRAMENTO

<br><hr>

CreatHTMLBlocksTodososELEMENTOSHTMLestãoapresentados,pordefeito,sob2formas,emlinhaouembloco,sejamelescabeçalhos<h1>

parágrafos<p>,entreoutos…

ELEMENTOSAPRESENTADOSEMBLOCO:

<h1>texto</h1><p>texto</p>

<div>texto</div>

ELEMENTOSAPRESENTADOSEMLINHA:

<b><i><ul>