Download - 03 - HMTL/CSS - Curso de Programação
![Page 1: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/1.jpg)
![Page 2: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/2.jpg)
TAGINICIAL
TAGFINAL
![Page 3: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/3.jpg)
![Page 4: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/4.jpg)
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
![Page 5: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/5.jpg)
Abrir:Notepad++ouSublimeText
Escrever:OláMundo!
SalvarComo:tags.html
Criaruma2ªlinha:Comomesmotexto
1#EXERCÍCIO
![Page 6: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/6.jpg)
![Page 7: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/7.jpg)
<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.
![Page 8: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/8.jpg)
Abrir:-Documentotags.html
-Criar9linhascomotexto“OláMundo!”-Marcarcadatexto/linhacomastagsanteriores.
2#EXERCÍCIO
![Page 9: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/9.jpg)
Notas:- ATAG<br>criaumaquebradelinha.- ATAG<p>criaumnovoparagrafoedeixa
umamargemdeintervaloantesderecomeçarotexto.
Vamosvercomofunciona
?
FormaXngParagraphsEstasTAGSsãousadaspara
estruturargráficamenteotexto.
<p> Definesaparagraph<br> Insertsasinglelinebreak<pre> Definespre-formaaedtext
![Page 10: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/10.jpg)
Abrir:-Documento.tags.html
-Criar1romancecom3parágrafos!J-AplicarasTAGS:
-<p>e<pre>
3#EXERCÍCIO
![Page 11: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/11.jpg)
Notas:- Existem6tamanhosdis%ntosordenados
deformadecrescentedoH1paraoH6.
Vamosvercomofunciona
?
FormaXngHeadingsEstasTAGSsãousadasparaatribuir
níveishieráquicosnassecçõesdostextos
<h1><h2><h3>
<h4><h5>
<h6>
![Page 12: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/12.jpg)
Criar:-Documentoheadings.html
-Escrever6vezesincons%tucionalissimamente!- Aplicaras6TAGSdecabeçalhos.
4#EXERCÍCIO
![Page 13: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/13.jpg)
Exemplo:<!--Istoéumcomentário--><p>Istoéumparágrafo<p/>
Vamosvercomofunciona
?
CreateCommentsOscomentáriossãodeextremaimportância
paraorganizarocódigoeorientaroprogramador.
Início:<!--Fim:-->
![Page 14: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/14.jpg)
Criar:-Documentocomments.html
-Escrever1poema!J- Comentarasestrofes…
5#EXERCÍCIO
![Page 15: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/15.jpg)
CreateListsAslistassãomarcaçõesideaisparaajudarou%lizador
aiden%ficarainformaçãoquepretende.
Notas:- EstasTAGSsãoúteisparaorganizardados
emlistaefacilitaraleituradainformação.
<ol>-ListaOrdenada<ul>-ListanãoOrdenada<dl>-ListadeDescrição
3TIPOSDELISTAS
![Page 16: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/16.jpg)
CreateLists<ol>-ListaOrdenada
Notas:- Usarsempreataglist<li>paracriararespe%valinha
<ol><li>Benfica</li><li>Porto</li><li>Spor%ng</li></ol>
![Page 17: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/17.jpg)
CreateLists<ul>-ListaNãoOrdenada
Notas:- Usarsempreataglist<li>paracriararespe%valinha
<ul><li>Benfica</li><li>Porto</li><li>Spor%ng</li></ul>
![Page 18: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/18.jpg)
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>
![Page 19: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/19.jpg)
Criar:-Documentolists.html
-Criar1listaordenada:<ol>-Criar1listasemordenação:<ul>
-Criar1ListacomDefinição:<dl>
6#EXERCÍCIO
Nota:Cadalistadeveterpelomenos3linhas
![Page 20: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/20.jpg)
![Page 21: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/21.jpg)
CreateTablesAstabelaspodemserusadasparaexporinformaçõesdeformaclaraefacilmenteorganizadaporlinhasecolunas.
<table>-TAGparacriartabela<tr>-TAGparacriarcoluna(Row)<td>-TAGparacriarcélulas(Date)
3TAGSIMPORTANTES
SIMPLIFICANDO
![Page 22: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/22.jpg)
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
?
![Page 23: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/23.jpg)
CreateTables
COMPLICANDO
AtravésdaTAG<th>(TableHeader)Podemoscriar/destacaroscabeçalhosdatabela.
<th>CABEÇALHOS
![Page 24: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/24.jpg)
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
![Page 25: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/25.jpg)
CreateTables
IMPLICANDO
AtravésdoATRIBUTOcolspanPodemosfazerafusãocomcolunas COLSPAN
UNINDO<tdcolspan=“2">FUSÃO!!</td>
![Page 26: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/26.jpg)
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
![Page 27: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/27.jpg)
AEXPLORAR…
<colspan> Fusãodecolunas<capXon> Legendadatabela<colgroup>-EstasTAGSpermitemagruparcolunas.<thead><tbody><moot>-Comesteselementospodemosagruparlinhas
detabelasnumcabeçalho,numrodapéenumaoumaissecçõesdocorpodatabela.
![Page 28: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/28.jpg)
Criar:- Criarumnovodocumentoindex.htmldeacordocomaseguinteestrutura:[VERAQUI]- Enviarpara:[email protected]
7#EXERCÍCIO
Notas:AtençãoàindentaçãoAtençãoàestruturaHeadeBody
![Page 29: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/29.jpg)
![Page 30: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/30.jpg)
[VEREXEMPLO]
www.m-voice.org
![Page 31: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/31.jpg)
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...
![Page 32: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/32.jpg)
INDENTAÇÃO
<!DOCTYPEhtml><html>
<head> <%tle>Home</%tle></head><body> <h1>Home</h1> <p>Home</p><body>
<html>
![Page 33: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/33.jpg)
<!DOCTYPEhtml><html><head><%tle>Home</%tle></head><body><h1>Home</h1><p>Home</p><body><html>
INDENTAÇÃO
![Page 34: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/34.jpg)
![Page 35: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/35.jpg)
<!DOCTYPEhtml><html>
<head> <%tle>Home</%tle></head><body> <h1>Home</h1> <p>Home</p><body>
<html>
INDENTAÇÃO
![Page 36: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/36.jpg)
Criar:-Criardocumentoindex.htmlcomaseguinteestrutura
8#EXERCÍCIO
<!DOCTYPEhtml><html>
<head>
</head><body>
</body>
</html>
Nota:Atençãoàindentação
![Page 37: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/37.jpg)
HTMLLayout
<head></head>
<header>
<Xtle>PáginaPessoal</Xtle>
<!DOCTYPEhtml>
![Page 38: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/38.jpg)
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">
![Page 39: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/39.jpg)
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
![Page 40: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/40.jpg)
CreatHTMLTagsTalcomoreferido,anteriormente,existemalgumasTAGS
quetêmobrigatóriamentedeserfechadasaocontráriodeoutras,exemplos;
TAGSCOMENCERRAMENTO:
<h1>texto</h1><p>texto</p>
<div>texto</div>
TAGSSEMENCERRAMENTO
<br><hr>
![Page 41: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/41.jpg)
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>
![Page 42: 03 - HMTL/CSS - Curso de Programação](https://reader034.vdocuments.com.br/reader034/viewer/2022052606/58a3b79d1a28ab62218b528d/html5/thumbnails/42.jpg)