Poprzednie zadanie
Wprowadzenie do HTML i CSS7/13
Wróć do listy zadań
  1. 1. Idziemy!
  2. 2. CSS w akcji
  3. 3. Konsolidacja
  4. 4. Podstawy HTML
  5. 5. Pojedyncze znaczniki HTML
  6. 6. Atrybuty znaczników HTML
  7. 7. Szukanie błędów w HTML
  8. 8. Podstawy CSS
  9. 9. Inne sposoby łączenia CSS
  10. 10. Selektory CSS
  11. 11. Klasy w CSS
  12. 12. Właściwości i wartości CSS
  13. 13. Szukanie błędów w CSS
Następne zadanie
  • Kursy
  • Rejestracja
  • Zaloguj się

Caricamento...
In pochi secondi sarà pronto.

  • Teoria
  • Teoria

Szukanie błędów w HTML

Zapoznajmy się z kilkoma typowymi błędami, aby uniknąć ich popełniania w przyszłości.

HTML pozwala na zagnieżdżanie znaczników wewnątrz siebie, a jednym z najczęstszych błędów jest na przykład nieprawidłowe zagnieżdżanie:

<p>Tekst <strong>jest</p> pogrubiony</strong>

W tym przykładzie znacznik <p> zamyka się przed znacznikiem <strong>, co stanowi błąd.

Inny rodzaj błędów wynika z niefortunnych literówek i nieuwagi, gdy zapomina się o spacjach między atrybutami znaczników lub błędnie wpisuje ich nazwy.

Instruktor Cupcake postanowił więc zaktualizować swoje CV późno w nocy. Chciał uczynić je bardziej zwięzłym, pobawić się układem. Ale jego nieuwaga zawiodła go. Można jednak ćwiczyć znajdowanie i naprawianie błędów.

Jeśli się zgubisz, na dole znajduje się wskazówka. Tylko nie patrz na nią od razu!

1. Zwróć uwagę na kolejność zamykania tagów.

2. Czy jest wystarczająco dużo miejsc?

3. Sprawdź poprawność pisowni atrybutów. Nie ma ich tam zbyt wiele.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <title>Szukanie błędów w HTML</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Instruktor Cupcake [v.2]</h1> <!-- Pierwszy błąd został utracony w tym bloku --> <div class="error1"> <p> <em>W przyszłych kursach będziesz często wspierany w nauce subtelności HTML i CSS</p> przez instruktora Cupcake.</em> </div> <!-- Jest tu ukryty drugi błąd --> <div class="error2"> <imgsrc="keks-macho.jpg" class="photocard"> </div> <!-- A oto trzecia z nich --> <div class="error3"> <blockquote clas="nice-cite"> <p>Cześć, nazywam się Cupcake i jestem twoim przyszłym instruktorem. Jestem twórcą stron internetowych.</p> <p>Do zobaczenia w przyszłych kursach!</p> </blockquote> </div> </body> </html>
CSS
body { font-family: "Georgia", serif; } .photocard { display: block; width: 300px; margin: 20px auto; box-shadow: 5px 5px 0 #e7471e; } .nice-cite { margin: 1.5em 0; padding: 0.5em 25px; line-height: 1.5; background-color: #f5f5f5; border-left: 5px solid #e7471e; }

Il codice è cambiato, fai clic su "Aggiorna" o attiva l'esecuzione automatica.

Sei passato a un'altra pagina

Fare clic all'interno del mini-browser per evidenziare questa finestra.

100%
ObiettiviFatto
0

    Pomóż Cupcake naprawić błędy w kodzie HTML jego nowego CV:

    1. Pierwszy błąd z dodatkową pustą linią,
    2. drugi błąd z brakującym obrazkiem,
    3. trzeci błąd z brakującym projektem cytatu.

    © 2023-2024, bobrkode.com