HTML e CSS

HTML e CSS Starting Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

Starting HTML Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML O que é HTML? • Linguagem utilizada para a criação de páginas Web; • Abreviatura de Hyper Text Markup Language; • Não é uma linguagem de programação mas sim uma linguagem de marcação; • Liguagem de marcação = grupo de “tags” de marcação que descrevem as páginas Web; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML O que são “tags” HTML? • tags HTML = tags de marcação HTML; • São palavras-chave contidas entre o sinal de menor (<) e maior (>); • Existe sempre uma de abertura (<body>) e uma de fecho (</body>); • Existem tags de abertura e fecho simultâneo (<br/>); Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML O que são Elementos HTML? • É tudo o que começa com uma tag de abertura (<body>) e uma tag de fecho (</body>); • Termina sempre com uma tag de fecho (</body>); • O seu conteúdo é tudo o que está entre as tags de abertura e de fecho; • Existem elementos HTML sem conteúdo (<br/>); Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML O que são Elementos HTML? • O elementos sem conteúdo abrem-se e fecham-se na mesma tag (<br/>); • A maior parte dos elementos HTML podem ter atributos; • Pode haver elementos HTML dentro de outros elementos HTML; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Elementos HTML • <html> ... </html> define todo o documento HTML e o seu conteúdo são outros elementos HTML, como por exemplo: • <head> ... </head> onde está contida a metadata e o seu conteúdo são outros elementos HTML, como por exemplo: • <title> ... </title> nome que vai aparecer no separa- dor/barra do browser; • <keywords> ... </keywords> contém todas as palavras chaves, para quando numa pesquisa num motor de busca mostre-nos também o nosso site; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Elementos HTML • <link ... /> define a relação entre o documento HTML e uma fonte externa (Folha CSS); • <body> ... </body> define o todo o documento HTML e contém outros elementos HTML, como por exemplo: • <p> ... </p> define um parágrafo num documento HTML; • <a href=”meusite.html” > ... </a> define um link para uma página HTML; • <br/> ou <br> elemento HTML vazio que define uma quebra de linha; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Elementos HTML • <h1> ... </h1> define um título com um tamanho de letra já predefinido; • <table> ... </table> cria uma tabela e contém outros elementos HTML que dão forma à tabela, como por exemplo: • <tr > ... </tr> define o número de linhas de uma tabela; • <td> ... </td> define uma célula de cada linha; • <img src=”eu.png”> ... </img> insere uma imagem; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML O que são Atributos HTML? • Atribuem informação adicional a um elemento HTML; • São sempre especificados na tag de abertura (<a href=”meusite.html”>); • São sempre definidos dentro da tag de abertura como nome=”valor”, onde as aspas são obrigatórias; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Headings HTML • Definidos com as tags <h1> a <h6>; • Quanto maior o número (<h6>), menor o tamanho da letra apresentada; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Headings HTML - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho do “body”, escrever o seguinte código: <h1>O meu título “h1”</h1> <h2>O meu título ”h2”</h2> <h3>O meu título “h3”</h3> <h4>O meu título “h4”</h4> <h5>O meu título “h5”</h5> <h6>O meu título “h6”</h6> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Headings HTML - Exemplo • Obtem-se: Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Parágrafos HTML - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho do “body”, escrever o seguinte código: <p>O meu primeiro parágrafo</p> <p>O meu segundo parágrafo</p> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Parágrafos HTML - Exemplo • Obtem-se: Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML tags de formatação • <b> ... </b> põe um texto, uma palavra, letra(s) a bold; • <i> ... </i> põe um texto, uma palavra, letra(s) a itálico; • <big> ... </big> põe um texto, uma palavra, letra(s) um pouco maior; •<code> ... </code> muda o tipo de letra para o que normalmente é utilizado em programação; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML tags de formatação • <sub> ... </sub> põe palavra(s), texto, letra(s) em subscrito; • <sup> ... </sup> põe palavra(s), texto, letra(s) em sobrescrito; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML tags de formatação - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho de um parágrafo, escrever o seguinte código: <b>Texto em Bold</b> <i>Texto em itálico</i> <big>Texto maior</big> <code>Texto com letra de código</code> <sub>Texto subscrito</sub> <sup>texto sobrescrito</sup> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML tags de formatação - Exemplo • Obtem-se: Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Como inserir imagens? • Definidas em HTML com a tag <img>; • Tem que conter o atributo “src” (source); • O valor do atributo “src” é o URL da imagem; • URL indica onde está a imagem (quer seja no computa- dor quer seja online); • Pode conter o atributo “alt”, que atribui um texto à imagem quando esta não for visualizada; •Apresentada no browser no sítio onde está inserida no documento; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Como inserir imagens? • Pode conter os atributos “height” (altura) e “width” (largura); • “height” e “width” definem a altura e a largura da imagem, respectivamente; • Os valores dos atributos “height” e “width” são definidos em pixeis; •Não tem tag de fecho; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Como inserir imagens? - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho de um parágrafo, escrever o seguinte código: <img src=”http://www.iasfa.pt/imagens/images/ acordo/ulp.gif” alt=”logo_ULP” height=”300px” width=”500px”> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Como inserir imagens? - Exemplo • Obtem-se; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Como criar tabelas? • Definida pela tag <table>; • São divididas em linhas (<tr>); • Cada linha é dividida em células (<td>); • Pode-se definir a espessura da borda da tabela com o atributo “border”; • Podem-se definir cabeçalhos a cada coluna da tabela com a tag <th>; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Como criar tabelas? - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho de um parágrafo, escrever o seguinte código: <table border=”2”> <tr> <th>Primeiro Cabeçalho</th> <th>Segundo Cabeçalho</th> </tr> <tr> <td>Primeira célula, primeira linha</td> <td>Segunda célula, primeira linha</td> </tr> <tr> <td>Primeira célula, segunda linha</td> <td>Segunda célula, segunda linha</td> </tr> </table> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Como criar tabelas? - Exemplo • Obtem-se: Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Como criar listas? • Podem-se criar listas ordenadas e não ordenadas; • <ul> tag de abertura de uma lista não ordenada; • <ol> tag de abertura de uma lista ordenada; • <li> tag de abertura de cada item da lista; • Os items das listas não ordenadas são antecedidos de uma bola preenchida a negro; • Os items das listas ordenadas são antecedidos de um número (1) e um ponto (.); Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Como criar listas? - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho de um parágrafo, escrever o seguinte código: <ul> <li>Estudar</li> <li>Não estudar</li> </ul> <ol> <li>Estudar</li> <li>Não estudar</li> </ol> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML Como criar listas? - Exemplo • Obtem-se; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

Starting CSS Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

CSS O que é CSS? • Abreviatura de Cascading Style Sheet; • Definimos a disposição dos elementos HTML; • Permite ter um documento HTML mais “limpo”; • Permite-nos mudar a formatação de todos os nossos documentos HTML ao mesmo tempo; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

CSS Sintaxe CSS • Cada regra CSS é composta por duas partes: Selector e a Declaração; •O selector é aquilo que queremos formatar; • Exemplo: body { background-color:#fff; }; Selector Declaração Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

CSS Sintaxe CSS • Cada declaração é composta por Propriedades e re- spectivos Valores; • Exemplo: body { background-color:#fff; }; Selector Propriedade Valor Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

CSS Como introduzir CSS? • Folha de estilos externa; • Folha de estilos interna; • “Inline style”; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

CSS Folha de estilos externa • Ideal quando se quer aplicar estilos a várias páginas; • Pode-se mudar o aspecto todo de um website mudando apenas um ficheiro; • Cada página tem que ter um link para a folha de estilos (<link>) que se insere na tag <head>; • Pode ser criada em qualquer editor de texto (notepad, Dreamweaver), guardado com a extensão “.CSS”; • Não contém tags HTML; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

CSS Folha de estilos externa • Exemplo: <head> <link rel=”stylesheet” type=”text/css” href=”meucss.css” /> </head> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

CSS Folha de estilos Interna • Deve ser utilizada quando um dado documento tem um estilo específico; • Definida com a tag <style> inserida na tag <head> do documento HTML; • Exemplo: <head> <style type=”text/css”> hr {color:#fff;} p {margin-to:200px;} body {background-color:blue);} </style> </head> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

CSS “Inline Style” • Perde muitas das vantagens das folhas de estilo porque mistura o conteúdo do documento com a apre- sentação do mesmo; • Necessário utilizar o atributo de estilo na tag pretend- ida; • O atributo pode conter qualquer propriedade CSS; • Exemplo: <p style=”color:#fff; margin:auto”>...</p> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

CSS Selectores CSS • CSS permite-nos atribuir dois selectores: “id” e “class”; • “id” usado para especificar um estilo para um só elemento; • “id” definido no CSS com cardinal (#estilo); • <div id=”estilo”> código para designar um estilo a um determinado elemento HTML; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

CSS Selectores CSS • “class” usado para especificar um estilo para um grupo de elementos HTML; • “class” usado em mais do que um elemento HTML, ao contrário do “id”; • “class” definido no CSS com um ponto(.classe); Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

CSS Propriedade “background” • Utilizada para atribuir um fundo a um elemento do documento; • “background-color” - atribui uma cor ao fundo; • “background-image” - atribui uma imagem ao fundo; • “background-repeat” - define se a imagem se repete no eixo xOy; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

CSS Propriedade “background” • “background-attachment” - define se a imagem é fixa ou se “anda” quando se utiliza a barra de rolamento; • “background-position” - define a posição da imagem do fundo; • “background” - podem-se inserir todas as caracterís- ticas anteriores numa só declaração; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

CSS Propriedade “background” • Exemplo: body { background: #ffffff url(‘img_tree.png’) no-repeat fixed right top; }; Cor Imagem Repetição Posição (color) (image) (repeat) (position) Fixação (attachment) • NOTA: A ordem tem obrigatoriamente de ser a apresentada, mas podem-se não utilizar todas as características. Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

CSS Propriedade “text” • Utilizada para formatar texto; • “text-color” - define a cor do texto; • “text-align” - define o alinhamento horizontal do texto; • “text-decoration” - define se há ou não alguma for- matação adicional ao texto (rasurado, linha por cima, sub- linhado, blink (bold)); • NOTA: “blink” não é aceite por alguns browsers como o Google Chrome, Internet Explorer, Safari Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

HTML e CSS

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a HTML e CSS

Último

HTML e CSS