Belajar Praktik HTML dan CSS
Mengubah warna serta membuat section navigasi bar pada header dengan code berikut:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>The Basic Language of the Web: HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<header>
<div class="wrapper">
<div class="logo"><a href=" ">📘 The Code Magazine</a></div>
<div class="menu">
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Challenges</a></li>
<li><a href="#">Flexbox</a></li>
<li><a href="#">CSS Grid</a></li>
</ul>
</div>
</nav>
<article>
<div class="wrapper">
<section id="home">
<br/>
<div class="kolom">
<h2>The Basic Language of the Web: HTML</h2>
<img
src="img/laura-jones.jpg"
alt="Headshot of Laura Jones"
height="50"
width="50"
/>
<p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
<br/>
<img
src="img/post-img.jpg"
alt="HTML code on a screen"
width="700"
height="300"
/>
<div class="kolam">
<p>
All modern websites and web applications are built using three
<em>fundamental</em>
technologies: HTML, CSS and JavaScript. These are the languages of the
web.
</p>
<p>
In this post, let's focus on HTML. We will learn what HTML is all about,
and why you too should learn it.
</p>
<h3>What is HTML?</h3>
<p>
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
language that web developers use to structure and describe the content
of a webpage (not a programming language).
</p>
<p>
HTML consists of elements that describe different types of content:
paragraphs, links, headings, images, video, etc. Web browsers understand
HTML and render HTML code as websites.
</p>
<p>In HTML, each element is made up of 3 parts:</p>
<ol>
<li>The opening tag</li>
<li>The closing tag</li>
<li>The actual element</li>
</ol>
<p>
You can learn more at
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
target="_blank"
>MDN Web Docs</a
>.
</p>
<h3>Why should you learn HTML?</h3>
<p>
There are countless reasons for learning the fundamental language of the
web. Here are 5 of them:
</p>
<ul>
<li>To be able to use the fundamental web dev language</li>
<li>
To hand-craft beautiful websites instead of relying on tools like
Worpress or Wix
</li>
<li>To build web applications</li>
<li>To impress friends</li>
<li>To have fun 😃</li>
</ul>
<p>Hopefully you learned something new here. See you next time!</p>
</div>
</section>
</div>
</article>
</header>
</div>
</body>
</html>
Style.css
* {
text-decoration: none;
margin: 0px;
padding: 0px;
}
.wrapper {
width: 1600px;
margin: auto;
position: relative;
}
.logo {
font-size: 40px;
font-weight: 40px;
float: left;
font-family: 'Courier New', Courier, monospace;
color: rgb(255, 255, 255);
}
.menu {
float: right;
}
nav {
width: 100%;
margin: auto;
display: flex;
line-height: 80px;
position: sticky;
position: -webkit-sticky;
top: 0;
background-color: rgb(139, 176, 233);
backface-visibility:hidden;
}
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a{
color: rgb(9, 16, 73);
font-weight: bold;
text-align: center;
padding: 0px 16px 0px 16px;
text-decoration: none;
}
nav ul li a:hover{
text-decoration: underline;
}
section{
margin: left;
display:contents;
margin-bottom: 50px;
}
h2{
font-size: 30px;
color: rgb(179, 18, 18);
}
section {
margin: auto;
display: flex;
margin-bottom: 50px;
}
.kolam {
font-size: 20px;
font-weight: bold;
font-family: comic 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: black;
}
h2{
font-family: comic 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: 800;
font-size: 45px;
margin-bottom: 20px;
color: darkcyan;
line-height: 50px;
}
Hasil :
Komentar
Posting Komentar