Oto kilka przydatnych kodzików i kilka przydatnych linków. Pierwsze zadanie jest następujące: zrób stronę internetową, której kod rozumiesz w 100%. Zadanie drugie: opublikuj swoją stronę.
Prosty kodzik #1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mały plik z poprawną strukturą</title>
<meta name="keywords" content="struktura, html, poprawny">
<meta name="description" content="Ble ble ble ...">
<style type="text/css">
@media only screen and (min-width: 900px) {
#tresc {
width: 850px;
margin: 0 auto 0 auto;
}
}
</style>
</head>
<body>
<div id="tresc">
<h1>Nagłówek</h1>
<h2>Nagłówek 2 poziomu</h2>
<p>Lorem ipsum.</p>
</div>
</body>
</html>Przydatne adresy
- Podstawowy kurs HTML i CSS: how2html.pl
- Walidator HTML – sprawdza poprawność kodu: W3C validator
- Generator lorem ipsum
- Cierpliwy korepetytor: chatGPT
- Jak opublikować? – hosting
Prompt dla beginnera
Potrzebuję prostą stronę internetową w html i css. Niech kod będzie w jednym pliku. Strona ma być responsywna. Na dużym ekranie mają wyświetlać się symetryczne marginesy tak, by główny blok treści miał 1000px. Na górze strony ma być blok z informacjami o autorze. Później ma być kilkanaście linków do różnych serwisów internetowych wraz z krótkimi opisami. Każdy link ma zajmować oddzielny blok. Każdy blok ma być w innym pastelowym kolorze. Na dużym ekranie w jednym wierszu mają wyświetlać się trzy bloki. Na smartfonie bloki mają być pod sobą.
Prosty kodzik #2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sekcje w html 5</title>
<meta name="keywords" content="main, nav, aside, article">
<meta name="description" content="W HTML5 wprowadzono nowe elementy blokowe, które mają zastąpić element div tam, gdzie będzie to miało sens.">
<style type="text/css">
@media only screen and (min-width: 900px) {
#kontener {
width: 850px;
margin: 0 auto 0 auto;
}
main {
float: left;
width: 70%;
}
aside {
float: right;
width: 28%;
}
footer {
clear: both;
}
}
</style>
</head>
<body>
<div id="kontener">
<header>
<h1>Lorem ipsum story!</h1>
</header>
<div>
<main>
<article>
<h2>Dolor ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed enim sed erat imperdiet elementum. Praesent dapibus purus eget ullamcorper commodo. </p>
<p>Praesent vulputate, mi id auctor commodo, sapien augue rhoncus justo, non malesuada nibh diam nec dolor. </p>
</article>
<article>
<h2>Amet sit</h2>
<p>Nam id rutrum velit. Ut gravida tristique neque et pretium. Sed eget viverra orci. </p>
</article>
</main>
<aside>
<nav>
<h3>Menu</h3>
<ul>
<li><a href="#">Strona Główna</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</nav>
<section>
<h3>Reklamy</h3>
<p>Lorem ipsum dolor sit emet...</p>
</section>
<section>
<h3>Social media</h3>
<p>Lorem ipsum dolor sit emet etc...</p>
</section>
</aside>
</div>
<footer>
<div> pk.sth © 2022</div>
<div>Strona o niczym by PK przygotowane specjalnie dla 1pt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
</footer>
</div>
</body>
</html>