FIC de Introdução ao Desenvolvimento Front-End de Sites e Sistemas Web. Prof. Miguel Zarth

Tamanho: px

Começar a partir da página:

Download "FIC de Introdução ao Desenvolvimento Front-End de Sites e Sistemas Web. Prof. Miguel Zarth"

Renata Salvado
4 Há anos
Visualizações:

1 FIC de Introdução ao Desenvolvimento Front-End de Sites e Sistemas Web Prof. Miguel Zarth

2 Tópicos desta aula HTML Títulos Listas Introdução aos atributos de TAG

3 Títulos A TAG <title> que deve ser usada dentro do cabeçalho <head>, serve para colocar titulo na pagina Aparece nas abas dos Navegadores. <title> Google </title>

4 TAG title <head> <title> Título da página </title> </head>

5 Títulos na página <h1>...<h6> Identifica títulos, usados para dividir seções do texto. Existem 6 níveis de títulos; Numerados de H1 a H6, de acordo com a relevância. ATENÇÃO: São utilizados apenas dentro da TAG <body>

6 Exemplo de títulos <h1> Título da Seção </h1> <h2> Sub-seção </h2>... <h6> Último nível de títulos</h6>

7 Listas TAGs <ul>, <ol> e <li> Listas ordenadas começam com <ol> Listas não-ordenadas começam com <ul> Itens de ambas listas são marcadas pela tag <li>

8 Lista não ordenada HTML: <ul> <li>acre</li> <li>alagoas</li> <li>amapá</li> <li>amazonas</li> </ul> Visualização Acre Alagoas Amapá Amazonas

9 Lista ordenada HTML: Visualização <ol> <li>internet Explorer</li> <li>firefox</li> <li>chrome</li> </ol> 1. Internet Explorer 2. Firefox 3. Chrome

10 Atributos em TAGS A maioria das TAGs do HTML possuem atributos que permitem modificar suas propriedades Sintaxe: <tag atributo= valor >... </tag>

11 Atributos para a TAG,<ol> Atributos e valores Exemplos Start 1, 2,3, n type 1 A a I i <ol start= 2 type= A > <li>internet Explorer</li> <li>firefox</li> <li>chrome</li> </ol>

12 Atributos para a TAG <ul> Atributos e valores type disc, square, circle Exemplo <ul type= square > <li>acre</li> <li>alagoas</li> <li>amapá</li> <li>amazonas</li> </ul>

13 Treinando Crie uma página contendo: uma lista não ordenada de 5 estados brasileiros

14 Treinando Crie uma nova página chamada estados.html contendo: Um título uma lista não ordenada de 5 estados brasileiros Adicione em cada estado uma sublista de 3 cidades do respectivo estado

15 Treinando Crie uma nova página chamada einstein.html contendo umam lista com suas dez lições:

16 Dez lições de Albert Einstein I "Eu não tenho nenhum talento especial. Sou apenas apaixonantemente curioso." II "Não é que eu seja tão inteligente, eu apenas fico com os problemas por mais tempo." III "Qualquer homem que consiga dirigir de maneira segura enquanto beija uma linda garota está simplesmente não dando ao beijo a atenção que ele merece." IV "Imaginação é tudo. É a prévia das próximas atrações da vida. Imaginação é mais importante que conhecimento." V "Uma pessoa que nunca cometeu um erro nunca tentou algo novo." VI "Eu nunca penso sobre o futuro ele vem cedo." VII "Não se esforce para ser um sucesso, se esforce para ser valorizado." VIII "Insanidade: fazer a mesma coisa várias e várias vezes e esperar resultados diferentes." IX "Informação não é conhecimento. A única fonte do conhecimento é a experiência." X "Você tem que aprender as regras do jogo. E então você tem que jogar melhor do que todos."

17 treinando CRIAR UM DOCUMENTO HTML noticia.html - INSERIR A ESTRUTURA BASICA - INSERIR A LOGO DO FACEBOOK - DEFINIR CADA PARAGRAFO - Colocar cada palavra em Ingles em italico - Colocar cada nome proprio (Ex: Facebook, Google) em negrito - Título principal com H1 - Sub título com H2 - Sublinhar números e unidades de medida (ex: 450 milhões) - Lista ordenada no final

Documentos relacionados

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML