Olá a todos, a cada dia consigo aprender um pouco mais de como fazer isso funcionar e já consegui colocar meu domínio nesse blog (eu sei, isso é fácil, mas por algum motivo a plataforma de onde comprei meu domínio não tinha tanta compatibilidade assim com o blogger, então demorei um bocado até conseguir fazer a ligação) e agora já podem aceder com o domínio certo.
Como continuação dos meus estudos em Html e Css, fiz um novo projeto e deixarei novamente aqui meu código (que também pode ser acedido pelo meu GitHub (https://github.com/niviadeandrade):
HTML
<!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8"/>
<meta content="viewport"/>
<meta name="description" content="freeCodeCamp - test Nivia Andrade - build a tribute page"/>
<title>Nivia Andrade Evaluation</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main id="main">
<h1 class="titlep" id="title">HTML AND CSS TEST</h1>
<p class="italic">Made by Nivia Andrade - Aspirant to backend developer</p>
<figure id="img-div">
<img id="image" src="https://lh3.googleusercontent.com/pw/AJFCJaXKL6yNmHWtivpyg3umW_NJf2IiaxKB86ZJgNSXcaShZ641v6P8a5Lj70uRFzwPP6O5jljDW3MdlQSH8OflzAj8wjhOmjESqP9-fhQqDeMfg79U0bOFUcrvd1QtMGKVpMPmlF1DtWL6VH1VXl_vB5n84g=w640-h424-s-no?authuser=0"
alt="computer of a developer with codes" width="80%"/>
<figcaption id="img-caption">A computer with some code to represent the daily as a developer
</figcaption>
</figure>
<div id="tribute-info">
<h2>HTML INFORMATION</h2>
<ul>
<li>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.</li>
<li>HTML describes the structure of a web page semantically and originally included cues for its appearance.</li>
<li>It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</li>
<li>With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page.</li>
<li>A form of HTML, known as HTML5, is used to display video and audio, primarily using the 'canvas' element, together with JavaScript.</li>
<li>In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system.</li>
<li>The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Tim Berners-Lee in late 1991. It describes 18 elements comprising the initial, relatively simple design of HTML. </li>
</ul>
<h2>CSS INFORMATION</h2>
<ul>
<li>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).</li>
<li>CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts.</li>
<li>The separation provide more flexibility and control in the specification of presentation characteristics.</li>
<li>Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods. </li>
<li>The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element.</li>
<li>The CSS specifications are maintained by the World Wide Web Consortium (W3C).</li>
<li>Internet media type (MIME type) <b>text/css</b> is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.</li>
</ul>
</div>
<div class="endpage"><section class="p"><p>If you want to know more about HTML and CSS, you can acess the links bellow:
<a id="tribute-link" href="https://en.wikipedia.org/wiki/HTML" target="_blank">Wikipedia HTML</a> - to HTML information and <a id="tribute-link2" href="https://en.wikipedia.org/wiki/CSS" target="_blank">Wikipedia CSS</a> - to CSS information.</p>
<p>Good studies!</p>
</section></div>
</main>
</body>
</html>
<html lan="en">
<head>
<meta charset="UTF-8"/>
<meta content="viewport"/>
<meta name="description" content="freeCodeCamp - test Nivia Andrade - build a tribute page"/>
<title>Nivia Andrade Evaluation</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main id="main">
<h1 class="titlep" id="title">HTML AND CSS TEST</h1>
<p class="italic">Made by Nivia Andrade - Aspirant to backend developer</p>
<figure id="img-div">
<img id="image" src="https://lh3.googleusercontent.com/pw/AJFCJaXKL6yNmHWtivpyg3umW_NJf2IiaxKB86ZJgNSXcaShZ641v6P8a5Lj70uRFzwPP6O5jljDW3MdlQSH8OflzAj8wjhOmjESqP9-fhQqDeMfg79U0bOFUcrvd1QtMGKVpMPmlF1DtWL6VH1VXl_vB5n84g=w640-h424-s-no?authuser=0"
alt="computer of a developer with codes" width="80%"/>
<figcaption id="img-caption">A computer with some code to represent the daily as a developer
</figcaption>
</figure>
<div id="tribute-info">
<h2>HTML INFORMATION</h2>
<ul>
<li>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.</li>
<li>HTML describes the structure of a web page semantically and originally included cues for its appearance.</li>
<li>It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</li>
<li>With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page.</li>
<li>A form of HTML, known as HTML5, is used to display video and audio, primarily using the 'canvas' element, together with JavaScript.</li>
<li>In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system.</li>
<li>The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Tim Berners-Lee in late 1991. It describes 18 elements comprising the initial, relatively simple design of HTML. </li>
</ul>
<h2>CSS INFORMATION</h2>
<ul>
<li>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).</li>
<li>CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts.</li>
<li>The separation provide more flexibility and control in the specification of presentation characteristics.</li>
<li>Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods. </li>
<li>The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element.</li>
<li>The CSS specifications are maintained by the World Wide Web Consortium (W3C).</li>
<li>Internet media type (MIME type) <b>text/css</b> is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.</li>
</ul>
</div>
<div class="endpage"><section class="p"><p>If you want to know more about HTML and CSS, you can acess the links bellow:
<a id="tribute-link" href="https://en.wikipedia.org/wiki/HTML" target="_blank">Wikipedia HTML</a> - to HTML information and <a id="tribute-link2" href="https://en.wikipedia.org/wiki/CSS" target="_blank">Wikipedia CSS</a> - to CSS information.</p>
<p>Good studies!</p>
</section></div>
</main>
</body>
</html>
CSS
.titlep{
text-align: center;
color: #24445b;
margin-bottom: 0;
}
.italic {
text-align: center;
font-style: italic;
margin-top: 0;
}
body{
font-family: Agency FB, sans-serif;
text-align: center;
display:block;
}
main {
background-color: #c1d0db;
line-height: 1.5;
text-align: center;
}
figure {
background-color: #ffffff;
justify-content: center;
}
img {
padding-top: 1.5rem;
max-width: 100%;
display:block;
margin: auto;
}
figcaption{
padding-bottom: 1rem;
font-size: 15px;
color: #5b5b5b;
margin-bottom: 50px;
}
h2 {
display: block;
text-align: left;
color:#24445b;
margin: 1rem 5px 1rem 5px;
}
ul {
text-align: left;
margin-bottom: 2rem;
}
.endpage {
text-align: left;
background-color: #e6e6e6;
margin: 0;
border: none;
}
.p {
margin: 1rem;
}
E essa é a imagem do resultado:
E é isso, ainda está tudo muito básico - eu sei - mas fico feliz de cada dia poder evoluir mais. Meu objetivo principal como já dito no post anterior é ser uma desenvolvedora backend, mas mesmo assim quero chegar em um nível avançado de html/css e javascript, para poder construir o meu próprio "site portfólio". Avançando cada dia mais e o importante é nunca parar!
Até uma próxima
Comentários
Enviar um comentário