Aby stworzyć wizytówkę w HTML, czyli prostą, lecz estetyczną stronę prezentującą osobę lub firmę, należy skorzystać z podstawowych znaczników HTML oraz dodać style CSS. Taka wizytówka może służyć do przedstawienia danych kontaktowych, krótkiego bio, logo oraz odnośników do social media czy mapy z lokalizacją.
Krok po kroku – tworzenie wizytówki w HTML
Struktura pliku HTML
Każda wizytówka powinna zawierać następujące elementy:
- Nagłówek – imię i nazwisko lub nazwa firmy;
- Zdjęcie profilowe lub logo;
- Podstawowe dane kontaktowe – numer telefonu, e-mail;
- Opis lub bio;
- Linki do social media;
- Opcjonalnie: mapa Google, sekcja usług, odnośnik do CV.
Oto przykładowy kod HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wizytówka Online - Jan Kowalski</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="business-card">
<img class="avatar" src="avatar.jpg" alt="Zdjęcie Jan Kowalski">
<h1>Jan Kowalski</h1>
<h2>Frontend Developer</h2>
<p><b>Telefon:</b> <a href="tel:+48123456789">+48 123 456 789</a></p>
<p><b>E-mail:</b> <a href="mailto:[email protected]">[email protected]</a></p>
<p>Specjalizuję się w nowoczesnych technologiach webowych, tworząc responsywne strony internetowe.</p>
<div class="social-links">
<a href="#" title="LinkedIn">LinkedIn</a>
<a href="#" title="GitHub">GitHub</a>
<a href="#" title="Instagram">Instagram</a>
</div>
<!-- Opcjonalnie: mapa -->
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!..."></iframe>
</div>
</div>
</body>
</html>
Podstawowe style CSS
Aby wizytówka wyglądała nowocześnie i czytelnie, warto dodać osobny plik CSS, np. style.css:
body { background: #f2f2f2; font-family: 'Segoe UI', Arial, sans-serif; } .business-card { max-width: 350px; margin: 40px auto; background: #fff; padding: 30px 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); text-align: center; } .avatar { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; margin-bottom: 15px; } h1 { font-size: 1.4em; margin: 0.2em 0; } h2 { font-size: 1em; font-weight: 400; color: #555; } .social-links a { display: inline-block; margin: 0 6px; color: #0073e6; text-decoration: none; font-weight: bold; } .social-links a:hover { text-decoration: underline; } .map { margin-top: 20px; } .map iframe { width: 100%; height: 150px; border: none; border-radius: 8px; } Przykładowe zastosowania wizytówki HTML
- Strona “O mnie” lub “Kontakt” – na firmowej witrynie;
- Mini portfolio – dla freelancera lub twórcy (możliwość dodania sekcji projektów, linku do CV);
- Karta kontaktowa firmy – z adresem, logo i odnośnikami do mapy Google oraz serwisów społecznościowych;
- Stopka – w korporacyjnej stronie internetowej z danymi teleadresowymi.
Rozszerzenia i modyfikacje
- Możesz wzbogacić wizytówkę o formularz kontaktowy (HTML + prosty JavaScript),
- umieścić sekcję z Twoimi umiejętnościami, dotychczasowymi realizacjami lub referencjami,
- dodać zdjęcia i opisy zespołu (jeśli wizytówka dotyczy firmy),
- zastosować animacje CSS, np. efekt najechania na zdjęcie lub linki społecznościowe.
Jak opublikować wizytówkę HTML
- Wizytówka w formacie HTML jest gotowa do publikacji na dowolnym serwerze.
- Pliki
index.htmlistyle.cssprzesyłasz na hosting lub do katalogu public_html. - Możesz testować ją lokalnie, otwierając plik
index.htmlw przeglądarce.
Podsumowanie
Wizytówka HTML to uniwersalna i prosta w wykonaniu forma prezentacji osoby lub firmy w internecie. Przy jej projektowaniu warto zadbać o przejrzystość, estetykę oraz umieszczenie wszystkich najważniejszych informacji kontaktowych. Projektowanie możesz dowolnie rozbudowywać, dostosowując styl i treść do swoich potrzeb.
