Aby stworzyć wizytówkę w HTML, należy połączyć strukturę HTML z odpowiednim stylem CSS. Wizytówka internetowa to niewielka strona prezentująca najważniejsze informacje o osobie lub firmie – imię i nazwisko, stanowisko, kontakt, logo lub zdjęcie oraz linki do mediów społecznościowych. Odpowiednio wykonana wizytówka wzmacnia wizerunek w sieci i pozwala na łatwy kontakt z właścicielem.
Struktura HTML wizytówki
Najpierw należy przygotować plik HTML, np. wizytowka.html. Poniżej znajduje się przykład rozbudowanej struktury wizytówki:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Wizytówka – Jan Kowalski</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="wizytowka.css">
</head>
<body>
<section class="card">
<img src="jan-kowalski.jpg" alt="Zdjęcie Jana Kowalskiego" class="avatar">
<h1>Jan Kowalski</h1>
<h2>Web Developer</h2>
<p class="desc">Specjalizuję się w nowoczesnych technologiach frontendowych. Realizuję projekty dla biznesu i osób prywatnych.</p>
<ul class="contact">
<li><strong>Telefon:</strong> <a href="tel:+48123123123">+48 123 123 123</a></li>
<li><strong>Email:</strong> <a href="mailto:[email protected]">[email protected]</a></li>
<li><strong>Adres:</strong> Warszawa, Polska</li>
</ul>
<ul class="social">
<li><a href="#">LinkedIn</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</section>
</body>
</html>
Stylowanie wizytówki w CSS
Aby wizytówka wyglądała profesjonalnie i estetycznie, warto zastosować niestandardowe style za pomocą pliku CSS (wizytowka.css):
body {
background: #f0f2f5;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.card {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 16px rgba(0,0,0,0.08);
padding: 32px;
width: 350px;
text-align: center;
transition: box-shadow .3s;
}
.card:hover {
box-shadow: 0 4px 32px rgba(0,0,0,0.20);
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 16px;
object-fit: cover;
}
h1 {
margin: 0 0 8px 0;
font-size: 2rem;
}
h2 {
margin: 0 0 16px 0;
font-weight: normal;
color: #0073e6;
}
.desc {
margin-bottom: 24px;
color: #444;
font-size: 1rem;
}
.contact, .social {
list-style: none;
padding: 0;
margin: 0 0 12px 0;
}
.contact li, .social li {
margin-bottom: 8px;
}
.social a {
color: #0073e6;
text-decoration: none;
padding: 6px 12px;
border-radius: 4px;
background: #f0f2f5;
margin: 0 2px;
transition: background .2s;
}
.social a:hover {
background: #e0e5eb;
}
Przykłady zastosowań wizytówki HTML
Wizytówka w HTML sprawdza się w wielu miejscach:
- Strona osobista – dla freelancerów, grafików, programistów, którzy chcą udostępnić podstawowe dane kontaktowe i linki do portfolio lub profili zawodowych;
- W firmach – jako część sekcji Kontakt lub w stopce strony firmowej – umożliwia szybkie skopiowanie danych lub kontakt mailowy/telefoniczny;
- Wydruki i PDF – HTML łatwo konwertuje się do PDF, więc wizytówkę można wydrukować lub wysłać w pliku;
- Newsletter lub podpis e-mail – wizytówka HTML, odpowiednio uproszczona, sprawdzi się jako podpis automatyczny w poczcie elektronicznej;
- Strony “o mnie” – w prosty sposób można dodać do bloga lub portfolio osobistą wizytówkę.
Rozszerzenia i dodatkowe funkcje
- Mapa Google – możesz dodać do wizytówki lokalizację firmy lub punktu kontaktowego przy pomocy iframe z Google Maps;
- Dynamiczne efekty – użycie animacji CSS (np. efekt hover) przy ikonach mediów społecznościowych;
- Formularz kontaktowy – prosty formularz pozwoli użytkownikowi wysłać wiadomość bezpośrednio z wizytówki;
- Responsywność – dzięki właściwościom CSS media queries wizytówka będzie dobrze wyglądać na urządzeniach mobilnych.
Wskazówki praktyczne
- Optymalizuj zdjęcia – dzięki temu strona ładuje się szybciej, a wizytówka wygląda estetycznie;
- Utrzymuj spójny styl z całą stroną lub identyfikacją wizualną;
- Używaj semantycznych znaczników HTML (np.
<section>,<ul>,<strong>) – aby ułatwić optymalizację pod kątem SEO oraz czytelność kodu.
Stworzenie wizytówki w HTML to proste, a jednocześnie bardzo praktyczne ćwiczenie. Niewielkim kosztem czasu możesz przygotować efektowną i funkcjonalną stronę prezentującą Ciebie lub Twoją firmę. Warto zadbać nie tylko o wygląd, ale także o intuicyjność oraz szybki, wygodny kontakt dla odwiedzających.
