Bilder, die nicht in HTML erscheinen

Ich bin ein komplettes Anfänger, wenn es um Webdesign geht. Ich habe gerade angefangen, ein paar Grundlagen zu lernen. Im Moment versuche ich ein Bild zum Hauptbanner meiner Webseite zu machen. Ich habe viele Tutorials besucht und jeder sagt, den Code <img src="images/wood.jpg" height="168" width="100"> zu verwenden, wenn Sie eine Datei im Verzeichnis der Webseite speziell für Bilder haben und Höhen- und Breitenangaben verwenden, um sie innerhalb der Grenzen des Banners zu platzieren. Nachdem ich das gesagt habe, aktualisiere ich die Seite und es wird kein Bild angezeigt. Außerdem ein Bonuspunkt für Informationen darüber, wie die Wörter über dem Bild eingeblendet werden.Bilder, die nicht in HTML erscheinen

   <!DOCTYPE HTML> 
      <!--- COMMENT---> 


      <html long="en"> 


      <head> 

      <meta charset="UTF -8"/> 
      <Title>Ken's Woodworking Emporium</title> 
      <link rel="stylesheet" type="text/css" href="style.css"> 
      <!--[if lt IE 9]> 
      <script> 
       document.createElement("article"); 
       document.createElement("aside"); 
       document.createElement("footer"); 
       document.createElement("header"); 
       document.createElement("main"); 
       document.createElement("nav"); 
       document.createElement("section"); 
       </script> 
       <![endif]--> 

      <meta name="description" contents= "Learn everything you want to know 
      about wood working."/> 

      <meta name="keyword" content=html5 canvas,html5,toutorial,html5 doctype, 
      video, learn/> 

      <meta name="robots" Content="index, follow"/> 

      <base href="http://localhost/html/"/> 

      <link rel= stylesheet" href="styles.css"/> 


      </head> 

      <body> 
       <header class="banner"> 
        <h1>Woodworking</h1> 
        <img src="images/wood.jpg"> 
        <p> Local woodworkers</p> 
       </header> 

       <nav> 
        <ul> 
         <li><a href="index.html">Home</a></li> 
         <li><a href="archive.html">Archive</a></li> 
         <li><a href="about.html">About</a></li> 
        </ul> 
       </nav> 

       <main> 
        <section> 
         <h2>Carpenty</h2> 
         <article> 
          <header> 
           <h3>Details on carpentry</h3> 
           <p>(Author, date)</p> 
          </header> 
          <p>THis is the story text.This is the story text.</p> 
          <p>This is the story text.This is the story text.</p> 
         </article> 
        </section> 

        <section> 
         <article> 
          <header> 
           <h3>Custom carpentry.</h3> 
           <p>(Author, date)</p> 
          </header> 
          <p>THis is the story text.This is the story text.</p> 
          <p>This is the story text.This is the story text.</p> 
         </article> 
        </section> 

        <section> 
        <h2>Restoration</h2> 
         <article> 
          <header> 
           <h3>Old to new</h3> 
           <p>(Author, date)</p> 
          </header> 
          <p>THis is the story text.This is the story text.</p> 
          <p>This is the story text.This is the story text.</p> 
         </article> 
        </section> 

        <section> 
         <article> 
          <header> 
           <h3>refinishing.</h3> 
           <p>(Author, date)</p> 
          </header> 
          <p>THis is the story text.This is the story text.</p> 
          <p>This is the story text.This is the story text.</p> 
         </article> 
        </section> 
       </main> 

       <aside> 
        <h2>Have a request?</h2> 
        <p>If you have a custom order request feel free to contact us at 918-555-5555, or [email protected]</p> 
       </aside> 

       <footer> 
        <p>Footer information</p> 
       </footer> 

      </body> 



      </html>

Quelle

2017-04-11 scubasteve7

Dies wird sich auf eine direkte namens "images" im selben Verzeichnis wie diese HTML-Datei, dann in "Bilder", eine Datei namens "wood.jpg" verlassen. Es ist auch Groß-und Kleinschreibung. Haben Sie Fehler in der Browserkonsole? Das sollte Ihnen sagen, wenn Sie den falschen Pfad oder Dateinamen für das Bild referenziert haben. –

-1

Anstatt einen img-Tag, wenn Sie das Banner Bild als Hintergrund für ein anderes Element möchten, können Sie die Hintergrund-Bild CSS-Eigenschaft versuchen. Da ich nichts über dein Stylesheet wusste, habe ich es so einfach wie möglich gemacht.

ich Ihnen ein kleines Beispiel @https://jsfiddle.net/wck2hyxt/1/

HTML:

 <body> 
      <header class="banner"> 
       <h1>Woodworking</h1> 
       <p> Local woodworkers</p> 
      </header> 
     </body>

CSS:

header.banner { 
    background-image:url("https://upload.wikimedia.org/wikipedia/commons/b/b3/Campania_banner_View_from_Capri.jpg"); 
    background-size: cover; 
    height: 168px; 
    width: 100%; 
    padding: 10px; 
}

Hinweis: Ich habe ein externes Bild für das Banner. Du könntest diese URL als "/ path/to/image" ändern. Ich glaube auch, Ihre Absicht war, die Breite 100%, nicht nur 100 zu machen.

Quelle

2017-04-11 22:53:35 suBDavis

für Schaltflächen oder etwas mit Overlay können Sie Hintergrundbild in der CSS wie erwähnt verwenden. overwise Sie einen Wrapper mit dem Attribut benötigen position: relative, die das Bild und ein weiteres div mit folgenden als Overlay-Schicht enthält:

position: absolute; 
z-index: 2; // you can use higher number if needed

und gelten absolute Position relativ zu dem Behälter mit den Attributen top, right, bottom und/oder left, sollte für die rechte obere Ecke mit 10px padding also wie folgt aussehen:

in html:

<div class="img-wrap"> 
    <img src="wood.jpg" alt="wood"> 
    <div class="img-overlay">overlay text</div> 
</div>

in CSS:

.img-wrap { 
    position:relative; 
} 
.img-wrap .img-overlay { 
    position: absolute; 
    z-index:2; 
    top: 10px; 
    right: 10px; 
}

wenn es nur innere Seiten, die es vielleicht, weil das Bild Pfad relativ zum letzten Ordner ist, eine bessere Nutzung absolute Pfade, wenn oder relativ zum Stamm der Website Ordner zeigen Bilder nicht. so was;

<img src="/images/wood.jpg" alt="wood image">

oder

<img src="http://www.yourwebsite.com/images/wood.jpg" alt="wood image">

oder wenn Ihr mit Wordpress könnte es ungefähr wie eine dieser aussehen

<img src="http://www.yourwebsite.com/wp-content/uploads/**/****/images/wood.jpg" alt="wood image"> 
<img src="http://www.yourwebsite.com/wp-content/images/wood.jpg" alt="wood image"> 
<img src="http://www.yourwebsite.com/wp-content/themes/your-theme/images/wood.jpg" alt="wood image">

usw.

PS für eine bessere Semantik immer alt-Attribut verwenden, um mit Bilder.

Quelle

2017-04-12 00:36:25

auf Ihrem Webserver die public_html sollte wie folgt aussehen:

Index.html
Bilder

Die Bilder oben Ordner sollte die Datei 'wood.jpg' haben innerhalb dieser Gruppe.

Klicken Sie auf Ihrem lokalen PC mit der rechten Maustaste auf die Datei wood.jpg und gehen Sie zu den Eigenschaften. Der Pfad unterscheidet zwischen Groß- und Kleinschreibung. Wenn die Erweiterung in .jpg endet dann sollten Sie den Code wie folgt aussehen:

<img src="images/wood.JPG" height="168" width="100">

Wenn erfrischend, halten ctrl:

<img src="images/wood.jpg" height="168" width="100">

Wenn die Erweiterung in .JPG endet dann Ihr Code sollte wie folgt aussehen + F5, um deinen Cache zu löschen und deine Änderungen zu sehen.

Wenn Sie Wörter überlagern müssen, müssen Sie Positionselemente in Ihrem CSS hinzufügen. W3 bietet ein großartiges Tutorial hier: https://www.w3schools.com/css/tryit.asp?filename=trycss_zindex

Quelle

2017-04-12 00:39:37 Xerath

Bilder, die nicht in HTML erscheinen

Antwort

Verwandte Themen