Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Desenvolvimento Web Aula 2 HTML
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Prof. Leonardo Cruz. leonardocruz@ id.uff.br D epartam ento de C om putação, U FF D esenvolvim ento W eb H TM L HTM L -Hyper Text M arkup Language E specificação definida pelo consórcio W 3C : http://w w w .w 3.org/ H TM L é um a abreviação de H ypertext M arkup Language - Linguagem de M arcação de H ypertexto. R esum indo em um a frase: o H TM L é um a linguagem para publicação de conteúdo (texto, im agem , vídeo, áudio e etc) na W eb. HTM L -Hyper Text M arkup Language O H TM L é baseado no conceito de Hipertexto. H ipertexto são conjuntos de elem entos – ou nós – ligados por conexões. E stes elem entos podem ser palavras, im agens, vídeos, áudio, docum entos etc. E stes elem entos conectados form am um a grande rede de inform ação. P ara distribuir inform ação de um a m aneira global, é necessário haver um a linguagem que seja entendida universalm ente por diversos m eios de acesso. O H TM L se propõe a ser esta linguagem . D esenvolvido originalm ente por Tim B erners-Lee o H TM L ganhou popularidade quando o M osaic - brow ser desenvolvido por M arc A ndreessen na década de 1990 ganhou força. HTM L -Hyper Text M arkup Language V ersão atual 5 C urso é baseado nessa versão HTM L -Hyper Text M arkup Language HTM L - Hyper Text M arkup Language U m arquivo htm l contém m arcadores (tags) E stes m arcadores indicam para o navegador (brow ser) com o a página deve ser apresentada M arcadores usualm ente vem em pares: <tag>...</tag> Tam bém podem aparecer de form a abreviada: < tag atributo= “valor” ... /> <!DOCTYPE htm l!> <htm l lang=”pt-br”> <head> <title>Título da P ágina</title> </head> <body> E sta é m inha prim eira página. </body> </htm l> HTM L -Hyper Text M arkup Language HTM L – Tags básicas https://w w w .w 3schools.com / HTM L - Doctype <!DOCTYPE htm l!> <htm l lang=”pt-br”> <head> <title>Título da P ágina</title> </head> <body> E sta é m inha prim eira página. </body> </htm l> O Doctype deve ser a prim eira linha de código do docum ento antes da tag H TM L. O Doctype indica para o navegador e para outros m eios qual a especificação de código utilizar. O Doctype não é um a tag do H TM L, m as um a instrução para que o brow ser tenha inform ações sobre qual versão de código a m arcação foi escrita. HTM L <!DOCTYPE htm l!> <htm l lang=”pt-br”> <head> <title>Título da P ágina</title> </head> <body> E sta é m inha prim eira página. </body> </htm l> O código H TM L é um a série de elem entos em árvore onde alguns elem entos são filhos de outros e assim por diante. O elem ento principal dessa grande árvore é sem pre a tag H TM L. O atributo LA N G é necessário para que os user-agents saibam qual a linguagem principal do docum ento. HTM L - Head A Tag H E A D é onde fica toda a parte inteligente da página. N o H E A D ficam os m etadados. M etadados são inform ações sobre a página e o conteúdo ali publicado. A especificação obriga a presença da tag de conteúdo <title> dentro do nosso <head>, perm itindo especificar o título do nosso docum ento, que norm alm ente será exibido na barra de título da janela do navegador ou na aba do docum ento. <!DOCTYPE htm l!> <htm l lang=”pt-br”> <head> <title>Título da P ágina</title> </head> <body> E sta é m inha prim eira página. </body> </htm l> HTM L - M eta P odem os configurar qual codificação utilizar no docum ento por m eio da configuração de charset na tag <m eta>. U m dos valores m ais com uns usados é o UTF-8, tam bém cham ado de Unicode. < m eta charset= ”utf-8”> <!DOCTYPE htm l!> <htm l lang=”pt-br”> <head> <title>Título da P ágina</title> </head> <body> E sta é m inha prim eira página. </body> </htm l> HTM L N as versões anteriores ao H TM L5, essa tag era escrita da form a abaixo: <m eta http-equiv= ”C ontent-T ype” content= ”text/htm l; charset=utf-8”> <!DOCTYPE htm l!> <htm l lang=”pt-br”> <head> <title>Título da P ágina</title> </head> <body> E sta é m inha prim eira página. </body> </htm l> HTM L - exem plo <!DOCTYPE htm l!> <htm l lang=”pt-br”> <head> <m eta charset=”U TF-8”> <title>Título da P ágina</title> </head> <body> E sta é m inha prim eira página. </body> </htm l> HTM L - Body O elem ento <body> do H TM L representa o conteúdo de um docum ento H TM L. O conteúdo do site A penas é perm itido um elem ento <body> por docum ento. <!DOCTYPE htm l!> <htm l lang=”pt-br”> <head> <title>Título da P ágina</title> </head> <body> E sta é m inha prim eira página. </body> </htm l> HTM L - Categorias C ada elem ento no H TM L pode ou não fazer parte de um grupo de elem entos com características sim ilares. HTM L - Categorias M etadata content Flow content S ectioning content H eading content P hrasing content E m bedded content Interactive content HTM L – Categorias - M etadata content E ste conteúdo vem antes da apresentação (body), form ando um a relação com o docum ento e seu conteúdo com outros docum entos que distribuem inform ação por outros m eios. base, com m and, link, m eta, noscript, script, style, title HTM L – Categorias - Flow content A m aioria dos elem entos utilizados no body e aplicações. a abbr address area article aside audio b bdo blockquote br button canvas cite code com m and datalist del details dfn div dl em em bed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i ifram e im g input ins kbd keygen label link m ap m ark m ath m enu m eta m eter nav noscript object ol output p pre progress q ruby sam p script section select sm all span strong style sub sup svg table textarea tim e ul var video w br Text HTM L – Categorias - Flow content - Exem plo HTM L – Categorias - Flow content - Exem plo HTM L – Categorias - Flow content - Exem plo HTM L – Categorias - Flow content - Exem plo HTM L – Categorias - Sectioning content E stes elem entos definem um grupo de cabeçalhos e rodapés. article, aside, nav, section B asicam ente são elem entos que juntam grupos de textos no documento. HTM L – Categorias - Heading content O s elem entos da categoria H eading definem um a seção de cabeçalhos, que podem estar contidos em um elem ento na categoria S ectioning. h1, h2, h3, h4, h5, h6, hgroup HTM L – Categorias - Phrasing content Fazem parte desta categoria elem entos que m arcam o texto do docum ento, bem com o os elem entos que m arcam este texto dentro do elem ento de parágrafo. a abbr area audio b bdo br button canvas cite code com m and datalist del dfn em em bed i ifram e im g input ins kbd keygen label link m ap m ark m ath m eta m eter noscript object output progress q ruby sam p script select sm all span strong sub sup svg textarea tim e var video w br Text HTM L – Categorias - Em bedded content N a categoria E m bedded, há elem entos que im portam outra fonte de inform ação para o docum ento A udio, canvas, em bed, ifram e, im g, m ath, object, svg, video HTM L – Categorias - Interactive content Interactive C ontent são elem entos que fazem parte da interação de usuário. a, audio (se o atributo control for utilizado), button, details, em bed HTM L - Tabelas <table border="1"> <tr> <th>C oluna 1</th> <th>C oluna 2</th> </tr> <tr> <td>linha 1, valor 1</td> <td>linha 1, valor 2</td> </tr> <tr> <td>linha 2, valor 1</td> <td>linha 2, valor 2</td> </tr> </table> HTM L - Form ulários H TM L possibilita a criação de form ulários online utilizando tags A tag <form > é a m ais com um e perm ite a criação de um form ulário de entrada de dados <body><form > N om e: <input type="text" nam e="firstnam e"><br /> S obrenom e: <input type="text" nam e="lastnam e"><br /> S enha: <input type="password" nam e="senha"> </form ></body> HTM L - Form ulários Tipos que podem ser utilizados com a tag <input>: button: Insere um botão checkbox: Insere um checkbox; para vários itens, basta inserirm os vários “inputs” deste tipo file: Insere botão seleção de arquivo através de um a caixa de diálogo hidden: C am po pertencente ao form ulário, m as que não será exibido na página im age: Insere um a im agem com o um botão subm it passw ord: Insere um cam po passw ord (caracteres digitados não aparecem ) radio: Insere um radiobox (análogo ao checkbox) reset: R estaura os valores iniciais do form ulário subm it: Encam inha os dados inseridos para algum arquivo text: Insere um cam po de edição de texto HTM L - Form ulários Q uando algum elem ento do tipo “subm it” é inserido num form ulário e acionado, os dados são enviados para um arquivo O arquivo m encionado é indicado pelo atributo “action” do elem ento < form > E ste arquivo deverá estar arm azenado num servidor w eb (A pache, Tom cat, IIS , ...), e estará escrito em algum a linguagem de program ação de servidores: jsp, php, asp, sevlets, ... HTM L - Form ulários <body> <form action=“processaF orm .jsp" > N om e: <input type="text" nam e="firstnam e"><br /> S obrenom e: <input type="text" nam e="lastnam e"><br /> S enha: <input type="passw ord" nam e="senha"> <input type="subm it" value="Enviar"> </form > </body> U R L após clicar no botão: .../sirius/processaForm .jsp?firstnam e=C arlos& lastnam e= B azilio& senha=abcdefg H TM L O utras tags de Form ulários Tag D escrição <form > D efine um form ulário para entrada do usuário <input> D efine um cam po de entrada <textarea> D efine um cam po texto com m últiplas linhas <label> D efine um label para algum controle <fieldset> D esenha um a caixa em torno de um conjunto de elem entos <legend> D efine um título para um <fieldset> <select> C ria um a lista drop-dow n <optgroup> C riar um a hierarquia nas opções de um a lista drop-dow n <option> U m a opção na lista drop-dow n <button> Insere um botão. D ifere de <input> por poder conter algum conteúdo, com o um a im agem
Continue navegando
Materiais relacionados
Perguntas relacionadas
Compartilhar