Embed Size (px)
Citation preview
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:[email protected]
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>
