• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Przesyłanie strony html przez e-maila, niezałączająca się grafika na stronie.

VPS Starter Arubacloud
+1 głos
179 wizyt
pytanie zadane 9 kwietnia 2021 w Grafika i multimedia przez Arek123 Nowicjusz (160 p.)
Cześć, przy wysyłaniu strony html (edytor Notepad++) przez e-maila, poprzez załącznik, gdy wybieram ten plik ukazuje się informacja "Niektóre obrazy zostały zablokowane, aby zapobiec zidentyfikowaniu tego komputera przez nadawcę. Kliknij tutaj, aby wyświetlić obrazy." Niestety gdy klikam w ten tekst lub okienko "x" pod nim, nic się nie dzieje. Po wysłaniu i otworzeniu tego załącznika na drugim emailu, strona się otwiera, ale widać tylko tekst i tabelę, a nie widać obrazu (zdjęcie wieży eiffla po prawej), zamiast tego jest chyba ten "x", o którym wspomniałem. Proszę o odpowiedź, jeżeli ktoś wie jak ten problem rozwiązać.
komentarz 10 kwietnia 2021 przez VBService Ekspert (251,170 p.)

Działa po rozpakowaniu.  smiley

2 odpowiedzi

0 głosów
odpowiedź 9 kwietnia 2021 przez VBService Ekspert (251,170 p.)
edycja 9 kwietnia 2021 przez VBService

Umieść stronę wraz ze wszystkim plikami w jednym folderze i spakuj ją. Wysyłasz wtedy jedną "paczkę" jako załącznik. smiley

pytanie zadane 9 kwietnia 2021 w Grafika i multimedia przez Arek123 Nowicjusz (160 p.)
zamknięte 9 kwietnia 2021 przez Arkadiusz Waluk
Ciągle nierozwiązany problem
0 głosów
odpowiedź 9 kwietnia 2021 przez VBService Ekspert (251,170 p.)
edycja 9 kwietnia 2021 przez VBService

 

Dla przykładowego "ułożenia" plików:

w pliku:

stolice_europy_ulepszone.htm

<img src="images/ateny.jpg" alt="ateny">

 

Prosty przykład (propozycja)  wink

stolice_europy_ulepszone.htm

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Praca 2 - stolice Europy</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="grid-container">
        <div class="capitals-europe-1">
            <img src="images/ateny.jpg" alt="ateny">
            <div class="img-title">Ateny</div>
        </div>
        <div class="capitals-europe-2">
            <img src="images/berlin.jpg">
            <div class="img-title">Berlin</div>
        </div>
        <div class="capitals-europe-3">
            <img src="images/madryt.jpg">
            <div class="img-title">Madryt</div>
        </div>
        <div class="capitals-europe-4">
            <img src="images/paryz.jpg">
            <div class="img-title">Paryż</div>
        </div>
        <div class="capitals-europe-5">
            <img src="images/praga.jpg">
            <div class="img-title">Praga</div>
        </div>
        <div class="capitals-europe-6">
            <img src="images/warszawa.jpg">
            <div class="img-title">Warszawa</div>
        </div>
    </div>
</body>
</html>

style.css

* {
  box-sizing: border-box;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 3fr 3fr;
    gap: 1em;
    grid-template-areas:
      "capitals-europe-1 capitals-europe-2 capitals-europe-3"
      "capitals-europe-4 capitals-europe-5 capitals-europe-6";

    width: 80vw;
    margin: 0 auto;
}

.capitals-europe-1 { grid-area: capitals-europe-1; }
.capitals-europe-2 { grid-area: capitals-europe-2; }
.capitals-europe-3 { grid-area: capitals-europe-3; }
.capitals-europe-4 { grid-area: capitals-europe-4; }
.capitals-europe-5 { grid-area: capitals-europe-5; }
.capitals-europe-6 { grid-area: capitals-europe-6; }

.grid-container div[class^="capitals-europe-"] {
    border-radius: 1em;
    background-color: black;
    box-shadow: 4px 4px 8px gray;
    transition: all 0.35s;
}
.grid-container div[class^="capitals-europe-"]:hover {
    transform: scale(1.02);
}
.grid-container div[class^="capitals-europe-"] img {
    border-radius: 1em;
    width: 100%;
    height: 100%;
}
.grid-container div[class^="capitals-europe-"] .img-title {
    position: relative;
    bottom: 3.45em;
    color: white;
    background-color: rgba(0,0,0,0.6);
    text-align: center;
    font: 1.1em/1.6em monospace;
    padding: 0.25em;
    overflow: hidden;
    border-top: 2px solid rgba(128,128,128,0.65);
    border-bottom: 2px solid rgba(128,128,128,0.65);
}

 

W jaki sposób wstawić obrazek (grafikę, zdjęcie) na stronę WWW? ]
HTML File Paths ]

 

Podobne pytania

0 głosów
1 odpowiedź 209 wizyt
pytanie zadane 5 stycznia 2019 w Grafika i multimedia przez HackerProgramer Nowicjusz (170 p.)
+2 głosów
1 odpowiedź 508 wizyt
0 głosów
1 odpowiedź 127 wizyt
pytanie zadane 8 grudnia 2020 w Grafika i multimedia przez DreaM Użytkownik (840 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...