-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
61 lines (61 loc) · 4.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<!--Informa ao navegador qual a linguagem utilizada-->
<html>
<head>
<!--Define o cabeçalho do documento com informações que não serão exibidas dentro do conteúdo da página-->
<meta charset="utf-8">
<!--Serve para indicar o formato de codificação de caracteres utilizado no documento-->
<title>Introdução a criação de websites com HTML5 e CSS3</title>
<!--Título que aparecerá na aba do navegador-->
<link rel="stylesheet" href="style.css">
<!--link sincroniza o css ao html,rel vai dizer qual tipo de arquivo, "stylesheet" é o tipo de arquivo-->
</head>
<body>
<!--Define o corpo do documento, ou seja, tudo que estiver dentro da tag body será o conteúdo da página-->
<header>
<!--Header é um cabeçalho da página ou parte da página, um cabeçalho da section por exemplo-->
<img height="100px" width="100px" src="assets/user-avatar.webp" alt="imagem de avatar de usuário" class="photo">
<!--A tag img adiciona uma imagem, devemos usar o atributo src para inserir o caminho da imagem/link da imagem-->
<h1 id="title">Felipe Sousa</h1>
<!--H1 ao h6 são headings <h1>Título da página</h1> <h2>Título de seção</h2> <h3>Título de artigo</h3>-->
</header>
<section>
<!--Section é uma seção genérica de conteúdo como uma lista de artigos por exemplo-->
<header>
<!--Este cabeçalho por exemplo é referente à section-->
<h2 class="subtitle">Posts</h2>
</header>
<article class="post">
<!--Article é um conteudo relevante como um artigo de um blog-->
<header>
<h3 class="post_title">Post #1</h3>
<img height="320px" width="760px" src="assets/web-code.jpg" alt="imagem de código em notebook" class="post_image">
<!--O termo height define altura e width largura e alt para descrever o conteúdo contido na imagem para uma maior acessibilidade-->
</header>
<p class="post_content">
<!--<p>conteúdo do artigo<p>-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut lacus eu dui dapibus aliquet accumsan eget ante. Proin eget consectetur dolor. Etiam eu ultricies mi. Proin nec augue at sem interdum luctus dapibus posuere ex. Aliquam eu justo molestie, posuere erat et, gravida tellus. Integer posuere orci sapien, in tincidunt orci tempus sed. Sed ac lectus malesuada, finibus augue non, interdum nulla. Aenean dictum dolor sit amet commodo condimentum. In hac habitasse platea dictumst. Ut nec feugiat leo, sed porttitor lectus. Sed condimentum odio ac nulla consequat, suscipit gravida mi mollis. Donec accumsan rutrum nulla, et fringilla neque condimentum vitae. Pellentesque condimentum arcu libero, sed volutpat velit sollicitudin ac. Nulla vestibulum at orci eu pretium. Duis lacinia porta nisl, ut laoreet nulla ornare mattis.
<br><!--br é a quebra de texto--> <a href="https://lipsum.com/" target="_blank">Fonte do texto</a>
<!--Este é uma tag de link, o atributo href é um hiperlink, para abrir o link em outra aba, usa-se o atributo target com valor "_blank"-->
</p>
</article>
</section>
<footer>
<!--Rodapé da pagina ou de uma article, section...-->
<ul class="contacts_list">
<!--Esta é uma lista não ordenada(irá conter bolinha antes da palavra) usa-se <ol> para uma lista ordenada-->
<li>
<!--Item da lista-->
<a href="mailto:user@email">Email</a>
<!--Esta ancora usa um prefixo "mailto:" para redirecionar para um email-->
</li>
<li>
<a href="https://www.linkedin.com/in/felipe-sousa-197a87241/" target="_blank">Linkedin</a>
</li>
<li>
<a href="https://github.com/OneFelipe" target="_blank">Github</a>
</li>
</ul>
</footer>
</body>
</html>